[NextJS 영문 기술 블로그 만들기] 초기 세팅 (ESLint, Prettier, next.config.js 등)

no-implicit-any (tsconfig) vs no-explicit-any (eslint-typescript)

tsconfig.ts에서 noImpliciteAny : true, 또는 strict: true를 적용하면 no-implicit-any가 적용된다. 이는 타입을 명시적으로 지정하지 않았는데 타입 추론마저 되기 어려울 때 any로 타입 추론이 되는데, 이 때 error를 낼 것인지에 대한 설정인 것이다.

물론 암묵적으로 any를 금지하는 것도 바람직하지만, 나는 아직 목마르다(?) any를 사용하면 linting 시 warning을 주고 싶었다. any type이 사실상 타입스크립트를 사용하는 이유를 무력화하는만큼, 아무리 늦어도 bulid 시에는 any type이 적절한 type으로 선언이 되는 것이 바람직하다고 생각했다.
이럴 때 typescript-eslint를 사용하여 no-explicit-any를 설정할 수도 있다.

https://pravusid.kr/typescript/2020/07/19/typescript-eslint-prettier.html
이 분의 블로그를 보고 설정에 도움을 받았다. (감사합니다!)
typescript-eslint란 말그대로 typescript를 linting하는 도구이다. rules에 no-explicit-any를 지정하면 된다. 오타내서 우연히 알게된 레벨이 아래와 같다.

나는 warn으로 설정했다.

{
	"root": true,
	"extends": [
		"next/core-web-vitals",
		"next",
		"prettier",
		"plugin:@typescript-eslint/recommended"
	],
	"parser": "@typescript-eslint/parser",
	"parserOptions": {
		"project": "./tsconfig.json"
	},
	"env": {
		"node": true,
		"browser": true
	},
	"rules": {
		"@typescript-eslint/no-explicit-any": "warn"
	}
}

참고:
https://pravusid.kr/typescript/2020/07/19/typescript-eslint-prettier.html
https://cheeseb.github.io/typescript/effective-typescript-1/
https://typescript-eslint.io/rules/no-explicit-any/

pnpm 별칭 설정

pnpm 패키지 매니저를 쓰고 싶은데, pnpm이라는 이름이 너무 길어서 일일히 입력하기 귀찮다는 단점이 있다. 그래서 docs에서도 별칭 지정하는 방법을 소개하고 있다.
https://pnpm.io/ko/installation#using-a-shorter-alias

터미널에서 nano 편집기를 열고

nano ~/.zshrc

맨 마지막 줄에

alias pn=pnpm

을 추가해준다.

Ctrl + O를 눌러 저장,
Enter 누르고,
Ctrl + X 눌러 에디터에서 나온다.

그리고 마지막으로

source ~/.zshrc

를 터미널에 입력하여 변경사항을 적용한다.

이렇게 하면

pnpm dev

대신

pn dev

만 터미널에 입력해도 NextJS를 실행할 수 있다.

그런데 pn dev를 입력하고 Next를 실행하니 pnpm-lock.yaml 대신 package-lock.json이 있다.

package manager를 npm으로 사용하는 시점에 Next를 설치해서 그렇다.

pn i

로 다시 설치해주면

이렇게 잠금 파일도 pnpm으로 관리할 수 있게 된다.

lock 파일을 반드시 사용해야 하는 이유에 대해서는
https://velog.io/@jasmine0714/lock%ED%8C%8C%EC%9D%BC
에서 포스팅했다.

Statically Typed Links (experimental)

Link 태그를 사용할 때, 생성된 적 없는 route를 href 속성에 지정하면 정적 오류를 낼 수 있는 기능을 docs에서 발견하게 되었다.

https://nextjs.org/docs/app/building-your-application/configuring/typescript#statically-typed-links

next.config.js에 아래와 같이 typedRoutes를 지정하면 된다. 그런데 experimental 속성이므로 당장 안정적인 기능은 아닐 것 같다.

/** @type {import('next').NextConfig} */
const nextConfig = {
	experimental: {
		typedRoutes: true,
	},
};

export default nextConfig;

다만 개인적으로는 오타 방지 뿐만 아니라, 협업할 때 팀원이 라우트명을 변경하거나 삭제하면 바로 확인할 수도 있을 것 같아서 아주 유용한 기능이라고 생각한다. 커뮤니티의 많은 지지를 받을 수 있지 않을까?!

현재 about이라는 route를 생성한 적이 없는 상태인데, 뜬금포로 href 속성에 지정하면 타입 에러가 난다.

참고:
https://nextjs.org/docs/app/building-your-application/configuring/typescript#statically-typed-links

experimentalTernaries (experimental)

{
	"useTabs": true,
	"singleQuote": true,
}

default 값 중 마음에 안드는 것들 위주로 변경했다.

experimentalTernaries라는 새로운 속성도 있었는데, 한 번 시도해보고 그냥 사용하지 않기로 했다.

	const content =
		children && !isEmptyChildren(children) ?
			render(children)
		:	renderDefaultChildren();

이런 식으로 true로 설정할경우 조건 다음 물음표가 줄바꿈 없이 뒤쪽에 오게 된다.
삼항연산자 조건이 길어질 경우 ?를 다음 줄에 위치시키지 않게 하는 prettier의 새로운 기능이다. docs에도 츄라이츄라이 해보라고 나와있다. 하지만 나는 무엇이든 줄바꿈이 확실히 되는 게 가독성이 더 좋다고 생각하기 때문에 사용하지 않고 패스!