Merge pull request #1409 from javascript-tutorial/1311

[이벤트 위임] 과제2 번역 (#1311)

Author: Violet-Bora-Lee

2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md

@@ -1,4 +1,4 @@
 해답은 두 파트로 나뉩니다.
 
-1. Wrap every tree node title into `<span>`. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `<span>` width is exactly the text width (unlike without it).
+1. 트리에 있는 모든 텍스트를 `<span>`이 감싸도록 합니다. 이렇게 하면 CSS `:hover`를 사용해 마우스 오버 시 글씨를 굴게 해주는 효과를 줄 수 있고 `<span>`이 차지하는 너비가 텍스트의 너비와 정확히 일치하기 때문에 텍스트에만 클릭 이벤트가 동작하도록 할 수 있습니다.
 2. 루트 노드인 `tree`에 핸들러를 추가하고 클릭 이벤트가 `<span>`으로 감싼 텍스트에만 동작하도록 합니다.

2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html

@@ -54,23 +54,22 @@
   </ul>
 
   <script>
-    // move all text into <span>
-    // they occupy exactly the place necessary for the text,
+    // 텍스트 전부를 <span>이 감싸도록 합니다.
     for (let li of tree.querySelectorAll('li')) {
       let span = document.createElement('span');
       li.prepend(span);
       span.append(span.nextSibling); // 텍스트 노드를 span 안으로 옮깁니다.
     }
 
-    // catch clicks on whole tree
+    // 트리 전체의 클릭 이벤트를 감지하는 리스너를 만듭니다.
     tree.onclick = function(event) {
 
       if (event.target.tagName != 'SPAN') {
         return;
       }
 
       let childrenContainer = event.target.parentNode.querySelector('ul');
-      if (!childrenContainer) return; // no children
+      if (!childrenContainer) return; // 자손 노드가 없는 경우
 
       childrenContainer.hidden = !childrenContainer.hidden;
     }

2-ui/2-events/03-event-delegation/2-sliding-tree/task.md

@@ -2,7 +2,7 @@ importance: 5
 
 ---
 
-# Tree menu
+# 트리 메뉴 구현하기
 
 노드를 클릭하면 자손 노드가 보이거나 숨겨지는 트리 메뉴를 구현해보세요.
 
@@ -11,4 +11,5 @@ importance: 5
 구체적인 요구사항은 다음과 같습니다.
 
 - 단 하나의 이벤트 핸들러(이벤트 위임 사용하기)
-- A click outside the node title (on an empty space) should not do anything.
+
+- 노드(텍스트) 바깥(빈 곳)을 클릭하면 아무 일도 일어나지 않아야 합니다.