Next 로 프로젝트를 시작하고 절대경로를 설정하는 법을 포스팅해보기로 했다.
항상 이렇게 프로젝트를 열고서 설정해주는 것은 딱 처음에 한번 설정하고 새 프로젝트 전에는 쓰지 않기 때문에 까먹게 되서 이렇게 블로그에 적어서 기록해보고자 한다.

1. 프로젝트 다운받기

넥스트의 공식문서를 가면 아주 깔끔하게 설명이 잘 나와있다. 때문에 많은 부분에서 잘 모르거나 막히는 부분이 있다면 넥스트 공식문서를 찾아가서 보는 것이 제일 도움이 되는 경우가 많다.

넥스트 공홈에서 보면 넥스트 자체에서 타입스크립트로 초기 세팅을 다운받는 CLI 명령어가 나와있다.
때문에 타입스크립트로 넥스트를 시작하려 한다면 이대로 명령어를 치면 된다.

npx create-next-app@latest --ts
# or
yarn create next-app --typescript

2. 절대경로 설정하기

왜 절대경로를 설정해야 할까?

넥스트는 기본적으로 SSR(서버사이드 렌더링)과 SEO(검색 엔진 최적화)를 도와주는 '리액트 프레임워크'다.
기본적으로 리액트란 소리다.
리액트는 프로젝트를 컴포넌트 단위로 잘게 쪼개서 코드를 작성하기 때문에 특히나 폴더구조가 깊어지고 복잡해질 수 있고, 그런 경우 상대경로로 파일을 import 하는 과정에서 매우 번잡해질 수 있다.

import MyComponent from '../../../../../MyComponent'

극단적으로 이렇게까지 상대경로가 깊어질 수 있다는 말이다.
때문에 절대경로를 설정함으로써 이런 불편한 점을 해결할 수 있고, 직관적으로 해당 파일이 어느 경로에 있는지를 알 수 있다.

tsconfig.json 설정하기

{
	"compilerOptions": {
		"baseUrl": ".",
	}
}

타입스크립트에서 절대경로 설정은 생각보다더 더더더 간단하다.
tsconfig.json 파일로 가서 위에처럼 설정해주면 된다.
compilerOptions 에서 기준이 되는 루트 경로(bseUrl)을 루트 경로 . 로 설정해준 것이다.

import MyComponent from 'components/MyComponent'

그럼 이처럼 루트 디렉토리에 위치한 components 폴더부터, 혹은 public 폴더 등 간단하게 절대경로를 설정해줄 수 있다.

경로 별칭 지어주기

import RoomReservation from "components/accommodations/roomDeatil/body/tabs/reservation/RoomReservation"

절대경로를 설정하더라도 디렉토리 구조가 깊어지고 복잡해질수록 절대경로를 설정한 것이 내가 import 한 파일의 위치는 직관적으로 알 수 있지만, 코드의 양 자체가 길어질 수 있다.

위의 코드는 실제로 내 코드에서 RoomReservation.tsx 파일을 import 하는 과정에서 절대경로의 코드양이 어마무시하게 길어진 실제 예시다.
이런 경우 tsconfig.json 에서 경로 별칭으로 절대경로 코드를 다소 줄일 수 있다.

{
	"compilerOptions": {
    	"baseUrl": ".",
      	"paths": {
        	"@roomDetail/*": ["components/accommodations/roomDetail/*"],
        }
    }
}

compilerOptiosn 의 "paths" 항목의 값으로 들어오는 객체 안에 key, value 로 경로를 적어주면 된다.
나는 "roomDeatil" 까지 축약해서 내부의 파일들을 import 하면 좋겠다 싶었다.
때문에 @roomDeatil 이란 별칭을 만들어서 components/accommodations/roomDetail/* 하위의 경로에 해당하는 파일들을 "@roomDetail/ ..." 로 바로 가져올 수 있도록 했다.

import RoomDetail from "@roomDeatil/body/tabs/reservation/RoomReservation"

그럼 이런 식으로 다소 줄일 수 있다.
어느 부분에서 별칭을 만들어서 코드의 양도 줄일 수 있고 자주 import 하는 경로를 쉽게 가져올 수 있다.

이상 넥스트를 타입스크립트로 프로젝트를 시작해서 절대경로를 설정하는 방법을 알아봤다.
타입스크립트를 쓰는게 쓰지 않는 것보다 절대경로를 설정하는 것이 훨씬 간단해서 금방 할 수 있었다.