Babel로 경로 별칭 설정하기 (Module Resolver)

자바스크립트 프로젝트의 규모가 커지면 디렉토리 구조도 복잡해지기 마련입니다. 혹시 다음과 같은 코드 때문에 해당 모듈을 찾으려고 상위 디렉토리를 하나씩 짚어가며 올라가다가 스트레스 받으신 적이 있으신가요? 😝

import { whereIsThis } from "../../../../../aaa/bbb/ccc";

상대 경로

Node.js에서 내부 모듈을 불러올 때 가장 흔히 사용되는 방법은 상대 경로를 사용하는 것입니다.

import { add } from "../../../common/utilities/math";

위에서 보시는 것 처럼 상대 경로를 사용해서 모듈을 불러오면 모듈이 어느 경로에 위치하는지 파악하기가 난해해지는 경우가 생깁니다. 뿐만 아니라, 이 자바스크립트 파일을 다른 디렉토리로 옮기려면 상대 경로를 그에 따라 모두 수정해줘야 해서 코드 리팩토링(refactoring)이 상당히 불편해지죠. 왜냐하면, 상대 경로는 현재 파일이 어디에 위치하느냐에 따라서 변해야 하기 때문입니다.

절대 경로

Node.js는 내무 모듈을 불러올 때 절대 경로도 지원하기 때문에 다음과 같이 코드를 변경하면 되지 않을까 생각하는 분들도 있을 것입니다.

import { add } from "/Users/dale/Projects/our-project/src/common/utilities/math";

하지만 절대 경로로 모듈을 불러오는 것은 혼자 개발하는 프로젝트가 아닌 이상 현실적으로 적용하기 어려운 방법입니다. 왜냐하면 개발자들마다 해당 프로젝트를 다른 디렉토리에 저장해놓을 것이기 때문입니다.

경로 별칭

자바스크립트 트랜스파일(transpile) 도구인 Babel(바벨)을 사용하면 이 문제를 비교적 간단하게 해결할 수 있습니다.

Babel을 사용하는 기본적인 방법은 아래 두 개의 포스팅 참고 바랍니다.

• 바벨(Babel 7) 기본 사용법
• Node.js로 ES6 코드 실행하기 (Babel)

바로, Babel의 플러그인을 사용해서 경로 별칭(alias) 를 설정해주면 되는데요. 먼저 기본적인 Babel 셋업이 되어 있는 프로젝트에서 Babel의 module resolver 플러그인을 개발 의존성으로 설치합니다.

$ npm i -D babel-plugin-module-resolver

그 다음 .babelrc 설정 파일을 열고, plugins 항목에 module-resolver 설정을 추가해줍니다.

{
  "presets": ["@babel/env", ...생략...],
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
			    "@": "./src"
        }
      }
    ]
  ]
}

./src 상대 경로를 Vue나 Angular 프로젝트에서 흔히 볼 수 있는 @ 경로 별칭로 맵핑해주었습니다.

이렇게 설정을 하면 다음과 같이 상대 경로 대신에 @ 경로 별칭를 이용해서 모듈을 볼러올 수 있습니다.

// import { add } from "../../../../common/utilities/math";
import { add } from "@/common/utilities/math";

어떤가요? 모듈울 불러올 때 경로 부분이 참 깔끔해졌죠? ✨ 게다가 이제는 프로젝트 내에서 이 파일의 위치를 자유롭게 변경할 수 있습니다. 경로 별칭를 이용하면 절대 경로처럼 해당 모듈을 어디에서 불러오더라도 동일한 위치를 가리키기 때문입니다.

경로 축약

경로 별칭를 이용하면 모듈 경로를 좀 더 파격적으로 축약시킬 수도 있습니다. 예를 들어, 다음과 같이 ./src/common/utilities/math 상대 경로를 #utils-math로 맵핑해주면,

{
  "presets": ["@babel/env", ...생략...],
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
			    "@": "./src",
          "#utils-math": "./src/common/utilities/math"
        }
      }
    ]
  ]
}

동일한 모듈을 매우 간결한 경로를 사용해서 불러올 수 있게 됩니다. 🏎

// import { add } from "../../../../common/utilities/math";
// import { add } from "@/common/utilities/math"
import { add } from "#utils-math";

예제 프로젝트

본 포스팅에서 다룬 Babel 설정을 적용하여 간단한 자바스크립트 프로젝트를 구성해보으니 참고 바랍니다.

마치면서

이상으로 Babel의 module resolver 플러그인을 이용하여 경로 별칭를 사용하는 방법에 대해서 살펴보았습니다. 경로 별칭를 잘 활용하셔서 모듈 불러올 때 상대 경로 때문에 개발하다가 스트레스 받는 일이 적었으면 좋겠습니다.

해당 플러그인에 대한 좀 더 자세한 내용은 Github 리파지토리를 참고 바랍니다.추가적으로 본인 프로젝트에서 ESLint를 사용하고 계시다면 경로 별칭를 사용할 때 오류가 발생할 것입니다. 이럴 때는 eslint-plugin-module-resolver 패키지도 설치하셔서 함께 사용하시길 바랍니다.