02-advanced-svelte/09-special-elements

content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/README.md

@@ -2,9 +2,9 @@
 title: <svelte:self>
 ---
 
-Svelte provides a variety of built-in elements. The first, `<svelte:self>`, allows a component to contain itself recursively.
+스벨트는 다양한 내장 요소를 제공합니다. 그 중 첫 번째인 `<svelte:self>`는 컴포넌트가 자신을 재귀적으로 포함할 수 있게 합니다.
 
-It's useful for things like this folder tree view, where folders can contain _other_ folders. In `Folder.svelte` we want to be able to do this...
+이는 이 폴더 트리 뷰와 같이 폴더가 _다른_ 폴더를 포함할 수 있는 경우에 유용합니다. `Folder.svelte`에서 다음과 같이 하기를 원하더라도,
 
 ```svelte
 /// file: Folder.svelte
@@ -15,7 +15,7 @@ It's useful for things like this folder tree view, where folders can contain _ot
 {/if}
 ```
 
-...but that's impossible, because a module can't import itself. Instead, we use `<svelte:self>`:
+모듈은 자신을 import할 수 없기 때문에 이는 불가능합니다. 대신, `<svelte:self>`를 사용할 수 있습니다.
 
 ```svelte
 /// file: Folder.svelte
@@ -25,3 +25,4 @@ It's useful for things like this folder tree view, where folders can contain _ot
 	<File {...file}/>
 {/if}
 ```
+

content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/README.md

@@ -2,9 +2,9 @@
 title: <svelte:component>
 ---
 
-A component can change its type altogether with `<svelte:component>`. In this exercise, we want to show `RedThing.svelte` if the `color` is `red`, `GreenThing.svelte` if it's `green`, and so on.
+컴포넌트는 `<svelte:component>`를 사용하여 유형을 완전히 변경할 수 있습니다. 이 연습에서는 `color`가 `red`인 경우 `RedThing.svelte`, `green`인 경우 `GreenThing.svelte` 하는 식으로 표시하고자 합니다.
 
-We _could_ do this with a sequence of `if` blocks...
+이것을 일련의 `if` 블록으로 할 수 _있지만_...
 
 ```svelte
 /// file: App.svelte
@@ -17,7 +17,7 @@ We _could_ do this with a sequence of `if` blocks...
 {/if}
 ```
 
-...but it's a little cumbersome. Instead, we can create a single dynamic component:
+...이는 다소 번거롭습니다. 대신, 단일 동적 컴포넌트를 생성할 수 있습니다.
 
 ```svelte
 /// file: App.svelte
@@ -30,4 +30,4 @@ We _could_ do this with a sequence of `if` blocks...
 +++<svelte:component this={selected.component} />+++
 ```
 
-The `this` value can be any component constructor, or a falsy value — if it's falsy, no component is rendered.
+`this` 값은 어떤 컴포넌트 생성자나 거짓(falsy) 값일 수 있습니다. 거짓 값이면, 아무 컴포넌트도 렌더링되지 않습니다.

content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/README.md

@@ -2,7 +2,7 @@
 title: <svelte:element>
 ---
 
