본문 바로가기

전체 글

 (154)
[인스타그램 클론코딩] 앱 로그인 구조 [인스타그램 클론코딩] 웹 로그인 구조 포스트와 달리 앱에서는 Context를 사용하지 않았습니다. 왜 Context를 사용하지 않았나요? googleLogin 함수는 구글 로그인 버튼을 클릭했을 때 실행되는 핸들러입니다. import { Auth } from 'aws-amplify'; const googleLogin = async () => { const user = await Auth.federatedSignIn({provider: 'Google'}); console.log(user) // undefined } 그런데 user 출력해 보면 undefined라고 나옵니다. 왜일 까요? 웹에서는 이런 현상이 발생하지 않았습니다. 그래서 Auth.federatedSignIn 후에 AuthContext의 i..
[인스타그램 클론코딩] 웹 로그인 구조 리액트 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('..
AWS Lambda 핸들러 구조 handler.js exports.handler = function(event, context, callback) { try { modify(event); // event 객체 변형 } catch(e) { console.log(e); callback(new Error("Something went wrong.")); // 오류 발생 } callback(null, event); // 작업 성공 } event 호출자로부터의 정보가 포함된 객체입니다. 요청자가 입력한 파라미터가 포함되어 있습니다. callback AWS 람다 핸들러는 리턴을 하지 않습니다. 대신 매개값으로 전달받은 callback 함수로 다음 단계로 넘어갑니다. 첫 번째 매개변수에 오류 객체가 입력되어 있으면, 다음 단계에서 오류를 반환합니다...
[인스타그램 클론코딩] Cognito Pre-SignUp 람다 함수 서버리스 설치 후 서버리스 프로젝트를 생성해 줍니다. 참고: 서버리스 프레임워크 초기화 및 AWS에 연결 npx serverless create --template aws-nodejs --path beforSignUp 인라인 편집기를 사용하지 않는 이유는 무엇인가요? Cognito와 GraphQL 서버인 백엔드에 접속하기 위해서 aws-sdk와 graphql-request 모듈을 설치하기 때문입니다. GraphQL 요청은 모듈을 사용하지 않고 어떻게든 보낼 수 있는데, aws-sdk는 Cognito User Pool에 접속하기 위해서 필수입니다. 그래서 GraphQL도 그냥 모듈을 사용했습니다. 외부 모듈을 설치하려면 인라인 편집기는 사용할 수 없습니다. yarn add aws-sdk graphql-re..
서버리스 프레임워크 초기화 및 AWS에 연결 Amplify CLI와 같이 서버리스 프레임워크도 CLI를 통해 AWS 서비스에 배포되는 프로그램이기 때문에, AWS IAM에서 사용자로 인증되어야 코드를 배포할 수 있습니다. 1. 서버리스 프레임워크 설치 yarn global add serverless 2. IAM 사용자 생성 AWS IAM > 엑세스 관리 > 사용자 > 사용자 추가 프로그래밍 방식 엑세스 체크 Amplify 초기화와 마찬가지로 Access key id와 Secret Access key가 발급됩니다. 한 번만 확인할 수 있으니 잘 저장해 둡시다. 3. 권한 설정 4. 서버리스와 AWS 연결 아래 명령어를 입력하여 serverless CLI에게 Access key id와 Secret Access key를 전달해 줍니다. 는 빼고 입력해야..
서버리스 프레임워크란? 서버리스 프레임워크란? AWS 람다와 Azure 함수 서비스와 같은 서버리스 서비스에 코드를 쉽게 배포해 주는 프레임워크입니다. The Serverless Application Framework | Serverless.com Build web, mobile and IoT applications using AWS Lambda and API Gateway, Azure Functions, Google Cloud Functions, and more. www.serverless.com 왜 사용하나요? 람다의 경우 인라인 편집기를 사용하지 않으면, 변경사항이 있을 때마다 프로젝트를 압축해서 계속 올려주어야 하는데 상당히 번거롭습니다. 서버리스를 사용하면 아래 명령어로 생성된 프로젝트를 압축 > S3에 업로드 > L..
Cognito Pre-SignUp 트리거 일반설정 > 트리거에서 사전 가입 트리거에 가입하기 전에 실행될 Lambda 함수를 등록할 수 있습니다. 다음 포스트에서 클라이언트로 부터 Cognito에 전송되는 가입 정보(성, 이름, 이메일)을 가로채서 데이터베이스에 따로 저장하는 Lambda 함수를 만들어 등록해 보겠습니다.
Cognito 소셜 로그인 추가 (실전) - 구글 저는 더 이상 구글 로그인과 AWS Cognito를 연결시켜서 사용하지 않습니다. 카카오, 네이버 지원이 안되기 때문에, 어차피 카카오, 네이버 로그인 기능을 서버에 따로 만들어야 합니다. 일관성이 떨어지기 때문에 구글 로그인 기능도 서버에 따로 만들어서 사용합니다. 그리고 페이스북을 통해 AWS Cognito에 연결하면 핸드폰 번호로 로그인할 때 버그가 발생하는거 같습니다. 1. Cognito 도메인 생성 앱 통합 > 도메인 이름에서 원하는 도메인(joondong 부분)을 입력후 가용성 확인 버튼을 클릭해 줍니다. 이 도메인은 사용할 수 있습니다. 메시지가 나타나면 변경 내용 저장 버튼을 클릭해서 도메인을 저장합니다. 2. 구글 사용자 인증 정보 만들기 Google 클라우드 플랫폼 > 사용자 인증정보 ..

티스토리툴바