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

 

https://jurgen-94.tistory.com/119

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

 

바로 직전 글에서는 

Craco를 왜 사용하고

emotion css prop을 왜 설정하려고 고군분투했는지

알아보았다.

 

이번엔 컴포넌트나 모듈을 import할 때

상대경로대신 절대경로를 사용해보자.

 

 

npm install @craco/craco
npm install --dev craco-alias

 

Craco를 설치 한 후 

 

"scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
}

 

package.json의 

scripts를 위와같이 바꿔주자.

 

 

 

그 후 

craco.config.ts에서

아래와 같이 코드를 수정해주자.

const CracoAlias = require('craco-alias');

module.exports = {
  babel: { presets: ['@emotion/babel-preset-css-prop'] },
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        tsConfigPath: 'tsconfig.paths.json'
      }
    }
  ]
};

 

전 포스팅에서 

css prop을 위해 세팅했다면

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

이 코드가 이미 있을텐데

가장 상단에 require문과

아래에 plugins을 추가해주면

tsConfigPath는

'tsconfig.paths.json' 파일을 이용하겠다는 뜻이다.

 

 

근데 우리는 아직

tsconfig.paths.json파일을 만들지 않았다.

 

바로 만들자

 

 

 

 

반드시 루트경로에 만들어야한다!

 

tsconfig.paths.json

{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"@api": ["src/api"],
			"@components": ["src/components"],
			"@elements": ["src/elements"],
			"@hooks": ["src/hooks"],
			"@routes": ["src/routes"],
			"@screens": ["src/screens"],
			"@store": ["src/store"],
			"@types": ["src/types"]
		}
	}
}

 

위와 같이 원하는 alias로 원하는 폴더의 alias를 지정해줄 수 있다.

 

 

 

• source: default는 options이고, 프로젝트 구성에 따라 jsconfig, tsconfig 선택 가능
• baseUrl: default는 ./로 root 폴더를 가리킴 (여기에선 default 값 그대로 사용)
• aliases: alias 이름과 경로를 의미하며 default는 {}
• tsConfigPath: source가 tsconfig인 경우 해당 파일 이름 작성
• debug: default는 false이고, 만약 버그가 생긴다면 값을 true로 수정해 console로 내용 확인 가능

 

 

 

 

마지막으로 

tsconfig.json에서

 

{ 
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
   ...
  },
  "include": [
		"src",
		"craco.config.js"
	],
}

 

extends를 아까 만든 tsconfig.paths.json으로 추가하고

include를

src와 carco.config.js넣어주면 

이제 절대경로 끗..!

 

 

 

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

 

여기까지 무사히 세팅이 됐다면

이런식으로 세팅이 가능하다

 

다만 이렇게까지 하려면

 

컴포넌트를 

export default가 아닌 

export { 컴포넌트명 }으로 export를 해줘야하고

 

 

폴더구조도 각 컴포넌트에 대해 index.ts로 export해줘야한다.