CRA(Create React App)에 CRACO(CRA Configuration Override)를?

(서론)

CSS 스타일링 라이브러리로 Emotion을 사용하기 위해 ui를 작성하여 실행해봤지만 어째서인지 에러메시지만 자꾸 뜬다.

이를 해결하기위해 eject를 수정하거나 craco를 설치하여 해결할 수 있다고 하여 craco를 설치하여 해결하기로 했다.

CRACO란?

Create-React-App Configuration Override의 약어이다.
CRA(Create-React-App) 프로젝트의 기본 설정을 'eject'하지 않고도 쉽게 재정의(override)할 수 있게 해주는 도구이다. 
CRACO를 통해 CRA를 기반으로 하면서도 사용자 정의가 필요한 요구사항을 충족할 수 있다.

https://craco.js.org/

Configure CRA without ejecting. | CRACO

 

이제 여기서 eject가 무엇인가 궁금할것이다.

eject란?

eject의 사전적의미는 '튀어나오게 하다, 뿜어내다, 배출하다' 처럼 무언가 "안"에서 "밖"으로 나오게 하는걸 의미하고 있다.
CRA에서 제공하는 명령어인 eject도 이와 같은 역할을 한다.
CRA 내부에 감춰져 있던 기본설정인 Webpack, Babel, ESLint 등의 설정 파일들이 밖으로 드러나게 되고, 사용자는 이를 직접 수정,정의 할 수 있게 된다.

 

eject는 언제 사용하나?

기본적으로 CRA는 복잡한 설정을 추상화해서 사용자가 빠르게 React 프로젝트를 시작할 수 있도록 설계 되었다.
그러나 프로젝트가 복잡해져 CRA의 기본 설정만으로는 요구사항을 충족하기 어려울 때, eject명령어를 사용하여 이 설정들을 직접 수정할 수 있다.

 

eject 단점

프로젝트 루트에 많은 설정 파일이 추가되어 코드관리가 어려워질 수 있고 복잡성이 증가한다.
CRA에서 제공하는 자동 업데이트 혜택을 잃게 된다.
한 번 실행하면 되돌리기 어려워서 CRA의 기본설정으로 돌아가려면 프로젝트를 다시 초기화해야한다.

 

그래서 eject는 최후의 수단으로 사용해야한다고 한다.

 

 

eject없이 CRA를 커스터마이징할 수 있는 도구인 CRACO를 선택한 이유이다.

(본론 겸 결론)

CRACO를 설치하여 적용해보자!

 

1. CRACO설치

npm i @craco/craco

 

2. 스크립트 수정

프로젝트 루트 디렉토리에 있는 package.json에서 CRA의 기본 react-script명령어를 CRACO로 대채한다.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test"
}
react-scripts 부분을


"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}
이렇게 craco로 수정한다.

 

3. craco.config.js 생성

프로젝트 루트 디렉토리에 craco.config.js 이름의 파일을 생성하고 설정을 추가한다.

// craco.config.js
module.exports = {
  babel: {
    plugins: ['@emotion/babel-plugin'],
    presets: ['@emotion/babel-preset-css-prop'],
  },
};

나의 경우엔 emotion설치로 에러가 뜬 경우라 babel에 emotion설정을 추가해주었다.

 

 

---

(etc)

'넘겨도 될 부분'  (기왕이면 바로 craco를 설치하자.)

css prop이 사용이 안되서 에러메시지를 처음 본 순간 craco설치를 결정한 게 아니다.

나름대로 해결하려했던 과정을 적어보려고 한다.

 

1. @jsxImportSource 주석

이런 주석의 스타일들은 코드라인 최상단에 위치해야한다. 주석이 있어서 다행히 실행은 되지만 모든 파일마다 최상단에 이 주석을 추가할 노릇을 아니지않는가!

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import React from 'react';

const MainPage = () => (
  <div css={css`color: red;`}>
    Hello, Emotion!
  </div>
);

 

2. 주석없이 css prop을 사용하기 위한 Babel 플러그인 설정

• @emotion/babel-plugin 설치

npm install @emotion/babel-plugin --save-dev

• Babel 설정 파일에 플러그인 추가
  • .babelrc파일을 생성 후( 이미 있다면 추가) 

{
  "plugins": ["@emotion/babel-plugin"]
}

 

3. @babel/plugin-proposal-private-property-in-object 설치

'bael-preset-react-app'이 ' @babel/plugin-proposal-private-property-in-object' 패키지 종속성에 명시하지 않아서 발생하는 경고가 떴다. 그래서 추가로 설치해준다.

npm install --save-dev @babel/plugin-proposal-private-property-in-object

 

에러메시지는 사라졌지만 그럼에도 주석없이는 css prop이 작동을 하지 않았다.

그러고나서 craco를 설치하기로 결정했다.

 

craco를 설치 후 css prop이 정상적으로 작동을 했다.