Svelte-Korea · HarunaMahjong · May 29, 2024
diff --git a/...t/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/README.md b/...t/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/README.md
@@ -1,8 +1,8 @@
 ---
-title: Contenteditable bindings
+title: 콘텐츠 편집 가능한 바인딩
 ---
 
-Elements with a `contenteditable` attribute support `textContent` and `innerHTML` bindings:
+`contenteditable` 속성이 있는 요소는 `textContent` 및 `innerHTML` 바인딩을 지원합니다.
 
 ```svelte
 /// file: App.svelte

diff --git a/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/README.md b/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/README.md
@@ -1,8 +1,8 @@
 ---
-title: Each block bindings
+title: Each 블록 바인딩
 ---
 
-You can even bind to properties inside an `each` block.
+`each` 블록 내의 속성에 바인딩할 수도 있습니다.
 
 ```svelte
 /// file: App.svelte
@@ -22,4 +22,4 @@ You can even bind to properties inside an `each` block.
 {/each}
 ```
 
-> Note that interacting with these `<input>` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead.
+> 이러한 `<input>` 요소와 상호 작용하면 배열이 변형된다는 점에 유의하세요. 불변 데이터를 선호하는 경우, 이러한 바인딩을 피하고 대신 이벤트 핸들러를 사용해야 합니다.
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/README.md b/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/README.md
@@ -1,10 +1,10 @@
 ---
-title: Media elements
+title: 미디어 요소
 ---
 
-You can bind to properties of `<audio>` and `<video>` elements, making it easy to (for example) build custom player UI, like `AudioPlayer.svelte`.
+<audio> 및 <video> 요소의 속성에 바인딩함으로써 `AudioPlayer.svelte`와 같은 사용자 정의 플레이어 UI 등을 쉽게 구축할 수 있습니다.
 
-First, add the `<audio>` element along with its bindings (we'll use the shorthand form for `src`, `duration` and `paused`):
+먼저, 바인딩과 함께 `<audio>` 요소를 추가합시다. `src`, `duration` 및 `paused`에 대해 축약형을 사용합니다.
 
 ```svelte
 /// file: AudioPlayer.svelte