-Similarly, we don't always know in advance what kind of DOM element to render. `<svelte:element>` comes in handy here. As with the [previous exercise](svelte-component), we can replace a long sequence of `if` blocks with a single dynamic element:
+마찬가지로, 어떤 종류의 DOM 요소를 렌더링할지 미리 알 수 없는 경우도 있습니다. 이럴 때 `<svelte:element>`가 유용합니다. [이전 연습](svelte-component)과 마찬가지로, 긴 `if` 블록 시퀀스를 단일 동적 요소로 대체할 수 있습니다.
 
 ```svelte
 /// file: App.svelte
@@ -17,4 +17,4 @@ Similarly, we don't always know in advance what kind of DOM element to render. `
 </svelte:element>+++
 ```
 
-The `this` value can be any string, or a falsy value — if it's falsy, no element is rendered.
+`this` 값은 어떤 문자열이거나 거짓(falsy) 값일 수 있습니다. 거짓 값이면, 아무 요소도 렌더링되지 않습니다.

content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/README.md

@@ -2,13 +2,13 @@
 title: <svelte:window>
 ---
 
-Just as you can add event listeners to any DOM element, you can add event listeners to the `window` object with `<svelte:window>`.
+어떤 DOM 요소에든 이벤트 리스너를 추가할 수 있는 것처럼, `<svelte:window>`를 사용하여 `window` 객체에 이벤트 리스너를 추가할 수 있습니다.
 
-We've already got a `handleKeydown` function declared — now all we need to do is add a `keydown` listener:
+여기, 이미 선언된 `handleKeydown` 함수가 있습니다. 이제 `keydown` 리스너를 추가하기만 하면 됩니다.
 
 ```svelte
 /// file: App.svelte
 <svelte:window +++on:keydown={handleKeydown}+++ />
 ```
 
-> As with DOM elements, you can add [event modifiers](/tutorial/event-modifiers) like `preventDefault`.
+> DOM 요소와 마찬가지로, `preventDefault`와 같은 [이벤트 수정자](/tutorial/event-modifiers)를 추가할 수 있습니다.

content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-window-bindings/README.md

@@ -1,22 +1,22 @@
 ---
-title: <svelte:window> bindings
+title: <svelte:window> 바인딩
 ---
 
-We can also bind to certain properties of `window`, such as `scrollY`:
+`scrollY`와 같은 `window`의 특정 속성에 바인딩할 수도 있습니다.
 
 ```svelte
 /// file: App.svelte
 <svelte:window +++bind:scrollY={y}+++ />
 ```
 
-The list of properties you can bind to is as follows:
+바인딩할 수 있는 속성 목록은 다음과 같습니다.
 
 - `innerWidth`
 - `innerHeight`
 - `outerWidth`
 - `outerHeight`
 - `scrollX`
 - `scrollY`
-- `online` — an alias for `window.navigator.onLine`
+- `online` — `window.navigator.onLine`의 별칭
 
-All except `scrollX` and `scrollY` are readonly.
+`scrollX`와 `scrollY`를 제외한 모든 속성은 읽기 전용입니다.

content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/README.md

@@ -2,9 +2,9 @@
 title: <svelte:body>
 ---
 
-Similar to `<svelte:window>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
+`<svelte:window>`와 유사하게, `<svelte:body>` 요소를 사용하면 `document.body`에서 발생하는 이벤트를 수신할 수 있습니다. 이는 `window`에서 발생하지 않는 `mouseenter` 및 `mouseleave` 이벤트에 유용합니다.
 
-Add these `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag...
+이 `mouseenter` 및 `mouseleave` 핸들러를 `<svelte:body>` 태그에 추가해봅시다.
 
 ```svelte
 /// file: App.svelte
@@ -14,4 +14,4 @@ Add these `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag...
 />
 ```
 
-...and hover over the `<body>`.
+그리고 `<body>` 위에 마우스를 올려봅시다.

content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/README.md

@@ -2,13 +2,13 @@
 title: <svelte:document>
 ---
 
-The `<svelte:document>` element allows you to listen for events that fire on `document`. This is useful with events like `selectionchange`, which doesn't fire on `window`.
+`<svelte:document>` 요소를 사용하면 `document`에서 발생하는 이벤트를 수신할 수 있습니다. 이는 `window`에서 발생하지 않는 `selectionchange`와 같은 이벤트에 유용합니다.
 
-Add the `selectionchange` handler to the `<svelte:document>` tag:
+`selectionchange` 핸들러를 `<svelte:document>` 태그에 추가해봅시다.
 
 ```svelte
 /// file: App.svelte
 <svelte:document +++on:selectionchange={handleSelectionChange}+++ />
 ```
 
-> Avoid `mouseenter` and `mouseleave` handlers on this element, as these events are not fired on `document` in all browsers. Use `<svelte:body>` instead.
+> 모든 브라우저에서 `document`에서 `mouseenter` 및 `mouseleave` 이벤트가 발생하지 않으므로, 이 요소에서 해당 핸들러를 피하세요. 대신 `<svelte:body>`를 사용하세요.

content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/README.md

@@ -2,9 +2,9 @@
 title: <svelte:head>
 ---
 
-The `<svelte:head>` element allows you to insert elements inside the `<head>` of your document. This is useful for things like `<title>` and `<meta>` tags, which are critical for good SEO.
+`<svelte:head>` 요소를 사용하면 문서의 `<head>` 내부에 요소를 삽입할 수 있습니다. 이는 SEO에 중요한 `<title>` 및 `<meta>` 태그와 같은 항목에 유용합니다.
 
-Since those are quite hard to show in the context of this tutorial, we'll use it for a different purpose — loading stylesheets.
+이 튜토리얼의 맥락에서 이를 보여주는 것이 다소 어렵기 때문에, 대신 스타일시트를 로드하는 용도로 사용해 보겠습니다.
 
 ```svelte
 /// file: App.svelte
@@ -20,4 +20,4 @@ Since those are quite hard to show in the context of this tutorial, we'll use it
 <h1>Welcome to my site!</h1>
 ```
 
-> In server-side rendering (SSR) mode, contents of `<svelte:head>` are returned separately from the rest of your HTML.
+> 서버 사이드 렌더링(SSR) 모드에서는 `<svelte:head>`의 내용이 나머지 HTML과 별도로 반환됩니다.

content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/README.md

@@ -2,30 +2,30 @@
 title: <svelte:options>
 ---
 
-The `<svelte:options>` element allows you to specify compiler options.
+`<svelte:options>` 요소를 사용하여 컴파일러 옵션을 지정할 수 있습니다.
 
