[NextJS 영문 기술 블로그 만들기] 개발 잠깐 stop! setting 추가(import 상대 경로에서 절대 경로로 변경, prettier 추가 설정)

개발하다보니 저번 시간에 했던 prettier 설정이 아주 빈약했음을 깨닫고 있다;; 필요한 설정들이 하나 둘 씩 늘어났다. 이번 포스팅에서는 점진적으로 추가했던 prettier 설정들에 대해 중요한 것들 위주로 다뤄보려고 한다.

import 상대 경로 ➡️ 절대 경로로 변경

상대 경로로 지정하면 현재 경로를 기준으로 일일히 도착지까지 경로를 따져봐야 하는데, 프로젝트 디렉토리의 전반적인 구조를 파악하고 있다는 전제 하에는 절대경로가 훨씬 가독성 측면에서 나을 것이라는 생각이 들었다.

아래와 같이 prettier에서 모든 경로가 src 기준의 절대 경로로 결정되도록 baseUrl 속성을 지정해주었다. baseUrl이 .인 이유는 eslint 설정 파일이 src와 형제 관계이기 때문이다.

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

절대 경로로 지정하니 ../../../../ 이런 경로들도 @ 한 글자로 대체할 수 있으니 아주 깔끔해졌다!

// import MyInfo from './../components/MyInfo';
import MyInfo from '@/components/MyInfo';
// import ProfileImage from './../../public/profile.jpeg';
import ProfileImage from 'public/profile.jpeg';

참고로 public은 eslint 설정 파일과 형제 관계이기 때문에 @ (또는 ./src)로 시작하지 않고 public에 바로 접근한다.

그런데 이렇게 지정을 해줘도 어쩌다가 상대경로로 지정될 떄가 있어서 다시 찾아옴!
vscode 자체에서 상대경로 설정을 해줘야 한다.
https://velog.io/@hannatoo/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-import-%EA%B2%BD%EB%A1%9C-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C%EB%A1%9C-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0
이 분 블로그를 참조했다. 감사합니다~~

import 순서 자동 정렬 설정

처음에는 import 순서를 eslint로 기준을 정하여 적용했다. 하지만 lint 명령어를 입력하여 일일히 확인하는 것보다 저장만 하면 import가 자동으로 정렬되면 더 좋겠다는 생각이 들었다. 그래서 prettier에도 import sorting을 해주는 plugin이 있다길래 eslint의 sorting 설정을 주석 처리하고 시도해보았다. pulgin 이름은 prettier-plugin-sort-imports이다.

import 정렬 기준을 .prettierrc에 기재해야 하는데, prettier-plugin-sort-imports의 경우 정규식으로 정렬 기준을 지정한다. 이 때 앞에서 절대 경로로 변경했기 때문에, '경로에 @가 포함된 경우'를 지정하면 깔끔하겠다는 생각이 들었다.

prettier-plugin-sort-imports를 설치하고 아래와 같이 속성을 지정해주었다.

pnpm 쓰면 위와 같이 속성을 지정해줘야 문제가 안생긴다네?! 바로 적용 시전~!
참고:
https://github.com/trivago/prettier-plugin-sort-imports

"plugins": [
		"@trivago/prettier-plugin-sort-imports"
	],
"importOrder": ["^next", "^react", "^@", "\\.(png|jpe?g|gif|svg|webp)$"]
    

next로 시작
react로 시작
@로 시작
이미지 파일

순으로 import 우선순위를 지정해보았다.

참고로 써드파티 모듈은 맨 위로 가는게 default이다. 난 초보니까 일단은 default로 지정해보고, 마음에 안들면 바꿔보자;; 시행착오가 좀 더 필요할 것 같다.

어쨌든 prettier-plugin-sort-imports로 import 순서 자동 정렬은 성공! 순서를 case by case로 꼼꼼히 설정하지는 못해서 아쉽다 ㅠ 이번에 프로젝트하면서 점진적으로 import order를 업데이트해봐야지.

prettier plugin 추가 (tailwind 속성 권장 순서대로 정리)

pnpm i prettier-plugin-tailwindcss

// prettier
"plugins": [
  //..
  "prettier-plugin-tailwindcss"
]

plugin 설치만 해주면 자동으로 tailwind 속성이 정렬된다.

그런데 push 후 pull 받아서 dev branch에서 실행해보니 다시 정렬이 안되는 것이었다..

trouble shooting

plugin 순서가 문제였다.

	"plugins": [
		"prettier-plugin-tailwindcss", // ❌
		"@trivago/prettier-plugin-sort-imports"
	],

	"plugins": [
		"@trivago/prettier-plugin-sort-imports",
		"prettier-plugin-tailwindcss" // ⭕️
	],

참고:
https://github.com/tailwindlabs/prettier-plugin-tailwindcss?tab=readme-ov-file#compatibility-with-other-prettier-plugins

저 사진의 리스트에 있는 plugin과 호환이 되긴하는데, prettier-plugin-tailwindcss를 가장 마지막에 배치해야 한다. @trivago/prettier-plugin-sort-imports를 가장 마지막에 추가한 이후부터 tailwind css 자동정렬이 동작하지 않았던 것이었다.