본문 바로가기

전체 글

 (154)
Prisma란? 데이터베이스 테이블과 쿼리를 만들어주는 도구입니다. User 테이블에서 id가 1인 사용자를 찾아서 반환하는 SQL 쿼리입니다. SELECT * FROM User WHERE id=1 Prisma를 사용하면 다음과 같이 표현할 수 있습니다. 하지만 더 직관적입니다. prisma.user.findOne( where: { id: 1 } ) 보시다시피 데이터베이스에 접근하는 방법은 ORM과 거의 비슷합니다. ORM(Object Relation Mapping)과 다른점은 무엇인가요? Prisma는 테이블에 대응하는 클래스를 직접 만들 필요가 없습니다. 데이터 모델링을 하고, Prisma 클라이언트를 생성하면, 위와 같이 prisma.user을 통해서 User 테이블에 접근할 수 있습니다. 단, Prisma는 항상..
[인스타그램 클론코딩] 사용자 인증 & 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..
Cognito ID 토큰 복호화 이전 포스트에서 Cognito로 부터 토큰을 받아오는 방법에 대해 설명했었습니다. Amplify 초기화 Cognito 소셜 로그인 추가(이론) Cognito 소셜 로그인 추가(실전) [인스타그램 클론코딩] 웹 로그인 구현 [인스타그램 클론코딩] 웹 구글 로그인 구현 [인스타그램 클론코딩] 앱 로그인 구현 (구글 로그인 포함) 그리고 이렇게 받아온 토큰을 백앤드로 전송할 수 있었습니다. [인스타그램 클론코딩] 웹에서 백엔드로 Cognito 토큰 전송 [인스타그램 클론코딩] 앱에서 백엔드로 Cognito 토큰 전송 이렇게 전송된 토큰은 express 서버라면 콜백 함수의 첫 번째 매개변수, AWS 람다 핸들러라면 event 매개변수의 headers.authorization 속성을 통해서 얻을 수 있습니다. ..
서버리스 GraphQL 백앤드 구축 서버리스 프레임워크 초기화 및 AWS에 연결 포스트에서 생성한 서버리스 설정값을 사용하여 람다 함수를 배포할 것입니다. 1. 서버리스 프로젝트 생성 npx serverless create --template aws-nodejs --path instagureng-backend 2. 패키지 설치 GraphQL API 관련 패키지 npm install apollo-server-lambda graphql 테스트용 패키지 배포하기 전에 로컬 서버 3000포트로 미리 테스트할 수 있도록 해주는 패키지입니다. npm install serverless-offline --save-dev 3. handler.js schema는 typeDefs, resolvers 객체를 포함하는 객체입니다. Prisma와 ID 토큰 관련 ..
서버리스 GraphQL 백앤드 구성 GraphQL이 무엇인지는 구글에서 쉽게 찾을 수 있으니 생략하겠습니다. 추천: 나의 첫번째 GraphQL서버 만들기 이번 포스트에서는 AWS 람다를 사용해서 GraphQL 백앤드를 구축하는 방법에 대해 알아보겠습니다. 노마드 코더님의 인스타그램 클론코딩 강의에서는 GraphQL 서버를 만들기 위해서 graphql-yoga 모듈을 사용했습니다. graphql-yoga는 Node.js에서 GraphQL 서버를 쉽게 설정할 수 있도록 도와주는 Node.js 모듈입니다. 하지만 graphql-yoga 모듈은 항상 동작하고 있는 서버에서만 사용할 수 있습니다. 평소에는 유휴(Cold) 상태로 있다가 사용자 요청이 입력되면 활성화(Warm)되는 AWS 람다 서버에서는 작동하지 않습니다. AWS 람다 서버에서 Gr..
[인스타그램 클론코딩] 앱에서 백엔드로 Cognito 토큰 전송 1. ApolloClient 객체 생성 endpoint는 서버리스 GraphQL 백앤드 구축 포스트에서 배포할 때 얻은 API Gateway 주소를 입력해 주면 됩니다. Amplify에서 주기적으로 토큰을 업데이트하기 때문에 GraphQL API 요청을 할 때마다 Auth 객체로 부터 토큰을 가져와야 합니다. ApolloClient 생성자의 request 속성은 [인스타그램 클론코딩] 웹에서 백엔드로 Cognito 토큰 전송 포스트에서와 마찬가지로 GraphQL API를 요청하기 전에 항상 거쳐가는 핸들러입니다. reqeust로 전달되는 operation 객체를 사용해서 파라미터를 변경할 수 있습니다. operation.setContext 메소드를 사용해서 토큰을 request.headers.author..
[인스타그램 클론코딩] 웹에서 백엔드로 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..
[인스타그램 클론코딩] 앱 로그인 구현 (구글 로그인 포함) 일반적인 로그인 Auth.signIn 메소드를 사용해서 Cognito에 토큰을 요청했을 때 인증코드 인증이 안 된 계정이라서 실패하면, Confirm 스크린으로 이동합니다. 로그인이 완료되면 App 컴포넌트의 Hub 객체가 수신해서 리랜더링을 수행합니다. 참조: [인스타그램 클론코딩] 앱 로그인 구조 구글 로그인 Auth.federatedSignIn 메소드가 실행되면, 외부 브라우저가 실행되면서 구글 계정을 선택하는 인증 페이지로 이동합니다. 계정을 선택하면 인증 페이지에서 앱으로 리디렉션시킵니다. 이것이 가능한 이유는 Cognito 소셜 로그인 추가 (실전) - 구글 포스트 > 4. Cognito 리디렉션 주소 설정에서 엑스포 앱(exp://)으로 리디렉션 주소를 설정했기 때문입니다. 저는 더 이상 구..

티스토리툴바