키모스토리

1) “예상 가능한 에러”는 validation으로 네비게이션 처리예:권한 없음 → redirect('/login')데이터 없음 → notFound()파라미터 이상 → redirect() 또는 notFound()이건 UX도 좋고, 에러 바운더리에 불필요한 500을 만들지 않아서 좋아요.2) “예상 불가한 진짜 예외”만 공통 에러로 처리이때 공통 처리는 아래처럼:app/error.tsx : 대부분의 런타임 예외 공통 처리app/global-error.tsx : 루트 레이아웃까지 깨지는 경우 대비파일 예시 (전역 공통 에러)app/error.tsx (공통 에러 UI: 대부분 여기서 처리됨) "use client";import { useEffect } from "react";export default func..

Next.js Special filespage.tsxlayout.tsxtemplate.tsxnot-found.tsxloading.tsx - loading states error.tsx - error handling Next.js(App Router)에서 loading.tsx는 해당 라우트 세그먼트가 “서버에서 렌더/데이터 준비”되는 동안 보여주는 자동 fallback UI예요.위치 예시app/loading.tsx → 전체 앱(루트) 로딩 UIapp/movies/loading.tsx → /movies 이하에서만 로딩 UIapp/movies/[id]/loading.tsx → /movies/123 같은 상세에서만언제 뜨나page.tsx(Server Component)에서 await fetch(...), awa..

Next.js(App Router)에서 layout.tsx와 template.tsx는 “둘 다 라우트 세그먼트의 공통 UI 래퍼”처럼 보이지만, 가장 큰 차이는 “라우트 이동 시 유지(persist)되느냐 / 매번 새로 만들어지느냐” 입니다.1) layout.tsx (지속되는 껍데기)해당 세그먼트 하위 페이지로 클라이언트 라우팅 이동(Link로 이동 등)해도 layout은 유지됩니다.즉, layout 안의 React 컴포넌트 상태(state), 클라이언트 컴포넌트 인스턴스, DOM 등이 가능한 한 유지되는 방향.대표 용도:헤더/사이드바/푸터 같은 앱 쉘(App Shell)전역 Provider(Theme/Auth/QueryClient 등)세그먼트 공통 네비게이션/탭 바“페이지 바뀌어도 유지돼야 하는” UI..