CREATE-REACT-APP에서 절대경로 임포트 사용하기 with typescript

CREATE-REACT-APP에서 절대경로 임포트를 사용하는 방법을 알아봅니다.

tsconfig.json

아래의 baseUrl, include 속성을 변경해줍니다.

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

yarn start 또는 npm run start를 실행하여 다시 시작합니다.

아래와 같은 문제가 발생할 수 있습니다.

Visual Studio Code를 닫았다가 다시 엽니다. 대부분의 사람들은 이렇게 하면 문제가 해결됩니다.

그렇지 않은 경우 설정을 열고 Import Module Specifier를 검색하세요.

TypeScript > Preferences > Import Module Specifier에서 찾을 수 있습니다.

이 설정을 Auto 또는 Non-relative로 변경하면
Visual Studio Code는 tsconfig.json 파일을 기반으로 모듈을 가져옵니다.
이 설정을 적용하려면 IDE를 닫았다가 다시 열어야 할 수 있습니다.

 

참고

원문 : https://justinnoel.dev/2019/06/18/configuring-react-absolute-imports-for-typescript/

js만 사용 시 : https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d