임포트 하기 너무 귀찮아요...

목적

저번 블로그 이후로 다시 정신을 차리고 친구들과 하는 프로젝트를 하고 있던 나는 컴포넌트, 이미지 등을 임포트 하려고 할 때마다 import ### from "../../components/###" 이런 식으로 폴더 속으로 하나하나 다 들어가면서 원하는 컴포넌트를 찾는 것이 너무나 귀찮게 느껴졌다. 사실 IDE가 자동완성을 워낙 잘해줘서 초반에는 크게 신경을 안 썼지만, 아주 가끔씩 IDE가 멍청해져서 자동완성을 안 해줄 때도 있었고 코드도 보기가 좋지 않았다.

그러던 와중에 블로그를 뒤져보다가 뒤져보다가 절대 경로라는 것의 존재를 알게 되었다. jsconfig.json 또는 tsconfig.json을 조금만 건드려 주면 import ### from "components/###" 이런 식으로 임포트를 해올 수 있다니... 위에 썼던 임포트 방식과 코드 길이 자체에서는 별다른 차이가 크게 없지만, 프로젝트가 커지거나 한다면 임포트를 하는 과정이 정말 험난해질 것이다. 그렇기에 아직 경험은 별로 없지만... 큰 프로젝트를 해보기 전에 미리 알아두면 좋을 것 같아서 정리를 해 보았다.

상대 경로

절대 경로를 이해하기 전에, 먼저 상대 경로가 무엇인지 알아야 한다.

상대 경로란 말 그대로 상대적인 경로를 의미한다. 간단하게 설명해보면 현재 작업 중인 디렉토리를 기준으로 파일이나 디렉토리의 위치를 나타내는 방법이다.

특징

1. 현재 위치를 기준으로 작성되므로, 경로를 현재 작업 디렉토리에 따라 다르게 작성해야 된다.

2. ".": 현재 디렉토리를 나타낸다.

3. "..": 상위 디렉토리를 나타낸다.

예시

현재 디렉토리가 /src/pages/home라면

1. index.jsx가 home에 있을 경우(하위 디렉토리도 동일):

   ./index.jsx

   또는

   index.jsx

2. src안에 있는 components 폴더로 접근하는 경우:

   ../../components/파일이름

이것이 상대 경로인데, 치명적인 단점은 현재 디렉토리의 영향을 받는다는 점이다. 디렉토리가 변경되면 경로가 깨질 수 있다.

드디어 절대 경로

절대 경로는 특정 디렉토리의 위치를 루트 디렉토리(root directory)로 지정한 것을 의미한다.

사용법

바로 사용법을 알아보자. JavaScript를 사용한다면 jsconfig.json, TypeScript를 사용한다면 tsconfig.json에 아래와 같이 작성하면 된다.

{
  "compilerOptions": {
    "baseUrl": "src" // 기준 경로를 src 폴더로 설정
  }
}

위와 같이 설정을 하면 기대하던 절대 경로로 임포트를 할 수 있게 된다.

// 기존 상대 경로
import MyComponent from "../../components/Button";

// 절대 경로
import MyComponent from "components/Button";

추가 설정

추가로 개인이 약간의 커스텀도 가능한데, 예시로 아래와 같이 사용할 수 있다.

{
  "compilerOptions": {
    "baseUrl": "src", // 기준 경로를 src 폴더로 설정
    "paths": {
      "@components/*": ["components/*"], // 별칭 @components 설정
      "@utils/*": ["utils/*"],           // 별칭 @utils 설정
    }
  }
}

위와 같이 설정을 하면

import Button from '@components/Button';
import calculate from '@utils/calculate';

이런식으로 임포트를 할 수가 있는데, 의문점이 생길 수도 있다. 한눈에 봤을땐 경로 맨앞에 @가 붙는 것 빼고는 똑같아 보이지만, 별칭을 사용하는 명확한 이유가 있다.

절대 경로를 사용할 때, 파일 경로가 길어지거나 중복되는 경우에 별칭을 사용하면 긴 경로를 짧고 명확한 이름으로 대체할 수 있어 코드가 더 깔끔해지고, 다른 개발자들이 쉽게 이해할 수 있게된다. 그리고 프로젝트를 유지보수하다가 프로젝트 구조가 변경될 경우, 상대 경로를 사용하면 하나하나 일일이 수정해야 하는 불상사가 생길 수 있다. 하지만 별칭을 사용하면 별칭 자체만 수정하면 되므로 유지보수가 훨씬 간편해진다.

마무리

오늘은 약간의 귀찮음 덕분에 절대 경로에 대해 공부해봤다. 물론 지금은 폴더 구조가 단순하고 파일도 그렇게 많지 않아서 잘 활용할 수 있을지는 모르겠지만, 그래도 큰 프로젝트를 하게 된다면 분명 필요할 것이기 때문에 언젠가는 유용하게 잘 사용할 것 같다.