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

혹시 다음과 같은 코드 때문에 해당 모듈을 찾으려고 상위 디렉토리를 하나씩 짚어가며 올라가다가 스트레스 받으신 적이 있으신가요? 😡

```js

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

```

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

왜냐하면, 상대 경로는 현재 파일이 어디에 위치하느냐에 따라서 변해야 하기 때문입니다.

다음과 같이 상대 경로 대신에 별칭(alias) 경로를 사용한다면 어떨까요?

```js

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

```

```js

import { add } from "#utils-math";

```

위와 같이 별칭 경로를 이용하면 코드가 보기 좋아질 뿐만 아니라 프로젝트 내에서 이 파일의 위치를 자유롭게 변경을 할 수 있겠죠? 별칭 경로를 이용하면 프로젝트의 어느 디렉토리에서 불러오더라도 동일한 위치를 가리키키 때문입니다.

이번 포스팅에서는 트랜스파일(transpile) 도구인 Babel(바벨)을 사용하여 자바스크립트 프로젝트에 별칭 경로를 설정하고 사용하는 방법에 대해서 알아보겠습니다.

📝 포스팅: https://www.daleseo.com/js-babel-resolver/

Babel을 사용하는 기본적인 방법에 대해서는 아래 게시물을 참고 바랍니다.

📕 바벨(Babel) 기본 사용법: https://careerly.co.kr/comments/90933

📗 Babel로 Node.js에서 ES6 코드 실행하기: https://careerly.co.kr/comments/92036