이 가이드에서 다루는 내용

웹 애플리케이션을 구축하는 데 필요한 주요 개념을 단계별로 살펴보기 위해, Scratch라는 간단한 노트 작성 앱을 만들어 볼 예정입니다.

하지만 대부분의 튜토리얼과 달리, 우리의 목표는 프로덕션 환경에서 사용할 수 있는 풀스택 애플리케이션을 구축하는 데 필요한 세부 사항을 깊이 있게 다루는 것입니다.

데모 앱

이 데모 앱은 TypeScript로 완전히 작성된 서버리스 API로 구동되는 싱글 페이지 애플리케이션입니다.

완성된 앱 데스크톱 스크린샷

완성된 앱 모바일 스크린샷

이 앱은 비교적 단순하지만, 다음과 같은 요구사항을 충족해야 합니다.

  • 사용자가 계정을 등록하고 로그인할 수 있어야 함
  • 사용자가 내용이 포함된 노트를 생성할 수 있어야 함
  • 각 노트는 첨부 파일을 가질 수 있음
  • 사용자가 노트와 첨부 파일을 수정할 수 있어야 함
  • 사용자가 노트를 삭제할 수 있어야 함
  • 앱이 신용카드 결제를 처리할 수 있어야 함
  • 앱이 커스텀 도메인에서 HTTPS로 제공되어야 함
  • 백엔드 API가 안전해야 함
  • 앱이 반응형이어야 함
  • git push를 할 때 앱이 배포되어야 함

데모 소스

여기서 우리가 만들 앱의 전체 소스 코드를 확인할 수 있습니다. 이 페이지를 북마크하고 참고 자료로 활용하는 것을 추천합니다.

이 앱은 AWS 플랫폼을 사용해 구축할 예정입니다. 추후 다른 플랫폼도 다룰 수 있지만, AWS 플랫폼이 시작하기에 적합하다고 판단했습니다.

기술 및 서비스

우리는 서버리스 애플리케이션을 구축하기 위해 다음과 같은 기술과 서비스를 사용할 예정입니다.

  • AWS
  • 프론트엔드로 사용할 React
  • 단위 테스트를 위한 Vitest
  • 프로젝트 저장소 호스팅을 위한 GitHub
  • 신용카드 결제 처리를 위한 Stripe

위 서비스들은 무료 티어를 사용할 예정이므로, 여러분은 무료로 가입할 수 있습니다. 물론 애플리케이션을 호스팅할 새 도메인을 구매하는 경우는 제외됩니다. 또한 AWS의 경우, 계정 생성 시 신용카드 정보를 입력해야 합니다. 따라서 이 튜토리얼에서 다루는 내용 이상의 리소스를 생성할 경우 요금이 부과될 수 있습니다.

위 목록이 부담스러워 보일 수 있지만, 이 가이드를 완료하면 실제 세계에서 사용 가능한 안전하고 완전히 기능하는 웹 애플리케이션을 구축할 준비가 될 것입니다. 걱정하지 마세요, 우리가 도와드릴 것입니다!

요구사항

이 가이드를 따라 하려면 몇 가지가 필요합니다:

이 가이드의 구조

이 가이드는 크게 몇 부분으로 나뉩니다.

백엔드 부분:

  • AWS 계정 설정
  • DynamoDB를 사용해 데이터베이스 생성
  • 파일 업로드를 위한 S3 설정
  • 다양한 백엔드 API 작성
  • 사용자 계정 관리를 위한 Cognito User Pools 설정
  • 리소스 보안을 위한 Cognito Identity Pool 설정
  • 시크릿 관리
  • 유닛 테스트 추가

프론트엔드 부분:

  • Create React App으로 프로젝트 설정
  • 파비콘, 폰트, Bootstrap을 사용한 UI Kit 추가
  • React Router로 라우트 설정
  • AWS Cognito와 Amplify를 사용해 사용자 로그인 및 회원가입 구현
  • 노트 관리를 위한 백엔드 API 연결
  • AWS Amplify를 사용해 파일 업로드
  • Stripe React SDK로 신용카드 결제 처리

프로덕션 배포:

  • 앱에 커스텀 도메인 사용
  • Git에 푸시할 때 앱 배포

이 가이드를 통해 여러분은 프로덕션 준비가 된 풀스택 서버리스 애플리케이션을 구축하는 데 필요한 기초를 다질 수 있습니다. 추가로 다뤘으면 하는 개념이나 기술이 있다면 Discord에서 알려주세요.