이전에 백엔드로 만들었던 색판매 프로젝트의 프론트를 만들어볼 예정이다.
구현 순서는 다음과 같다.
폴더 구조
- pages - 라우트에 대응하는 페이지 컴포넌트(컨테이너)
- components - 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트
- utils - 유틸리티
- hooks - 리액트 훅
- model - 모델(타입)
- api - api 연동을 위한 fetcher등
React 프로젝트 생성: CRA vs Vite
설치 속도
CRA
- 수초 ~ 수십초 걸림
Vite - 수백 밀리초
수정 반영 속도
CRA
- 바꾼 내용이 적용되는데 약간 딜레이가 있음
Vite - 결과 확인이 거의 즉각적임
설정 자유도
CRA
- 내부 구조가 감춰진 블랙박스, 특별 긴능을 넣을려면 해체를 하거나 설정파일을 다뤄야함
Vite - vite.config.ts파일 하나로 끝
최적화
CRA
- Webpack 기본 설정 그대로 사용
- 최적화가 필요하면 내부 파일을 직접 수정해야함
Vite - Rollup 기반으로 간단함
- 가벼운 프로젝트에 적합
CLI
{
...
"scripts": {
...
"tyepscheck": "tsc --noEmit --skipLibCheck"
}
}package.json파일의 scripts에 복잡한 CLI를 넣으면 간단하게 사용할 수 있게 만들어준다.
해당 명령어는 타입 체크를 하는 명령어로 직접 추가한 명령어이다.
이렇게 CRA로 만든 폴더는 package.json과 tsconfig.json이라는 파일을 가지게 되는데,
npm과 typeScripte의 설정 파일 역할을 한다.
