3️.eslintrc.json

.eslintrc.json 파일

ESLint 설정 파일입니다. 아래는 create-next-app으로 시작한 경우에 갖는 기본 설정입니다.

{
  "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

• eslint-plugin-react-hooks

• eslint-plugin-next

Core Web Vitals에 대하여

코어 웹 바이탈은 모든 웹페이지에 적용되는 웹 바이탈의 하위 집합입니다. 각 코어 웹 바이탈은 사용자 환경의 고유한 측면을 나타내며, 현장에서 측정 가능하며, 중요한 사용자 중심 성과의 실제 환경을 반영합니다.

(2020년을 기준) 코어 웹 바이탈을 구성하는 측정항목은 사용자 환경의 세 가지 측면, 즉 로드, 상호작용, 시각적 안정성에 중점을 두고 있습니다. 다음과 같은 측정항목과 각 기준이 포함됩니다.

• 최대 콘텐츠 렌더링 시간 (LCP): 로드 성능을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지가 처음 로드되기 시작한 후 2.5초 이내에 LCP가 발생해야 합니다.

• 최초 입력 반응 시간 (FID): 상호작용을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지의 FID가 100밀리초 이하여야 합니다.

• 레이아웃 변경 횟수 (CLS): 시각적 안정성을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지의 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