(21.07.19) CRA로 만든 react의 webpack 수정하기 (with CRACO)

작은 지식이라도, 하루에 하나씩.

---

 

한 줄 요약

---

🦄create-react-app으로 만든 프로젝트는 쉽고 간편하지만, webpack 설정을 건드리지 못한다.🦄
🦄webpack 설정을 건드리고 싶으면 CRACO 라이브러리를 이용해서 바꿀 수 있다!🦄

 

 

 

CRACO가 뭐에요?

---

 

CRACO는 Create React App Config Override의 준말로, eject 없이 cra의 설정을 바꿀수 있게 해준다.

 

 

나는 항상 프로젝트에서 뭔갈 import 할 때 상대경로를 사용해왔다. 이유인즉, 내가 처음 웹을 배운 "head first HTML&CSS" 교재에서 절대경로로 파일을 불러오면 다른 사람의 PC에서 제대로 불러오지 못한다는 경우가 있다는 말을 보고 맹목적으로 상대경로만을 사용하게 되었다.

 

그렇게 철썩 같이 믿고 공부를 계속했는데....문제가 생겼다. 만드는 프로젝트의 규모가 점점 커져가면서, 상대경로의 경로가 너무 깊어졌기 때문이다. 지금 작성하는 코드 한 줄을 가져왔는데, 매우 끔찍하게 생겼다.

 

import pixelArea from '../../../../../../Components/Pixels/Area'

 

숨이 턱 막힌다. ../ 을 몇 개 찍어야하는지는 둘째 치고, 이 컴포넌트가 어디서 왔는지도 제대로 확인을 못할 지경이다.

 

저 어둡고 축축한 경로를 하나의 절대 경로로 만들 수 있으면 얼마나 좋을까???

 

그렇게 하기 위해서는, package.json , .config등 webpack 관련 파일을 수정해야하는데, 안타깝게도 나는 webpack을 1도 모르고, 설령 안다고 해도 cra가 관련 파일을 꽁꽁 숨겨놓았기에 찾지도 못한다. "npm start"를 때리는 순간 package.json에 기재한 path 관련 내용이 사라져가는 걸 본 느낌이란....

 

 

사라지는 코드들과 함께 내 멘탈도 파사삭...

 

좀 알아보니까, npm eject 를 통해 프로젝트를 eject 하면서 webpack 관련 파일을 만질 수 있다고 하는데, 그러면 페이스북이 CRA을 업데이트 했을때 자동으로 프로젝트가 업데이트 되는 CRA의 이점을 버리게 된다.

 

여기서 CRACO가 등장한다. CRACO는 프로젝트 이젝트 없이도 설정 파일을 바꿀 수 가 있는, 그야말로 내가 완전 필요로 하던 라이브러리 그 자체이다.

 

사랑해요 오픈소스

 

 

설치 

---

설치

npm install @craco/craco
npm install craco-alias

 

 

적용하기

---

1. 설치가 완료되었으면 먼저 package.json을 수정하자.

 

{
  // 윗부분 생략...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  // 아랫부분 생략...
}

• react-scripts XXXX 로 되어있던 부분을 craco XXX로 바꿔준것이다.

 

2. 프로젝트 루트에 tsconfig.paths.json 파일을 생성하고 아래와 같이 작성한다

 

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": [
        "./components/*"
      ]
    }
  }
}

 

• paths의 형식은 다음과 같다.

"paths": {
  "<쓰고싶은alias/*>" : ["<baseUrl의 값 기준 경로 ex) ./ 는 src를 의미>"]
}

./src 경로도 alias 지정이 가능하지만 ./src는 그냥 ./ 으로 사용하고 가급적이면 src 안의 폴더 단위로 alias를 쪼개는 것이 좋다 (가독성 + 에러 방지 )

 

 

3. 프로젝트의 루트에 craco.config.js 파일을 생성하고 아래와 같이 작성합니다

 

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

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: './src', // tsconfig.paths.json에 있는 baseUrl 경로값과 맞춰줍니다.
        tsConfigPath: 'tsconfig.paths.json',
        debug: false // 에러가 날 경우 true로 바꾸고 디버깅 하면 대부분의의 문제해결!
      },
    },
  ],
};

• debug를 true로 바꾸면 설정에 문제가 없더라도, run이 되는 것이 아니라 원본 config과 craco가 바꾼 config를 비교해주는 내용이 터미널에 표시됩니다.

 

 

4. tsconfig.json을 아래와 같이 수정

 

{
  "extends": "./tsconfig.paths.json",
  "comilerOptions": {
    // 생략...
  }
  // 생략...
}

• compilerOptions 속성 위에 extends 붙임

 

5. tsconfig.json에 craco.config.js를 include

 

// 생략 ...
"include": [
  "src",
  "craco.config.js"
]
// 생략 ...

• "include"는 대게 config의 최하단에 있습니다

 

6. 그러면 아래와 같이 alias를 사용할 수 있습니다.

 

import React from "react";
import sample from "@/samples";

 

 

 

tsconfig.paths.json 경로 설정 중 주의해야할 것

---

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@": ["./*"],
    }
  }
}

 

처음에 이 파일을 위와 같이 수정했는데, 동일한 위치에 있는 파일들인데도 어떤 파일은 alias 적용이 되는데 어떤 파일은 에러가 나는 경우가 있었습니다.

 

@ 만 붙이면 자동으로 src 경로부터 시작할 것이라고 생각했기 때문이다. 즉, @ === ./src로 여겼는데, 그게 아니였습니다. @page/* 라는 뜻은 "경로에서 @page/~~~로 오는 친구들은 모두 "./page/~~~"로 여겨라" 라는 뜻이였던겁니다..

 

근데 나는 page에 있는 친구들도 그냥 @/page로 적었기에 @ 이하에 붙은 /page를 인식하지 못한 것으로 보입니다.

 

그래서 "@" : ["./*"]를 "@/*" : ["./*"]로 바꿔봤는데, vscode 단에서는 제대로 인식하나, run 할 때 에러가 났습니다.

공식 문서를 찾아보니까 애초에 baseUrl로 시작하는 부분을 alias로 설정하지 말라고 합니다. 생각해보면 가독성 측면에도 무리하게 @ 하나로 망고땡 하는 것보다, src 하위의 폴더들에 각각 alias를 주는게 더 좋아보입니다.

 

🔥결론 : 괜히 들어맞지도 않는 열쇠 가지고 문구멍 쑤시지 말아라.🔥

( 그래도 배운 게 있어서 다행입니다. )

 

 

 

 

매우 도움 되었던 블로그

---

https://kod4284.github.io/2020/03/07/CRAT-setting-absolute-path/

 

 

감사합니다 정말로