프로젝트 세팅

기술 스택

프레임워크

• React v.19 && Next.js v.15.1 (App Router)
  • Q. 왜 Pages Router 말고 App Router 사용?
    1. Pages Router는 페이지가 어디서 렌더링 되든지간에 페이지 전체가 클라이언트 번들에 포함됨.
       반면 App Router는 상위에서 use client로 선언하지 않는 이상, 서버 컴포넌트는 서버에서만 번들됨. 즉 클라이언트 컴포넌트만 클라이언트에 번들되기 때문에 초기 로딩 속도에 이점을 줌.
    2. 스트리밍을 사용하기 위해서.
       • suspense를 활용해 페칭된 데이터 순서대로 화면에 띄우기 위해서.
       • 실제 토스 쇼핑 내에서도 이미지가 용량때문에 젤 늦게 띄워지고 글씨가 먼저 띄워지고 있음.
    3. App Router는 default로 모든 컴포넌트가 서버 컴포넌트라 getServerSideProps나 getStaticProps 함수를 쓸 필요가 없어서 코드가 간결해짐.
  • Q. 왜 React 19 버전과 Next.js 15.1 버전 사용?
    • suspense를 지원하는건 React 18 이상부터.
    • Q. 그럼 React 18에 Next.js 14를 사용해도 되지 않나?
      • 물론 그래도 되지만, 15부터는 turbo pack을 사용해서 dev 모드에서의 hot reloading 시간이 단축되었다고함.
    • Q. 근데 왜 굳이 15.1 버전 사용?
      • 이 레딧에 따르면 15.2 이상에서는 dev 모드에서의 성능이 떨어지는 감이 있다고 하여 15.1 버전을 사용
• Typescript

라이브러리

• 상태관리
  • 서버: tanstack query
    • 상품 목록 (재고 상태 실시간 반영)
    • 특가 마감 시간 실시간 업뎃
    • Q. 왜 굳이 tanstack query 사용?
      • 장바구니에 상품을 추가하거나 수량을 변경할 때 mutate를 활용해 데이터 업데이트를 효율적으로 관리하기 위해서.
    • 0719 기준 참고 사항
    • 현재 /app/api/ 경로에 GET 메서드만 구현되어 있어 데이터 조회만 가능
    • POST, DELETE 기능은 향후 구현 예정
  • 클라이언트: zustand
    • navbar에서 페이지 이동 시에 스와이프 제스처로 탭을 넘기거나 선택하는 방식임. 선택하는 스와이프로 넘기는 행동은 url이 유지 된 상태에서 쿼리 파라미터의 값만 바뀌어야 가능한 행동이기에 클라이언트로 관리되어야함.
      • 근데 이러면 SEO가 관리가 안되는거 아닌가요? 라고 생각할 수 있는데, SEO는 상품 상세 페이지에서 SSR로 받아오고 있음. 그리고 애초에 홈화면은 유저별로 추천상품이 다르게 뜨기 때문에 클라이언트에서 관리되는게 맞음.
    • 상품 상세 페이지에서 선택한 옵션이 장바구니에 담길 때
    • 1분 스크롤 여부 -> 4 포인트 적립
    • Q. 왜 usestate 말고 zustand 사용?
      • navbar의 탭 상태나 장바구니에 상품 담기 등 전역에서 관리되는 상태가 많음.
      • 또한 zustand는 reducx 보다 번들 크기가 10배 작기에 zustand 사용.
  • 폼: React Hook Form
    • 상세 페이지와 장바구니 페이지에서
    • 상품 수량과 종류 입력 및 변경.
    • 상세 페이지에서는 드롭다운 토글에서 선택하거나 +/-버튼으로 수량 및 종류 선택
    • 장바구니 페이지에서는 +/- 버튼으로만 수량 변경 가능.
    • Q. 왜 React Hook Form 사용?
      • ONLY 수량만 다뤘으면, 그냥 useState로 공통 훅을 만들어서 관리하는게 나을 수도 있음.
      • 그러나 옵션 별로 상품의 최대 수량이 다르거나, 선물 포장 옵션과 같이 필드간의 연결성이 복잡해진다면 useState만으로 관리하기는 어려움. 모든 엣지 케이스를 고려하기 힘들기 때문.
      • 따라서 React Hook을 사용해서 추상화 하는게 낫다고 판단함.
• 스타일링
  • tailwind && shadcn/ui
    • shadcn/ui는 프로젝트 패키지에 설치하는게 아니라 npx로 일회성 설치를 해서 사용하기에 번들 크기가 매우 작음. tailwind는 build시 사용되지 않는 css를 제거해서 css 파일 크기를 줄임.
• 패키지 매니저
  • pnpm
    • pnpm은 패키지를 내 PC의 보조 기억 장치 자체에 저장하기에 디스크 공간을 절약함. 또한 modules 구조를 npm이나 Yarn classic처럼 flat하게 만드는게 아니라, 심볼릭 링크를 사용해서 필요한 패키지만 직접 modules 최상위 폴더에 연결함. 이는 다른 환경에서 빌드할 때의 reproducibility를 높여줌.
• 데이터
  • Faker.js를 활용해서 가상의 데이터 생성 후 dp.json에 저장하고
  • json-server로 위 db를 서비스

배포 환경

• Vercel

포맷팅

• prettier
• eslint
• husky