[Lambda + Prisma2+리액트] 인스타그램 클론 코딩

[인스타그램 클론코딩] 제작 관련 포스트 목록

★ 채팅기능 추가: [인스타그램 클론코딩] 채팅기능 추가 ★

노마드 코더님의 인스타그램 클론코딩 강의에 기반하고 있습니다.

자바스크립트와 JSX 코드에 익숙하신 분이나 위 강의를 수강하신 분에게 도움이 될 것 같습니다.

iOS 작동 영상

[인스타그램 클론코딩] iOS 작동 영상

웹 작동 영상

[인스타그램 클론코딩] 웹 작동 영상

 

노마드 코더님의 강의와 다른점은 무엇인가요?

1. Prisma1에서 Prisma2로 변경

강의는 백앤드에서 Prisma1을 사용했습니다. 저는 Prisma2를 사용했는데요. 다음과 같은 Prisma1의 문제점 때문이었습니다.

• GraphQL 서버와 Prisma 서버를 별도로 구현해야 합니다. 
• 자바 환경에서 동작하기 때문에 메모리 문제도 있습니다.
• 앞으로 더 이상의 업데이트도 없습니다.

Prisma2로 포팅하면서 발생했던 문제와 해결 과정을 공유해 볼까 합니다.

2. AWS Lambda를 사용하여 백앤드를 서버리스로 구현

Prisma2는 Prisma1처럼 서버로 동작하는게 아니라, 자바스크립트 모듈로 작동하기 때문에 GraphQL 서버에서 모듈로 사용될 수 있습니다.

그리고 Apollo에서 AWS Lambda 환경에서 작동하는 apollo-server-lambda라는 GraphQL 서버 모듈을 제공합니다.

Prisma2와 apollo-server-lambda 모듈을 사용해서 백앤드를 서버리스로 구현하는 과정을 공유하려 합니다.

물론 데이터베이스는 AWS RDS의 MySQL 서버입니다.

3. AWS Amplify를 사용하여 사용자 인증

강의에서 사용한 사용자 인증 방식이 사용성 측면이나 보안 측면에서 너무 약하다고 생각했습니다.

• 강의에서는 비밀번호가 없고, 사용자가 가입한 메일 주소로 전송된 secret 코드를 입력하여 로그인합니다. 다른 기기에서 로그인할 때마다 매번 이메일을 확인해야 합니다. 
  
• 강의에서는 사용자 ID를 JWT로 암호화해서 Local Storage 또는 Async Storage에 저장하는 방식으로 자동 로그인을 구현했습니다. 해커가 Local Storage에서 JWT를 추출할 수 있습니다.

반면 AWS Amplify를 사용했을 때 장점은 다음과 같습니다.

• 사용자의 비밀번호를 개발사의 데이터베이스에 저장할 필요가 없습니다. Cognito에 안전하게 저장됩니다.
• 이메일 인증, 아이디/비밀번호 찾기를 Cognito가 대신 수행해 줍니다.
• 다른 OAuth 인증 사이트와 마찬가지로 일정 시간마다 ID 토큰을 갱신하고, Access 토큰을 사용해서 ID 토큰을 다시 받을 수 있습니다. Amplify는 이 과정이 자동화되어 있어서 토큰을 보다 안전하게 Local Storage에 저장할 수 있습니다.
• 손쉽게 소셜 로그인을 구현할 수 있습니다.
• AWS Cognito의 Pre-Signup 트리거를 사용하여 AWS Cognito의 사용자와 데이터베이스의 사용자를 쉽게 동기화시킬 수 있습니다.

아래와 같은 과정을 공유해 보려고 합니다.

• AWS Amplify를 사용하여 AWS Cognito에 가입한 사용자를 서버리스 백엔드와 연결된 데이터베이스와 동기화시키는 과정
  
• AWS Amplify를 사용하여 AWS Cognito에서 사용자 인증을 하고(JWT를 다운받고), 이 JWT를 백엔드에 전송, 그리고 백앤드(AWS Lambda)에서 Cognito에 접속하여 해당 JWT가 유효한지 판단하는 과정

4. 앱(iOS, 안드로이드) / 웹

역시 예상은 했지만 리액트 네이티브가 크로스 플랫폼 개발도구라고는 해도 1의 노력으로 2의 결과를 내놓는 것은 아니었습니다. 약 1.3~4의 노력만 들어가도 다행이었습니다.

예를 들면, iOS와 안드로이드에서 약간 다르게 동작하는 것들이 있습니다. 아래와 같은 것들입니다.

• ScrollView 컴포넌트 내부의 TextInput 컴포넌트를 터치했을 때, 안드로이드에서는 키보드가 TextInput이 키보드 바로 위에 자동으로 위치하지만, iOS에서는 키보드만 올라와서 TextInput을 가릴 수 있습니다.
  보너스 프로젝트에서는 KeyboardAvoidingView를 사용해서 이 문제를 해결했지만, 실제로 Home 컴포넌트에 적용해 보면, 제대로 작동하지 않을 것입니다.
  KeyboardAwareScrollView 또는 InputScrollView라는 모듈이 있지만, 역시 문제가 있습니다.
• ScrollView 컴포넌트 내부에 다시 ScrollView가 사용될 경우, 안드로이드에서 매우 심각한 속도 저하가 발생합니다.
  해당 포스팅을 하고 있는 시점에서 이 문제는 아직 해결하지 않았고, 계획만 하고 있습니다. ScrollView 내부에 ScrollView를 사용하는 대신 FlatList를 사용해 볼 계획입니다. 

그리고 강의에서 놓친 버그나 기본 기능만 구현하고 지나친 사소한 것들

• Home에서 어떤 포스트에 '좋아요'를 누른 다음, Profile에서 동일한 포스트를 확인해 보면, '좋아요'가 동기화되지 않는 버그가 있습니다.
  
• 다수의 사진을 선택하는 기능
• 강의에서는 사진을 백엔드 서버에 전송한 다음 백엔드에서 AWS S3로 전송하는데, 전 앱에서 직접 AWS S3로 전송하도록 바꿨습니다.

버그, 플랫폼별로 발생하는 문제 또는 추가되면 좋은 기능들을 어떻게 해결/구현 했는지 공유해 보겠습니다.