02-advanced-svelte/04-actions

content/tutorial/02-advanced-svelte/04-actions/01-actions/README.md

@@ -1,17 +1,17 @@
 ---
-title: The use directive
+title: Use 지시어
 ---
 
-Actions are essentially element-level lifecycle functions. They're useful for things like:
+액션은 본질적으로 요소 수준의 생명주기 함수입니다. 다음과 같은 경우에 유용합니다:
 
-- interfacing with third-party libraries
-- lazy-loaded images
-- tooltips
-- adding custom event handlers
+- 서드파티 라이브러리와의 인터페이스
+- 지연 로드된 이미지
+- 툴팁
+- 사용자 정의 이벤트 핸들러 추가
 
-In this app, you can scribble on the `<canvas>`, and change colours and brush size via the menu. But if you open the menu and cycle through the options with the Tab key, you'll soon find that the focus isn't _trapped_ inside the modal.
+이 앱에서는 `<canvas>`에 낙서를 하고 메뉴를 통해 색상과 브러시 크기를 변경할 수 있습니다. 하지만 메뉴를 열고 Tab 키로 옵션을 순환하면 포커스가 모달 내부에 _갇히지_ 않는 것을 곧 알게 될 것입니다.
 
-We can fix that with an action. Import `trapFocus` from `actions.js`...
+이 문제를 액션으로 해결할 수 있습니다. `actions.js`에서 `trapFocus`를 가져옵시다.
 
 ```svelte
 /// file: App.svelte
@@ -27,16 +27,16 @@ We can fix that with an action. Import `trapFocus` from `actions.js`...
 </script>
 ```
 
-...then add it to the menu with the `use:` directive:
+그런 다음 `use:` 지시어를 사용하여 메뉴에 추가합시다.
 
 ```svelte
 /// file: App.svelte
 <div class="menu" +++use:trapFocus+++>
 ```
 
-Let's take a look at the `trapFocus` function in `actions.js`. An action function is called with a `node` — the `<div class="menu">` in our case — when the node is mounted to the DOM, and can return an action object with a `destroy` method.
+이제 `actions.js`의 `trapFocus` 함수를 살펴봅시다. 노드가 DOM에 마운트될 때 액션 함수는 `node`(이 경우 `<div class="menu">`)와 함께 호출되며, `destroy` 메서드가 있는 액션 객체를 반환할 수 있습니다.
 
-First, we need to add an event listener that intercepts Tab key presses:
+먼저, Tab 키 입력을 가로채는 이벤트 리스너를 추가합시다.
 
 ```js
 /// file: actions.js
@@ -45,7 +45,7 @@ focusable()[0]?.focus();
 +++node.addEventListener('keydown', handleKeydown);+++
 ```
 
-Second, we need to do some cleanup when the node is unmounted — removing the event listener, and restoring focus to where it was before the element mounted:
+다음으로, 노드가 마운트 해제될 때 이벤트 리스너를 제거하고 요소가 마운트됐던 위치에 포커스를 복원하는 등의 정리 작업을 해야 합니다.
 
 ```js
 /// file: actions.js
@@ -61,4 +61,5 @@ node.addEventListener('keydown', handleKeydown);
 };+++
 ```
 
-Now, when you open the menu, you can cycle through the options with the Tab key.
+이제 메뉴를 열면 Tab 키로 옵션을 순환할 수 있습니다.
+

content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md

@@ -1,12 +1,12 @@
 ---
-title: Adding parameters
+title: 매개변수 더하기
 ---
 
-Like transitions and animations, an action can take an argument, which the action function will be called with alongside the element it belongs to.
+전환 및 애니메이션과 마찬가지로 액션은 인자를 취할 수 있으며, 액션 함수는 해당 요소와 함께 호출됩니다.
 
-In this exercise, we want to add a tooltip to the `<button>` using the [`Tippy.js`](https://atomiks.github.io/tippyjs/) library. The action is already wired up with `use:tooltip`, but if you hover over the button (or focus it with the keyboard) the tooltip contains no content.
+이 연습에서는 [`Tippy.js`](https://atomiks.github.io/tippyjs/) 라이브러리를 사용하여 `<button>`에 툴팁을 추가하고자 합니다. 액션은 이미 `use:tooltip`으로 연결되어 있지만, 버튼을 가리키거나(또는 키보드로 포커스하면) 툴팁에 내용이 표시되지 않습니다.
 
-First, the action needs to accept some options and pass them to Tippy:
+먼저, 액션이 옵션을 받아 Tippy에 전달해야 합니다.
 
 ```js
 /// file: App.svelte
@@ -21,7 +21,7 @@ function tooltip(node, +++options+++) {
 }
 ```
 
-Then, we need to pass some options into the action:
+그런 다음, 액션에 옵션을 전달해야 합니다.
 
 ```svelte
 /// file: App.svelte
@@ -30,7 +30,7 @@ Then, we need to pass some options into the action:
 </button>
 ```
 
-The tooltip now works — almost. If we change the text in the `<input>`, the tooltip will not reflect the new content. We can fix that by adding an `update` method to the returned object.
+이제 툴팁이 거의 작동합니다. 다만 `<input>`의 텍스트를 변경하면 툴팁에 새로운 내용이 반영되지 않는데, 반환된 객체에 `update` 메서드를 추가하여 해결할 수 있습니다.
 
 ```js
 /// file: App.svelte

content/tutorial/02-advanced-svelte/04-actions/meta.json

@@ -1,5 +1,5 @@
 {
-	"title": "Actions",
+	"title": "액션",
 	"scope": {
 		"prefix": "/src/lib/",
 		"name": "src"