@@ -22,7 +22,7 @@ First, add the `<audio>` element along with its bindings (we'll use the shorthan
 	/>
 ```
 
-Next, add an event handler to the `<button>` that toggles `paused`:
+다음으로, `<button>`에 `paused`를 토글하는 이벤트 핸들러를 추가합시다.
 
 ```svelte
 /// file: AudioPlayer.svelte
@@ -33,7 +33,7 @@ Next, add an event handler to the `<button>` that toggles `paused`:
 />
 ```
 
-Our audio player now has basic functionality. Let's add the ability to seek to a specific part of a track by dragging the slider. Inside the slider's `pointerdown` handler there's a `seek` function, where we can update `time`:
+이제 우리 오디오 플레이어는 기본적인 기능을 갖추고 있습니다. 슬라이더를 드래그하여 트랙의 특정 부분으로 이동할 수 있는 기능을 추가해 봅시다. 슬라이더의 `pointerdown` 핸들러 내에 `time`을 업데이트할 수 있는 `seek` 함수가 있습니다.
 
 ```js
 /// file: AudioPlayer.svelte
@@ -48,7 +48,7 @@ function seek(e) {
 }
 ```
 
-When the track ends, be kind — rewind:
+트랙이 끝나면 되감기 기능을 추가합시다.
 
 ```svelte
 /// file: AudioPlayer.svelte
@@ -63,22 +63,22 @@ When the track ends, be kind — rewind:
 />
 ```
 
-The complete set of bindings for `<audio>` and `<video>` is as follows — seven _readonly_ bindings...
+`<audio>` 및 `<video>` 요소에 대한 전체 바인딩은 이하 7개의 _읽기 전용_ 바인딩과
 
-- `duration` (readonly) — the total duration, in seconds
-- `buffered` (readonly) — an array of `{start, end}` objects
-- `seekable` (readonly) — ditto
-- `played` (readonly) — ditto
-- `seeking` (readonly) — boolean
-- `ended` (readonly) — boolean
-- `readyState` (readonly) — number between (and including) 0 and 4
+- `duration` (readonly) — 총 지속 시간(초)
+- `buffered` (readonly) — `{start, end}` 객체 배열
+- `seekable` (readonly) — 위와 동일
+- `played` (readonly) — 위와 동일
+- `seeking` (readonly) — 불리언 값
+- `ended` (readonly) — 불리언 값
+- `readyState` (readonly) — 0에서 4 사이의 숫자(포함)
 
-...and five _two-way_ bindings:
+이하 5개의 _양방향_ 바인딩입니다.
 
-- `currentTime` — the current position of the playhead, in seconds
-- `playbackRate` — speed up or slow down (`1` is 'normal')
-- `paused` — this one should be self-explanatory
-- `volume` — a value between 0 and 1
-- `muted` — a boolean value where true is muted
+- `currentTime` — 재생 헤드의 현재 위치(초)
+- `playbackRate` — 속도 조절 (`1`이 '기본 상태')
+- `paused` — 이 바인딩은 설명이 필요 없습니다
+- `volume` — 0에서 1 사이의 값
+- `muted` — `true`는 음소거된 상태를 나타내는 불리언 값
 
-Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
+비디오에는 추가로 `videoWidth` 및 `videoHeight` 읽기 전용 바인딩이 있습니다.
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/README.md b/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/README.md
@@ -1,8 +1,8 @@
 ---
-title: Dimensions
+title: 차원
 ---
 
-Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
+모든 블록 수준 요소에는 `clientWidth`, `clientHeight`, `offsetWidth` 및 `offsetHeight` 바인딩이 있습니다.
 
 ```svelte
 /// file: App.svelte
@@ -12,8 +12,8 @@ Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `
 </div>
 ```
 
-These bindings are readonly — changing the values of `w` and `h` won't have any effect on the element.
+이 바인딩은 읽기 전용입니다. `w`와 `h`의 값을 변경해도 요소에는 아무런 영향을 미치지 않습니다.
 
-> Elements are measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). There is some overhead involved, so it's not recommended to use this for large numbers of elements.
+> 요소는 [이 기술](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/)과 유사한 방법을 사용하여 측정됩니다. 약간의 오버헤드가 발생하므로 많은 수의 요소에 대해 이를 사용하는 것은 권장되지 않습니다.
 >
-> `display: inline` elements cannot be measured with this approach; nor can elements that can't contain other elements (such as `<canvas>`). In these cases you will need to measure a wrapper element instead.
+> `display: inline` 요소는 이 방법으로 측정할 수 없으며, 다른 요소를 포함할 수 없는 요소(예: `<canvas>`)도 마찬가지입니다. 이러한 경우 래퍼 요소를 대신 측정해야 합니다.
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/README.md b/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/README.md
@@ -2,11 +2,11 @@
 title: This
 ---
 
-In a [previous exercise](onmount), we learned how to use the `onMount` lifecycle function to paint to a canvas.
+[이전 연습](onmount)에서 `onMount` 생명주기 함수를 사용하여 캔버스에 그림을 그리는 방법을 배웠습니다.
 
-But the example is buggy — it's using `document.querySelector('canvas')`, which will always return the first `<canvas>` found on the page, which might not be the one belonging to our component.
+하지만 이 예제에는 버그가 있습니다 — `document.querySelector('canvas')`를 사용하고 있어, 항상 페이지에서 첫 번째 `<canvas>` 요소를 반환하게 되며, 이는 우리 컴포넌트에 속한 것이 아닐 수 있습니다.
 
