doeunn.log

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를 사용하면 모듈을 빌드 타임이 아닌 런타임에 불러오도록 합니다. 이를 통해 번들 파일을 분리하고 초기 렌더링 시간 단축이란느 퍼포먼스 향상을 기대할 수 있습니다. 애플리케이션에는 초기 로딩부터 사용하지 않는 부분이..

어떻게 해야할까? Page가 필요하겠네? 여러 input들을 받을 수 있는... API도 필요하겠네? file에 저장할 input을 전달받을... 서버에서 실제로 파일을 저장할 writePost 함수도 필요하겠네? 작성이 성공하면 해당 page로 가는 Link도 제공하면 좋겠군... 우선 필요한 파일들을 생성해 봅시다 pages/post/write.js Page 추가 pages/api/post/write.js API 추가 lib/posts.js 안에 writePost 함수 추가 먼저 글을 쓸 수 있는 페이지를 구성해 봅시다 글을 쓸 수 있는 form이 있는 페이지를 만들어보겠습니다. 📜 pages/post/write.js import { useRef } from 'react' import Layout f..

지난 포스팅에서 md 파일들에 있는 데이터를 읽어와서 SSG를 통해 렌더링을 했었습니다. 만약! 추가로 다음과 같은 요구사항이 있다면 어떻게 해야할까요? SSG를 사용해서 url: /posts/ssg-ssr 이면 posts/ssg-ssr.md를 읽어서 보여준다 url: /posts/pre-rendering 이면 posts/pre-rendering.md를 읽어서 보여준다 → /pages/posts/[slug].js 가 떠올랐어야 합니다. post의 제목들 자리에는 dynamic하게 들어가야 하기 때문에 slug를 활용해야겠습니다. SSG를 활용해서 다이나믹한 page 들을 생성하려면? getStaticPaths가 필요합니다. getStaticPaths는 생성해둬야 하는 페이지 정보를 배열로 반환합니다. 요..