본문 바로가기

전체 글

 (154)
Cognito 소셜 로그인 추가 (이론) 일반적인 소셜 로그인은 아래와 같은 단계로 수행됩니다. 구글, 페이스북과 같은 인증업체에 클라인언트 리디렉션 주소(My redirect)를 등록 클라이언트에서 앱 ID와 앱 Secret을 사용하여 인증업체의 인증사이트(Google Auth 또는 Facebook Auth)에 접속 (예를 들어, 구글의 경우 https://www.googleapis.com/userinfo/v2/me) 사용자가 해당 인증사이트에서 로그인 로그인이 완료되면 인증사이트는 1에서 등록한 리디렉션 주소에 사용자 정보를 암호화한 토큰을 함께 전송 AWS Cognito를 통해 소셜 로그인을 구현한 경우 아래와 같은 구조가 됩니다. 기존 인증업체의 리디렉션 주소에 Cognito에서 제공하는 리디렉션 주소가 입력되고, Cognito에는 클라..
Amplify 초기화 1. Amplify CLI 설치 npm install -g @aws-amplify/cli 2. Amplify 환경설정 amplify configure 위와 같은 명령어를 실행시키면 region과 user name을 물어봅니다. 한국에서 서비스할 것이라면 region은 ap-northeast-2(서울)이 좋겠죠. user name원 원하는 이름으로 설정해 줍니다. user name까지 입력하면, 인터넷 브라우저가 열리면서 AWS IAM 사용자 생성 페이지로 바로 연결됩니다. AWS Management Console 엑세스에 체크해 주시고, 콘솔 비밀번호까지 입력해 주세요. 중간에 권한설정이 나오는데 나중에 변경할 수 있으니 다음을 눌러 일단 넘어가 줍니다. 이렇게 사용자를 생성하고 나면 사용자의 보안 정보..
AWS Amplify란? Amplify가 뭔가요? AWS Amplify는 안전하고 확장 가능한 모바일 및 웹 애플리케이션을 구축하기 위한 개발 플랫폼입니다. 쉬운 사용자 인증, 안전한 데이터 및 사용자 메타 데이터 저장, 데이터에 대한 선택적 액세스 권한 부여, 또한 기계 학습을 통합하고, ... 출처 : https://aws.amazon.com/ko/amplify/ AWS 공식 홈페이지에 나온 설명입니다만, 너무 추상적입니다. 제 나름대로 정의하자면 다음과 같습니다. EC2, RDS, Cognito, Lambda 같은 독립적인 서비스는 아니다. Amplify CLI로 다수의 독립적인 서비스를 자동으로 생성하고 연결해 준다. 프로젝트 내에서 Amplify 객체로 생성된 AWS 서비스에 접근할 수 있다. 예를 들어보겠습니다. Am..
[인스타그램 클론코딩] API 인증 구조 사용자 데이터를 처리할 백엔드(Back-End)는 누구나 사용할 수 있는 API와 로그인한 사용자가 사용할 수 있는 API를 구분하여 처리할 수 있어야 합니다. 사용자가 AWS Cognito에 로그인하면, Cognito는 ID, Access, Refresh 토큰을 발급해 줍니다. ID 토큰은 Cognito에 가입한 사용자 정보를 암호화한 문자열이고, Access 토큰은 해당 Cognito 풀에 가입한 사용자의 권한을 암호화한 문자열입니다. 마지막으로 Refresh 토큰은 ID 토큰과 Access 토큰을 갱신하기 위해 사용합니다. 갱신은 AWS Amplify가 Refresh 토큰을 사용하여 자동으로 관리해 주기 때문에 신경쓰지 않아도 됩니다. 그리고 클라이언트(앱, 웹)에서 로그인한 사용자 정보를 사용하여..
[인스타그램 클론코딩] 회원가입 구조 사용자가 웹 또는 앱에서 회원가입을 하면서 성(First Name), 이름(Last Name), 이메일 등을 입력하면, 이 정보를 Amplify 모듈을 사용해 AWS Cognito에 보냅니다. Cognito에는 전달받은 사용자 정보를 승인하기 전에 개발자가 그 정보를 가로채서 수정할 수 있도록 Pre-SignUp 트리거를 제공합니다. 이 트리거에 전달받은 사용자 정보를 데이터베이스의 User 스키마에 저장하는 AWS Lambda 함수를 등록해 줍니다. Cognito를 통해 가입하면 사용자 정보가 Cognito에 저장되는데, 사용자 정보를 왜 다른 데이터베이스에 다시 저장하나요? 다른 데이터와의 연동때문입니다. 사용자로 부터 데이터만 생성되는 경우는 굳이 사용자 정보를 데이터베이스에 다시 복제할 필요가 없..
[Lambda + Prisma2+리액트] 인스타그램 클론 코딩 [인스타그램 클론코딩] 제작 관련 포스트 목록 ★ 채팅기능 추가: [인스타그램 클론코딩] 채팅기능 추가 ★ 노마드 코더님의 인스타그램 클론코딩 강의에 기반하고 있습니다. 자바스크립트와 JSX 코드에 익숙하신 분이나 위 강의를 수강하신 분에게 도움이 될 것 같습니다. iOS 작동 영상 [인스타그램 클론코딩] iOS 작동 영상 웹 작동 영상 [인스타그램 클론코딩] 웹 작동 영상 노마드 코더님의 강의와 다른점은 무엇인가요? 1. Prisma1에서 Prisma2로 변경 강의는 백앤드에서 Prisma1을 사용했습니다. 저는 Prisma2를 사용했는데요. 다음과 같은 Prisma1의 문제점 때문이었습니다. GraphQL 서버와 Prisma 서버를 별도로 구현해야 합니다. 자바 환경에서 동작하기 때문에 메모리 문제도..
[BLE] Noise Detector 개요 / 목차 / 동영상 개요블록 다이어그램과 핵심 변수/함수를 사용하여 핵심 알고리즘을 표현했습니다. 사실 이번 프로젝트를 만들면서 필기한 분량이 2천원짜리 노트 한권 분량입니다. 프로젝트와 관련된 기초적인 부분과 비슷한 내용을 조금씩 수정하면서 다시 그린 것이 대부분이지만, 대부분의 내용을 삭제하고 매우 핵심적인 부분만 포스팅했습니다. 프로젝트는 전체 시스템, 하위 시스템을 설계할 때마다 블록 다이어그램을 그리고, 그 그림에 따라 코드를 작성하거나 화로를 만들었습니다. 설명에 그려진 그림들은 큰 틀에서 제가 이번 프로젝트를 설계하는 과정과 일치합니다. 회로, BLE(Bluetooth Low Energy) 프로토콜, 자바, 안드로이드에 대한 기초적이 부분까지 설명하기에는 양이 너무 많기 때문에 "CAN 통신" 처럼 자세히 설명..
[AWS IoT 프로젝트] AWS LED Button 개요 / 목차 / 동영상 개요 결론적으로는 안드로이드 앱으로 ESP32와 연결된 LED를 켜고 끄는 아주 간단한 프로젝트입니다. 이번 프로젝트의 목표는 하드웨어를 제어하는 것이 아니라, 안드로이드 앱과 임베디드 시스템이 암호화된 웹 클라우드를 매개로 비동기적 통신 시스템을 구현하는 것이기 때문에 제어할 하드웨어 영역을 의도적으로 줄였습니다. 또한 단순한 장거리 통신은 WIFI를 사용하고 ESP32에서 HTTP 서버를 구축하여 구현할 수도 있지만, 아마존 웹 서비스(AWS)를 사용한 이유는 SDK에 보안과 통신을 담당하는 API가 이미 구현되어 있고, 또한 주요 언어, 플랫폼에 대해 제공되기 때문입니다. AWS C언어 SDK는 리눅스용이지만 ESP32 SDK에서 이미 포팅해서 제공하고 있었습니다. Android SDK 링크 제 블..

티스토리툴바