Craco로 emotion css prop 및 절대경로 config 세팅 (1)

직전 포스팅에 이어서..

 

이미 만들어진 CRA프로젝트의 세팅을 

입맛에 맞게 변경할 일이 생겼다.

 

최근에 익숙하게 사용하고 있는 

emotion.js의 css prop이랑

다른 모듈을 import 해올 때

출처 : 링크게더 프로젝트 코드

누가봐도 간편해보이는 이렇게 생긴

절대경로를 세팅하고자 마음먹었고

반나절 이상을 소요했다. 

 

 

뿌듯해서 글을 남겨보고자 한다.

 

 

우선

이 세팅을 하는데

craco가 필요하다.

 

craco란?

Create-React-App Configuration Override

의 약어이다.

 

CRA는 기본적으로

웹팩이나 script 설정을 숨겨놓기 때문에

npm run eject

명령어로 추출해서 config를 변경해야하지만

한번 변경할 경우 이전상태로 돌아갈 수 없다.

 

Craco는 이러한

단점을 커버하기 위해 탄생한

커스터마이징 패키지이다.

 

마침 emotionJS css prop과 절대경로

둘다 

craco가 필요했기 때문에

망설임없이 설치하고 실행에 옮겼다.

 

우선 craco 설치부터 해주자

 

npm install @craco/craco

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  // ...
},

 

npm 패키지로 craco를 설치한 후

package.json파일에서 scripts 부분을 위와 같이 변경해주자.

 

 

1. Emotion.js css prop 세팅

 

npm install @emotion/react @emotion/styled
npm install -D @emotion/babel-preset-css-prop

 

위 명령어로

emotion과 emotion/babel-preset-css-prop

을 설치해준 다음

 

craco.config.ts 파일을 루트경로에 생성하고 아래의 코드를 넣어주자

 

module.exports = {
  babel: {
    presets: ['@emotion/babel-preset-css-prop'],
  },
}



이 craco 파일이 

babel config를 꺼내지 않고

그 위에 덮어 쓸 수 있게 해주는 파일이다.

 

 

이렇게만 했을 때 

아마 

Unknown property 'css' found ~~~ 

이러한 타입오류를 내뿜을 것이다.

(타입스크립트 한정..)

 

tsconfig.json을 건드려보자.

 

 

  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "types": ["@emotion/react/types/css-prop", "node"]
	}

tsconfig.json에서 compilerOptions를 위와 같이 수정해주면

<div css={{ width: '100%' }}></div>

이렇게 css prop으로 사용할 수 있게 되는것이다.

 

html 태그 뿐만아니라

className을 prop으로 내리면 

공통 Component에도 직접적으로 style을 변경시킬 수 있다.

(이건 추후에..)

 

또한 

style={{}} 과 css={{}}의 차이점은

style prop은 DOM 생성 시 태그 내에 inline 스타일로 생성되지만

css prop은 CSSOM을 생성한다.

 

css prop이 CSSOM을 생성하는 이유는 정적인 CSS를 잘 관리하기 위함이다.

또한 style prop은 내용을 그대로 inline해버리기 때문에 사전에 정의한 디자인 토큰을 사용할 수 없다.

그러나 css prop을 이용하면 CSSOM으로 변환하는 과정에서 디자인 토큰도 함께 변환된다. 

 

다만 무조건적으로 css prop을 쓰기보다는

동적으로 스타일링이 변경되어야 하는 경우엔

style component로 빼서 사용해야한다. (성능 이슈)

 

 

 

이렇게 css prop을 마쳤고

다음 글에선 절대경로로 모듈 import 하는 것을 세팅해보자