Craco 개요

CRA(Create-React-App)은 기본적으로 디렉터리 구조를 간결하게 하기 위해 WebPack설정이 들어있는 config와 script폴더들을 숨겨놓는다.
이를 커스텀하고 싶다면 npm run eject를 이용해서 숨겨진 config와 script폴더를 추출 할 수 있지만, 이렇게 추출된 폴더 및 파일들은 디렉토리 상에 노출되며, 이전상태로 돌아 갈 수 없다는 단점이 있다.
두 사진은 각각 npm run eject를 하기전, 하고 난 후 디렉터리 구조를 나타낸다. config, scripts이 추출되었고 package-lock.json, package.json가 변경된것을 확인 할 수 있다.

이렇게 되면 디렉터리 구조가 복잡해지고, 필요한 설정을 찾기도 힘들기 때문에 우리가 필요한 설정만 overriding 하는 패키지들이 등장하였고 Craco또한 그 중 하나이다.

Craco 사용하기

설치

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

Command 수정

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

script 실행을 craco로 변경해준다.
이렇게 해야 craco를 통해 overriding한 설정들이 적용되어 실행된다.

설정하기

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

프로젝트 root 위치에 craco.config.js파일을 만들고 위 처럼 설정을 해주면 적용이 끝난다.

Craco 자주 쓰는 설정

이제 Craco에서 자주 쓰는 설정을 알아보자.
모든 레퍼런스는 Craco github을 따른다.

절대경로 설정하기

$ yarn add craco-alias @craco/craco

const CracoAlias = require("craco-alias");
module.exports =        {
            plugin: CracoAlias,
            options: {
                source: "options",
                baseUrl: "./src",
                aliases: {
                    "@api": "./api",
                    "@assets": "./assets",
                    "@components": "./components",
                    "@hooks": "./hooks",
                    "@pages": "./pages",
                    "@style": "./style",
                    "@utils": "./utils",
                },
            },
        },

less내 컬러 설정및 js 사용설정

$ yarn add craco-less @craco/craco

const CracoLessPlugin = require("craco-less");
const pallet = {
    "@primary-color": "#D65353",
    "@black": "rgba(37,34,36,0.2)",
    "@red": "#D65353",
    "@indigo": "#2D4362",
    "@sky": "#82C3DE",
    "@white": "#FFFFFF",
    "@yellow": "#F7C45F",
    "@lightgray": "#EAEAEA",
    "@gray": "#B0B0B0",
};

modeule.export = {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: pallet,
                        javascriptEnabled: true,
                    },
                },
            },
        },

제일 많이 쓰는건 위의 두개이고 나머지는 공식 깃헙을 보는게 좋다.