Next.js 썸네일형 리스트형 [NextJs] Next.js 13 도입으로 인한 이미지 최적화 경험: Next/Image 컴포넌트의 강력한 기능들 프로젝트에서 next.js 13버전을 도입하여 이미지 최적화 한 경험을 토대로 작성해봅니다. Next/Image 컴포넌트의 기능Next/Image 컴포넌트에서 제공하는 대표적인 기능은 다음의 3가지입니다. 각 기능에 대해 어떤 이점이 있는지 정리해 보겠습니다.lazy loadinglazy loading는 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미합니다.예를 들면 스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드해서, 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하는 것입니다. 모든 브라우저에서 잘 동작하는 lazy loading 을 구현하기 위해서는 Intersection Observer 혹은 scroll 이벤트를 통해 스크린에 .. 더보기 [NextJs] 서버 vs 클라이언트 컴포넌트: 최적의 선택을 위한 가이드 Next.js에서 App Router를 자주 사용하다 보면, 때때로 라이브러리 지원 문제나 프로젝트 마감 기한 때문에 서버 사이드 렌더링(Server-Side Rendering, SSR)을 고려하지 않고 'use client'를 무작정 사용하는 경우가 있습니다. 이러한 경험은 많은 개발자들이 공감할 수 있는 부분일 것입니다. 이번 글에서는 제가 서버 컴포넌트와 클라이언트 컴포넌트를 선택할 때 어떤 기준을 두고 사용하는지, 그리고 왜 서버 사이드를 우선적으로 고려해야 하는지에 대해 정리해 보려고 합니다. 각 컴포넌트의 특성과 장단점을 명확히 이해함으로써, 보다 효과적으로 Next.js의 기능을 활용할 수 있는 방법을 함께 살펴보겠습니다. 서버 사이드란 무엇일까요?서버 사이드는 웹 애플리케이션의 비즈니스 로.. 더보기 [Next.js] API 만들어 사용하기(API routes) Next.js 13에서는 API 서버를 쉽게 구현할 수 있는 기능이 추가되어 백엔드 개발이 한층 간편해졌습니다. 이 기능을 활용하면 Express와 같은 외부 라이브러리 없이도 API를 바로 추가할 수 있습니다. 이번 글에서는 Next.js의 API routes를 활용하여 프론트엔드와 백엔드 간의 소통을 어떻게 구현했는지에 대해 소개하겠습니다. Next.js API Routes란?Next.js에서는 API를 추가할 수 있는 기능을 API routes라고 부릅니다. 이 기능을 통해 pages/api 디렉토리 안에 파일을 생성하면, 해당 파일이 REST API 경로로 자동으로 매핑됩니다. 예를 들어, api/stores라는 디렉토리 안에 파일을 만들면 /api/stores 경로로 접근할 수 있습니다. 예시로.. 더보기 이전 1 다음
