📚공부

NEXT.js에서 골뱅이(@)를 별칭으로 써서 import 하는 방법

주인가미 2024. 1. 31. 06:00
반응형

NEXT.js에서 골뱅이(@)를 별칭으로 써서 import 하는 방법

 

Next.js를 공부 하다가 

import를 해올 때 절대나 상대경로를 쓰지 않고 골뱅이(@)를 쓰는 광경을 처음 보았다.

공식문서를 찾아 보고 별칭(영어로 alias)라고 부른다는 걸 알게 됐다.

무한 .././././를 사용하는 것보다 간결하고 제3자가 봐도 이해하기 쉽겠다 싶었다.

그래서 이하는 Module Aliases(모듈 별칭)을 활용하는 방법을 간단하게 정리해 보았다.

모든 내용은 Next.js 공식 문서에 기반한다.

https://nextjs.org/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases

 

Configuring: Absolute Imports and Module Path Aliases | Next.js

Configure module path aliases that allow you to remap certain import paths.

nextjs.org

 

목적

유지보수관리력 up,코드이해력 up-긴 경로를 간결하게 깔끔하게 나타낼 수 있다

 

방법

tsconfig.json(타입스크립트 안쓰면 jsconfig.json)에다가

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/쓰고 싶은 별칭/*": ["폴더나 경로/*"]
    }
  }
}

 

를 넣고, import를 쓸 파일에다가

import ~ from '@/아까별칭/나머지경로'

 

 

위와 같은 식으로 사용하면 별칭을 경로로 사용할 수 있다.

 

예

@아무이름너로정했음/*:["아무이름너로정했음이라는폴더이름/*"],

이렇게 쓰면 아무이름너로정했음 folder를 mapping해주게 되고,

import X from '@아무이름너로정했음 /X' 식으로 import 해와서 쓰면 된다. 간단하다.

별칭식 import를 안썼다면 import X from '../../아무이름너로정했음 /X'  처럼 썼을 것이다.

 

이는 익숙할진 모르나 제 3자가 보면 이해가 잘 안가거나 어디까지 경로가 올라가는지 답답할 수 있다.

이러한 문제를 해결할 수 있다는 점이 좋았다.

 

반응형