$ yarn install # 패키지 설치
$ yarn start # 개발 환경 구동
$ yarn test # 유닛 테스트
$ yarn cypress # e2e 테스트
"start": "CRA start",
"build": "프로덕션 빌드",
"test": "Jest 테스트",
"eject": "CRA eject",
"lint": "ESLint 검사",
"cypress": "e2e 테스트",
"predeploy": "github pages 배포 전 빌드",
"deploy": "github pages 배포"
(back to top)
- Chrome
- Firefox
- Safari
- Edge
- IE 11
├── README.md
├── cypress # e2e 테스트 코드
├── public
├── src
│ ├── api # api modules
│ ├── components # React components for common use
│ ├── constants # constants variables for common use
│ ├── containers # React containers
│ ├── context # utility of context api
│ ├── helpers # helpers for common use
│ ├── hooks # custom hooks
│ ├── styles # style sheet properties in js
│ ├── App.tsx
│ ├── index.tsx
├── package.json
(back to top)
- Create-React-App: React App 개발, 운영, 테스트 및 배포에 대한 스크립트를 제공하여 개발 생산성을 향상
- 다음의 라이브러리가 자동 설정 & 설치됨
- react
- react-dom
- react-scripts
- typescript
- jest
- webpack
- babel
- @testing-library/*
- web-vitals
- etc
- CSS in JS 방식으로 스타일 시트를 모듈, 함수화하여 재활용성을 향상하기 위해 다음의 라이브러리를 설치
- Styled Components
- Styled Normalize
- Custom Hooks 의 유닛테스팅을 위해 다음의 라이브러리를 설치
- @testing-library/react-hooks
- react-test-renderer
- 코딩 스타일 및 코드 품질을 위해 다음의 라이브러리를 설치
- eslint-config-prettier
- eslint-plugin-prettier
- eslint-plugin-jest
- prettier
- 위의 라이브러리를 자동 실행하기 위해 설치
- e2e 테스트를 위해 설치
- Github Pages 통해 데모를 제공
- 폴리필 적용을 위해 설치 (IE 11)
- @types/* : typescript definitions
Demo
(back to top)