[Next.js] jsconfig.json의 paths

서론

컴포넌트와 컨트롤러의
impprt 주소가 점점 복잡해지고 있다.

// .\app\blog\[slug]\page.js
import PrismLoader from "../../../components/PrismLoader";

전 편에서 만들었던 PrimLoader는
사용하는 경로가 .\app\blog\[slug]\page.js
전, 전, 전 폴더의 components폴더를 찾아야 한다.

VS Code에서 컴포넌트를 이름을 치면
자동으로 주소를 입력해주지만...

더 깔끔한 방법을 원했다.

jsconfig.json 의 paths

Visual Studio Code 공식문 : https://code.visualstudio.com/docs/languages/jsconfig

프로젝트 폴더 안에 ( 경로 밖 )
jsconfig.json이라는 파일이 있다.

파일 내용은 아래와 같다.
( src를 사용한 경우 )

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

경로paths를 대체 생략하는 내용이 있다.
아래에 component와 controller 경로를 추가했다.

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "components/*": ["./src/app/components/*"],
      "controller/*": ["./src/app/controller/*"]
    }
  }
}

import 하는 페이지의 경로를 수정했다.

// .\app\blog\[slug]\page.js
import PrismLoader from "components/PrismLoader";

이제 import 할 때, 경로가 간단하게 잘 확인된다.