[Craco] Craco 란?

이전에 CRA(Create-React-App)로 React 프로젝트를 생성할 땐 Webpack의 커스텀 필요성을 잘 느끼지 못했다.

하지만, 이번에 Boiler Plate를 제작하면서 추가적으로 설정할 부분들이 생겼다. (절대경로 alias 컴파일, Less Loader)

CRA에서는 설정파일이 숨겨져 있고, 이를 추출해서 각 config, babel 등 설정을 적용해야 하는 번거로움이 있기 때문이다.

 

그렇기에, React에서는 이러한 번거로움과 위험성을 없앨 수 있는 다양한 커스터마이징 패키지들이 존재한다.

오늘은 그 중 하나인 Craco(Create-React-App Configuration Override)에 대해 알아보고, 이후 포스팅에선 실제 적용사례로 이어가겠다.

 

---

💙 CRA Webpack 설정

CRA는 기본적으로 프로젝트 디렉토리를 간결하게 유지하기 위해 웹팩 설정이나 script 폴더들을 숨겨놓는다.

하지만, 이를 커스텀해야 할 경우 eject 명령어를 통해 이를 추출할 수 있다.

이렇게 추출된 폴더 및 파일들은 이제 디렉토리 상에 노출되며, 단 eject를 한 번 하면 이전 상태로 돌아갈 수 없다는 단점이 있다.

npm run eject

 

 

두 사진은 각각, eject 전 / 후의 CRA 디렉토리 구조이다. eject를 하게 되면 설정에 관련된 config, scripts 폴더 및 package.json의 dependency, babel 및 jest 설정코드가 드러난다.

또한, 한 번 eject를 하면 React APP의 버전업에 대한 구성요소 업그레이드를 할 수 없다는 단점도 존재한다.

 

이렇게 되면 디렉토리 구조가 복잡해짐과 더불어, 우리가 설정하고자 하는 부분만 적절하게 찾기가 매우 힘들다.

이러한 Webpack 설정의 번거로움을 대체하기 위해, 우리가 필요한 설정만을 Overriding 하는 패키지들이 등장하게 된 것이다.

 

 

💙 Craco 란?

Craco는 Create-React-App Configuration Override의 약어로, 말 그대로 CRA에 config 설정을 덮어쓰기 위한 패키지이다.

Webpack의 번거로운 설정을 줄이기 위해 다양한 오버라이딩 패키지들이 등장했으며, 대표적으로 Craco, react-app-rewired 등이 있다.

* react-app-rewired : CRA v2 경 출시. 필요한 모듈과 스크립트 문으로, webpack, babel 등 설정을 오버라이딩한다. (관련 링크)

 

 

1. 설치

npm install @craco/craco --save
yarn add @craco/craco

2. Command 수정

// package.json

"scripts": {  
	"start": "craco start",  
	"build": "craco build",  
	"test": "craco test",  
	"eject": "craco eject"  
}

그리고, package.json의 실행문 스크립트를 craco 스크립트로 수정해준다.

 

3. 설정파일 : craco.config.js

// craco.config.js

module.exports = {
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: 'tsconfig',
                baseUrl: './src',
                tsConfigPath: 'tsconfig.paths',
            },
        },
    ],
};

다음으로, 프로젝트 root 경로에 craco.config.js 파일을 만든다. 여기에, 우리가 오버라이딩 할 설정을 적용하면 끝나는 것이다!

(위 예시는, 프로젝트 디렉토리의 절대경로 및 alias를 컴파일하기 위해 Craco를 설정하는 부분이다. 이는 다음 포스팅에 별도로 작성하겠다!)

 

Craco는 다양한 설정을 오버라이딩 할 때 유용하게 사용할 수 있다.

나같은 경우에는 절대경로 alias, Less Loader 설정들을 위해서 사용했고, 여기에 필요한 추가적인 라이브러리들은 설치해야 한다.

추가적인 사용법 및 지원하는 라이브러리들은 Craco Github 에서 자세히 알 수 있다!

---

📎 출처

 

- [Craco 기본] Craco Github : https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation. 

- [Craco] kingso 님의 블로그 : https://kingso.netlify.app/posts/react-craco/