커스텀 절대 경로 설정

소개

이번에 프로젝트를 하나 시작했는데 분할 구조를 사용해보기로 했다. 그 과정에서 다음과 같은 코드가 많이 보였다. 소위 지옥의 상대경로라고 불리는 현상이 발생한것이다..!

import Back from '../../components/back/index.js'
import SignUp from '../../components/signUp/index.js'
import Level from '../../components/level/index.js'
import Line from '../../components/line/index.js'

개발하는 나는 상관없지만 협업을 하고있는 입장에서 팀원이 내코드를 이해하는데 불편함을 줄 수 있겠다는 생각이 들어 상대경로가 아닌 커스텀 절대경로를 사용해보기로 했다.

커스텀 절대경로란?

커스텀 결대경로는 내가 원하는 경로를 포스트잇으로 만들어 필요한곳에 붙여주는 방법이다. 예를들어 이러한 극단적인 코드가 있다고 가정을 한다면 나는 네줄동안 /sample/a/b/c/d/e/f/g/h/i/index.js이라는 타이핑을 해야한다. 4줄정도는 그냥 치는것도 나쁘지 않지 않나?라는 생각을 할 수 도 있지만 만약 이러한 코드가 다른곳에도 쓰인다면? 4번이 아니라 40번을 쓰게 될지는 아무도 모른다.

import Sample from "/sample/a/b/c/d/e/f/g/h/i/index.js"
import SampleStyle from "/sample/a/b/c/d/e/f/g/h/i/style.js"
import SampleHook from "/sample/a/b/c/d/e/f/g/h/i/hook.js"
import SampleConst from "/sample/a/b/c/d/e/f/g/h/i/const.js"

이떄 커스텀 절대경로를 사용해 /sample/a/b/c/d/e/f/g/h/i를 @sample이라는 포스트잇에 적어주고 필요한곳에 붙여준다면?

import Sample from "@sample/index.js"
import SampleStyle from "@sample/style.js"
import SampleHook from "@sample/hook.js"
import SampleConst from "@sample/const.js"

코드는 훨씬 간결해지고 가독성도 좋아진다. 아래는 설명을 돕기위해 그려본 예시이다.

설정하는 방법 (Next, React)

jsconfig.js

설정하는 법은 매우 간단하다. jsconfig.js파일로 이동한다. 그리고 아래처럼 원하는 경로를 []안에 메모해주고 메모 명을 앞에 작성한다. 메모명 : [원하는 경로]

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["components/*"],
      "@constants/*": ["constants/*"],
      "@hooks/*": ["hooks/*"],
      "@pages/*": ["pages/*"],
      "@public/*": ["public/*"],
      "@styles/*": ["styles/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

마치며

매우 간결해졌다! 이러한 사소한 차이가 좋은 개발자를 만든다고 하더라 😀