프로젝트/인스타그램 클론코딩 (5) 썸네일형 리스트형 [인스타그램 클론코딩] 채팅기능 추가 expo에서 제공하는 Push Notification 기능과 Context를 사용하여 1:1 채팅 기능을 추가해 봤습니다. firebase도 큰 차이는 없는 것 같습니다. 나중에 react-native로 작업할 때는 firebase를 사용해 봐야 겠습니다. 실시간 채팅 기능을 추가하면서 작성한 대략적인 설계도입니다. 데이터 흐름 UI 구조 데이터 흐름 채팅 기능을 추가하기 위해서 데이터베이스에 Room, Message 테이블을 추가했습니다. Room에는 participants(참가자), subscribers(구독자), messages 스키마가 정의되어 있는데요. A가 B에게 처음 메세지를 전송하면 서버에서 Room을 생성하면서, participants와 subscribers 모두에 A와 B를 연결합니다... [인스타그램 클론코딩] 관련 포스트 목록 ★ 채팅기능 추가: [인스타그램 클론코딩] 채팅기능 추가 ★ 개요 [Lambda + Prisma2+리액트] 인스타그램 클론 코딩 소스코드 웹 (리액트) 앱 (리액트 네이티브) 백앤드 Cognito Pre-SignUp 이벤트 핸들러 인증 [인스타그램 클론코딩] 회원가입 구조 [인스타그램 클론코딩] API 인증 구조 AWS Amplify란? Amplify 초기화 Cognito 소셜 로그인 추가 (이론) Cognito 소셜 로그인 추가 (실전) - 구글 Cognito Pre-SignUp 트리거 서버리스 프레임워크란? 서버리스 프레임워크 초기화 및 AWS에 연결 [인스타그램 클론코딩] Cognito Pre-SignUp 람다 함수 AWS Lambda 핸들러 구조 리액트 [인스타그램 클론코딩] 웹 로그인 구조 [인.. [인스타그램 클론코딩] API 인증 구조 사용자 데이터를 처리할 백엔드(Back-End)는 누구나 사용할 수 있는 API와 로그인한 사용자가 사용할 수 있는 API를 구분하여 처리할 수 있어야 합니다. 사용자가 AWS Cognito에 로그인하면, Cognito는 ID, Access, Refresh 토큰을 발급해 줍니다. ID 토큰은 Cognito에 가입한 사용자 정보를 암호화한 문자열이고, Access 토큰은 해당 Cognito 풀에 가입한 사용자의 권한을 암호화한 문자열입니다. 마지막으로 Refresh 토큰은 ID 토큰과 Access 토큰을 갱신하기 위해 사용합니다. 갱신은 AWS Amplify가 Refresh 토큰을 사용하여 자동으로 관리해 주기 때문에 신경쓰지 않아도 됩니다. 그리고 클라이언트(앱, 웹)에서 로그인한 사용자 정보를 사용하여.. [인스타그램 클론코딩] 회원가입 구조 사용자가 웹 또는 앱에서 회원가입을 하면서 성(First Name), 이름(Last Name), 이메일 등을 입력하면, 이 정보를 Amplify 모듈을 사용해 AWS Cognito에 보냅니다. Cognito에는 전달받은 사용자 정보를 승인하기 전에 개발자가 그 정보를 가로채서 수정할 수 있도록 Pre-SignUp 트리거를 제공합니다. 이 트리거에 전달받은 사용자 정보를 데이터베이스의 User 스키마에 저장하는 AWS Lambda 함수를 등록해 줍니다. Cognito를 통해 가입하면 사용자 정보가 Cognito에 저장되는데, 사용자 정보를 왜 다른 데이터베이스에 다시 저장하나요? 다른 데이터와의 연동때문입니다. 사용자로 부터 데이터만 생성되는 경우는 굳이 사용자 정보를 데이터베이스에 다시 복제할 필요가 없.. [Lambda + Prisma2+리액트] 인스타그램 클론 코딩 [인스타그램 클론코딩] 제작 관련 포스트 목록 ★ 채팅기능 추가: [인스타그램 클론코딩] 채팅기능 추가 ★ 노마드 코더님의 인스타그램 클론코딩 강의에 기반하고 있습니다. 자바스크립트와 JSX 코드에 익숙하신 분이나 위 강의를 수강하신 분에게 도움이 될 것 같습니다. iOS 작동 영상 [인스타그램 클론코딩] iOS 작동 영상 웹 작동 영상 [인스타그램 클론코딩] 웹 작동 영상 노마드 코더님의 강의와 다른점은 무엇인가요? 1. Prisma1에서 Prisma2로 변경 강의는 백앤드에서 Prisma1을 사용했습니다. 저는 Prisma2를 사용했는데요. 다음과 같은 Prisma1의 문제점 때문이었습니다. GraphQL 서버와 Prisma 서버를 별도로 구현해야 합니다. 자바 환경에서 동작하기 때문에 메모리 문제도.. 이전 1 다음
