본문 바로가기

전체 글

 (154)
[인스타그램 클론코딩] 앱 로그아웃 구현 인스타그램 클론코딩 웹과 동일합니다. 참조: [인스타그램 클론코딩] 웹 로그아웃 구현 로그아웃 버튼을 클릭했을 때 다음 코드만 실행시키면 됩니다. 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 회원가입과 관련 없는 코드 및 오류처리 코드는 제외했습니다. 사용자로 부터 이..
[인스타그램 클론코딩] 앱 회원가입 구조 인스타그램 클론코딩 웹과 달리 앱은 로그인, 회원가입, 인증코드 확인 화면이 각각 스택 네비게이션의 스크린으로 구성되어 있습니다. 그래서 인스타그램 클론코딩 웹보다는 코드 보기가 더 편합니다. 키보드가 나타날 때 컴포넌트들을 위로 올리는 방법은 있지만 그것이 중요한 것은 아니기 때문에 구현하지는 않았습니다. 로그인, 회원가입, 인증코드 확인 화면을 각각의 스크린으로 분리한 이유는 무엇인가요? 웹처럼 한 개의 화면에서 플래그(action)를 사용해 3종류의 화면을 표시하는 경우, 안드로이드 앱에서는 뒤로가기 버튼 한 번에 앱이 종료될 수 있기 때문입니다. 예를 들어, 회원 가입중에 소셜 로그인으로 전환하기 위해 뒤로가기 버튼을 누른 경우, 앱이 종료됩니다. 이 경우엔 회원가입 화면에서 뒤로가기 버튼을 누르..
[인스타그램 클론코딩] 웹 구글 로그인 구현 Cognito 소셜 로그인 추가 (이론), Cognito 소셜 로그인 추가 (실전) - 구글 포스트에서 사전 작업이 많았지만, 사용하는 것은 정말 간단합니다. 다름 코드 한 줄이면 끝납니다. Auth.federatedSignIn({provider: 'Google'}) // 구글 로그인 Auth.federatedSignIn({provider: 'Facebook'}) // 페이스북 로그인 위 코드를 실행하면 자동으로 브라우저에 저장된 소셜 로그인 정보로 Cognito에 회원가입 및 로그인을 하고, 토큰을 받아 옵니다. 참조: Cognito Pre-SignUp 트리거 현재 탭에서 Cognito 인증 사이트로 이동후 설정했던 리디렉션 사이트로 이동되므로, isLoggedIn Context를 변경해 줄 필요도 없..
[인스타그램 클론코딩] 웹 로그인 구현 Amplify 초기화 포스트에서는 귀찮았지만 한 번 셋팅하고 정말 편해집니다. Auth 컴포넌트는 action 상태에 따라 로그인(logIn), 회원가입(signUp), 인증코드확인(confirm) 화면을 표시하는 컴포넌트입니다. 이번에는 action 상태가 로그인일 때 어떻게 작동하는지 알아보겠습니다. 참고로 Auth 컴포넌트를 데이터 처리를 담당하는 Container와 랜더링을 담당하는 Presenter로 분리했습니다. AuthContainer.js Auth 컴포넌트의 데이터 처리를 담당합니다. 보기 편하게 오류 처리 코드와 로그인과 관련 없는 코드는 제외했습니다. 전체 코드는 제 github에서 확인할 수 있습니다. Amplify 초기화 포스트에서 언급했다시피 코드 두 줄이면 로그인이 끝납니다. 아..
[인스타그램 클론코딩] 웹 로그아웃 구현 로그아웃은 정말 간단합니다. 로그아웃 버튼을 클릭했을 때 아래 코드만 실행시키면 됩니다. Auth.signOut(); [인스타그램 클론코딩] 웹 로그인 구현 포스트에서 Auth.signIn 메소드가 실행되면 Cognito에서 토큰을 받아와서 Local Storage에 저장한다고 했었는데요. 위 코드가 실행되면 토큰을 포함한 Local Storage에 저장된 모든 로그인 정보까지 함께 삭제됩니다. [인스타그램 클론코딩] 웹 로그인 구조 포스트에서 설명한 isLoggedIn Context를 false로 변경해 주면 됩니다. 로그아웃 버튼 이벤트 핸들러 import { Auth } from "aws-amplify"; import { useSetIsLoggedIn } from "../../Contexts/Aut..
[인스타그램 클론코딩] 웹 회원가입 구현 [인스타그램 클론코딩] 웹 로그인 구조, [인스타그램 클론코딩] AuthContext 포스트의 내용을 바탕으로 실제 회원가입을 구현해 봅시다. 회원가입은 userName(ID), 이메일, 성, 이름, 패스워드를 입력받고, 이메일로 인증 코드를 전송해 확인하는 방식으로 진행됩니다. 인스타그램 클론코딩 웹 회원가입 Auth 컴포넌트는 action 상태에 따라 로그인(logIn), 회원가입(signUp), 인증코드 확인(confirm) 화면을 표시하는 컴포넌트입니다. 이번에는 action 상태가 회원가입과 인증코드 확인일 때 어떻게 작동하는지 알아보겠습니다. AuthContainer.js Auth 컴포넌트의 데이터 처리를 담당합니다. 보기 편하게 오류 처리 코드와 회원가입, 인증코드 확인과 관련 없는 코드는 ..
[인스타그램 클론코딩] AuthContext Context를 사용하기 전에는 부모의 상태를 자식의 자식 컴포넌트에게 전달하기 위해서는 자식 컴포넌트에게 상태를 전달하고, 다시 자식 컴포넌트가 자식의 자식 컴포넌트에게 상태를 전달하는 방식을 사용했습니다. 하지만 Context를 사용하면 아무리 깊은 자식 컴포넌트라도 부모 컴포넌트의 상태에 바로 접근할 수 있습니다. 참조1: https://ko.reactjs.org/docs/hooks-reference.html#usecontext 참조2: https://ko.reactjs.org/docs/context.html 자세히 설명하려 했으나 이미 인스타그램 클론코딩 강의에 있는 내용이라 핵심 포인트만 집어 보겠습니다. 리액트 공식문서는 클래스 컴포넌트로 설명되어 있지만, 함수형 컴포넌트도 동일한 구조입니다...

티스토리툴바