-Instead, we can use the readonly `this` binding to get a reference to the element:
+대신, 읽기 전용 `this` 바인딩을 사용하여 요소에 대한 참조를 얻을 수 있습니다.
 
 ```js
 /// file: App.svelte
@@ -36,4 +36,4 @@ onMount(() => {
 ></canvas>
 ```
 
-Note that the value of `canvas` will be `undefined` until the component has mounted.
+캔버스의 값은 컴포넌트가 마운트될 때까지 `undefined`임에 유의하세요.
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/README.md b/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/README.md
@@ -1,8 +1,8 @@
 ---
-title: Component bindings
+title: 컴포넌트 바인딩
 ---
 
-Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
+DOM 요소의 프로퍼티(properties)에 바인딩할 수 있는 것처럼, 컴포넌트 프롭(props)에도 바인딩할 수 있습니다. 예를 들어, `<Keypad>` 컴포넌트의 `value` 프롭에 이것이 마치 폼 요소인 것처럼 바인딩할 수 있습니다.
 
 ```svelte
 /// file: App.svelte
@@ -12,6 +12,6 @@ Just as you can bind to properties of DOM elements, you can bind to component pr
 />
 ```
 
-Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.
+이제 사용자가 키패드와 상호 작용할 때, 부모 컴포넌트의 `pin` 값이 즉시 업데이트됩니다.
 
-> Use component bindings sparingly. It can be difficult to track the flow of data around your application if you have too many of them, especially if there is no 'single source of truth'.
+> 컴포넌트 바인딩은 적절히 사용하세요. 너무 많이 사용하면 애플리케이션의 데이터 흐름을 추적하기 어려워질 수 있으며, 특히 '단일 진실의 원천'이 없는 경우 더욱 그렇습니다.
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/README.md b/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/README.md
@@ -1,12 +1,12 @@
 ---
-title: Binding to component instances
+title: 컴포넌트 인스턴스에 대한 바인딩
 ---
 
-Just as you can bind to DOM elements, you can bind to component instances themselves with `bind:this`.
+DOM 요소에 바인딩할 수 있는 것처럼, `bind:this`를 사용하여 컴포넌트 인스턴스 자체에 바인딩할 수 있습니다.
 
-This is useful in the rare cases that you need to interact with a component programmatically (rather than by providing it with updated props). Revisiting our canvas app from [a few exercises ago](actions), it would be nice to add a button to clear the screen.
+이는 컴포넌트에 업데이트된 프롭(props)을 제공하는 대신 프로그램적으로 상호 작용해야 하는 드문 경우에 유용합니다. [몇 가지 연습 전](actions)의 캔버스 앱을 다시 살펴보면, 화면을 지우는 버튼을 추가하면 좋을 것입니다.
 
-First, let's export a function from `Canvas.svelte`:
+먼저, `Canvas.svelte`에서 함수를 내보냅시다.
 
 ```svelte
 /// file: Canvas.svelte
@@ -18,7 +18,7 @@ export let size;
 }+++
 ```
 
-Then, create a reference to the component instance:
+그런 다음, 컴포넌트 인스턴스에 대한 참조를 만듭시다.
 
 ```svelte
 /// file: App.svelte
@@ -38,7 +38,7 @@ Then, create a reference to the component instance:
 	<Canvas +++bind:this={canvas}+++ color={selected} size={size} />
 ```
 
-Finally, add a button that calls the `clear` function:
+마지막으로, `clear` 함수를 호출하는 버튼을 추가합시다.
 
 ```svelte
 /// file: App.svelte
@@ -51,4 +51,4 @@ Finally, add a button that calls the `clear` function:
 		clear
 	</button>+++
 </div>
-```
+```
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/meta.json b/content/tutorial/02-advanced-svelte/05-bindings/meta.json
@@ -1,5 +1,5 @@
 {
-	"title": "Advanced bindings",
+	"title": "고급 바인딩",
 	"scope": {
 		"prefix": "/src/lib/",
 		"name": "src"