cla6shade
commented
2 months ago 프로젝트 구조
Vite, yarn berry를 사용합니다. 폴더 구조는 FSD 구조를 사용하도록 결정했습니다.
코드 컨벤션
Airbnb + eslint를 사용하여 코드 컨벤션을 관리합니다. 단, eslint v9.0으로 넘어오면서 의존성 이슈가 다수 생겨서 8.57.0 버전을 써야 할 수도 있습니다.
Commit message convention
AngularJS Commit message Convention을 사용합니다.
프로젝트 세팅
본 이슈는 프로젝트 세팅에 대한 제 의견을 제시합니다. 어디까지나 개인적인 생각일 뿐이니 자유롭게 의견을 제시해주세요.
번들러 설정
번들러 및 패키지 관리자는 vite + yarn berry를 사용하면 좋을 것 같습니다. yarn berry와 vite 모두 기존에 우리가 사용하던 도구인 npm, Create-React-App 보다
속도면에서 우수하고, 특히 yarn berry의 경우 npm의 단점들을 커버하는 장점들이 여럿 존재합니다. 아래 문서를 읽어보시면 좋을 것 같습니다! yarn berry란?, Vite vs Create React App프로젝트 구조
제가 조사해본 구조로는 FSD(Feature-Sliced), Atomic Design, DDD(Domain-Driven) 등이 있는데, 각자 사용해본 시스템이 있다면 공유해보는 것도 좋을 것 같습니다. (저는 Atomic Design System만 적용해봤습니다)
Code Convention
이전에 회의했던 대로 Airbnb Javascript Style Guide를 사용합시다! 경우에 따라 husky, prettier 등의 도구를 사용할 수도 있을 것 같습니다. (다만 eslint-config-airbnb패키지 의존성의 일부가 최신 버전의 eslint (v9)를 지원하지 않기 때문에, eslint 8.57.0 버전을 사용해야 할 것 같습니다..)
기타
Step2 때 사용했던 emotion, react-hook-forms, axios, react-router-dom을 Step3에서도 그대로 사용하면 좋을 것 같고, 테스트 도구의 경우 vite와 호환성이 좋은
vitest를 사용하면 좋을 것 같습니다.