alias를 사용하여 import 구문을 깨끗하게 만들자!

 

Alias

어떤 경로에 별명(Alias)을 붙이고 모듈을 불러올 때, 이 별명을 활용하는 것을 Alias imports라고 합니다.

또한 별명을 활용하면 상대경로 방식이 모두 제거되므로, Absolute imports로도 불립니다.

 

먼저, 아래의 코드를 리팩토링하는 것부터 시작해봅시다.

최종적으로는 한 줄로 축약되고, 이 과정에서 모든 ../../../는 제거될 것입니다.

import { IColumnVisibility } from "../../../interfaces/IColumnVisibility";
import { ILicense } from "../../../interfaces/ILicense";
import { ISoftware } from "../../../interfaces/ISoftware";
import { ISyntax } from "../../../interfaces/ISyntax";
import { ITag } from "../../../interfaces/ITag";
import { Language } from "../../../interfaces/Language";

 

먼저 tsconfig.json의 내용을 아래처럼 바꿉니다.

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

 

따라서 @interfaces는 /src/interfaces/*와 매핑되고,
이것을 사용하면 아래처럼, 상대경로가 제거된 import 구문을 작성할 수 있습니다.

import { IColumnVisibility } from "@interfaces/IColumnVisibility";
import { ILicense } from "@interfaces/ILicense";
import { ISoftware } from "@interfaces/ISoftware";
import { ISyntax } from "@interfaces/ISyntax";
import { ITag } from "@interfaces/ITag";
import { Language } from "@interfaces/Language";

 

또한 여기서 배럴(barrel)을 사용하면 한줄로 축약됩니다.

import { IColumnVisibility, ILicense, ISoftware, ISyntax, ISyntax, ITag, Language } from "@interfaces";

 

이것은 코드를 리팩토링할 때 위력을 발휘하는데,

상대경로가 모두 제거되었기 때문에 @interfaces의 실제 폴더가 다른곳으로 옮겨져도,

tsconfig.json만 수정하면 되기 때문이죠.

 

 

Linking

tsc를 입력하면 컴파일은 되지만, node로 실행하면 에러가 발생합니다.

말 그대로 tsc만 알아듣고 node는 못알아듣는 상태이기 때문이죠.

 

node가 별명을 알아들을 수 있도록 추가적인 애드온이 필요합니다.

 

npm install ts-node -D
npm install tsconfig-paths -D

ts-node는 타입스크립트 실행기이고,
tsconfig-paths는 ts-node가 별명을 알아들을 수 있도록 도와줍니다.

 

두 프로그램을 설치했다면, 아래 명령어를 통해 정상적으로 실행시킬 수 있습니다.

아래 명령줄의 -r (=require) 인자는 다음에 오는 프로그램을 필요로 한다는 뜻입니다.

node -r ts-node/register -r tsconfig-paths/register ./src/app.ts

 

만약 VSCode를 사용한다면 아래의 launch.json 파일을 가져다 쓰면 됩니다.

물론 program 항목과 outFiles 항목은 자신에게 맞게 수정해서 사용하셔야 합니다.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/src/app.ts",
            "runtimeArgs": ["-r", "ts-node/register", "-r", "tsconfig-paths/register"],
            "outFiles": ["${workspaceFolder}/out/**/*.js"]
        }
    ]
}