# .eslintrc.json
### .eslintrc.json 파일
ESLint 설정 파일입니다. 아래는 [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app)으로 시작한 경우에 갖는 기본 설정입니다.
```json
{
"extends": "next/core-web-vitals"
}
```
`"extends": "next/core-web-vitals"`은 이 프로젝트가 Next.js의 `core-web-vitals` 설정을 확장하도록 설정되어 있음을 나타냅니다. `core-web-vitals`은 Google이 정의한 웹 성능 지표인 Core Web Vitals를 최적화하는 데 도움이 되는 ESLint 규칙을 모아 놓은 것이죠.
이 설정은 Next.js와 React를 사용하는 프로젝트에서 웹 성능을 향상시키는 데 도움이 됩니다. 이를 통해 렌더링 성능, 레이아웃 이동, 입력 지연 등의 지표를 개선할 수 있습니다. 이러한 성능 최적화는 웹사이트의 사용자 경험을 향상시키고, 검색 엔진 최적화(SEO)에도 도움이 됩니다.
이 설정에는 Next.js에서 권장하는 기본 ESLint 설정 역시 모두 포함하고 있습니다.
**기본 ESLint 설정(eslint-config-next)에서 포함하는 것들**
* [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react)
* [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)
* [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next)
#### [Core Web Vitals](https://web.dev/articles/vitals?hl=ko#core_web_vitals)에 대하여
코어 웹 바이탈은 모든 웹페이지에 적용되는 웹 바이탈의 하위 집합입니다. 각 코어 웹 바이탈은 사용자 환경의 고유한 측면을 나타내며, [현장](https://web.dev/articles/user-centric-performance-metrics?hl=ko#how_metrics_are_measured)에서 측정 가능하며, 중요한 [사용자 중심](https://web.dev/articles/user-centric-performance-metrics?hl=ko#how_metrics_are_measured) 성과의 실제 환경을 반영합니다.
(2020년을 기준) 코어 웹 바이탈을 구성하는 측정항목은 사용자 환경의 세 가지 측면, 즉 *로드*, *상호작용*, *시각적 안정성*에 중점을 두고 있습니다. 다음과 같은 측정항목과 각 기준이 포함됩니다.
* [**최대 콘텐츠 렌더링 시간 (LCP)**](https://web.dev/articles/lcp?hl=ko): *로드* 성능을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지가 처음 로드되기 시작한 후 **2.5초** 이내에 LCP가 발생해야 합니다.
* [**최초 입력 반응 시간 (FID)**](https://web.dev/articles/fid?hl=ko): *상호작용*을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지의 FID가 **100밀리초** 이하여야 합니다.
* [**레이아웃 변경 횟수 (CLS)**](https://web.dev/articles/cls?hl=ko): *시각적 안정성*을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지의 CLS를 **0.1.** 이하로 유지해야 합니다.
#### 참고 자료
1.
2.