[React] CRA Path Alias 설정하기

본인은 프로젝트를 만들 때 CRA를 사용해서 사용한다. 

그런데, 프로젝트를 진행하다보면 다른 경로의 모듈을 import할 때 상대 경로를 사용하면 길어지는 문제가 있다. 

절대 경로를 사용해서 src/ 에서부터 받아온다면 길이가 짧아진다. 

 

이것은 어찌보면 사소할 수 있는데, 개인적으로 코드에서 이런 사소한 부분을 해소하면 전체적인 코드의 

가독성이 좋게 느껴져서 신경을 쓰고 있다. 

 

다시 본론으로 넘어가서 상대 경로의 프로젝트를 절대 경로로 변경하기 위해서 craco를 사용하면 해결된다. 

craco는 cra로 만든 프로젝트의 경우 eject을 해야 설정이 변경 가능한 것을 설정을 덮어씌워서 

변경시켜준다. 

 

npm i --save @craco/craco

프로젝트를 설치해준다. 

 

그 다음에 루트에 craco.config.js를 만들고 설정을 세팅한다. 

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@pages": path.resolve(__dirname, "src/pages"),
      
      // ...
    },
  },
};

앞서 말한 것처럼 alias를 위해서만 사용하는 것이 아닌 다른 설정을 위해서도 사용해도 된다. 

 

다음으로 package.json을 변경해준다. 

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

기존 react-scripts였던 실행 코드를 craco로 변경해준 것이 끝이다. 

 

여기까지 설정하면 기본적인 alias는 해결된다.

하지만 자동 완성으로 모듈을 불러오면 여전히 상대 경로로 불러오는 문제가 있다. 

 

이것을 해결하기 위해서 루트에 jsconfig.json를 만들어서 설정을 추가해준다. 

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

	  // ...
    }
  },
  "

이제 정말 끝이다. 

 

이렇게 설정하면 cra 환경에서 path alias로 절대 경로로 불러올 수 있다.