Je개발 일지

app 디렉토리에서, 중첩 폴더는 기본적으로 URL 경로와 매핑된다. 하지만, 경로 그룹(Route Group) 을 활용하면, URL 경로와 매핑하는 것을 피할 수 있다. 이런 방법은 경로 Segement 를 구성하고 프로젝트 파일을 URL 경로 구조에는 영향을 주지 않은 채 로직들을 묶을 수 있도록 도와준다. 1. 규칙 폴더의 이름을 괄호로 묶으면 경로 그룹을 만들 수 있다. (폴더이름) 2. 예시 2-1) URL 에 영향을 주지 않고 경로(Route)구성하기 URL 에 영향을 주지 않고 경로를 구성하려면, 그룹을 만들어야 한다. 괄호 안의 폴더는 URL 에서 생략된다. (marketing), (shop) 폴더가 URL 계층 구조에서 공유되고 있지만, 각 그룹에 대해 다른 레이아웃을 구성할 수도 있다...

1. redirect() 함수 **redirect** 함수는 사용자를 다른 URL 로 리다이렉션 할 수 있게 한다. 리다이렉션은 **Server Components**, **Route Handlers**, **Server Actions** 에서 호출할 수 있다 **redirect** 는 일반적으로 mutation 또는 이벤트 후에 사용된다. 예를 들어서 게시물을 생성하는 경우, 다음과 같은 코드로 만들 수 있다. 'use server' import { redirect } from 'next/navigation' import { revalidatePath } from 'next/cache' export async function createPost(id: string) { try { // 데이터베이스 호출..

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