- node.js v18.19.1
$ git clone https://github.com/JunJongHun/AROOO.gitnpm installnpm run dev- React
- Typescript
- Vite
- React Query
- Axios
- React Router Dom
- MSW
- Chakra UI
- S3
- CloudFront
- Api Gateway
- Lambda
- DynamoDB
📦 AROOO 프로젝트 구조
📦AROOO
┣ 📂.github
┃ ┗ 📂workflows
┃ ┃ ┗ 📜main.yaml
┣ 📂public
┃ ┣ 📜arooo_favicon.png
┃ ┗ 📜mockServiceWorker.js
┣ 📂src
┃ ┣ 📂apis
┃ ┃ ┣ 📜config.ts
┃ ┃ ┗ 📜contents.ts
┃ ┣ 📂assets
┃ ┃ ┗ 📜arooo.png
┃ ┣ 📂components
┃ ┃ ┣ 📜ContentItem.tsx
┃ ┃ ┣ 📜ContentList.tsx
┃ ┃ ┣ 📜Fallback.tsx
┃ ┃ ┣ 📜Header.tsx
┃ ┃ ┣ 📜HitAreaWrapper.tsx
┃ ┃ ┣ 📜QueryErrorBoundary.tsx
┃ ┃ ┗ 📜SkeletonContentList.tsx
┃ ┣ 📂hooks
┃ ┃ ┣ 📜useInfiniteScroll.tsx
┃ ┃ ┗ 📜useOptimisticLikeUpdate.tsx
┃ ┣ 📂mocks
┃ ┃ ┣ 📜browsers.ts
┃ ┃ ┣ 📜data.ts
┃ ┃ ┗ 📜handlers.ts
┃ ┣ 📂pages
┃ ┃ ┣ 📜ContentDetailPage.tsx
┃ ┃ ┣ 📜ContentListPage.tsx
┃ ┃ ┗ 📜RootLayout.tsx
┃ ┣ 📂styles
┃ ┃ ┗ 📜theme.ts
┃ ┣ 📜main.tsx
┃ ┣ 📜queryClient.ts
┃ ┣ 📜router.tsx
┃ ┣ 📜types.ts
┃ ┗ 📜vite-env.d.ts
┣ 📜.eslintrc.cjs
┣ 📜.gitignore
┣ 📜.gitmessage.txt
┣ 📜README.md
┣ 📜buildspec.yaml
┣ 📜index.html
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜tsconfig.json
┣ 📜tsconfig.node.json
┗ 📜vite.config.ts- Api 서버로부터 콘텐츠 목록을 불러와 화면에 표시합니다.
- 목록 아이템 항목: 콘텐츠 타이틀, 좋아요 버튼, 좋아요 수
- 목록 내 아이템을 선택하면 콘텐츠 상세 페이지로 이동합니다.
- 콘텐츠 상세 페이지 항목: 콘텐츠 타이틀, 콘텐츠 본문, 좋아요 버튼, 좋아요 수
- 좋아요 버튼 클릭 시 API를 통해 서버에 값을 업데이트 합니다.
- 좋아요 버튼은 누를 때마다 좋아요 수의 카운트가 올라갑니다.
- 상세 페이지 내에서의 좋아요 버튼 클릭 시 목록 내 아이템에도 좋아요 수 값이 업데이트가 되어야 합니다.
- 콘텐츠 목록의 무한 스크롤 구현
- 비지니스 로직 추상화 처리
- 비지니스 로직 테스트
-
컴포넌트 내 비지니스 로직을 Custom Hook으로 추상화 하여 재사용성과 UI에 집중 할 수 있도록 분리
useDataFetching: 컴포넌트 내 API 요청 코드 작성 시, 중복 작성되는 state, useEffect를 줄이고 데이터 요청에 상태에 따른 state를 쉽게 관리 ->useQuery로 대체useContentList: 콘텐츠 목록 무한스크롤을 구현하기 위해 다음 목록을 불러올 수 있는지 판단 가능한 hasNext를 포함한 필요한 상태 관리 ->useInfinitiQuery로 대체useInfiniteScroll: Intersection Observer API를 활용하여 특정 요소를 관찰 할 수 있고, 옵저버가 관찰하는 요소의 가시성 여부에 따라 callbalck 함수 실행 ( 무한스크롤 구현에 활용 )useOptimisticLikeUpdate: useMutation을 사용하여 성공시 좋아요 Optimistic UI 적용 및 연관된 다른 캐시값들 동기화, 실패시 Rollback 구현
-
서버 부하를 고려하고 빠른 렌더링을 위한 React-Query 캐싱 기능 적용
-
좋아요 업데이트 시, Optimistic Update 적용하여 사용자 경험 개선 고려
- React-Query를 활용하여 좋아요 버튼 클릭시 캐싱된 값을 먼저 업데이트 하고 API 요청 실패 시, 이전 값으로 Rollback 구현
- 콘텐츠 상세 페이지 좋아요 값 업데이트 성공 시, 콘텐츠 목록에 좋아요 값 동기화
-
Suspense와 useSuspenseQuery를 사용해 사용자에게 예측 가능한 Skeleton UI를 보여줌으로써 렌더링 시간에 대한 체감 감소
- 무조건 Skeleton UI를 보여주는 것은 사용자 경험에 좋지 않을 수 있기에 응답 속도 0.3s 기준으로 렌더링 여부 결정
-
ErrorBoundary를 사용해 UI의 일부분에서 발생하는 자바스크립트 에러가 전체 애플리케이션 중지 하지 않도록 구현
-
좋아요 터치 범위 확장 ( 모바일 고려 )
- 재사용 가능한
<HitAreaWrapper/>구현
- 재사용 가능한
-
MSW를 활용하여 Mock Sever를 구현
-
CloudFront + S3 이용한 배포
-
Github Actions 이용해 CD 적용
-
API 서버 Api Gateway + Lambda + DynamoDB 활용해 Serverless 아키텍처 구현
적용 전
적용 후
