create-react-app 에서 eject를 사용하면?

eject를 사용하는 머리 좋은 똑똑한 사람들이 있지만, 나는 돌고래 지능이라서 해놓고 감당도 안되고, 원복도 안되고, 개빡치면서 관리가 안된다.

eject를 안하고 babel 과 webpack 를 설정을 하려고 여러가지를 찾아보니까 craco와 react-app-rewired, customize-cra같은 패키지가 있었다.

이름이 맘에 들어서, react-app-rewired와 customize-cra를 사용해보려고 한다.

react-app-rewired 와 customize-cra 란?

react-app-rewired 홈페이지

customize-cra 홈페이지

앞서 위에서 말한 그대로 eject를 안하고 babel, webpack을 설정할 수 있는 라이브러리이다.

처음 사용할 때는 이해가 안갔는데, 삽질을 통해서 이해가 가기 시작했다.

설치

npm install --save-dev react-app-rewired customize-cra

설정 파일 생성

.babel.config.js 를 생성한다.

// .babel.config.js


const COMMON_PLUGINS = [
  '@babel/plugin-syntax-dynamic-import',
  '@babel/plugin-proposal-nullish-coalescing-operator',
  '@babel/plugin-proposal-optional-chaining'
];
const config = {
  plugins: [
    ...COMMON_PLUGINS
  ]
};

module.exports = () => {
  return config;
};

중요파일!!!!

config-override.js 파일을 생성한다.

여기서 웹팩 설정과 다양한 옵션을 넣을 수 있고, useBabelRc 를 사용하면, .babel.config.js를 가져오는 것 같다.

// config-override.js

/** @format */
const {
  useBabelRc,
  addWebpackAlias,
  override
} = require('customize-cra');

module.exports = override(
  useBabelRc(),
  addWebpackAlias(),
);

d

실행 설정

package.json을 설정하여, config-override를 적용 설정한다.

// package.json

{

"scripts": {
    "start": "react-app-rewired start",
     ...
  },
...
}

위처럼 실행을 react-app-rewired start로 바꾸어주면 된다.

휴 이정도면 돌고래랑 홍차한잔 해도 될까?

템플릿 깃허브