October 15, 2019

CRACO

@craco/craco

Create React App Configuration Override의 약자로 create-react-app을 위한 configuration layer이다.

react 프로젝트를 설정하고 관리하는 CLI 도구인 CRA(Create-React-App)로 만들면, webpack 같은 것들을 자동으로 다뤄주기 때문에 웹 개발 프로젝트를 쉽게 설정 할 수 있다. 그러나 webpack config를 바꾸고 싶으면 프로젝트를 eject 시켜야하는데 그렇게 되면 CRA가 자동 컨트롤 연결이 끊어진다. 한 번 eject 하면 되돌릴 수 없고, 프로젝트의 react-scripts 업데이트와 동기화를 수동으로 해야한다. Craco는 이 문제를 해결해준다.

root 폴더에 craco.cofig.js 파일 한 개를 추가하면, eject을 사용하지 않고서 CRA의 장점을 가질 수 있고 eslint, babel, postcss의 configurations 등을 커스터마이징 할 수 있다.

craco.config.js

module.exports = {
  babel: {
    plugins: [
      ["@babel/plugin-proposal-decorators", { legacy: true }],
      ["@babel/plugin-proposal-class-properties", { loose: true }],
    ],
  },
}

이 경우 mobx를 decorator 문법으로 사용하기 위해 babel 설정을 해주려고 사용하였다.

참고