[Typescript] Module 절대경로 설정 방법

Module 절대경로 설정 방법

타입스크립트 프로젝트에서 소스코드 관리를 위한 절대경로 설정 방법을 알아보자.

---

절대경로를 사용하는 이유

상대경로를 사용하는 프로젝트. 정말 더럽다!

타입스크립트 프로젝트는 기본적으로 상대경로를 통해 module을 import 하도록 되어있는데 프로젝트나 소스파일의 규모가 커지면 자연스럽게 import 구문도 늘어나면서 소스코드가 더러워질 수 있다.

../으로 도배된 import 구문으로 인해

• 가독성 저하
• 소스파일 이동 시 상대경로 변경으로 인한 사이드이펙트

등의 문제가 발생한다.

 

상대경로 대신에 절대경로를 적용하면 위 문제를 해결할 수 있다.

---

절대경로 설정

절대경로를 적용하려면 tsconfig.json를 수정해야한다.

 

// tsconfig.json

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

 

baseUrl로 현재 디렉토리를 지정하고 paths로 절대경로의 매핑 정보를 기입한다. 위 설정에서는 @src/ 경로를 src/ 폴더 내의 파일로 매핑하고 있다. 이렇게 설정하면 아래와 같이 절대경로를 사용한 import를 수행할 수 있다.

 

import someModule from '@src/someModule';

 

이외에도 용도에 따라 @assets, @components 등으로 정의하여 사용하면 좀 더 편리하게 소스코드를 관리할 수 있다.

---

오류 1. ts-node를 사용하는 경우

Error: Cannot find module '@src/xxx'

 

정상적인 컴파일이 가능하지만 node 명령어가 아닌 ts-node 명령어로 코드를 실행하면 위와 같은 메시지가 출력될 수 있다. 절대경로 설정을 ts-node가 자동으로 인식하지 못하기 때문이다.

 

이 문제는 tsconfig-paths 라이브러리를 사용하면 해결할 수 있다.

 

npm install -D tsconfig-paths

 

우선 tsconfigs-paths 의존성을 추가한다.

 

// tsconfig.paths.json

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

 

기존에 tsconfigs.json에 작성한 절대경로 관련 설정을 tsconfig.paths.json 라는 별도의 파일로 옮긴다.

 

// tsconfig.json

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

 

tsconfig.paths.json으로부터 설정을 읽어오도록 tsconfig.json에서 extends를 지정한다.

 

ts-node

를

ts-node -r tsconfig-paths/register

로 변경

 

마지막으로, ts-node를 사용한 실행 스크립트에 register 파라미터를 추가한다.

---

 

오류 2. eslint를 사용하는 경우

Unable to resolve path to module '@src/xxx' eslint(import/no-unresolved)

 

정상적인 컴파일이 가능하지만 eslint를 사용중인 프로젝트에서는 위와 같은 에러 메시지가 출력될 수 있다. 절대경로 설정을 eslint가 자동으로 인식하지 못하기 때문이다.

 

// .eslintrc

{
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {}
    }
  }
}

 

eslint가 절대경로를 제대로 파싱할 수 있도록 .eslintrc 파일에 위 내용을 추가한다.

---

관련 문서

tsconfig-paths