error.tsx & not-found.tsx — 에러 처리 시스템 구축
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. `error.tsx`에 반드시 필요한 설정은?
💡 error.tsx는 에러 복구(reset 함수)를 위해 반드시 "use client" 지시어가 필요합니다. 클라이언트 컴포넌트여야 reset() 같은 인터랙션이 가능합니다.
Q2. `notFound()` 함수는 어디에서 import 하는가?
💡 notFound()는 "next/navigation"에서 import합니다. redirect()와 같은 패키지에 있으며, 호출 시 해당 라우트의 not-found.tsx를 렌더링합니다.
Q3. `error.tsx`의 `reset` 함수를 호출하면 어떤 동작이 발생하는가?
💡 reset()은 에러 경계(error.tsx)가 감싸고 있는 컴포넌트를 다시 렌더링 시도합니다. 네트워크 오류처럼 일시적인 문제라면 재시도로 복구될 수 있습니다.
Q4. `global-error.tsx`가 일반 `error.tsx`와 다른 가장 큰 차이점은?
💡 global-error.tsx는 루트 layout.tsx를 완전히 대체하기 때문에 html과 body 태그를 직접 렌더링해야 합니다. 일반 error.tsx는 layout.tsx 내부에서 렌더링되므로 이런 작업이 불필요합니다.
Q5. 다음 중 `app/posts/not-found.tsx`가 적용되는 시나리오는?
💡 not-found.tsx는 해당 라우트 세그먼트 및 하위 세그먼트에서 notFound()를 호출했을 때 적용됩니다. app/posts/not-found.tsx는 /posts와 그 하위 경로(예: /posts/123)에서의 notFound() 호출에 적용됩니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.