| 신은수 | 윤태현 | 이보경 |
|---|---|---|
 |
 |
 |
1. 목표
2. 프로젝트 소개
- 개발 배경 및 목적, 주요 기능 등
- 개발 기간
- 프로젝트 사용법
3. 기술 스택
- 기술 선정 이유
4. 정보구조도
5. 화면 구성
6. 트러블슈팅
7. 컨벤션
8. 디렉토리 구조
- 짧은 프로젝트 기간으로 인한 MVP 개발 및 동작 우선 구현
- 추후 기능 추가 및 성능 최적화
- 1차 개발 : 2023년 12월 2일(월) ~ 2023년 12월 25일(월)
- 2차 개발 : 2024년 1월 4일(목) ~ 진행 중
-
구동법
$ git clone https://github.com/FESP-TEAM-1/beta-front.git beta-front $ cd beta-front $ npm install $ npm run dev -
.env
VITE_APP_KAKAOMAP_API_KEY= VITE_APP_IMAGE_DOMAIN= VITE_APP_TOSS_PAYMENTS_CLIENT_KEY= VITE_APP_TOSS_PAYMENTS_SECRET_KEY= VITE_APP_API_ENDPOINT=
| Environment |
|
| Package Manager |
|
| Development |
|
| Communication |
|
-
개발 서버 시작 시간
- CRA는 Webpack을 사용하여 개발 서버를 시작할 때 모든 모듈을 한 번에 변환하는 반면,
- Vite는 모듈을 요청할 때마다 동적으로 변환하고 ES 모듈을 사용하여 브라우저에서 직접 로드하기 때문에 서버 시작 시간이 매우 빠름
- 특히 window 환경에서 빌드 속도가 CRA와 확연하게 차이남
-
환경 설정의 단순화
- CRA는 설정이 모두 미리 구성되어 있어 편리하지만, 사용자 정의 설정을 추가하려면 eject 과정을 거쳐야 함
- 반면 Vite는 최소한의 설정으로 alias, eslint 등 사용자 정의 설정을 쉽게 추가할 수 있음
-
Provider 불필요
- React의 Context API에 의존하지 않기 때문에 불필요한 리렌더링을 최소화할 수 있고 성능 향상에 기여할 수 있음 또한, 개발 과정을 더욱 간결하게 만들 수 있음
-
러닝 커브
- 짧은 기간 동안 학습하기에 적합함
- 팀원 모두가 빠르게 적응하고 효율적으로 작업할 수 있음
-
단일 스토어 관리
- 하나의 스토어에서 개별적인 기능 및 상태를 관리할 수 있음
- 상태 관리의 복잡성을 줄이고 관리의 효율성을 높여줌
-
경량화된 라이브러리
- 매우 작은 크기로 프로젝트의 전체적인 크기를 최소화하며 로딩 시간과 성능에 긍정적인 영향을 미침
-
다른 상태 관리 라이브러리
- Recoil은 업데이트가 드물고 파일 크기가 큼
- Redux는 다소 복잡한 편
- Jotai나 Valtio 등은 고려하지 않음
-
결론적으로 짧은 시간 내에 프로젝트를 구현해야 하는 상황과 상태 관리 라이브러리에 대한 팀원들의 경험을 고려하여 간단하면서도 경량화된 Zustand를 선택
-
효율적인 데이터 캐싱
- 자동적으로 서버에서 받은 데이터를 캐시하기 때문에 API 요청 수를 줄이고 사용자 경험을 개선
-
쿼리 키를 통한 데이터 관리
- 각 쿼리는 고유한 키를 가지며 이를 통해 데이터를 쉽게 조회, 업데이트, 무효화할 수 있음
| [메인] | [스토리 업로드] |
|---|---|
| [전시] | [공연] | [스포츠] |
|---|---|---|
| [정보] | [후기/방명록] |
|---|---|
| [좋아요] | [예매 - 구글폼] | [예매 - 예매대행] |
|---|---|---|
| [프로필 수정] | [좋아요] | [후기/방명록] |
|---|---|---|
| [예매 관리] | [스토리] |
|---|---|
| [프로필 수정] | [예매 관리] |
|---|---|
| [게시글 관리] | [게시글 업로드] | [게시글 수정/삭제] |
|---|---|---|
📦BETA-FRONTEND
┣ 📂public
┃ ┗ 📜favicon.ico
┣ 📂src
┃ ┣ 📂apis
┃ ┃ ┣ 📜deleteCancelShow.ts
┃ ┃ ┣ ...
┃ ┣ 📂assets
┃ ┃ ┣ 📜arrow.svg
┃ ┃ ┣ ...
┃ ┣ 📂components
┃ ┃ ┣ 📂common
┃ ┃ ┃ ┣ 📂BasicCard
┃ ┃ ┃ ┃ ┣ 📜BasicCard.module.css
┃ ┃ ┃ ┃ ┗ 📜BasicCard.tsx
┃ ┃ ┃ ┃ ...
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂layouts
┃ ┃ ┣ 📂detail
┃ ┃ ┣ 📂main
┃ ┃ ┣ 📂mypage
┃ ┣ 📂data
┃ ┃ ┗ 📜univList.json
┃ ┣ 📂hooks
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┣ 📜useAuth.tsx
┃ ┃ ┣ 📜useFilterSlide.tsx
┃ ┃ ┣ 📜useInputs.tsx
┃ ┃ ┗ 📜usePreventScroll.tsx
┃ ┣ 📂pages
┃ ┃ ┣ 📂Detail
┃ ┃ ┃ ┣ 📜DetailPage.tsx
┃ ┃ ┃ ┗ 📜DetaiPage.module.css
┃ ┃ ┣ 📂Error
┃ ┃ ┣ 📂Login
┃ ┃ ┣ 📂Main
┃ ┃ ┣ 📂MainConcert
┃ ┃ ┣ 📂MainExhibition
┃ ┃ ┣ 📂Mypage
┃ ┃ ┃ ┣ 📂admin
┃ ┃ ┃ ┃ ┣ 📂PostManage
┃ ┃ ┃ ┃ ┃ ┣ 📜PostManagePage.module.css
┃ ┃ ┃ ┃ ┃ ┗ 📜PostManagePage.tsx
┃ ┃ ┃ ┃ ┗ ...
┃ ┃ ┃ ┣ 📂ProfilePage
┃ ┃ ┃ ┣ 📂user
┃ ┃ ┃ ┃ ┣ 📂LikeManage
┃ ┃ ┃ ┃ ┃ ┣ 📜LikeManagePage.module.css
┃ ┃ ┃ ┃ ┃ ┗ 📜LikeManagePage.tsx
┃ ┃ ┃ ┃ ┗ ...
┃ ┃ ┃ ┣ 📜Mypage.module.css
┃ ┃ ┃ ┗ 📜Mypage.tsx
┃ ┃ ┣ 📂PayFail
┃ ┃ ┣ 📂PaySuccess
┃ ┃ ┣ 📂Signup
┃ ┃ ┗ 📜index.tsx
┃ ┣ 📂stores
┃ ┃ ┣ 📜useCarouselDragStore.ts
┃ ┃ ┗ ...
┃ ┣ 📂types
┃ ┃ ┣ 📜addressSearchType.ts
┃ ┃ ┣ ...
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂utils
┃ ┃ ┣ 📜base64ToBytes.ts
┃ ┃ ┃ ...
┃ ┃ ┗ index.ts
┃ ┣ 📜App.tsx
┃ ┣ 📜global.css
┃ ┣ 📜main.tsx
┃ ┣ 📜PrivateRoute.tsx
┃ ┣ 📜Router.tsx
┃ ┣ 📜toast.css
┃ ┗ 📜vite-env.d.ts
┣ 📜.env
┣ 📜.eslintrc.cjs
┣ 📜.gitignore
┣ 📜.prettierrc.cjs
┣ 📜index.html
┣ 📜netlify.toml
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜README.md
┣ 📜svg.d.ts
┣ 📜tsconfig.json
┣ 📜tsconfig.node.json
┗ 📜vite.config.ts