wonsss/react-boilerplate

마르코의 빠른 React 프로젝트 시작을 위한 보일러 플레이트

React Boilerplate

소개

React 프로젝트 빌드 시 사용하는 기초 환경설정입니다.

CRA를 사용하지 않고 Webpack, Babel로 개발, 프로덕션을 구분한 빌드 환경설정을 하였습니다.

Jest, RTL을 사용하여 테스트 환경설정을 하였고, PR을 만들면 자동 테스트 후 PR에 테스트 결과 코멘트가 달리도록 기본 설정했습니다.

템플릿 사용방법

해당 템플릿으로 새 저장소 만들어서 프로젝트 시작하기

사용 라이브러리

• React

• TypeScript

• 라우팅 : React Router

• CSS 스타일링 : emotions

• 코드 포매팅 : Prettier

• 린팅 : ESlint, StyleLint

• 전역상태 관리 : 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 브라우저 호환성 체크 린트 플러그인 추가

Scripts

• node version : 18.16.1

• 설치

yarn

• development 모드로 구동

yarn run start:dev

• production 모드로 빌드

yarn run build:prod

• 테스트

yarn run test

• 스토리북

yarn run storybook