프로젝트 소개

프레임워크없이 타입스크립트 기반의 프론트엔드 프로젝트를 진행하는 프로젝트입니다. 배달 앱 서비스를 구현하고자 합니다. 레퍼런스 앱은 배달의민족, 쿠팡이츠 두 앱을 참고했습니다. 모바일 앱 사이즈로 반응형 처리는 진행하지 않았습니다.

구현 목표

프레임워크 없이 배달 앱을 구현함으로써 프론트엔드 개발에 필요한 핵심 기능들의 구동 방식을 이해하는데 초점을 맞췄습니다. 이번 프로젝트에서 구현하는 기능은 다음과 같습니다.

1. 메인 페이지는 가게 리스트를 보여준다.
2. 가게 상세 페이지에는 가게 정보와 가게가 가지고 있는 음식 정보들을 리스트 형태로 보여준다.
3. 가게 데이터는 좋아요/찜 을 할 수 있다.
4. 음식 데이터는 장바구니에 추가할 수 있다.

기능 명세

• 라우팅 기능
• 목록 페이지
• 상세 페이지
• 가게 정보
• 음식 정보
• 좋아요/찜 기능
• 장바구니 기능

개발 과정

1. 프로젝트 세팅

frameworkless-toss 프로젝트에서 진행했던 내용들 참고하여 세팅 진행할 예정입니다.

• 추가로 ts 로 변환하는 과정이 필요.

2. 번들러 세팅

• 번들러를 하는 이유

  앱 개발 시 모듈로 개발할 경우 재사용성, 유지보수, 네임스페이스화 등의 이점이 있다. 그러나 웹서버로 업로드할 경우 여러개의 파일을 요청해야 하는 상황이 된다. 이는 네트워크 비용의 증가하게 된다. 따라서 여러개의 모듈 파일들을 하나의 파일로 묶는 작업을 필요로 하고 이를 번들링이라 한다. 번들링 해주는 도구를 모듈 번들러라 한다. 즉, 여러개의 파일을 하나의 파일로 묶어주는 것이 번들러다.

• 도구 선택 과정

  webpack, rollup, parcel, esbuild, wsc?, vite 등 여러 번들러 도구들이 있다. 그중에 이번 프로젝트에서는 번들러의 기본 조합이라고도 할 수 있는 webpack, tsc, babel 3가지를 활용한 TS 프로젝트 세팅을 진행하고자 한다.

• 환경 설정 방법

3. 라우팅 기능

4. 페이지 렌더링 방식 구현

5. 임시 데이터 설정

6. 좋아요/찜 기능

7. 장바구니 기능