[리액트] 절대 경로 설정 with Typescript / craco, react-app-alias, tsconfig.json

 

[React_ 절대 경로 설정하기]

 

---

 

<STUDY>

 

지금까지는 절대 경로의 필요성을 많이 느끼지 못했는데

최근에 상대 경로로 import된 '../../../...' 이러한 것들이 신경쓰여 절대 경로를 설정하기 시작했다.

 

- tsconfig.json

// tsconfig.json

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

React 프로젝트를 Typescript로 세팅하고 절대경로 설정을 위해

tsconfig.json 파일에 baseUrl과 paths를 넣어주었다.

 

Javascript로 실행할 때에는 jsconfig.json 파일만 수정하면 간단하게 해결 되었는데

Typescript에서는 경로가 없다면서 오류가 계속 발생했다;;

 

이유는 cra로 생성된 프로젝트에서는 내부에 webpack 설정으로 인해

서버 실행 시(npm run start) 변경한 tsconfig.json 파일 내용이 적용되지 않고 초기 설정으로 돌아가기 때문이라고 한다.

그래서 변경한 path를 인식하지 못했던 것...!

 

이걸 모르고 엄청 헤맸다..

 

보통 cra로 프로젝트를 세팅하면 webpack 설정 파일들이 숨겨져 있기 때문에

craco라는 라이브러리를 사용하여 설정을 변경할 수 있었다

 

---

 

 

1. @craco/craco, react-app-alias 설치하기

npm i @craco/craco
npm i -D react-app-alias

 

두 라이브러리를 설치하고 루트 디렉토리에 craco.config.js와 tsconfig.paths.json 파일을 만든다.

 

- craco.config.js

// craco.config.js

const { CracoAliasPlugin } = require("react-app-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {
        source: "tsconfig",
        baseUrl: ".",
        tsConfigPath: "./tsconfig.paths.json",
      },
    },
  ],
};

 

- tsconfig.paths.json

// tsconfig.paths.json

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

 

📌 tsconfig.paths.json 파일은 기존 설정을 변경하고 싶은 내용을 담은 파일이다!

📌 paths 에 원하는 경로의 포맷을 작성해 주면 된다!

 

 

❕기존에 사용되던 craco-alias 라이브러리는 더이상 사용되지 않기 때문에 react-app-alias를 사용한다고 한다!

 

 

2. tsconfig.json 파일에 extends 속성을 추가한다.

 

- tsconfig.json

// tsconfig.json

{
  ...
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    ...
  }
}

 

 

3. package.json 파일을 수정한다.

 

- package.json

// package.json

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

 

 

이 과정을 모두 거치면 원하는 대로 import가 가능하다!

 

나는 "@/*"으로 설정했다!

import Component1 from "@/components/Component1";

 

 

---

 

절대 경로를 설정하는 방법도 검색을 해보니 정말 여러가지가 나왔는데

이 방법으로 설정을 성공했다...!

create-react-app을 사용하여 프로젝트를 세팅했기 때문에 이런 과정이 필요했던 걸 몰라서 생각보다 더 오래 걸렸다..!