NextJS에서 사이트 루트로부터의 가져오기

이번 강의에서는 NextJS의 가져오기를 계속해서 학습하겠습니다. 하지만 이번에는 NodeJS에는 없지만 NextJS에는 있는 기능을 살펴볼 것입니다.

문제는 NodeJS에서 가져올 때 상대 경로(시작 슬래시 없음)를 사용하거나 운영 체제 루트로부터의 절대 경로(프로젝트를 다른 컴퓨터로 옮길 때 문제를 일으킴)를 사용할 수 있다는 점입니다.

그러나 실제로는 프로젝트 루트로부터의 가져오기가 한 가지 더 필요합니다. NodeJS에는 이러한 가져오기가 내장되어 있지 않지만, NextJS에는 있습니다.

이 가져오기 기능은 NextJS를 설치할 때 활성화됩니다. 기억하시나요? Would you like to customize the default import alias라는 질문이 있었습니다. 여기에 Yes라고 대답하면 프로젝트 루트로부터의 가져오기를 설정할 수 있는 기능이 생깁니다.

어떻게 하는지 살펴보겠습니다. 예를 들어 다음과 같은 파일 구조가 있다고 가정해 보겠습니다.

/src/
- data.js
- /app/
  - /test/
    - page.jsx

보시다시피, data.js 파일은 page.jsx 파일에서 멀리 떨어져 있습니다. 데이터 파일을 페이지 파일로 가져와 보겠습니다. 이를 위해 상대 경로를 사용하겠습니다.

import data from '../../data.js';

export default function Test() {
	return <h1>Test</h1>;
}

보시다시피, 상대 경로를 통한 가져오기는 ../로 경로를 시작해야 하기 때문에 그다지 편리하지 않습니다. 게다가 컴포넌트를 다른 위치로 이동시키면 데이터 파일로의 경로가 깨질 것입니다.

데이터 파일로의 경로를 프로젝트 루트(src 폴더가 여기에 해당함)로부터 지정하는 것이 더 편리할 것입니다. 이를 위해서는 경로 시작 부분에 @ 기호를 써야 합니다. 한번 해보겠습니다.

import data from '@/data.js';

export default function Test() {
	return <h1>Test</h1>;
}

다시 한번 강조하지만, 이러한 가져오기는 NextJS에서만 가능하며, 설치 시 해당 질문에 올바르게 대답한 경우에만 가능합니다. 단순히 NodeJS나 순수 JavaScript에서는 작동하지 않을 것입니다.

다음 파일 구조가 주어졌습니다.

/src/
- /app/
  - data.js
  - /test/
    - page.jsx

데이터 파일을 Test 컴포넌트로 가져오세요. 가져올 때 프로젝트 루트로부터의 경로를 지정하세요.

파일 구조를 다음과 같이 변경하세요.

/src/
- /app/
  - data.js
  - /test/
    - /sub/
      - page.jsx

프로젝트 루트로부터의 가져오기가 여전히 문제 없이 작동하는지 확인하세요.