사용자 지정 오류 페이지를 위한 +error.svelte
상태 코드와 메시지를 표시하는 사용자 지정 오류 UI를 만듭니다.
사용자 지정 오류 페이지를 위한 +error.svelte은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
사용자 지정 오류 UI
원하는 경로 폴더에 +error.svelte를 만들어 맞춤형 오류 페이지를 구성하십시오.
루트 오류 페이지
src/routes/+error.svelte는 중첩된 오류 경계에서 포착하지 못한 모든 위치의 오류를 처리합니다.
<!-- +error.svelte -->
<script>
import { page } from "$app/stores";
</script>
<h1>{$page.status}: {$page.error?.message}</h1>상태 접근
$page.status에서 HTTP 상태(404, 500 등)를 가져올 수 있습니다.
메시지 접근
$page.error.message에서 error()에 제공한 메시지 또는 handleError의 일반 메시지를 가져올 수 있습니다.
사전 렌더링 차이
정적 오류 페이지는 사전 렌더링할 수 있지만 동적 오류 페이지는 요청마다 렌더링됩니다.
중첩 경계
특정 섹션에 오류 UI를 한정하려면 하위 폴더에 +error.svelte를 배치하십시오.
친절한 메시지
메시지를 상황에 맞게 작성하십시오. 404에서는 다른 곳으로 이동하도록 안내하고, 500에서는 사과와 함께 지원 링크를 제공해야 합니다.
추적 ID
handleError에서 반환한 추적 ID를 표시하여 사용자가 지원팀에 전달할 수 있게 하십시오.
복구 링크
항상 돌아갈 방법을 제공하십시오. 홈 링크, 검색 상자 또는 새로 고침 버튼을 사용할 수 있습니다.
브랜딩
오류 페이지도 앱의 다른 부분과 같은 스타일로 꾸미십시오. 오류 페이지 역시 사용자 경험의 일부입니다.
반응형 업데이트
사용자가 오류 상황에서 이동하면 $page가 업데이트되어 UI가 최신 상태로 유지됩니다.
빠른 확인
오류 상태에 어떻게 접근합니까?
복습
폴더마다 +error.svelte를 배치하여 오류 UI의 범위를 지정하십시오. $page.status와 $page.error를 읽으십시오.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 41
- 레슨
- 163
자주 묻는 질문
“사용자 지정 오류 페이지를 위한 +error.svelte” 강의는 무료인가요?
네 — “사용자 지정 오류 페이지를 위한 +error.svelte” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“사용자 지정 오류 페이지를 위한 +error.svelte”에서 뭘 배우나요?
상태 코드와 메시지를 표시하는 사용자 지정 오류 UI를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“사용자 지정 오류 페이지를 위한 +error.svelte” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 사용자 지정 오류 페이지를 위한 +error.svelte
- 예상된 오류와 예상하지 못한 오류
- error() 및 redirect() 도우미
- 중첩 레이아웃의 오류 페이지