"서버리스 영화 리뷰 사이트 구축"

워크숍 개요

• 목표: AWS Amplify를 사용해 영화 리뷰 사이트를 구축하고 인증, 리뷰 작성 및 관리, 파일 업로드 등의 기능을 구현
• 대상: 프론트엔드 개발자, 서버리스 아키텍처에 관심 있는 개발자
• 시간: 5~6시간

단계별 워크숍 구성

1. 환경 설정 및 Amplify 프로젝트 초기화 (30분)

• 목표: AWS Amplify 프로젝트를 초기화하고 환경을 설정
• 내용:
  • Node.js 설치 확인
  • Amplify CLI 설치: npm install -g @aws-amplify/cli
  • Amplify CLI 설정: amplify configure (AWS 계정과 연동)
  • React 프로젝트 생성: npx create-react-app amplify-movie-reviews
  • Amplify 프로젝트 초기화: amplify init

2. 사용자 인증 추가 (40분)

• 목표: AWS Cognito를 사용한 사용자 인증 기능 추가
• 내용:
  • Amplify에서 인증 모듈 추가: amplify add auth
  • 간단한 설정으로 인증 기능 활성화 (디폴트 설정 사용)
  • amplify push로 배포
  • Amplify UI Components를 사용해 로그인/회원가입 UI 추가
  • 사용자 로그인 후 개인화된 페이지로 이동

3. GraphQL API 및 데이터베이스 설정 (1시간)

• 목표: AWS AppSync와 DynamoDB를 사용해 영화 정보와 리뷰를 관리하는 GraphQL API 구성
• 내용:
  • GraphQL API 추가: amplify add api
  • 데이터 모델 설계 (Movie 모델과 Review 모델 정의)
    • Movie: ID, 제목, 설명, 포스터 이미지 URL 등
    • Review: ID, 작성자, 영화 ID, 평점, 리뷰 내용, 작성 시간 등
  • amplify push로 배포 및 스키마 생성
  • GraphQL 쿼리와 변이를 통해 영화 목록 조회 및 리뷰 작성 기능 구현
  • Amplify DataStore를 사용해 오프라인에서도 동작 가능한 데이터 관리 기능 구현

4. 영화 포스터 이미지 업로드 기능 추가 (40분)

• 목표: AWS S3를 사용해 영화 포스터 이미지를 업로드하는 기능 구현
• 내용:
  • S3 스토리지 추가: amplify add storage
  • 포스터 이미지 업로드 UI 구성
  • 업로드된 이미지 URL을 GraphQL API와 연동해 데이터베이스에 저장
  • 업로드된 이미지를 영화 목록 페이지에서 표시