-We'll use the `immutable` option as an example. In this app, the `<Todo>` component flashes whenever it receives new data. Clicking on one of the items toggles its `done` state by creating an updated `todos` array. This causes the _other_ `<Todo>` items to flash, even though they don't end up making any changes to the DOM.
+예제로 `immutable` 옵션을 사용해 보겠습니다. 이 앱에서 `<Todo>` 컴포넌트는 새 데이터를 받을 때마다 깜빡입니다. 항목을 클릭하면 `done` 상태가 토글되며 업데이트된 `todos` 배열이 생성됩니다. 이는 _다른_ `<Todo>` 항목도 깜빡이게 하지만, 실제로는 DOM에 아무런 변경도 일어나지 않습니다.
 
-We can optimise this by telling the `<Todo>` component to expect _immutable_ data. This means that we're promising never to _mutate_ the `todo` prop, but will instead create new todo objects whenever things change.
+`<Todo>` 컴포넌트가 _불변_ 데이터를 기대하도록 하면 이를 최적화할 수 있습니다. 이는 `todo` 프롭(prop)을 절대로 _변경_ 하지 않겠다고 약속하는 것을 의미하며, 대신 변경 사항이 있을 때마다 새로운 todo 객체를 생성할 것입니다.
 
-Add this to the top of `Todo.svelte`:
+다음을 `Todo.svelte`의 맨 위에 추가하십시오.
 
 ```svelte
 /// file: Todo.svelte
 <svelte:options immutable={true} />
 ```
 
-> You can shorten this to `<svelte:options immutable/>` if you prefer.
+> 원하는 경우 `<svelte:options immutable/>`로 줄일 수 있습니다.
 
-Now, when you toggle todos by clicking on them, only the updated component flashes.
+이제 항목을 클릭하여 todos를 토글할 때, 업데이트된 컴포넌트만 깜빡입니다.
 
-The options that can be set here are:
+여기서 설정할 수 있는 옵션은 다음과 같습니다:
 
-- `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
-- `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
-- `accessors={true}` — adds getters and setters for the component's props
-- `accessors={false}` — the default
-- `namespace="..."` — the namespace where this component will be used, most commonly `"svg"`
-- `customElement="..."` — the name to use when compiling this component as a custom element
+- `immutable={true}` — 불변 데이터를 사용하므로, 컴파일러가 값이 변경되었는지 여부를 단순 참조 동등성 검사로 확인할 수 있습니다.
+- `immutable={false}` — 기본값입니다. 스벨트는 가변 객체가 변경되었는지 여부에 대해 더 신중하게 판단합니다.
+- `accessors={true}` — 컴포넌트의 프롭(props)에 대한 getter와 setter를 추가합니다.
+- `accessors={false}` — 기본값입니다.
+- `namespace="..."` — 이 컴포넌트가 사용될 네임스페이스, 가장 일반적으로 `"svg"`입니다.
+- `customElement="..."` — 이 컴포넌트를 사용자 정의 요소로 컴파일할 때 사용할 이름입니다.
 
-Consult the [API reference](https://svelte.dev/docs) for more information on these options.
+이 옵션에 대한 자세한 내용은 [API 참조](https://svelte.dev/docs)를 참조하십시오.

content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/README.md

@@ -2,11 +2,11 @@
 title: <svelte:fragment>
 ---
 
-The `<svelte:fragment>` element allows you to place content in a named slot without wrapping it in a container DOM element.
+`<svelte:fragment>` 요소를 사용하면 컨테이너 DOM 요소로 래핑하지 않고도 명명된 슬롯에 콘텐츠를 배치할 수 있습니다.
 
-In this exercise, we're making a Tic-Tac-Toe game. To form a grid, the `<button>` elements in `App.svelte` should be direct descendants of the `<div class="board">` element in `Board.svelte`.
+이 연습에서는 틱택토 게임을 만들고 있습니다. 그리드를 형성하기 위해 `App.svelte`의 `<button>` 요소는 `Board.svelte`의 `<div class="board">` 요소의 직계 자손이어야 합니다.
 
-At the moment, it's horribly broken, because they're children of `<div slot="game">` instead. Let's fix it:
+현재, 이 요소들은 `<div slot="game">`의 자식 요소로 되어 있어 문제가 있습니다. 이를 수정해 봅시다.
 
 ```svelte
 /// file: App.svelte
@@ -25,4 +25,4 @@ At the moment, it's horribly broken, because they're children of `<div slot="gam
 		</button>
 	{/each}
 </+++svelte:fragment+++>
-```
+```

content/tutorial/02-advanced-svelte/09-special-elements/meta.json

@@ -1,5 +1,5 @@
 {
-	"title": "Special elements",
+	"title": "특수 요소",
 	"scope": {
 		"prefix": "/src/lib/",
 		"name": "src"