[react.js]CRA v4에서 절대경로 설정하기

작년 리뉴얼TF에서 구르다 보니 개인공부 할 시간이 없었는데 그새 많은것이 바뀌어 있었네요.
오늘 헤맨걸 공유하고자 합니다. (오늘자 CRA 버전은 4.0.1 입니다)

.env 설정하고, jsconfig.json 하면 끝이었는데...
이상하게 적용도 안되고 에러가 나는겁니다.

블로그에서 이리 저리 찾아봤는데도 친절하게 설명해주신 분들께는 감사하지만, 안타깝게도 그때는 저도 잘됐겠지만 지금버전의 전 안되더군요. 마치 이걸 개발하신 분들이 일부러 방법을 바꿔서 어렵게 만든것처럼...

더 나은 방법이 있다면 바뀌는게 맞지만, 요즘 들어서는 일부러 그런다는 생각도 좀 드네요.
자꾸 찾아보게 만들려고 헷갈리게 바꾸는듯...

아래 예제는 create-react-app 으로 했다는 전제 하에 설명드립니다.

터미털

npm i @craco/craco craco-alias

yarn 쓰고 싶은데 회사에선 블락ㅠ

설치가 끝나면

package.json

react-scripts 를 craco로 바꿔줍니다.

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

jsconfig.json 생성

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

저는 assets 이라고만 적었는데, 편의에 따라 다른 기호들을 만들어도 될것 같습니다.

craco.config.js 생성

const CracoAlias = require("craco-alias");
module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "jsconfig",
        jsConfigPath: "jsconfig.paths.json",
      },
    },
  ],
};

이제 설정은 다 끝났습니다.

예제를 만들어 보겠습니다.

Components/Module.js

import React, { Component } from 'react';

class Module extends Component {
    render() {
        return (
            <div>
                모듈 테스트 입니다.
            </div>
        );
    }
}

export default Module;

App.js

상대경로라면 import Module from './Components/Module'; 이렇게 하는게 맞겠지만
언제까지고 ../../../ 할순 없으니까

import React, { Component } from 'react';
import Module from './Components/Module';

class App extends Component {
  render() {
    return (
      <div className="bg">
        <Module/>
      </div>
    );
  }
}

export default App;

App.js(수정)

이렇게 바꿔주겠습니다.
import Module from '@/Components/Module';

import React, { Component } from 'react';
import Module from '@/Components/Module';

class App extends Component {
  render() {
    return (
      <div className="bg">
        <Module/>
      </div>
    );
  }
}

export default App;

한결 편해졌네요.