리액트 네이티브 (18) 썸네일형 리스트형 [인스타그램 클론코딩] 댓글 UI 구현2 - 스택 네비게이션을 이용한 댓글창 스크롤뷰 안에서 댓글 달기.. 버튼을 클릭하면 화면 밑에서 키보드와 함께 댓글 입력창이 나오도록 구성해 보겠습니다. [인스타그램 클론코딩] 앱 로그인 구조 포스트에서 로그인에 성공하면 DummyNavigation으로 이동한다고 했었습니다. DummyNavigation은 스택 네비게이션이면서 NavController 네비게이션의 스크린입니다. 그리고 다음과 같이 MainNavigation과 Comment 두 개의 스크린을 포함하고 있습니다. MainNavigation 안에서 다음 코드를 실행하면 Comment 스크린이 생성되면서 MainNavigation 스크린 위로 올라옵니다. 이때 파라미터로 me과 postId에 대한 정보도 함께 넘겨줍니다. const GoComment = () => { navigat.. [인스타그램 클론코딩] 댓글 UI 구현1 - 여러가지 대안들.. 그리고 문제점 댓글을 입력하기 위해 가장 기본적인 텍스트 입력기인 TextInput을 사용해 보기로 했습니다. TextInput은 Home 스크린에 있는 ScrollView 안에서 랜더링되는 다수의 Post 컴포넌트마다 포함되어 있습니다. Home.js 결과 및 문제점 iOS에서 키보드가 나타날 때 TextInput을 가립니다. 영상의 스크롤은 모두 직접한 것입니다. TextInput이 화면 상단에 있어서 키보드와 겹치지 않더라도 뭔가 어색합니다. 영상으로 확인할 수는 없지만 실제 ScrollView의 높이는 키보드 만큼 작아졌습니다. 그렇다고 ScrollView 내부 높이까지 작아지는 것은 아니고, 스크롤 좌표에도 영향이 없기 때문에, 키보드가 TextInput을 가립니다. 멀티라인이 지원되지 않습니다. 다음줄로 넘.. [인스타그램 클론코딩] 사진 업로드 구현2 - AWS S3에 비동기 업로드 (Promise 이용) 여담 처음엔 백앤드로 이미지를 전송한 다음 백앤드에서 다시 AWS S3에 저장하는 것이 비효율적이라고 느껴졌지만, S3의 접속 경로가 그대로 노출될 수도 있기 때문에 인증 기능이 포함된 백앤드를 경유하는 것이 맞다고 생각합니다. 아니면 제가 사용한 인증 방법은 AWS Cognito로 부터 인증 토큰을 받아오는 방식이기 때문에, S3 버킷을 Cognito에서 인증된 사용자만 접근하도록 설정한다면, 로컬 디바이스에서도 충분히 업로드할 수도 있을 것 같습니다. 예전에 AWS LED Button 프로젝트를 진행할 때 비슷한 작업을 해봤었는데, 다시 한 번 살펴봐야 겠습니다. 참조: [AWS LED Button] 어플리케이션 (1) : 시스템 흐름 전 S3에 그냥 업로드 했습니다. 실제 서비스에서는 수정되어야 할.. [인스타그램 클론코딩] 사진 업로드 구현1 - SelectablePhoto 그냥 react-native-image-picker 사용하는게 편합니다. 메인 화면에서 + 버튼을 터치했을 때 나타나는 사진 선택기(SelectPhoto.js) 화면입니다. 사진 선택기는 2개의 컴포넌트로 구성되어 있습니다. Image 가장 최근에 터치한 이미지가 표시됩니다. ScrollView 기기의 모든 사진을 읽어들여서 각각의 사진을 SelectablePhoto에 표시합니다. 직접 만들어 볼 SelectablePhoto의 요건은 다음과 같습니다. 선택(이미지), 미선택(회색 음영 + 체크 아이콘) 2가지 상태를 나타날 수 있어야 합니다. 선택되었을 때 실행할 핸들러와 선택이 해제되었을 때 실행할 핸들러를 부모 컴포넌트로 부터 입력받아야 합니다. 지금부터 SelectablePhoto 컴포넌트를 만들어.. [인스타그램 클론코딩] 앱에서 백엔드로 Cognito 토큰 전송 1. ApolloClient 객체 생성 endpoint는 서버리스 GraphQL 백앤드 구축 포스트에서 배포할 때 얻은 API Gateway 주소를 입력해 주면 됩니다. Amplify에서 주기적으로 토큰을 업데이트하기 때문에 GraphQL API 요청을 할 때마다 Auth 객체로 부터 토큰을 가져와야 합니다. ApolloClient 생성자의 request 속성은 [인스타그램 클론코딩] 웹에서 백엔드로 Cognito 토큰 전송 포스트에서와 마찬가지로 GraphQL API를 요청하기 전에 항상 거쳐가는 핸들러입니다. reqeust로 전달되는 operation 객체를 사용해서 파라미터를 변경할 수 있습니다. operation.setContext 메소드를 사용해서 토큰을 request.headers.author.. [인스타그램 클론코딩] 앱 로그인 구현 (구글 로그인 포함) 일반적인 로그인 Auth.signIn 메소드를 사용해서 Cognito에 토큰을 요청했을 때 인증코드 인증이 안 된 계정이라서 실패하면, Confirm 스크린으로 이동합니다. 로그인이 완료되면 App 컴포넌트의 Hub 객체가 수신해서 리랜더링을 수행합니다. 참조: [인스타그램 클론코딩] 앱 로그인 구조 구글 로그인 Auth.federatedSignIn 메소드가 실행되면, 외부 브라우저가 실행되면서 구글 계정을 선택하는 인증 페이지로 이동합니다. 계정을 선택하면 인증 페이지에서 앱으로 리디렉션시킵니다. 이것이 가능한 이유는 Cognito 소셜 로그인 추가 (실전) - 구글 포스트 > 4. Cognito 리디렉션 주소 설정에서 엑스포 앱(exp://)으로 리디렉션 주소를 설정했기 때문입니다. 저는 더 이상 구.. [인스타그램 클론코딩] 앱 로그아웃 구현 인스타그램 클론코딩 웹과 동일합니다. 참조: [인스타그램 클론코딩] 웹 로그아웃 구현 로그아웃 버튼을 클릭했을 때 다음 코드만 실행시키면 됩니다. Auth.signOut(); 위 코드가 실행되면 토큰을 포함한 Async Storage에 저장된 모든 로그인 정보까지 함께 삭제됩니다. 그리고 로그아웃 이벤트는 App 컴포넌트의 Hub 객체가 수신해서 isLoggedIn Hook을 false로 변경합니다. 그럼 App 컴포넌트부터 다시 랜더링됩니다. 참조: [인스타그램 클론코딩] 앱 로그인 구조 로그아웃 버튼 이벤트 핸들러 const logOut = async () => { await Auth.signOut(); } [인스타그램 클론코딩] 앱 회원가입 구현 [인스타그램 클론코딩] 앱 회원가입 구조 포스트 내용을 바탕으로 실제 회원가입을 구현해 보겠습니다. AuthNavigation.js AuthNavigation은 (App 컴포넌트가 마운트될 때 Async Storage에서 사용자 정보를 가져오지 못해서) App 컴포넌트의 isLoggedIn 상태가 false일 때 라우팅되는 네비게이션 컴포넌트입니다. 참조: [인스타그램 클론코딩] 앱 로그인 구조 Login → Signup → Confirm 스크린 순서로 회원가입 및 사용자 인증까지 마무리되며, 회원가입은 했는데 인증을 안하고 나중에 로그인한 경우 Login 스크린에서 바로 Confirm 스크린으로 이동합니다. Signup.js 회원가입과 관련 없는 코드 및 오류처리 코드는 제외했습니다. 사용자로 부터 이.. 이전 1 2 3 다음
