리액트 (7) 썸네일형 리스트형 [인스타그램 클론코딩] 웹에서 백엔드로 Cognito 토큰 전송 [인스타그램 클론코딩] 웹 로그인 구현, [인스타그램 클론코딩] 웹 구글 로그인 구현 포스트에서 Cognito로 부터 ID 토큰을 얻어왔습니다. 이 토큰을 백앤드에 API 요청을 할 때 같이 보내야 합니다. 어떻게 보낼 수 있을까요? index.js 최상위 컴포넌트를 ApolloProvider 컴포넌트로 감싸줍니다. 그리고 ApolloProvider 컴포넌트에 입력되는 client객체를 통해서 전송될 토큰을 지정해 줄 수 있습니다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './Components/App'; import { ApolloProvider } from "@apollo/react-hooks"; imp.. [인스타그램 클론코딩] 웹 구글 로그인 구현 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 자세히 설명하려 했으나 이미 인스타그램 클론코딩 강의에 있는 내용이라 핵심 포인트만 집어 보겠습니다. 리액트 공식문서는 클래스 컴포넌트로 설명되어 있지만, 함수형 컴포넌트도 동일한 구조입니다... [인스타그램 클론코딩] 웹 로그인 구조 리액트 Hooks의 기능중 하나인 Context를 사용했습니다. 참조1: https://ko.reactjs.org/docs/hooks-reference.html#usecontext 참조2: ko.reactjs.org/docs/context.html index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './Components/App'; import { ApolloProvider } from "@apollo/react-hooks"; import { AuthProvider } from './Contexts/AuthContext'; ReactDOM.render( , document.getElementById('.. 이전 1 다음
