DM Log

📚 이 글에서 배울 내용Next.js App Router에서 Favicon을 설정하는 3가지 방법파일 컨벤션 방식 — 파일명 규칙만으로 자동 적용Metadata API 방식 — layout.tsx에서 icons 필드로 명시 설정동적 아이콘 생성 — icon.tsx와 ImageResponse로 코드 기반 아이콘 생성각 방법의 차이점과 적합한 사용 상황1️⃣ Favicon 설정 방식 3가지Next.js App Router에서 favicon을 설정하는 방법은 크게 세 가지다. 각 방법마다 난이도와 유연성이 다르므로 상황에 맞게 선택하면 된다.방법별 특징 한눈에 보기파일 컨벤션 (권장)약속된 이름의 파일을 app/에 배치코드 수정 없이 자동 적용이미지 파일이 이미 있을 때 최적Metadata API / 동적 ..

📚 이 글에서 배울 내용Next.js App Router에서 SEO를 설정하는 Metadata API 개요고정 페이지에서 export const metadata로 정적 메타데이터 설정하는 방법동적 페이지에서 generateMetadata로 API 기반 메타데이터 생성하는 방법title.template으로 전역 title 형식 통일하는 방법OG(OpenGraph) 태그 설정과 SNS 공유 미리보기 제어1️⃣ SEO가 중요한 이유검색 엔진은 페이지의 , , OG 태그 등을 읽어 콘텐츠를 파악하고 검색 결과에 노출한다. Next.js App Router는 Metadata API를 통해 각 페이지마다 이 값을 쉽게 설정할 수 있다.기존 Pages Router에서는 컴포넌트를 직접 넣어야 했지만, App Ro..

📚 이 글에서 배울 내용이미지 최적화가 성능에 미치는 영향 태그와 next/image의 차이점next/image 기본 사용법과 필수 props외부 이미지 도메인 허용 설정 방법 (remotePatterns)priority, placeholder 등 추가 최적화 props1️⃣ 이미지 최적화가 중요한 이유웹페이지 전체 용량에서 이미지가 차지하는 비중은 절반 이상이다. 이미지를 얼마나 잘 최적화하느냐가 페이지 로딩 속도와 사용자 경험에 직결된다.대표적인 이미지 최적화 기법은 다음과 같다.WebP, AVIF 등 차세대 포맷으로 변환 (같은 품질, 더 작은 용량)디바이스 사이즈에 맞는 이미지만 불러오기 (반응형 최적화)Lazy Loading — 화면에 보이는 이미지만 먼저 로드Blur 플레이스홀더 — 이미지 ..

📚 이 글에서 배울 내용Parallel Routes(병렬 라우트)의 개념과 슬롯 정의 방법레이아웃에서 여러 슬롯을 수신해 병렬로 렌더링하는 패턴default.tsx가 필요한 이유와 소프트/하드 네비게이션의 차이Intercepting Routes(인터셉팅 라우트)의 동작 원리와 인터셉팅 규칙두 패턴을 조합한 모달 구현 방법1️⃣ Parallel Routes (병렬 라우트)🗂️ 병렬 라우트란?하나의 레이아웃 안에서 여러 개의 페이지 컴포넌트를 동시에 렌더링하는 패턴이다. 대시보드처럼 한 화면에 피드, 사이드바, 메인 콘텐츠를 각각 독립적으로 구성하고 싶을 때 유용하다. 슬롯(Slot)이라는 개념으로 구현하며, 폴더명 앞에 @를 붙여 슬롯을 정의한다.📁 폴더 구조슬롯은 @폴더명 형태로 만들고, 상위 la..

📚 이 글에서 배울 내용서버 액션(Server Action)이란 무엇이고 왜 사용하는가서버 액션으로 리뷰 추가 기능 직접 구현하기revalidatePath로 데이터를 즉시 재검증하는 방법다양한 재검증 범위 옵션 비교 (page, layout, revalidateTag)클라이언트 컴포넌트에서 서버 액션을 사용하는 useActionState 훅 활용법1️⃣ 서버 액션(Server Action)이란?📋 개념과 등장 배경서버 액션은 브라우저에서 호출할 수 있는, 서버에서 실행되는 비동기 함수다. 기존에는 클라이언트와 서버 간 데이터를 주고받으려면 반드시 별도의 API 라우트를 만들어야 했다. 서버 액션을 사용하면 API 엔드포인트 없이도 서버 측 로직을 컴포넌트 안에서 직접 정의하고 호출할 수 있다.함수 상..

📚 이 글에서 배울 내용스트리밍(Streaming)이 무엇인지, 왜 사용하는지loading.tsx로 페이지 단위 스트리밍 설정하는 방법loading.tsx 사용 시 주의해야 할 4가지Suspense로 특정 컴포넌트에만 스트리밍을 적용하는 방법key prop으로 쿼리스트링 변경 시에도 스트리밍을 재실행하는 패턴error.tsx로 스트리밍 중 발생하는 에러를 컴포넌트 단위로 처리하는 방법Suspense 중첩(Nested Suspense) 패턴으로 로딩 순서를 세밀하게 제어하는 방법1️⃣ 스트리밍(Streaming)이란?스트리밍은 페이지 전체가 완성될 때까지 기다리지 않고, 준비된 데이터부터 조금씩 나눠서 클라이언트에 전달하는 방식이다. 전통적인 SSR에서는 페이지에 포함된 모든 데이터 페칭이 끝나야 첫 화..

📚 이 글에서 배울 내용풀 라우트 캐시(Full Route Cache)가 무엇인지, Page Router의 SSG와 어떻게 다른지Static Page와 Dynamic Page가 나뉘는 기준Suspense로 동적 컴포넌트를 격리해 페이지를 Static으로 유지하는 방법generateStaticParams로 동적 경로를 빌드 타임에 미리 생성하는 방법라우트 세그먼트 옵션(dynamic, dynamicParams)으로 페이지 유형 강제 지정하기클라이언트 라우터 캐시의 동작 방식1️⃣ 풀 라우트 캐시(Full Route Cache)란?Next.js App Router는 빌드 타임에 각 페이지를 미리 렌더링하고, 그 결과를 서버 측에 저장해둔다. 이후 해당 경로로 요청이 들어오면 렌더링을 다시 실행하는 대신 저..

📚 이 글에서 배울 내용 Page Router vs App Router 데이터 페칭 방식 비교 서버 컴포넌트에서 직접 데이터 페칭하는 방법 Next.js 데이터 캐시(Data Cache) 개념과 동작 방식 force-cache, no-store, revalidate 옵션 사용법 Request Memoization이란 무엇인지 1️⃣ Page Router vs App Router 데이터 페칭 비교📋 Page Router 방식의 한계Page Router에서는 서버 사이드에서 데이터를 가져오기 위해 별도의 함수를 반드시 사용해야 했다. 컴포넌트 자체는 데이터를 직접 가져올 수 없고, 페이지 단위 함수에서 받아서 Props로 내려주는 구조였다. Page Router vs A..