- 프론트엔드(김혁준)
- BookMap 프로젝트의 React 버전입니다.
$ git clone https://github.com/hyukjunkim1116/foodmap-react.git
$ cd foodmap-react
$ npm install
$ npm run dev-
React
- 컴포넌트화를 통해 추후 유지보수와 재사용성을 고려했습니다.
- 유저 배너, 상단과 하단 배너 등 중복되어 사용되는 부분이 많아 컴포넌트화를 통해 리소스 절약이 가능했습니다.
-
chakra-ui
- 적은 코드로 사용자 인터페이스를 구현하기 위해 도입했습니다.
- props를 전달하는 방식으로 쉽게 재정의가 가능했습니다.
- 최상위 컴포넌트를 만들어 props로 유저 정보를 내려주는 방식의 경우 불필요한 props 전달이 발생합니다. 따라서, 필요한 컴포넌트 내부에서만 상태 값을 가져다 사용하기 위해 상태 관리 라이브러리를 사용하기로 했습니다.
- 기존 프로젝트의 프론트엔드에서 사용한 Pinia와 비슷하여 학습시간을 절약하였습니다.
- React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있기 때문에 도입했습니다.
- 캐싱, Window Focus Refetching 등 다양한 기능을 활용하여 API 요청과 관련된 번잡한 작업 없이 “핵심 로직”에 집중할 수 있었습니다.
- 백엔드로 보내는 폼을 효과적으로 관리하기 위해 도입했습니다.
- 비제어 컴포넌트 방식으로 구현되어 있기에 불필요한 렌더링을 줄일 수 있었습니다.
foodmap-react
├─ public
├─ src
│ ├─ assets
│ ├─ components
│ │ ├─ ChangePassword.jsx
│ │ ├─ ChatModal.jsx
│ │ ├─ Comment.jsx
│ │ ├─ FindPasswordModal.jsx
│ │ ├─ Header.jsx
│ │ ├─ LoginModal.jsx
│ │ ├─ Notification.jsx
│ │ ├─ Post.jsx
│ │ ├─ PostSkeleton.jsx
│ │ ├─ ProtectedPage.jsx
│ │ ├─ ReportModal.jsx
│ │ ├─ Root.jsx
│ │ ├─ SignUpModal.jsx
│ │ ├─ SocialLogin.jsx
│ │ ├─ UploadPostPhotoModal.jsx
│ │ └─ UploadUserPhotoModal.jsx
│ ├─ main.jsx
│ ├─ router.jsx
│ ├─ routes
│ │ ├─ Certification.jsx
│ │ ├─ CertificationResult.jsx
│ │ ├─ EmailConfirm.jsx
│ │ ├─ Home.jsx
│ │ ├─ KakaoConfirm.jsx
│ │ ├─ Mypage.jsx
│ │ ├─ NotFound.jsx
│ │ ├─ Payment.jsx
│ │ ├─ PaymentHome.jsx
│ │ ├─ PaymentList.jsx
│ │ ├─ PaymentResult.jsx
│ │ ├─ PostDetail.jsx
│ │ ├─ PostEdit.jsx
│ │ └─ UploadPost.jsx
│ ├─ services
│ │ ├─ auth.js
│ │ ├─ chat.js
│ │ ├─ comment.js
│ │ ├─ index.js
│ │ ├─ notification.js
│ │ ├─ payment.js
│ │ └─ post.js
│ ├─ stores
│ │ └─ auth.js
│ └─ utils
│ ├─ formInterceptor.js
│ ├─ instance.js
│ ├─ jsonInterceptor.js
│ ├─ payments
│ │ ├─ constants.js
│ │ └─ utils.js
└─ └─ theme.js
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent