Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate 03-sveltekit/09-errors-and-redirects #52

Merged
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
---
title: Basics
title: 기본
---

There are two types of errors in SvelteKit — _expected_ errors and _unexpected_ errors.
스벨트킷에는 _예상된(expected)_ 에러와 _예상치 못한(unexpected)_ 에러, 두 종류의 에러가 있습니다.

An expected error is one that was created with the [`error`](https://kit.svelte.dev/docs/modules#sveltejs-kit-error) helper from `@sveltejs/kit`, as in `src/routes/expected/+page.server.js`:
`@sveltejs/kit`에서 제공하는 [`error`](https://kit.svelte.dev/docs/modules#sveltejs-kit-error) 헬퍼 함수를 이용하면 예상된 에러를 만들 수 있습니다. `src/routes/expected/+page.server.js`를 살펴봅시다.

```js
/// file: src/routes/expected/+page.server.js
Expand All @@ -15,7 +15,7 @@ export function load() {
}
```

Any other error — such as the one in `src/routes/unexpected/+page.server.js` — is treated as unexpected:
다른 모든 에러는 예상치 못한 에러로 취급됩니다. `sr/routes/unexpected/+page.server.js` 에 예시가 있습니다.
dodok8 marked this conversation as resolved.
Show resolved Hide resolved

```js
/// file: src/routes/unexpected/+page.server.js
Expand All @@ -24,8 +24,8 @@ export function load() {
}
```

When you throw an expected error, you're telling SvelteKit 'don't worry, I know what I'm doing here'. An unexpected error, by contrast, is assumed to be a bug in your app. When an unexpected error is thrown, its message and stack trace will be logged to the console.
예상된 에러 발생을 사용하면 "무슨 일을 하는지 알고 있으니 걱정할 필요가 없어."라 스벨트킷에게 알려주게 됩니다. 반면에, 스벨트킷은 예상치 못한 에러를 의도하지 않은 버그의 존재로 처리합니다. 예상치 못한 에러가 발생하면, 에러 메시지와 스택 트레이스는 콘솔에 출력됩니다

> In a later chapter we'll learn about how to add custom error handling using the `handleError` hook.
> 나중 챕터에서 `handleError` 훅을 이용한 커스텀 에러 처리법을 배워보겠습니다.
dodok8 marked this conversation as resolved.
Show resolved Hide resolved

If you click the links in this app, you'll notice an important difference: the expected error message is shown to the user, whereas the unexpected error message is redacted and replaced with a generic 'Internal Error' message and a 500 status code. That's because error messages can contain sensitive data.
앱 안의 링크들을 클릭해 봅시다. 중요한 차이가 있습니다. 예상된 에러는 메시지가 사용자에게 보입니다. 반면에, 예상치 못한 에러의 메시지는 일반적인 `Internal Error` 500 상태코드 메세지로 대체됩니다. 에러 정보에 담길 수 있는 민감한 정보를 감추기 위해서입니다.
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
---
title: Error pages
title: 에러 페이지
---

When something goes wrong inside a `load` function, SvelteKit renders an error page.
`load` 함수 안에서 뭔가 잘못되면, 스벨트킷은 에러 페이지를 렌더합니다.

The default error page is somewhat bland. We can customize it by creating a `src/routes/+error.svelte` component:
기본 에러 페이지는 특색이 없습니다. `src/routes/+error.svelte` 컴포넌트를 만들어서 에러 페이지를 꾸밀 수 있습니다.

```svelte
/// file: src/routes/+error.svelte
Expand All @@ -19,11 +19,12 @@ The default error page is somewhat bland. We can customize it by creating a `src
</span>
```

Notice that the `+error.svelte` component is rendered inside the root `+layout.svelte`. We can create more granular `+error.svelte` boundaries:
`+error.svelte` 컴포넌트는 루트 `+layout.svelte` 안에 렌더된다는 것을 명심합시다. 보다 세밀한 `+error.svelte` 경계를 만들 수도 있습니다.

```svelte
/// file: src/routes/expected/+error.svelte
<h1>this error was expected</h1>
```

This component will be rendered for `/expected`, while the root `src/routes/+error.svelte` page will be rendered for any other errors that occur.
이 컴포넌트는 `/expected`에서 렌됩니다. 반면에, 다른 곳에서 발생한 에러는 루트 `src/routes/+error.svelte` 페이지가 렌더됩니다.

Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
---
title: Fallback errors
title: 에러 폴백
dodok8 marked this conversation as resolved.
Show resolved Hide resolved
---

If things go _really_ wrong — an error occurs while loading the root layout data, or while rendering the error page — SvelteKit will fall back to a static error page.
루트 레이아웃 데이터를 불러오는 과정에 발생한 에러와 에러 페이지를 불러오는 중에 에러가 발생하는 것처럼 진짜 심각한 일이 일어난다면, 스벨트킷은 정적인 에러 페이지를 띄워 대응(fall back)합니다.
dodok8 marked this conversation as resolved.
Show resolved Hide resolved

Add a new `src/routes/+layout.server.js` file to see this in action:
이러한 액션을 일으키기 위해 `src/routes/+layout.server.js` 파일을 만들어 봅시다.

```js
/// file: src/routes/+layout.server.js
Expand All @@ -13,7 +13,7 @@ export function load() {
}
```

You can customise the fallback error page. Create a `src/error.html` file:
폴백 에러 페이지를 수정해봅시다. `src/error.html` 파일을 만드세요.

```html
/// file: src/error.html
Expand All @@ -22,7 +22,7 @@ You can customise the fallback error page. Create a `src/error.html` file:
<p>%sveltekit.error.message%</p>
```

This file can include the following:
이 파일에는 다음 정보가 담길 수 있습니다.

- `%sveltekit.status%` — the HTTP status code
- `%sveltekit.error.message%` — the error message
- `%sveltekit.status%` — HTTP 상태코드
- `%sveltekit.error.message%` — 에러 메시지
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
---
title: Redirects
title: 리다이렉트
---

We can also use the `throw` mechanism to redirect from one page to another.
`throw` 메커니즘을 이용해 다른 페이지로 리다이렉트 시킬수 있습니다.

Create a new `load` function in `src/routes/a/+page.server.js`:
`src/routes/a/+page.server.js`에 새 `load` 함수를 만들어 봅시다.

```js
/// file: src/routes/a/+page.server.js
Expand All @@ -15,12 +15,12 @@ export function load() {
}
```

Navigating to `/a` will now take us straight to `/b`.
`/a` 로 이동하면 `/b` 로 이동하게 됩니다.

You can `throw redirect(...)` inside `load` functions, form actions, API routes and the `handle` hook, which we'll discuss in a later chapter.
`load` 함수, 폼 액션, API 라우트, `handle` 훅(나중에 다룰 내용입니다.)에서 `throw redirect(...)` 를 사용할 수 있습니다.

The most common status codes you'll use:
가장 흔하게 사용되는 리다이렉트는 다음과 같습니다.

- `303` — for form actions, following a successful submission
- `307` — for temporary redirects
- `308` — for permanent redirects
- `303` — 폼 액션에서 성공적인 제출 다음에 사용.
dodok8 marked this conversation as resolved.
Show resolved Hide resolved
- `307` — 임시적인 리다이렉트
- `308` — 영구적인 리다이렉트
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"title": "Errors and redirects"
"title": "에러와 리다이렉트"
}
Loading