CRA란?
Create React App (CRA)는 React 애플리케이션을 쉽게 생성할 수 있도록 도와주는 공식 도구입니다. 하지만 CRA는 기본적으로 제공하는 Webpack 설정 외에는 커스터마이징하기가 어렵습니다.
그 이유는 Webpack 설정 파일을 eject명령어를 사용하는 것이 아니면, 기본적으로 숨겨져 있는 설정 파일을 직접 수정할 수 없기 때문입니다.
이를 해결하기 위해 나온 도구 중 하나가 craco입니다. craco는 CRA를 사용하여 생성한 프로젝트의 Webpack 설정을 커스터마이징할 수 있도록 도와주는 도구입니다.
Craco에 대해 더 자세히!
craco는 CRA 프로젝트에서 CRA가 제공하는 스크립트를 대체하고, Webpack 설정을 변경합니다. 이를 통해 CRA 프로젝트에서도 다양한 Webpack 설정을 커스터마이징할 수 있습니다.
craco는 다양한 플러그인과 프리셋을 제공하며, 이를 사용하여 CRA 프로젝트에서 다양한 작업을 수행할 수 있습니다. 예를 들어, craco를 사용하여 다음과 같은 작업을 수행할 수 있습니다.
- TypeScript 설정 추가
- Sass 또는 Less와 같은 CSS 전처리기 사용
- Tailwind CSS와 같은 CSS 프레임워크 사용
- Prettier와 같은 코드 포맷터 설정
- ESLint와 같은 코드 검사 도구 설정
- Jest 설정 추가 및 확장
- PWA(Progressive Web App) 지원
craco를 사용하여 TypeScript 설정을 추가하면, CRA에서 제공하는 TypeScript 설정 이외에 추가적인 설정을 쉽게 할 수 있습니다.
