CRA 환경에서 폴리필 설정하기 (feat. core-js 라이브러리)

Create React App(CRA)은 React 애플리케이션을 빠르게 구성할 수 있는 도구입니다. CRA를 사용하면 자동으로 바벨(Babel) 설정이 적용되며, 최신 자바스크립트 문법(ES6+)을 사용할 수 있습니다. 하지만 모든 브라우저에서 ES6+ 문법이 지원되는 것은 아니기 때문에, 폴리필(polyfill)을 설정하여 이를 해결할 필요가 있습니다.

CRA에서는 @babel/preset-env를 사용하여 폴리필을 설정할 수 있습니다. 이를 위해서는 다음과 같은 세 가지 단계가 필요합니다.

1. @babel/preset-env 설치하기

@babel/preset-env는 폴리필을 설정하기 위해 필요한 패키지입니다.
다음 명령어를 사용하여 설치할 수 있습니다.

npm install @babel/preset-env --save-dev

2. .babelrc 파일 설정하기

.babelrc 파일을 생성하고, @babel/preset-env를 설정합니다.
다음은 모든 폴리필을 자동으로 로드하는 설정 예시입니다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": "3"
      }
    ]
  ]
}

useBuiltIns 옵션은 폴리필을 자동으로 로드하도록 설정합니다. usage 값을 지정하면, 사용한 코드만 폴리필이 로드됩니다. entry 값을 지정하면, 모든 코드에 대한 폴리필이 로드됩니다. false 값을 지정하면, 폴리필을 자동으로 로드하지 않습니다.

corejs 옵션은 @babel/preset-env가 core-js 라이브러리를 사용하여 폴리필을 제공하도록 설정합니다. 3 버전을 사용하도록 설정했습니다.

3. src/index.js 파일에서 import '@babel/polyfill'; 추가하기

위의 설정으로는 Promise, Set, Map 등의 폴리필은 로드할 수 있지만, Array.from, Object.assign 등의 폴리필은 로드할 수 없습니다. 따라서 필요한 폴리필을 수동으로 추가해야 합니다.

src/index.js 파일 상단에 import '@babel/polyfill';을 추가하면 필요한 폴리필이 자동으로 로드됩니다.

이 방법은 모든 폴리필을 로드하기 때문에 번들 크기가 커질 수 있습니다. 따라서 useBuiltIns 옵션을 사용하여 필요한 폴리필만 로드하도록 설정하는 것이 좋습니다.

---

또다른 방법으로는, @babel/preset-env와 core-js 라이브러리를 사용하여 설정할 수 있습니다.

먼저, core-js 라이브러리를 설치합니다.

npm install core-js

그리고, babel.config.js 파일을 만들어서 다음과 같이 설정합니다.

module.exports = function (api) {
  api.cache(true); // 바벨이 변환 작업을 수행할 때 이전에 수행한 작업을 캐시하여 다음 번 실행 시 속도를 높이게 해줌
  return {
    presets: [
      [
        "@babel/preset-env",
        {
          useBuiltIns: "usage",
          corejs: "3.19",
        },
      ],
      "@babel/preset-react",
    ],
  };
};

위 설정에서 useBuiltIns는 폴리필을 사용할 방식을 설정하며, "usage" 옵션을 사용하면 필요한 폴리필만 추가하고, "entry" 옵션을 사용하면 모든 폴리필을 추가합니다. corejs 옵션은 core-js 버전을 지정합니다.
이 설정은 babel-loader를 사용하여 바벨을 실행할 때 적용됩니다.