Next js import alias 설정

import alias가 필요할 때

• depth가 깊은 곳에 있는 무언가를 import 할 때

장점

• 절대경로라서 파일 위치가 바뀌어도
  import문 수정이 필요없음.
• 코드가 깔끔해짐.

단점

• 초기 설정이 필요 (적용이 안 되는 IDE도 있음)
• 만약 같은 이름의 폴더가 여러 개라면 어떤 폴더에서 가져왔는지
  알기 어려울 수도 있음.

import alias 미사용

import Button from './components/atom/Button'

import alias 사용

import Button from '@Atom/Button'

설정

1. tsconfig.json 의 compilerOptions 안에
   아래와 같은 코드를 적는다.
   (baseUrl, paths는 아래의 설명을 보고 프로젝트에 맞게 적용)

// tsconfig.json

{
  "compilerOptions": {
    ...,
    "baseUrl": ".", // root 디렉토리가 좋음
    "paths": {
      "@Atom/*": ["app/components/Atom/*"]
    }
  }
}

baseUrl

• baseUrl은 import를 할 기준점.
  어떤 디렉토리 하나만 바라볼 거라면
  root 디렉토리로 설정하지 않아도 되지만,

프로젝트 진행 중에는 app, src, public, lib 등
다양한 디렉토리를 바라봐야 하는 상황이 있으니

root 디렉토리를 baseUrl로 해두면 나중에
어디에서 import 하더라도 문제가 없을 것이기 때문.

paths

"@Atom/*: ["app/components/Atom/*"]

• 여기서 @Atom/* 은 alias 뜻 그대로 별명 부분.
  @UI/*, @Default/* 등 이름은 맘대로 해도 됨.
  

뒤에 붙은 /* 이 부분은 와일드카드라고
모든 하위항목(파일/폴더)를 가리키는것.

만약에 구조가 Atom 폴더 안에
Button.tsx, SelectBox.tsx, Input.tsx
이렇게 파일들만 존재한다면 안 써도 되지만,

Atom > Button > Button.tsx
Atom > Input > Input.tsx
이런 식으로 폴더에 담겨있다면
와일드 카드를 붙여야 제대로 동작함.

[app/components/Atom/*] 이부분은 바라볼 곳을 설정하는 부분.

위의 코드를 풀어서 말하면
root(basUrl) / app / components / Atom 같은 폴더 구조에서
Atom 폴더의 모든 하위항목(폴더/파일)들 중에서 import 하겠다는 의미.

설정했는데 적용이 안 될때

1. 커맨드 팔레트를 열어서 TypeScript:restart TS Server 실행

   커맨드 팔레트 단축키

   • 윈도우: ctrl + shift + P
   • 맥: cmd + shift + P

2. 에디터 껏다가 켜보기..