react-app-rewired 라이브러리?

CRA에서 제공하는 eject와 react-scripts의 포크를 생성하지 않고 웹팩 설정들을 변경한다.

 

no config라는 제한을 두지 않고 CRA의 이점을 제공한다.

 

사용자가 원하면 플러그인 및 로더들을 추가할 수 있다.

 

주의사항

해당 라이브러리를 사용하면 CRA가 제공하는 개런티를 깨트리게 된다.

 

사용하는 순간 설정 들을 소유하게 되는 것이기 때문에 지원되는 것들이 제공되지 않는다.

 

라이브러리를 설치

npm install react-app-rewired --save-dev
// or
yarn add -D react-app-rewired

 

최 상단 경로에 config-overrides.js라는 파일을 생성하고, 아래와 같이 코드를 입력한다.

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

 

packages.json 파일 안에 script 설정을 변경한다.

/* package.json */

"scripts": {
	"start": "react-app-rewired start",
	"build": "react-app-rewired build",
	"test": "react-app-rewired test",
	"eject": "react-scripts eject"
}

다만 주의해야 하는 점은, eject 설정을 건드리면 안된다. 

 

eject는 단 한 번만 사용할 수 있으며, 그 후에는 웹팩 설정에 대한 권한이 생기기 때문에 react-app-rewired를 필요로 하지 않게 된다.

만약 웹팩 설정, 테스트(jest) 설정, 웹팩 데브서버 등 추가적인 설정이 필요하다면 공식문서를 통해 확인해보세요. 이번 포스팅에서는 babel config 설정을 위한 글이기 때문에 생략하겠습니다..!

customize-css 라이브러리란?

customize-css 라이브러리는 react-app-rewired 라이브러리의 핵심 기능을 활용하여 create-react-app 버전 2 및 3 구성을 사용자 지정할 수 있는 유틸리티 세트를 제공합니다.

사용 방법

customize-cra를 사용하기 위해서는 react-app-rewired 라이브러리가 필수로 설치되어야 합니다. 말 그대로 customize-cra는 react-app-rewired 라이브러리의 핵심 기능을 활용하여 커스텀 할 수 있는 유틸성 함수를 제공하기 떄문입니다.

1. 아래와 같이 라이브러리를 설치합니다.

npm install customize-cra --save-dev
// or
yarn add -D customize-cra

1. 최 상단 경로에 config-overrides.js라는 파일이 있어야 하고, 만약 없다면 생성하여 추가적으로 설정한webpack, webpack-dev-server, babel 설정 파일들을 customize-cra에서 제공하는 api로 오버라이드 합니다.
   아래 코드와 같이 일반적으로 override라는 api를 사용하여 오버라이드 하려는 api들을 감싸 export 합니다.

/* config-overrides.js */

// webpack example

const {
  override,
  addDecoratorsLegacy,
  disableEsLint,
  addBundleVisualizer,
  addWebpackAlias,
  adjustWorkbox
} = require("customize-cra");
const path = require("path");

module.exports = override(
  // enable legacy decorators babel plugin
  addDecoratorsLegacy(),

  // disable eslint in webpack
  disableEsLint(),

  // add webpack bundle visualizer if BUNDLE_VISUALIZE flag is enabled
  process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),

  // add an alias for "ag-grid-react" imports
  addWebpackAlias({
    ["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
  }),

  // adjust the underlying workbox
  adjustWorkbox(wb =>
    Object.assign(wb, {
      skipWaiting: true,
      exclude: (wb.exclude || []).concat("index.html")
    })
  )
);

config-overrides.js 파일에 babelrc 설정하기

babelrc를 오버라이드 하기 위해서 먼저 babelrc 파일을 생성하여 설정을 합니다. 해당 포스팅에서는 css prop을 설정해야 하기 때문에 css prop에 대한 설정을 해보겠습니다.

1. babel config 관련 라이브러리 설치
   타입스크립트를 사용하지 않는다면 두 번째 @babel/preset-typescript는 제외하고 설치합니다.

npm install @babel/preset-react @babel/preset-typescript @emotion/babel-plugin --save-dev
// or
yarn add -D @babel/preset-react @babel/preset-typescript @emotion/babel-plugin

1. babelrc 파일 생성 후 코드 추가
   마찬가지로 타입스크립트를 사용하지 않는다면 중간에 @babel/preset-typescript는 제외합니다.
   css prop에 대한 설정을 확인하고 싶다면 공식문서를 통해 알 수 있습니다!

{
  "presets": [
    [
      "@babel/preset-react",
      { "runtime": "automatic", "importSource": "@emotion/react" }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": ["@emotion/babel-plugin"]
}

1. config-overrides.js 파일에 babelrc 오버라이딩
   useBabelRc는 생성된 babelrc 파일로 오버라이드하며, getBabelLoader는 기존의 바벨 로더를 가져옵니다.
   removeBuiltinBabelConfig함수를 보면 기존의 바벨 설정 중 preset과 plugin을 비운 config를 반환합니다. 비워져있는 config는 프로젝트에서 새롭게 생성한 babelrc파일을 오버라이드합니다.
   깃허브에 useBabelRc 함수를 보면 getBabelLoader 함수를 사용하는 것을 볼 수 있는데, getBabelLoader의 파라미터인 config는 webpack의 Configuration 이라는 타입을 사용하는 걸 알 수 있습니다.

const { override, useBabelRc, getBabelLoader } = require('customize-cra');

const removeBuiltinBabelConfig = (config) => {
  getBabelLoader(config).options.presets = [];
  getBabelLoader(config).options.plugins = [];
  return config;
};

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

1. tsconfig.json 파일에 css prop을 위한 설정 추가

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react"
  },
	...
}

마치며

공유 드린 emotion 공식문서에는 CRA에서는 css prop을 지원하지 않는다고 합니다. 그래서 JSX Pragma를 사용할까 고민하다가, 공부 할 겸 설정했었는데, 처음이였고, 급해서 그런지 헤맸었던 기억이 있었어요. 공유드린 코드가 좋은 예시 인지는 모르겠지만, 현재는 잘 작동하고 있습니다. 여하튼 CRA에 대해 조금이나마 더 알게 되었던 계기가 아니었을까 생각해봅니다..!

References

https://github.com/timarney/react-app-rewired#readme

https://github.com/arackaf/customize-cra#readme

https://github.com/emotion-js/emotion/issues/2202