들어가며
Next.js로 할 때 어떤 라이브러리, 혹은 컴포넌트를 import하는 일은 비일비재하다.
일반적으로 import Something from './url~~'; 과 같은 형식으로 불러오며, 파일 하나에서 여러줄의 import를 하게된다.
근데 개발을 하다보면 점점 느껴지는 게 있다.
import 경로가 너무 길고 복잡한거 아니야...? 🤔
그도 그럴것이 프로젝트 초기나 간단한 프로젝트의 경우에는 느끼지 못하지만, 규모가 점점 커질수록 프로젝트 경로 또한 복잡해지기 때문이다.
이러한 현상이 계속되다보면 결국 아래처럼 생긴 import가 잔뜩 생기게 된다.
import Something from '../../../../components/common/layout/Something/';
import SubThing from '../../../../components/common/base/SubThing/';(어우 이건 좀)
딱 보기에도 매우 지저분하지 않은가?
이런 코드가 파일을 딱 열었을 때 10줄정도 있다고 생각하면 벌써 눈이 아플 지경이다.
또한 이는 단순히 미관상의 이유로 안좋은 것 뿐만이 아니다.
생각(뇌)는 결국 한정된 자원이고, 우리는 이를 효율적으로 써야한다.
개인적인 생각으로 개발자가 개발을 할 때 코드 작성 이외의 작업에 생각을 들이는 것은 (그런 상황이 생기는 것은) 최대한 지양되어야 한다고 생각한다.
당연하지만, 한정된 리소스(개발자의 머리) 내에서 최대한 효율적으로 개발을 하는것이 좋기 때문이다.
엥? 개발할 때 디렉토리 찾아보고 import 한 적이 없는데요? vscode가 다 해주는데 ㅋㅋ😎
물론 요즘은 import를 vscode같은 IDE가 알아서 추가해준다.
하지만 단순히 import를 추가할 때 생기는 경우만 생각하는 것이 아닌, 이미 import되어 있는 코드를 읽어볼 때에도 생각이 들어간다.
위와 같은 코드로는 어떤 디렉토리 구조로 생긴 프로젝트인지 한눈에 알아보기 어렵고, 어떤 역할을 하는 코드를 import 한건지 이해하는데 생각을 해야한다.
따라서 이번에는 경로를 절대경로와 별칭을 통해 간단하게 만들어보도록 하자.
Next.js에서 절대경로로 import
tsconfig.json 절대경로 설정
서론이 거창했지만, 사실 절대경로를 설정하는 것은 매우 쉽다.
tsconfig.json 파일에서 한 줄만 추가해주면 된다.
{
...
"compilerOptions":{
...
"baseUrl": "경로시작지점",
}
}
어떤가? 너무 간단하지 않은가?
baseUrl 에 절대경로로 시작 할 경로를 지정해주면 된다.
나의 경우에는 /src폴더 밑에부터 절대경로로 하고 싶어 "baseUrl":"./src" 로 설정했다.
이제 만약 내가 /src/components/common/layout에 있는 파일을 import하고 싶다면 아래처럼 적으면 된다.
import Something from 'components/common/layout'Next.js에서 별칭으로 import
절대 경로 설정 끝~~~... 근데 @는 뭐죠? 🤨
사실 이 게시글을 들어온 사람이라면 이게 더 궁금했을 것 같다.
import Something from '@template/PageTemplate';구글링하다가 이런식으로 아주 간단하게 쓰는 걸 봤는데,
@ 키워드를 어떻게 검색해도 잘 나오지 않았을 것이기 때문이다.
(절대 내 얘기 아님)
react에서는 이 설정을 webpack을 통해서 하는 것 같던데,(확실하지않음)
Next.js는 tsconfig.json에서 한번에 설정이 가능하다.
어렵지 않으니 바로 한번 해보자.
경로 별칭 설정
미리보기
이게 뭔지 모르는 사람을 위해 공부할때 책에 붙여놓았던 포스트잇을 떠올려보자.
나는 안그랬지만 공부 잘하던 친구들은 역사 책에 구석기시대, 신석기시대, 청동기시대 등으로 뭔가 기준이 되는 것들을 붙여놓았다.
그리고 나중에 책을 펼칠 때 포스트잇을 보고 원하는 페이지를 바로 펴서 봤을 것이다.
이처럼 별칭은 디렉토리에 포스트잇을 붙인다고 생각하면 된다.
예시로 아래와 같은 프로젝트 구조가 있다고 가정해보자.
└─src
├─components
│ ├─base
│ ├─common
└─core
├─apis
│ ├─auth
│ ├─profile
│ │ └─setting
│ └─user
├─hooks
└─utils
만약 setting 디렉토리 내의 api를 import하고 싶다면 아래와 같이 해야 할 것이다.
import getSetting from 'core/apis/profile/setting'하지만 별칭을 설정해두면 이렇게도 할 수 있다.
import getSetting from '@profileAPI/setting'적용방법
포스트잇을 붙이는 방법은 절대경로만큼이나 간단하다.
아까 설정한 tsconfig.json파일을 꺼내서 한 줄만 더 추가해주면 된다.
{
...
"compilerOptions":{
...
"paths":{
"@profileAPI/*" : ["core/apis/profile/*"],
}
}
}
"path"에 원하는 별칭과 경로를 입력해주면 끝난다.
이제 core/apis/profile내의 모든 파일들은 @profileAPI라는 별칭으로 접근이 가능하다.
정리
코드에서는 로직의 완성도도 중요하지만, 이 처럼 사소한 부분에서의 퀄리티가 개발자의 실력을 좌우하게 되는 것 같다.
작은 부분의 디테일 하나하나도 신경쓰며 갓갓갓 개발자가 되어보도록 하자.
- 절대경로는
tsconfig.json의compilerOptions에"baseUrl":"원하는경로"로 설정 - 별칭(@)은
tsconfig.json의compilerOptions에"paths":{"@별칭명/*":["경로/*"]}로 설정
+ 읽어주셔서 감사합니다.
+ 오타, 내용 지적, 피드백을 환영합니다. 많이 해주실 수록 제 성장의 밑거름이 됩니다.