나디아 성장 일기

Next.js 초기 셋팅하기 1. Node.js 프로젝트 초기화 npm init -y   2. 프로젝트의 오픈 소스 라이선스를 MIT 라이선스로 설정 // package.json{ "name": "nextjs-bestseller", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "MIT"}  3. Next.js & React & React-dom 설치❗Next.js는 TypeScript 지원을 내장하고 있어서 .tsx 파일을 만들..

prefecth />: 사용자의 뷰포트에 Link 컴포넌트가 들어가면, 해당 링크에 설정된 페이지와 데이터를 미리 백그라운드에서 로드한다.Next.js는 Link 된 라우트(href에 지정된 라우트)와 해당 데이터를 백그라운드에서 미리 prefetch하고 load한다. 프로덕션 환경에서만 활성화된다. (개발 중에는 ❌) 정적 경로 vs 동적 경로정적 경로(pages 폴더에 있는 일반 파일) ➡ 자동 prefetch동적 경로([id].js 같은 파일) ➡ 설정에 따라 달라짐export default function Movie({ title, id, poster_path }: IMovieProps) { const router = useRouter(); const onClick = () => { ro..

Error Handling error.js: 중첩된 경로에서 발생할 수 있는 오류를 처리할 수 있다. error.js 파일을 추가하면 Next.js가 자동으로 경로에서 발생하는 오류를 감지하고, 그 오류에 대한 fallback UI를 제공한다. 중첩된 경로의 페이지나 컴포넌트에서 발생한 오류에 적절한 UI를 표시한다.error.js 파일을 통해 React의 Error Boundary를 자동으로 생성하고, 그 안에서 발생하는 오류를 잡아낸다.import React from 'react';export default function ErrorPage({ error }) { console.error('에러 내용:', error); return ( 문제가 발생했습니다! {error...

: 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..

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..

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

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 } }) {..

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..

Route groups : URL 경로에 영향을 미치지 않고도 폴더 구조를 관리할 수 있다. 폴더 명을 (괄호)로 묶어줘야 한다.  ➡ 그래야 page 파일을 해당 폴더에 옮겨도 URL을 바꾸지 않는다. (폴더가 링크에 포함되지 않음) ➡ 괄호 폴더는 URL에 영향을 미치지 않는다.app/(home)/page.js ➡ URL에서 /home 경로로 포함되지 않는다.  Routing: Route Groups | Next.jsRoute Groups can be used to partition your Next.js application into different sections.nextjs.org

렌더링(Rendering) : React 컴포넌트를 브라우저가 이해할 수 있는 HTML로 변환하는 작업    CSR (Client-Side Rendering) : 모든 렌더링이 클라이언트(브라우저) 측에서 발생하는 방식 클라이언트는 자바스크립트를 로드하고, 자바스크립트가 UI를 빌드한다. 초기 페이지 로드 시, HTML 파일은 간단히 구성 요소만 담고 있다. 특징 초기 로딩이 빠르지만, 콘텐츠가 모두 표시될 때까지는 시간이 걸릴 수 있다.SEO(검색 엔진 최적화)에 불리할 수 있다. 작동 방식사용자가 페이지 요청 → 서버가 기본 HTML + 자바스크립트 파일 전달 → 브라우저가 자바스크립트 실행, 데이터를 서버에서 받아옴 → React가 클라이언트에서 UI를 완성하여 페이지 렌더링   SSR (Serve..