[React] Create react app 프로젝트에 절대경로 import 설정하기

결론

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

 

tsconfig.json 을 위와 같이 설정하기.

최신버전 CRA 는 tsconfig.json 의 일부 설정을 자동으로 인식하고 적용함.

특히 baseUrl 과 paths 설정은 추가설정 없이도 작동할 수 있음. 

CRA 는 웹팩과 바벨 설정을 숨기고 관리하기때문에 

일반적으로 설정을 직접 수정하려면 eject 를 하거나 추가 도구를 사용해야한다. 

그래서 검색해봤을때 다른 사람들은 craco 같은 도구를 사용해서 

CRA 설정을 오버라이드 하는 것 같던데 .. 

나는 tsconfig.json 을 위와같이 설정해줬는데 절대경로가 설정됐다. 

 

내 CRA 버전은 5,0.1 이다. 

CRA 버전 확인 명령

npm show react-scripts version

 

과정

 

상대경로로 계속 컴포넌트를 설정하기가 불편하고 가독성도 좋지않아서

Vue 개발 할 때 처럼 @ 같은거 써서 절대경로 설정할 수는 없을까.. 한번 설정해보자 생각하게 됐다. 

 

시도 1. 

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

 

tsconfig.json 파일 이렇게 설정해줬다. 

compilerOptions 는 Typescript 컴파일러의 동작 방식을 정의하는 옵션이다.

baseUrl 은 기본 경로를 설정. 이 기본 경로를 import 문에서의 기준점이 된다. 

즉 이렇게 설정해주면 src 폴더 안의 파일들은 절대 경로로 import 할 수 있게 된다.

paths 는 import 문에서의 별칭(alias) 을 설정한다.

"*": ["src/*"] 은 모든 경로를 'src' 폴더 내에서 찾도록 설정한다.

따라서 'src' 폴더 내의 모든 파일은 절대 경로로 참조할 수 있다. 

 

import 를 절대경로로 해주려고 하니 

Cannot find module 'components/GreyWord' or its corresponding type declarations.
  > 1 | import GreyWord from "components/GreyWord";

에러가 떴다. 

 

시도2. 

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

 

baseUrl 이 모든 모듈 해석의 기준점인데, 이걸 src 로 설정해줬으니

import 를 할때 src/src 이렇게 경로 설정이 되어버렸던것.

baseUrl을 . 로 변경하면 프로젝트 루트를 기준점으로 삼게 되어

src/components/GreyWord 를 찾을 수 있게 된다. !

 

다른 사람들이 한 방법도 아래에 있다.

 

https://stackoverflow.com/questions/43281741/how-can-i-use-paths-in-tsconfig-json

How can I use paths in tsconfig.json?

 

시도3. 성공!

시도 2 대로 해주니까 실행시 또 can't resolve 라고해서 시도 2 방법에서 path 를 지우고 baseUrl 만 남겨줬다.

 

• "baseUrl"은 비절대적 모듈 이름을 해석할 때의 기본 디렉토리를 지정한다.
• "baseUrl": "src"로 설정하면, 모든 모듈 임포트가 'src' 폴더를 기준으로 해석된다.
• path 는 baseUrl 을 기준으로 한 추가적인 모듈 해석 규칙을 정의한다.

 

웹팩이 모듈을 해석할 때 이 설정을 고려하지않아서 resolve 할 수 없었던 것 같다..

앞으로는 그냥 baseUrl 만 src 로 설정해주는것으로 하자