CRA(Create React App) 관련

[!info] 공식문서에서 CRA는 더 이상 추천하지 않는다.
대신 nextjs 추천. next가 뭘 해주는건지는 migration 가이드를 보면 감을 잡을 수 있다.
Upgrading: Migrating from Vite | Next.js

디버깅? source map

• source map이 함께 생성됨. (default)
• source map은 원본 파일은 아니고 원본 파일과의 mapping 정보를 담고 있는 json 형태의 파일.
• 개발자 도구에서 원본 소스파일과 자동으로 연결해서 보여준다.
• 따라서프로덕션 빌드에서는 제거 옵션 주고 빌드해야 함.

browserlistrc?

CRA를 쓰더라도 .browserlistrc 적용 된다. 공식 docs에 나와 있지는 않지만..

https://github.com/browserslist/browserslist/issues/391

CRA(Create React App)으로 프로젝트 생성하게 되면 기본적으로 .babelrc 설정이 불가능함.

• react-script의 webpack.config.json에 babelrc: false로 되어 있기 때문.
  • 일단 이 상태면 .babelrc를 쓰든, babel.config.json를 쓰든, 별도 파일 없이 package.json 안에 “babel” 설정을 두든 다 적용되지 않는다.
• 이를 해결하려면 두 가지 방법이 있음.
  • npm eject하는 방법 :관리 대상이 너무 늘어나서 권장하지 않음.
  • react-app-rewired로 설정을 override하는 방법

react-app-rewired로 CRA 프로젝트에서 babel 커스텀 설정하기

1. useBabelRc()만 호출하기

• https://micalgenus.github.io/articles/2019-02/React-eject-%EC%97%86%EC%9D%B4-babelrc-%EC%A0%81%EC%9A%A9/
• 내 경우에는 적용되지 않았다.

2. useBabelRc 뿐만 아니라 configFile도 잡아주기

• babelrc: false, configFile: false로 되어 있길래 configFile을 잡아줘야 하나? 싶어서 테스트

  // config-overrides.js 아래와 같이 설정
  const { useBabelRc, override, getBabelLoader } = require("customize-cra");
  const setBabelLoaderConfigFile = (config) => {
    getBabelLoader(config).options.configFile = "./babel.config.json";
    return config;
  };
  module.exports = override(
    useBabelRc(),
    setBabelLoaderConfigFile
  );
  

  BABEL_SHOW_CONFIG_FOR 이용해서 최종 설정 조회
  {
  "babelrc": true,
  "configFile": "./babel.config.json",
  ...
  

• 적용 잘 된 것 같으나 실제로 babel.config.json가 적용되지는 않았다. (왜?)

3. .babelrc 설정을 모두 config-overrides.js로 옮김

const { override, addBabelPlugin, addBabelPresets } = require("customize-cra");
module.exports = override(
    ...addBabelPresets(
        "@babel/preset-env",
        "@babel/preset-react"
    ),
    addBabelPlugin(["@babel/plugin-transform-runtime",{"corejs":3}])
);

{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "/Users/.../node_modules/babel-preset-react-app/index.js",
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    ...
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ]
  ],
  ...

• 이제야 preset과 plugin이 제대로 적용된다.