Merge branch 'master' into 1313

Author: Violet-Bora-Lee

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

@@ -1,4 +1,4 @@
-The solution has two parts.
+해답은 두 파트로 나뉩니다.
 
-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).
-2. Set a handler to the `tree` root node and handle clicks on that `<span>` titles.
+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); // move the text node into 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/source.view/index.html

@@ -42,5 +42,9 @@
     </li>
   </ul>
 
+  <script>
+    // ...여기에 코드를 작성하세요...
+  </script>
+
 </body>
 </html>

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

@@ -2,13 +2,14 @@ importance: 5
 
 ---
 
-# Tree menu
+# 트리 메뉴 구현하기
 
-Create a tree that shows/hides node children on click:
+노드를 클릭하면 자손 노드가 보이거나 숨겨지는 트리 메뉴를 구현해보세요.
 
 [iframe border=1 src="solution"]
 
-Requirements:
+구체적인 요구사항은 다음과 같습니다.
 
-- Only one event handler (use delegation)
-- A click outside the node title (on an empty space) should not do anything.
+- 단 하나의 이벤트 핸들러(이벤트 위임 사용하기)
+
+- 노드(텍스트) 바깥(빈 곳)을 클릭하면 아무 일도 일어나지 않아야 합니다.

2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html

@@ -25,30 +25,30 @@
   <table id="grid">
     <thead>
       <tr>
-        <th data-type="number">Age</th>
-        <th data-type="string">Name</th>
+        <th data-type="number">나이</th>
+        <th data-type="string">이름</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>5</td>
-        <td>John</td>
+        <td>일리야</td>
       </tr>
       <tr>
         <td>2</td>
-        <td>Pete</td>
+        <td>보라</td>
       </tr>
       <tr>
         <td>12</td>
-        <td>Ann</td>
+        <td>호진</td>
       </tr>
       <tr>
         <td>9</td>
-        <td>Eugene</td>
+        <td>지민</td>
       </tr>
       <tr>
         <td>1</td>
-        <td>Ilya</td>
+        <td>재인</td>
       </tr>
     </tbody>
   </table>
@@ -59,10 +59,10 @@
       if (e.target.tagName != 'TH') return;
 
       let th = e.target;
-      // if TH, then sort
-      // cellIndex is the number of th:
-      //   0 for the first column
-      //   1 for the second column, etc
+      // 클릭한 요소가 TH라면 정렬을 진행합니다.
+      // cellIndex는 몇 번째 열인지를 나타내는 인덱스 값입니다.
+      //   첫 번째 열이라면 0,
+      //   두 번째 열이라면 1이 됩니다.
       sortGrid(th.cellIndex, th.dataset.type);
     };
 
@@ -71,7 +71,7 @@
 
       let rowsArray = Array.from(tbody.rows);
 
-      // compare(a, b) compares two rows, need for sorting
+      // 변수 compare에 할당할 함수 compare(a, b)는 두 행을 비교하고 필요에 따라 정렬을 진행합니다.
       let compare;
 
       switch (type) {
@@ -87,7 +87,7 @@
           break;
       }
 
-      // sort
+      // 해당 열을 정렬합니다.
       rowsArray.sort(compare);
 
       tbody.append(...rowsArray);

2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html

@@ -25,36 +25,36 @@
   <table id="grid">
     <thead>
       <tr>
-        <th data-type="number">Age</th>
-        <th data-type="string">Name</th>
+        <th data-type="number">나이</th>
+        <th data-type="string">이름</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>5</td>
-        <td>John</td>
+        <td>일리야</td>
       </tr>
       <tr>
         <td>2</td>
-        <td>Pete</td>
+        <td>보라</td>
       </tr>
       <tr>
         <td>12</td>
-        <td>Ann</td>
+        <td>호진</td>
       </tr>
       <tr>
         <td>9</td>
-        <td>Eugene</td>
+        <td>민지</td>
       </tr>
       <tr>
         <td>1</td>
-        <td>Ilya</td>
+        <td>호석</td>
       </tr>
     </tbody>
   </table>
 
   <script>
-    // ...your code...
+    // ...여기에 코드를 작성하세요...
   </script>
 
 </body>

2-ui/2-events/03-event-delegation/3-sortable-table/task.md

@@ -2,42 +2,42 @@ importance: 4
 
 ---
 
-# Sortable table
+# 정렬 기능을 제공하는 표
 
-Make the table sortable: clicks on `<th>` elements should sort it by corresponding column.
+열 제목을 나타내는 요소인 `<th>`를 클릭하면 열 전체가 정렬되는 표를 만들어보세요.
 
-Each `<th>` has the type in the attribute, like this:
+모든 `<th>` 속성엔 다음과 같이 데이터의 타입이 정의되어 있습니다.
 
 ```html
 <table id="grid">
   <thead>
     <tr>
 *!*
-      <th data-type="number">Age</th>
-      <th data-type="string">Name</th>
+      <th data-type="number">나이</th>
+      <th data-type="string">이름</th>
 */!*
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>5</td>
-      <td>John</td>
+      <td>일리야</td>
     </tr>
     <tr>
       <td>10</td>
-      <td>Ann</td>
+      <td>보라</td>
     </tr>
     ...
   </tbody>
 </table>
 ```
 
-In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type.
+위 예시에선 첫 번째 열엔 숫자가, 두 번째 열엔 문자열이 들어갑니다. 구현할 정렬 함수는 데이터 타입에 맞게 정렬을 해줘야 합니다.
 
-Only `"string"` and `"number"` types should be supported.
+이 문제에선 `'숫자'`와 `'문자열'` 타입만 다룬다고 가정하겠습니다.
 
-The working example:
+제대로 해답을 작성했다면 다음 예시처럼 동작해야 합니다.
 
 [iframe border=1 src="solution" height=190]
 
-P.S. The table can be big, with any number of rows and columns.
+P.S. 표 크기는 예시보다 훨씬 클 수 있습니다. 열이나 행이 더 추가될 수 있다는 가정하에 답을 작성해보세요.

6-data-storage/02-localstorage/article.md

@@ -127,17 +127,17 @@ for(let key of keys) {
 숫자나 객체 등 다른 자료형을 사용하게 되면 문자열로 자동 변환됩니다.
 
 ```js run
-sessionStorage.user = {name: "John"};
-alert(sessionStorage.user); // [object Object]
+localStorage.user = {name: "John"};
+alert(localStorage.user); // [object Object]
 ```
 
 `JSON`을 사용하면 객체를 쓸 수 있긴 합니다.
 
 ```js run
-sessionStorage.user = JSON.stringify({name: "John"});
+localStorage.user = JSON.stringify({name: "John"});
 
 // 잠시 후 
-let user = JSON.parse( sessionStorage.user );
+let user = JSON.parse( localStorage.user );
 alert( user.name ); // John
 ```