babel-plugin을 사용하여 절대경로 지정하기.

import Card from '../../../../Components/Card'

next와 react를 사용하면서 모듈을 불러올 때 상대경로로 불러왔다. 하지만 구조가 깊어지고, 파일이 많아지면서 import하기 번거로와졌다. 페이지 구조가 변경되면 import경로를 전부 수정해야하는 문제가 생겼다.

import Card from 'Components/Card'

절대경로로 import 하면, 페이지의 구조를 변경해도 import 경로를 수정하지 않는다. 파일 위치를 파악하기 더 쉬웠다.

절대경로로 셋팅하는 방법

참고페이지 : https://github.com/tleunen/babel-plugin-module-resolver)

1. 패키지 설치한다.

 npm install dev babel-plugin-module-resolver

2. package.json과 같은 위치에 .babelirc 파일을 만든다.

┌ package.json
├ .babelirc

3. .babelirc 파일에 아래와 같이 페이지 경로를 작성한다.

{
  "plugins":  [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "pages": "./pages",
        "components": "./components",
        ...
      }
    }],
  ]
}

“alias” 객체에는 사용하고 싶은 이름을 적는다. “./pages”를 “pages”로 사용할 수 있고, “./components”를 “components”로 적을 수 있게 된다. 필요한 경로를 작성한다. “pages”의 이름은 무엇이든 상관없다.