나디아 성장 일기

[NextJS] <Suspense /> : 개별 컴포넌트에 로딩 UI 표시

: React에서 비동기 데이터를 로딩할 때 로딩 UI를 처리하는 컴포넌트 데이터가 준비되지 않은 개별 컴포넌트나 데이터에 로딩 UI를 표시할 수 있도록 하여, 비동기 작업을 유연하게 처리할 수 있게 한다.Page 단위 로딩 ➡ loading.tsx서버 컴포넌트 단위 로딩 ➡    fallback 속성 : 로딩 중일 때 보여줄 UI를 지정하는 속성로딩 중...}>    예시import { Suspense } from "react";import MovieInfo from "../../../../components/movie-info";import MovieVideos from "../../../../components/movie-videos";export default async function Mo..

[NextJS] 데이터 페칭과 최적화: fetch, Promise.all

Next.js의 fetch API 확장Next.js는 기본 fetch() API를 확장하여 서버의 각 요청이 자체 영구적인 캐싱 설정을 할 수 있도록 한다. 서버 측에서 데이터를 가져올 때 캐싱 전략을 설정하여 성능을 최적화하고 중복된 네트워크 요청을 피할 수 있다. export const API_URL = "https://nomad-movies.nomadcoders.workers.dev/movies";async function getMovies() { const response = await fetch(API_URL); const json = await response.json(); return json;}export default async function HomePage() { const..

[NextJS] loading.js: 전체 로딩 UI 설정

loading.js : 콘텐츠가 완전히 로드되기 전에 사용자에게 로딩 중임을 알리는 UI를 제공한다.loading.js 파일을 해당 페이지나 라우트에 위치시켜면, Next.js가 자동으로 이 파일을 감지하고 로딩 상태에서 loading.js에 정의된 UI를 표시한다.로딩 표시기나 표지 사진, 제목 등 화면의 작지만 의미 있는 부분을 미리 렌더링할 수 있다.특징즉각적인 로딩 UIroute 세그먼트의 콘텐츠가 로드되는 동안 서버에서 즉시 로딩 상태를 표시할 수 있다.즉시 로딩 상태: 탐색 시 즉시 표시되는 대체 UIReact Suspense 활용렌더링이 완료되면 새 콘텐츠가 자동으로 교체된다.   Routing: Loading UI and Streaming | Next.jsBuilt on top of Sus..

[NextJS] Dynamic Routes(동적 라우팅): URL 파라미터 받아오기

Dynamic Routes (동적 세그먼트) : URL 경로의 일부를 동적으로 처리할 수 있는 기능 URL에서 변하는 부분을 변수로 처리하고, 이를 컴포넌트에서 props로 받아서 렌더링할 수 있다.    App Router 사용법 (app 디렉토리) 1. 파일명이나 폴더명을 [대괄호]로 묶어 생성한다. 특정 영화의 세부 정보를 보여주는 페이지를 만들기 위해 URL에서 영화 ID를 받아와야 할 경우, pages 폴더 내에서 /movie/[id].tsx와 같이 파일을 생성한다.   2. props로 URL 파라미터 (:id)를 받아온다.URL 경로 /movie/123에서 123은 id 파라미터로 처리된다.export default function MovieDetail({ params: { id } }) {..

[NextJS] Metadata: 메타데이터 설정

Metadata Next.js에는 향상된 SEO를 위해 애플리케이션 메타데이터(HTML 내의 정보)를 정의할 수 있는 메타데이터 API가 있다.page나 layout만 메타 데이터를 내보낼 수 있다.각 파일에서 설정한 메타데이터는 중첩된 파일들에 의해 병합된다.Client Component에서는 metadata를 정의할 수 없다❌metadata는 페이지가 서버에서 렌더링될 때 에 포함되어야 하는데, Client Component는 HTML을 이미 받은 후에 동작하기 때문이다.템플릿과 기본값을 설정할 수 있다.동적 제목 생성에 사용되는 자리 표시자 %s를 사용한다.// app/layout.tsxexport const metadata: Metadata = { title: { template: "%s..