CRACO (Creat React App Configuration Override)

사용 이유

CRA는 프로젝트 디렉토리를 간결하게 유지하기 위해 웹팩 설정이나 script 폴더들을 숨겨놓는데, 이를 커스텀해야 할 경우, eject 명령어를 통해 추출하여 사용할 수 있다. 하지만, 추출된 폴더 및 파일들은 디렉토리 상에 노출되며, 이전 상태로 돌아갈 수 없다는 단점이 있다.

따라서 우리가 필요한 설정만을 Overriding 하는 패키지들이 등장하게 되는데, CRACO는 CRA에 config 설정을 덮어쓰기 위해 등장한 패키지이다.

설치

npm install craco

명령어 수정

// package.json
"scripts": {
	"start": "craco start",
	"build": "craco build",
	"test": "craco test",
	"eject": "craco eject"
}

craco config 파일 추가

/* craco.config.js */
const path= require(`path`);

module.exports= {
  webpack: {
    alias: {
      "@components": path.resolve(__dirname, "src/components"),
    },
  },
};

오버라이딩 하고 싶은 설정은 craco.config.js 파일에 적용하면 된다.

참고 : This tells webpack how to resolve the aliased import.

tsconfig 업데이트

/* tsconfig.js */
"compilerOptions": {
	"baseUrl": "./src",
	"paths": {
	      "@components/*": ["components/*"],
	      "@pages/*": ["pages/*"],
	}
}

path에 따라 사용할 alias를 지정해줍니다.

참고 : This tells Typescript how to resolve references to import {} from "@components"