Dep 25 client repo setting

[kimyouknow]

⛳️ Task

FE 레포 레포 초기 세팅 작업을 진행했어요

1. 라이브러리 설치

• next13: 13.4.3 page router -> app router
• axios: ^1.4.0
• react-query: ^4.29.7
• zustand: ^4.3.8
• tailwind.css: 3.3.2
• react-hook-form: ^7.43.9 - (+ yup, @hookform/resolvers )
• storybook : ^7.0.14
• msw: ^1.2.1
• nvm : 최신 버전의 LTS release (v18.16.0)

2. husky, eslint, prettier

우선 제가 사용했던 규칙을 적용해 두었습니다. 리뷰로 의견 남겨주시면 좋을 것 같아요!

주요기능

• 커밋 전에 lint stage 실행
• 저장시 auto fix
• React 컴포넌트 스타일 : arrow-function
• 네이밍 컨벤션 : 지난 회의에서 정한대로 설정
• import 순서 정렬
• prettier-plugin-tailwindcss
• lint-staged 설정은 package.json 하단에 있어요.

3. 실행 방법

# Install dependencies
$ pnpm install

# Start development server
$ pnpm dev

# Start development server with MSW
$ pnpm msw

# Start storybook
$ pnpm sb

4. 폴더 구조 및 테스트용 코드

src/components/Tester에 react-query, zustand, rhf, storybook 관련 예시가 있어요!

.
├── public
└── src
    ├── app # next13 app router
    ├── components
    │   └── Tester
    ├── hooks
    │   └── api # useQuery
    ├── lib
    │   └── api
    │       ├── config # axios config: instance, interceptor, type etc...
    │       └── domain 
    ├── mocks # msw handler & init
    │   └── tester 
    ├── stores # zustans store
    └── utils

✍️ Note

이슈1. MSW

혜현님이 말한대로 MSW에서 next13의 app router를 공식적으로 지원하지 않는다고 하네요. mswjs/msw#1610 (comment)

setupWorker()는 정상적으로 실행되서 가능하지만 setupServer()가 서버 단에서 실행되지 않아서 서버 fetch가 mocking되지 않는 듯합니다. setupWorker도 "첫 렌더링시 서비스 워커 등록이 되지 않아 네트워크 오류가 발생하는 문제가 문제"가 있습니다.

다른 mocking 대안을 찾아보거나 서버 개발 전에 Storybook(클라이언트 컴포넌트)개발 용으로 잠깐 써야 할 것 같아요!

참고: https://www.notion.so/depromeet/MSW-41c98fc39f074efb864f8764edc9c233?pvs=4

이슈2. react-query

react-query 도입과, server fetch 관련해서 지영님이 노션에 정리해주셨어요. 우선 기본적인 Provider 설정만 했는데 이후 얘기하고 다시 설정할 필요가 있어요!

참고: https://www.notion.so/depromeet/React-Query-812641b8322d4f7d901aad65d503c5d5?pvs=4

이슈3. storybook 7버전

6버전에서 7버전으로 바뀌면서 템플릿이 달라졌어요. 7버전에서 추천하는 방식은 여기를 참고해주세요.

참고: https://www.notion.so/depromeet/Stroybook7-ba2b3073bbe0494eb9e116bf631165b7?pvs=4

⚡️ Test

📸 Screenshot

AS-IS	TO-BE

📎 Reference

[99-zziy]

와...우.... 수고하셨습니다 😭

[hyehyeonmoon]

tailwind, nextjs, react-hook-form 등 안 써본 기술들이 많네요. 공부가 답이군요.
각 라이브러리 지원도 살피시고 config 구성하시느라 고생하셨습니다!👍👍👍

[darae07]

템플릿 맛집이네요..! 린트 설정까지 잘보았습니다!:+1:

[darae07]

저도 이경로 좋아해요!ㅋㅋㅋ