나디아 성장 일기

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

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

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

1. 경로 정의 & 생성하기 (Defining & Creating Routes)Next.js는 폴더를 사용하여 경로를 정의하는 파일 시스템 기반 라우터를 사용한다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타내며, 폴더 이름이 URL의 세그먼트(경로 일부)로 매핑된다.중첩된 폴더를 사용하여 중첩 경로를 쉽게 만들 수 있다.폴더 구조가 곧 URL 경로가 된다.ex) app/about-us/page.tsx 파일의 경로 ➡ /about-us    2. UI 생성하기 (Creating UI) Next.js는 특수 파일 규칙을 사용하여 경로마다 고유한 UI를 만들거나, 여러 경로에서 공유할 UI를 정의할 수 있다.  페이지 (page.tsx): 특정 경로 별로 고유한 UI를 담당하는 개별 화면pag..