Skip to content

Commit

Permalink
Translate 08-stores (Svelte-Korea#42)
Browse files Browse the repository at this point in the history
  • Loading branch information
dodok8 authored May 14, 2024
1 parent cac155d commit 5c523d9
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 20 deletions.
20 changes: 10 additions & 10 deletions content/tutorial/03-sveltekit/08-stores/01-page-store/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
title: page
---

As we learned [earlier](writable-stores), Svelte stores are a place to put data that doesn't belong to an individual component.
[이전](writable-stores)에 배웠듯이, 스벨트 스토어는 한 컴포넌트에만 속해있지 않은 값을 넣는 곳입니다.

SvelteKit makes three readonly stores available via the `$app/stores` module — `page`, `navigating` and `updated`. The one you'll use most often is [`page`](https://kit.svelte.dev/docs/types#public-types-page), which provides information about the current page:
스벨트킷은 `$app/stores` 모듈을 통해 3가지 읽기 전용 스토어를 제공합니다. 이 스토어는 `page`, `navigating`, `updated`입니다. 가장 자주 사용하게 될 스토어는 page입니다. 이는 현재 페이지에 관한 정보를 제공하는 스토어입니다.

* `url`the [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) of the current page
* `params`the current page's [parameters](params)
* `route`an object with an `id` property representing the current route
* `status`the HTTP status code of the current page
* `error`the error object of the current page, if any (you'll learn more about error handling in [later](error-basics) [exercises](handleerror))
* `data`the data for the current page, combining the return values of all `load` functions
* `form`the data returned from a [form action](the-form-element)
* `url`현재 페이지의 [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL)
* `params`현재 페이지의 [파라미터](params)
* `route`현재 라우트 정보를 표현하는 `id` 속성을 가진 오브젝트
* `status`현재 페이지의 HTTP 상태 코드
* `error`현재 페이지에 에러가 있는 경우에 에러 정보([나중에](error-basics) [배울 내용에서](handleerror) 더 자세히 다루겠습니다.)
* `data`모든 `load` 함수의 반환 값 정보가 결합된 현재 페이지를 위한 데이터
* `form`[폼 액션](the-form-element)에서 반환된 데이터

As with any other store, you can reference its value in a component by prefixing its name with the `$` symbol. For example, we can access the current pathname as `$page.url.pathname`:
다른 스토어와 마찬가지로, 이 값들은 `$` 접두어를 이름에 붙여서 참조할 수 있습니다. 예시로 현재 패스네임에 `$page.url.pathname`으로 접근할 수 있습니다.

```svelte
/// file: src/routes/+layout.svelte
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
title: navigating
---

The `navigating` store represents the current navigation. When a navigation starts — because of a link click, or a back/forward navigation, or a programmatic `goto` — the value of `navigation` will become an object with the following properties:
`navigating` 스토어는 현재 네비게이션 정보를 담고 있습니다. 링크를 클릭하거나, 앞/뒤로 이동하거나, 계획적으로 진행된 `goto`문처럼 네비게이션이 지속되는 경우에, `navigation`에는 다음과 같은 속성을 가지는 오브젝트가 됩니다.

- `from` and `to`objects with `params`, `route` and `url` properties
- `type`the type of navigation, e.g. `link`, `popstate` or `goto`
- `from` `to``params`, `route`, `url` 속성을 가진 오브젝트
- `type`네비게이션의 타입. 예시로 `link`, `popstate` `goto`가 있습니다.

> For complete type information visit the [`Navigation`](https://kit.svelte.dev/docs/types#public-types-navigation) documentation.
> 네비게이션 타입에 대한 완전한 정보를 원하면 [`Navigation`](https://kit.svelte.dev/docs/types#public-types-navigation) 문서를 참고해 주세요.
It can be used to show a loading indicator for long-running navigations. In this exercise, `src/routes/+page.server.js` and `src/routes/about/+page.server.js` both have an artificial delay. Inside `src/routes/+layout.svelte`, import the `navigating` store and add a message to the nav bar:
이 스토어를 이용해 네비게이션에 오래 걸리는 경우를 위한 로딩 인디케이터를 표시할 수 있습니다. 이 예제에서, `src/routes/+page.server.js` `src/routes/about/+page.server.js` 에는 인위적인 딜레이가 있습니다. `src/routes/+layout.svelte`,`navigating` 스토어를 불러오고 네비게이션 바에 메세지를 추가해봅시다.

```svelte
/// file: src/routes/+layout.svelte
Expand All @@ -32,4 +32,4 @@ It can be used to show a loading indicator for long-running navigations. In this
</nav>
<slot />
```
```
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: updated
---

The `updated` store contains `true` or `false` depending on whether a new version of the app has been deployed since the page was first opened. For this to work, your `svelte.config.js` must specify `kit.version.pollInterval`.
`updated` 스토어는 현재 페이지가 열린 순간 기준으로 앱의 새 버전이 배포되었는지 알려주는 `true`, `false` 값을 가지고 있습니다. 이 스토어가 작동하려면, `svelte.config.js``kit.version.pollInterval` 을 명시해야합니다.

```svelte
/// file: src/routes/+layout.svelte
Expand All @@ -11,9 +11,9 @@ The `updated` store contains `true` or `false` depending on whether a new versio
</script>
```

Version changes only happen in production, not during development. For that reason, `$updated` will always be `false` in this tutorial.
버전 변경은 제품에서만 일어나고, 개발 중에서는 발생하지 않습니다. 그래서 `$updated` 값은 튜토리얼에서 항상 `false` 입니다.

You can manually check for new versions, regardless of `pollInterval`, by calling `updated.check()`.
`pollInterval`에 상관없이 새 버전을 확인하고 싶다면 `updated.check()`을 호출하세요.

```svelte
/// file: src/routes/+layout.svelte
Expand Down
2 changes: 1 addition & 1 deletion content/tutorial/03-sveltekit/08-stores/meta.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"title": "Stores"
"title": "스토어"
}

0 comments on commit 5c523d9

Please sign in to comment.