Je개발 일지

error.js 파일 규칙을 사용하면 중첩된 경로에서 예상치 못한 런타임 오류를 알맞게 처리할 수 있다. React 의 를 자동 생성해 해당 경로와 중첩된 자식을 감싼다. 파일 시스템 계층 구조를 사용해서 특정 Segement 에 맞는 맞춤형 에러 UI 를 만들 수 있다. 영향을 받은 Segement 를 격리하면서 나머지 애플리케이션은 기능적으로 유지할 수 있다. 전체 페이지를 다시 로드하지 않고도 오류에서 복구를 시도할 수 있는 기능을 추가할 수 있다. Error 관련 UI 를 만드는 방법은 Segement 내부에 error.js 파일을 추가하고 React 컴포넌트를 exporting 하는 것이다. 'use client' // Error components must be Client Components..

특수 파일인 loading.js 는 React Suspense 와 함께 의미 있는 로딩 UI 를 생성하는데 동무을 준다. 이 규칙으로 루트 Segment 의 컨텐츠가 로드되는 동안, 서버에서 즉시 로딩 상태를 표시할 수 있다. 렌더링이 완성되면 새로운 컨텐츠로 자동 교체된다. 1. 즉각적인 Loading 상태(Instant Loading States) 즉각적인 Loading 상태는 경로를 이동했을 때 즉각적으로 보이는 fallback(* 번역하면 "대체"지만, React Suspense 에서 fallback prop 의미를 살리고자 fallback 을 그대로 사용함) UI 다. 스켈레톤이나 스피너와 같은 로딩 표시기를 미리 렌더링하거나, 후에 보여질 커버 사진, 제목 등의 작은 부분을 표시할 수도 있다...

1. 컴포넌트 는 태그를 확장해서 경로 간의 prefetching(사전 로드), 클라이언트 쪽 네비게이션을 제공한다. Next.js 의 경로 간 이동에 권장하고 또 주된 방법이다. 컴포넌트를 사용하기 위해서는 `next/link` 에서 import 해오고, 컴포넌트에 href prop 을 전달한다. import Link from 'next/link' export default function Page() { return Dashboard } 1-1) Examples 1-1-1) 동적 Segement 로 Link 달기 동적 Segement 에 링크를 설정할 경우, 템플릿 리터럴을 사용할 수 있다. import Link from 'next/link' export default function PostList..

layout.js, page.js, template.js. 이 세 개의 특수 파일은 경로에서 UI 를 만드는데 사용된다. 이 페이지에서는 이 특수 파일을 어떻게 사용할 수 있는지에 대해 설명한다. 1. Pages page 는 해당 경로의 하나뿐인 UI 다. page.js 파일을 통해서 컴포넌트를 export 해 페이지를 정의할 수 있다. 예 를 들어서 index 페이지를 만들고 싶다면, app 디렉토리 안에 page.js 파일을 넣으면 된다. (* 그 해당 경로의 고유 UI 를 index.html 이 아닌 page.js 로 정의하면 된다는 것 같다) // `app/page.tsx` is the UI for the `/` URL export default function Page() { return Hel..