[craco.js] babel-plugin-styled-components 적용하기

const craco.js에서 babel-plugin-styled-components 적용하기 = ( Param ) => {

💻 return Result;

// craco.config.js

// eslint-disable-next-line no-undef
module.exports = {
  plugins: [
  	// craco를 통한 절대 경로 설정 등 webpack에 적용할 플러그인 정의
    // ...
  ],
  babel: {
    plugins: [
      // styled-components 플러그인 추가
      [
        'babel-plugin-styled-components',
        {
          // eslint-disable-next-line no-undef
          displayName: process.env.NODE_ENV !== 'production', // 빌드를 제외하고 styled-components 이름이 보이도록 함
          fileName: false,
        },
      ],
    ],
  },
};

 

📝 console.log( history )

 사이드 프로젝트 진행 중 절대 경로 설정 등에 관한 개발 환경 설정에 대해 맡게 되었다. 절대 경로는 tsconfig.json 뿐만 아니라 추가로 라이브러리를 적용해야 정상적으로 동작하는 것을 확인하고 craco 라이브러리를 통해 tsconfig.json의 설정을 적용할 수 있었다.

 

 추가로 팀원이 styled-components에 대한 디버깅을 하기 쉽도록 만들기 위해 이름이 클래스에 보였으면 좋겠다는 의견이 있었다. 그래서 구글링 해본 결과 babel-plugin-styled-components를 설치하지 않고는 다른 설정을 통해 하는 방법은 없어 보였다. 그래서 다른 개발 블로그에서 사용하던 방식을 적용해 보았지만 동작하지 않았다.

 

 역시 의심스러운 부분은 craco였다. craco를 사용할 땐 webpack에 대한 설정을 하고 싶어서 적용하다 보니 babel에 대한 적용을 할 수 있는지에 대해서는 모르고 있었다. 그렇게 여러 방법을 찾아보다 craco docs를 읽게 되었고 babel을 적용할 수 있는 예시가 있어 적용할 수 있었다.

 

 배포할 때는 굳이 이름이 보이지 않아도 된다고 생각이 되어 node의 환경 변수를 통해 빌드 모드일 때는 이름이 보이지 않도록 했다.

https://craco.js.org/docs/configuration/babel/

Babel | CRACO

}