이 글에서는 TypeScript에서 모듈 경로 매핑을 사용하여 모듈을 로딩하는 방법에 대해 알아보겠습니다.

모듈 경로 매핑이란?

TypeScript에서 모듈을 로딩할 때, 모듈의 실제 위치를 지정하는 것이 필요합니다. 보통 이를 위해 상대 경로를 사용하게 되는데, 이러한 상대 경로는 프로젝트 구조가 바뀔 때 마다 수정해야 하는 불편함이 있습니다. 모듈 경로 매핑은 이러한 불편함을 해소하기 위해 사용됩니다.

모듈 경로 매핑을 사용하면 특정 모듈 이름과 실제 파일 경로를 매핑하여, 해당 모듈을 더 쉽게 로딩할 수 있게 됩니다.

모듈 경로 매핑 설정하기

모듈 경로 매핑을 설정하기 위해서 tsconfig.json 파일에 paths 속성을 추가해야 합니다.

예를 들어, 다음과 같이 paths 속성을 설정할 수 있습니다.

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

위의 예제에서는 @app과 @utils라는 모듈을 사용할 때, 실제 파일은 src/app과 src/utils 디렉토리에서 로딩하도록 설정하였습니다.

모듈 로딩하기

이제 모듈 경로 매핑을 설정했다면, 다음과 같이 모듈을 로딩할 수 있습니다.

import { SomeModule } from "@app/someModule";
import { Utility } from "@utils/utility";

위의 예제에서는 @app과 @utils 경로에 있는 모듈을 import 하고 있습니다.

이렇게 모듈 경로 매핑을 사용하면, 파일의 위치가 변경되더라도 손쉽게 모듈을 로딩할 수 있고, 코드를 유연하게 유지보수할 수 있습니다.

모듈 경로 매핑에 대해 더 자세히 알고 싶다면 TypeScript 공식 문서를 참고하세요.