AWS 실습용 프론트엔드 애플리케이션용 리포지토리다.

이 책을 인용하는 형태로 예제 애플리케이션을 설명한다.

이 프론트엔드 애플리케이션에서 사용자 등록 및 로그인을 수행한다. 이용자 정보는 데이터베이스에 저장되며, TypeScript의 타입 안전 사양을 충분히 활용할 수 있도록 ORM을 이용한다. 이 애플리케이션에서는 Prisma¹ 라는 ORM을 이용한다 다른 서버측 TypeScript를 개발할 때도 활용할 수 있는 우수한 ORM이다. 데이터베이스 마이그레이션 기능도 있으며 예제 애플리케이션의 테이블 생성과 예제 데이터 삽입도 Prisma 기능을 이용하고 있다.

프론트엔드 애플리케이션은 대시보드 형식 UI로 구축했다. 아이템을 목록화해 표시하고 공유할 수 있다. 백엔드 애플리케이션과의 통신을 확인하기 위해 아이템 추가 기능도 준비돼 있다. 일반적인 웹사이트라면 사용자 등록을 위해 도메인을 제어하거나 메일 인증을 해야 하지만, 단순한 예제만을 위해 구축했으므로 이런 요건은 생략했다. 이용 가능한 기능은 다음과 같다.

• 로그인 전 메인 페이지(index.tsx)
  • DB 접속을 하지 않은 화면을 표시하기 위한 화면이다.
  • 이른바 환영 페이지의 역할을 하며, Hello world 라는 문자열을 표시하기 위해 이용한다.
• 로그인 페이지(auth/login.tsx), 회원 등록 페이지(auth/signup.tsx)
  • 사용자 로그인 용도다.
  • 사용자별 페이지는 따로 존재하지 않으며, 인증된 사용자가 아닌 경우 메인 페이지로 이동할 수 없다.
• 아이템 목록 페이지(top.tsx)
  • 인증된 사용자가 데이터베이스에 추가한 아이템 목록을 표시하는 페이지다.
  • 마음에 든 아이템은 찜 마크를 붙일 수 있다 이용자별 찜 목록 표시 기능은 구현하지 않았다。
  • 새로운 아이템 추가를 할 수 있다.
• 찜 목록(farovite.tsx)
  • 찜한 아이템을 표시하는 페이지다.
• 알림 페이지(notification.tsx)
  • 인증된 사용자에게 알림을 표시하기 위한 페이지다.
  • 읽지 않은 알림을 읽기 완료로 변경할 수 있다.

이 책의 내용에 따라 이용해 주세요.