들어가며
이번 시리즈에서는 "쿠팡이츠 클론코딩(ft.백엔드)"을 소개하고자 합니다. 이 프로젝트는 노마드코더의 "우버이츠 클론코딩" 강의를 기반으로, 기존 우버이츠 프로세스와 코드를 쿠팡이츠에 맞게 리로딩하여 업그레이드하는 작업입니다.
기존 우버이츠는 음식 추가, 주문 기능, 간단하게 디자인된 화면으로 구성되어 있지만, 이번 프로젝트에서는 실 쿠팡이츠 서비스에 가깝게 여러 기능을 추가하고 디자인을 개선할 계획입니다. 이를 위해 Review 등록 및 내역, 주문 내역 확인을 추가하고, 매장 페이지, 메뉴 페이지, 결제 페이지로 나누어 실제 쿠팡이츠와 동일한 경험을 제공하고자 합니다.
이 외에도 기존 구조를 활용하되 전반적인 개선을 통해 "쿠팡이츠 클론코딩" 버전 2를 완성할 예정입니다.
사용 기술스택
프로젝트에 사용되는 기술 스택은 다음과 같습니다:
프론트엔드
- ReactJS: 사용자 인터페이스 구축을 위한 라이브러리
- GraphQL: API 통신을 위한 쿼리 언어
- Typescript: 타입 안전성을 보장하는 자바스크립트 확장
- Apollo: GraphQL 통신을 위한 클라이언트
- TailwindCSS: 유틸리티 우선 CSS 프레임워크
백엔드
- NestJS: NodeJS 기반 백엔드 프레임워크
- Typescript: 백엔드 코드에도 타입 안정성 제공
- TypeORM: ORM(Object Relational Mapping) 라이브러리
- GraphQL: API 통신을 위한 쿼리 언어
테스트 및 기타
- E2E Testing + Unit Testing:
- 백엔드: Jest, Supertest
- 프론트엔드: Jest, React Testing Library, Cypress
- 데이터 시각화: Victory 라이브러리
구현 기능 및 배우는 컨셉
이번 클론코딩 시리즈에서 구현할 기능과 배우게 될 컨셉은 다음과 같습니다:
사용자 관련 기능
- User Authentication: 사용자 인증 기능
- Email Verification: 이메일 인증
- Photo Upload: 사진 업로드
- User / Delivery Man / Restaurant Owner Profile: 사용자/배달원/식당 주인 프로필 관리
레스토랑 관련 기능
- Restaurant CRUD: 레스토랑 생성, 읽기, 수정, 삭제 기능
- Review: 리뷰 생성,내역 확인
- OrderHistory: 주문 내역 확인
- Dish CRUD: 메뉴 생성, 읽기, 수정, 삭제 기능
- Realtime Order Notifications: 실시간 주문 알림
- Sales Dashboard (Data Visualization): 판매 대시보드 (데이터 시각화)
결제 및 고급 기능
- PortOne: 결제 기능
- Google Maps 연동
- Unit Testing 및 End to End Testing
- Data Visualization: 데이터 시각화
- Tailwind CSS: UI 디자인
NestJS 컨셉 및 기능
- Modules, Guards, Middlewares, Decorators
- JWT Authentication
- Features: Google Maps, Online Payments, Tailwind CSS
앞으로의 방향 소개
"쿠팡이츠 클론코딩" 시리즈의 목표는 다음과 같습니다:
- 멀티 역할의 실제 응용 프로그램을 구축한다.
- NestJS를 사용해 전문적인 백엔드를 구축한다.
- 프론트엔드와 백엔드 모두에서 E2E 및 단위 테스트를 활용한다.
- 사용자 간의 실시간 상호작용을 구현한다.
마치며
전체적인 개요를 소개하였습니다. 다음편부터는 백엔드 셋업을 시작으로 본격적으로 쿠팡이츠 클론코딩(ft.백엔드)에 대해서 소개해보도록 하겠습니다.
