context (4) 썸네일형 리스트형 [인스타그램 클론코딩] 사용자 인증 & GraphQL Context 활용 Cognito ID 토큰 복호화 포스트에서 클라이언트에서 보낸 토큰을 복호화해서 userName, 이메일, 토큰 유효성을 얻을 수 있었습니다. 이때 ApolloServer 생성자의 context 속성(함수)을 사용했었는데요. 여기서 context가 반환한 객체는 GraphQL의 모든 Resolvers가 공유할 수 있습니다. 아직 GraphQL, Resolver가 뭐지 모른다면? 추천: 나의 첫번째 GraphQL서버 만들기 handler.js const server = new ApolloServer({ schema, context: async ({ event, context }) => { const authorization = event.headers.authorization || event.headers.. [인스타그램 클론코딩] 웹 로그인 구현 Amplify 초기화 포스트에서는 귀찮았지만 한 번 셋팅하고 정말 편해집니다. Auth 컴포넌트는 action 상태에 따라 로그인(logIn), 회원가입(signUp), 인증코드확인(confirm) 화면을 표시하는 컴포넌트입니다. 이번에는 action 상태가 로그인일 때 어떻게 작동하는지 알아보겠습니다. 참고로 Auth 컴포넌트를 데이터 처리를 담당하는 Container와 랜더링을 담당하는 Presenter로 분리했습니다. AuthContainer.js Auth 컴포넌트의 데이터 처리를 담당합니다. 보기 편하게 오류 처리 코드와 로그인과 관련 없는 코드는 제외했습니다. 전체 코드는 제 github에서 확인할 수 있습니다. Amplify 초기화 포스트에서 언급했다시피 코드 두 줄이면 로그인이 끝납니다. 아.. [인스타그램 클론코딩] 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 다음
