> For the complete documentation index, see [llms.txt](https://book.hajoeun.dev/friendly-next-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://book.hajoeun.dev/friendly-next-js/part-2/next.js-1/.eslintrc-json.md).

# .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)<br>

#### [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. <https://web.dev/articles/vitals?hl=ko#core_web_vitals>
2. <https://nextjs.org/docs/app/building-your-application/configuring/eslint>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://book.hajoeun.dev/friendly-next-js/part-2/next.js-1/.eslintrc-json.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.