doeunn.log

Configuration CRA로 프로젝트를 만들었을 때는 webpack config 등을 커스텀하려고 하면 React에 기본으로 셋업되어 있는 configuration을 해제해서 직접 커스터마이징할 수 있게 하거나(`npm run eject`), carco(Create React App Configuration Override)와 같은 도구 등을 사용하여야 했습니다. next.config.js Next.js에서는 기존에 있는 것을 eject 하거나 craco 같은 도구를 쓸 필요없이 root 디렉토리에 `next.config.js`을 저장해 두고 그곳에서 필요한 여러 configuration을 추가하면 됩니다. 그렇게 추가한 config는 서버를 띄우거나 build하는 타이밍에 사용됩니다. 1. 환경 ..

Error Handling 공식 문서 공식문서에서 개발, 서버 측 및 클라이언트 측 오류를 처리하는 방법을 설명하고 있습니다 :) 해당 내용에 대해 살펴보도록 하겠습니다. 1. 개발 중 오류 처리 Next.js 개발 단계에서 런타임 오류가 발생하면 오버레이가 발생합니다 . 웹 페이지를 덮는 모달입니다. devlopment 모드로 실행될 때만 표시 되며 빌드 환경에서는 표시되지 않습니다. 오류를 수정하면 오버레이가 자동으로 해제됩니다. 2. 서버 오류 처리 서버 측 오류를 처리하기 위해 기본적으로 정적인 500 페이지를 제공합니다. `500.js`라는 파일을 만들어 커스텀해서 에러 페이지를 보여줄 수도 있습니다. 마찬가지로 404, 401과 같이 에러 status code 이름으로 파일을 만들어 컴포넌트를..

Web Vitals 구글은 어떻게 페이지의 품질을 평가할까요? SEO 전략을 세우는 데 중요한 구글의 품질 평가 요소 중 한 축을 담당하는 코어 웹 바이탈에 대해 알아보려고 합니다. Core Web Vitals 코어 웹 바이탈(Core Web Vitals)은 웹 페이지 로딩 속도, 모바일 친화성, 세이프 브라우징, 암호화(HTTPS 적용 여부), 방해요소 여부 등과 같은 웹 콘텐츠 이용자의 사용 경험에 영향을 미치는 다양한 측정 가능한 값들 중에서 구글이 중요하다 강조하는 아래의 3가지 매트릭스는 다음과 같습니다. 웹 바이탈의 3가지 핵심 매트릭스 1. LCP(Largest Contentful Paint, 최대 콘텐츠풀 페인트) 사용자가 화면에 렌더링된 콘텐츠를 보는데 걸리는 시간 LCP는 웹 페이지의 ..

Custom App Next.js에서 `_app.js` 파일은 모든 구성요소를 Wrap하고 있는 요소라고도 할 수 있습니다. 따라서 `_app.js`에서 모든 컴포넌트에게 필요한 것들을 정의하고 초기화하여 조금이라도 반복되는 코드들을 줄일 수 있습니다. 공식문서에서는 다음과 같은 내용들을 수행할 수 있다고 합니다. 페이지 변경 간에 레이아웃 유지 페이지 탐색 시 고정적인 state를 유지 페이지에 추가 데이터 주입 글로벌 CSS 추가 하나씩 예시 코드를 살펴보며 무엇을 이야기하는지를 알아봅시다 :) 1. 페이지 변경 간에 레이아웃 유지 모든 페이지에 걸쳐 동일한 레이아웃을 유지해야 한다면 매번 컴포넌트의 최상단에 Layout 컴포넌트를 Wrapper로 씌워줄 필요가 없습니다. 이럴 때 `_app.js` ..

Absolute Imports and Module Path Aliases 프로젝트를 하면 어떤 라이브러리 혹은 컴포넌트를 import하는 일이 많습니다. 일반적으로 `import Somthing from '../../components/Something'` 과 같은 형식으로 상대경로를 이용해서 불러옵니다. 프로젝트 규모가 커질 수록, 생성되는 폴더 및 파일이 많아질수록 depth가 깊어져 아래와 같이 import문이 굉장히 길어질 수 있습니다. import Something from '../../../../components/common/layout/Something/'; import SubThing from '../../../../components/common/base/SubThing/'; 보기 불편..

Dynamic Import Dynamic Import는 컴포넌트를 사용하는 시점에 로드하는 것인데요. Next.js에서는 이미지나 Link 컴포넌트 두 가지 모두 Viewport 안에 들어왔을 떄 로드하는 것들이 있었습니다. 그런 것들을 Lazy Load라고 합니다. 컴포넌트 마저도 상단에서 모두 한번에 import해서 사용하는 것이 아니라 필요한 타이밍에 로드해서 사용할 수 있는 방법을 제공합니다. Next.js에서는 그것을 Dynamic이라는 개념으로 사용됩니다. Dynamic Import를 사용하면 모듈을 빌드 타임이 아닌 런타임에 불러오도록 합니다. 이를 통해 번들 파일을 분리하고 초기 렌더링 시간 단축이란느 퍼포먼스 향상을 기대할 수 있습니다. 애플리케이션에는 초기 로딩부터 사용하지 않는 부분이..