React 프로젝트 빌드 시 사용하는 기초 환경설정입니다.
CRA를 사용하지 않고 Webpack, Babel로 개발, 프로덕션을 구분한 빌드 환경설정을 하였습니다.
Jest, RTL을 사용하여 테스트 환경설정을 하였고, PR을 만들면 자동 테스트 후 PR에 테스트 결과 코멘트가 달리도록 기본 설정했습니다.
해당 템플릿으로 새 저장소 만들어서 프로젝트 시작하기
-
라우팅 : React Router
-
CSS 스타일링 : emotions
-
코드 포매팅 : Prettier
-
전역상태 관리 : Recoil
-
API 연동 : Axios, React Query
-
테스트 : Storybook, Jest, React Testing Library, MSW
-
패키지 매니저: Yarn
-
빌드 환경설정 : Webpack, babel-loader
-
기타 특징
- 절대경로
- import 순서 자동정렬
- CSS 순서 자동정렬
- github workflow(PR 테스트 후 코멘트)
- PR template
- development, production 모드에 따라 최적화된 빌드 환경설정 구분
- WebAPI, ECMAScript, CSS 브라우저 호환성 체크 린트 플러그인 추가
-
node version : 18.16.1
-
설치
yarn- development 모드로 구동
yarn run start:dev- production 모드로 빌드
yarn run build:prod- 테스트
yarn run test- 스토리북
yarn run storybook