[Typescript] Path alias (import 경로 단축)

 

 

코드리뷰를 받는데 Typescript를 사용한다면 import하는데 path alias 방식을 사용해보라고 조언 받았다. path alias가 무언가 했는데, 절대경로를 변수처럼 선언해서 그 경로를 줄여 간략하게 표현하는 방식이었다. 아래와같이 말이다.

 

import myFile from "../../data/myFile

import myFile from "@data/myFile"

 

파일을 import 하면 첫번째 처럼 ../../ 을 사용해서 상대경로로 파일을 찾아가서 import 하게 된다. 그러나 path alias를 사용해서 아래와 같이 나타낸다면 가독성 좋게 나타낼 수 있다. 내 프로젝트도 디렉토리가 많이 나누어져있기에 이 방법을 적용하면 좋겠다고 판단했다.

 

path alias 적용

내 프로젝트의 디렉토리 구조는 아래와 같다. 

 

├─src
│  ├─backend
│  │  ├─config
│  │  ├─dto
│  │  ├─repository
│  │  ├─routes
│  │  │  └─api
│  │  └─service
│  ├─public
│  │  ├─css
│  │  ├─data
│  │  ├─fonts
│  │  ├─img
│  │  └─js
│  └─views
└─weekly_plan

 

우선 tsconfig.json 에 프로젝트 baseUrl을 설정하고 (나는 가장 상위를 설정했다.), 우리가 원하는 형태로 경로들을 key, value 형태로 작성한다.

 

 

 

이후에 실제로 import문을 변경해준다.

 

 

nodemon 

위와 같이 설정해주어도 막상 프로젝트를 실행시켜보면 오류가 난다. 타입스크립트에 적용해뒀을 뿐, 자바스크립트 런타임에서는 위의 경로들을 인식할 수 없기 때문이다.

 

따라서 자바스크립트에 위 경로를 인식시켜주어야 하는데, tsconfig-paths 라이브러리를 사용하면 paths 속성들을 자바스크립트가 인식할 수 있도록 도와준다. package.json 에 아래와 같이 설정해주었다.

 

// app.ts 는 자신의 경로에 맞게 설정해주자.
"scripts": {
  "dev": "nodemon --exec ts-node -r tsconfig-paths/register ./src/app.ts",
},

 

나는 nodemon으로 프로젝트를 실행중이기에 위와 같이 설정해서 정상적으로 실행시킬 수 있었다. ts-node로 실행하는 경우에는 아래와 같이 설정해주면 된다고 한다.

 

"scripts": {
 "ts-node": "ts-node -r tsconfig-paths/register main.ts"
}

 

 

결과

 

 

class를 위주로 사용하고 있기에 위와 같이 바꾸고 나서 굉장히 깔끔해진 느낌을 받는다!

 

개발 ref

 

https://m.blog.naver.com/psj9102/222653630355

Typescript : path alias (import 경로 줄이기)

https://www.npmjs.com/package/tsconfig-paths

tsconfig-paths

https://chanyeong.com/blog/post/35

타입스크립트에서 절대경로(alias) 사용하기! :: chanyeong