[Next.js] import 시에 alias 사용하기 (절대 경로)

사용 이유

긴 상대 경로를 사용하는 대신 간단한 별칭을 사용하면 코드가 더 간결해지고 가독성이 향상됩니다.

 

ex)

// before
import SeleniumIcon from "../../../public/svgs/selenium-color.svg";

// after
import SeleniumIcon from "@/svgs/selenium-color.svg";

 

와 같이 별칭을 사용하면 경로가 더 짧아지고 이해하기 쉬워집니다.

 

 

설정 방법

 

tsconfig.json 또는 jsconfig.json 파일에서 아래와 같이 설정해줍니다.

 "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/styles/*": ["src/app/_styles/*"],
      "@/sections/*": ["src/app/_sections/*"],
      "@/components/*": ["src/app/_components/*"],
      "@/svgs/*": ["public/svgs/*"],
      "@/data/*": ["src/app/_data/*"]
    }
  },

 

baseUrl은 모든 상대 모듈 import 경로의 기준이 되는 디렉터리를 지정하는 옵션입니다.

 

paths는 모듈의 import 경로를 간결하게 지정할 수 있도록 해주는 옵션입니다.
특히, 경로에 대한 별칭(alias)을 설정할 때 사용됩니다.

 

 

이렇게 설정을 통해 import문을 간결하게 하여 이해하기 쉽도록 할 수 있습니다.