1. Next.js
- Next.js는 Node 버전 18.17 이상을 요구한다.
- 자동 설치 시 설치 방법이 굉장히 간단하다.
npx create-next-app@latest // 설치
npm run dev // 개발 서버 실행
2. ESLint
- 일관성 있는 방식으로 구현할 수 있도록 해준다.
- 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구
- 에디터에 적용해서 사용하는 것으로 eslint Extension과 eslint 라이브러리를 모두 설치해줘야 된다.
프로젝트에 적용
- Next.js는 바로 사용할 수 있는 통합 ESLint 환경을 제공, 현재로서는 딱히 건들게 없어보인다.
3. Prettier
- 줄 바꿈, 공백, 들여 쓰기 등 텍스트를 일관되게 작성할 수 있게 해준다.
- 개발자가 작성한 코드를 정해진 코딩 스타일에 맞게 자동으로 변환해주는 도구(코드 포맷터)
- 에디터 자체 또는 프로젝트에 적용해서 사용할 수 있다. prettier Extension만 설치해줘도 된다.
- 에디터 자체 설정은 VScode Settings, 프로젝트 설정은 .prettierrc
- 우선순위는 .prettierrc, VScode Settings 순이다.
- 다만, Prettier CLI를 사용할 경우 prettier 라이브러리 설치 필요
프로젝트에 적용
- eslint와 prettier 충돌 방지를 위해 eslint-config-prettier 설치
npm install --save-dev eslint-config-prettier
{
"extends": ["next", "prettier"]
}
- Prettier 규칙 정의 (.prettierrc)
{
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"useTabs": false,
"tabWidth": 2,
"printWidth": 120,
"arrowParens": "always"
}
4. VScode Settings.json
- format on Save를 적용할 수 있고 두 가지 방법이 있다.
- 일반적으로 두 번째 방법을 더 선호한다고 한다.
- 두 가지 방법을 모두 사용해도 된다고 한다. 이 경우 첫 번째 방법, 두 번째 방법 순으로 수행된다.
코드 작업에 대한 동작을 정의
- 저장할 때 ESLint에 의해 감지된 문제를 자동으로 수정하도록 설정
"editor.codeActionsOnSave": { "source.fixAll.eslint": "always" },
코드 서식 지정을 자동화
- 저장할 때 코드를 자동으로 서식 지정하도록 설정
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
5. TypeScript
- 우선, create-next-app에서 기본적으로 제공해주는 컴파일러 옵션을 사용하기로 했다.
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
/*
lib: ["dom", "dom.iterable", "esnext”], 대상 런타임 환경을 설명하는 번들 라이브러리 선언 파일 집합을 지정
allowJs: true, JavaScript 파일이 프로그램의 일부가 되도록 허용
skipLibCheck: true, 모든 .d.ts 파일 타입 검사을 생략
noEmit: true, 컴파일에서 변환된 결과물 생성을 비활성화
esModuleInterop: true, CommonJS와 ECMAScript 모듈 간의 상호 운용성을 향상
module: esNext, ESNext 모듈 시스템 선택
resolveJsonModule: true, json 파일을 모듈처럼 인식
isolatedModules: true, 개별 파일을 독립적으로 컴파일 가능
jsx: preserve, 컴파일시 jsx를 그대로 유지
incremental: true, 변경된 파일만 다시 컴파일 수행
*/
5. 폰트
폰트 최적화
- 사용자 정의 폰트을 사용하면 폰트 파일을 가져와서 로드해야 하는 경우 성능에 영향을 줄 수 있다.
- 폰트 로드시 브라우저는 처음에 fallback 또는 시스템 폰트로 텍스트를 렌더링한다. 이때 레이아웃 이동이 발생할 수 있고 이는 사용자 경험에 영향을 준다.
- Next.js에서 next/font 모듈을 사용하면 자동으로 최적화한다.
- 빌드 시점에 폰트 파일을 다운로드하여 다른 정적 에셋과 함께 호스팅
- 이후, 폰트에 대한 추가적인 네트워크 요청은 발생하지 않는다.
폰트 설정하기
- next/font/goole 모듈을 통해 구글 폰트를 편리하게 사용 가능
- 폰트는 빌드시 다운로드 되며 브라우저에서 구글에 요청을 보내지 않는다.
- 옵션을 통해 가져올 폰트의 용량을 줄일 수 있다.
import { Noto_Sans_KR } from 'next/font/google';
export const nato_sans_kr = Noto_Sans_KR({ weight: ['400', '700'], subsets: ['latin'] });
import { nato_sans_kr } from '@/app/ui/fonts';
...
<html lang="ko" className={nato_sans_kr.className}>
<body>{children}</body>
</html>
...
