diff --git a/1-js/02-first-steps/13-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md
index 5e8991c27c..fee9f4adcc 100644
--- a/1-js/02-first-steps/13-while-for/article.md
+++ b/1-js/02-first-steps/13-while-for/article.md
@@ -47,8 +47,8 @@ while (i) { // i가 0이 되면 조건이 falsy가 되므로 반복문이 멈춥
 }
 ```
 
-````smart header="본문이 한 줄이면 대괄호를 쓰지 않아도 됩니다."
-반복문 본문이 한 줄짜리 문이라면 대괄호 `{…}`를 생략할 수 있습니다.
+````smart header="본문이 한 줄이면 중괄호를 쓰지 않아도 됩니다."
+반복문 본문이 한 줄짜리 문이라면 중괄호 `{…}`를 생략할 수 있습니다.
 
 ```js run
 let i = 3;
@@ -268,7 +268,7 @@ for (let i = 0; i < 10; i++) {
 
 기술적인 관점에서 봤을 때, 이 예시는 위쪽에 있는 예시와 동일합니다. `continue`를 사용하는 대신 코드를 `if` 블록으로 감싼 점만 다릅니다.
 
-그런데 이렇게 코드를 작성하면 부작용으로 중첩 레벨(대괄호 안의 `alert` 호출)이 하나 더 늘어납니다. `if` 안의 코드가 길어진다면 전체 가독성이 떨어질 수 있습니다.
+그런데 이렇게 코드를 작성하면 부작용으로 중첩 레벨(중괄호 안의 `alert` 호출)이 하나 더 늘어납니다. `if` 안의 코드가 길어진다면 전체 가독성이 떨어질 수 있습니다.
 ````
 
 ````warn header="'?' 오른쪽엔 `break`나 `continue`가 올 수 없습니다."
diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md
index daac603d43..1ea5b81e3a 100644
--- a/1-js/02-first-steps/16-function-expressions/article.md
+++ b/1-js/02-first-steps/16-function-expressions/article.md
@@ -365,4 +365,4 @@ welcome(); // 제대로 동작합니다.
 
 함수를 선언해야 한다면 함수가 선언되기 이전에도 함수를 활용할 수 있기 때문에, 함수 선언문 방식을 따르는 게 좋습니다. 함수 선언 방식은 코드를 유연하게 구성할 수 있도록 해주고, 가독성도 좋습니다.
 
-함수 표현식은 함수 선언문을 사용하는게 부적절할 때에 사용하는 것이 좋습니다. 이번 챕터에서 함수 선언문을 사용해야만 하는 경우를 몇 가지 알아보았는데, 튜토리얼 뒤쪽에서 좀 더 깊게 해당 사례를 살펴보도록 하겠습니다.
+함수 표현식은 함수 선언문을 사용하는게 부적절할 때에 사용하는 것이 좋습니다. 이번 챕터에서 함수 표현식을 사용해야만 하는 경우를 몇 가지 알아보았는데, 튜토리얼 뒤쪽에서 좀 더 깊게 해당 사례를 살펴보도록 하겠습니다.
diff --git a/1-js/02-first-steps/18-javascript-specials/article.md b/1-js/02-first-steps/18-javascript-specials/article.md
index 277b9f20c8..915fdf1513 100644
--- a/1-js/02-first-steps/18-javascript-specials/article.md
+++ b/1-js/02-first-steps/18-javascript-specials/article.md
@@ -259,7 +259,7 @@ switch (age) {
     // 화살표(=>) 우측엔 표현식이 있음
     let sum = (a, b) => a + b;
 
-    // 대괄호{ ... }를 사용하면 본문에 여러 줄의 코드를 작성할 수 있음. return문이 꼭 있어야 함.
+    // 중괄호{ ... }를 사용하면 본문에 여러 줄의 코드를 작성할 수 있음. return문이 꼭 있어야 함.
     let sum = (a, b) => {
       // ...
       return a + b;
diff --git a/1-js/05-data-types/01-primitives-methods/article.md b/1-js/05-data-types/01-primitives-methods/article.md
index 95801e0ea7..a07937a393 100644
--- a/1-js/05-data-types/01-primitives-methods/article.md
+++ b/1-js/05-data-types/01-primitives-methods/article.md
@@ -12,7 +12,7 @@
 객체:
 
 - 프로퍼티에 다양한 종류의 값을 저장할 수 있습니다.
-- `{name : "John", age : 30}`와 같이 대괄호 `{}`를 사용해 만들 수 있습니다. 자바스크립트에는 여러 종류의 객체가 있는데, 함수도 객체의 일종입니다.
+- `{name : "John", age : 30}`와 같이 중괄호 `{}`를 사용해 만들 수 있습니다. 자바스크립트에는 여러 종류의 객체가 있는데, 함수도 객체의 일종입니다.
 
 객체의 장점 중 하나는 함수를 프로퍼티로 저장할 수 있다는 것입니다.
 
diff --git a/1-js/05-data-types/02-number/4-endless-loop-error/solution.md b/1-js/05-data-types/02-number/4-endless-loop-error/solution.md
index 8bc55bd027..c7bb53cbb9 100644
--- a/1-js/05-data-types/02-number/4-endless-loop-error/solution.md
+++ b/1-js/05-data-types/02-number/4-endless-loop-error/solution.md
@@ -1,6 +1,6 @@
-That's because `i` would never equal `10`.
+`i`는 절대 `10`이 될 수 없어서 무한 루프가 발생합니다.
 
-Run it to see the *real* values of `i`:
+코드를 실행해 실제 `i` 값을 확인해 봅시다.
 
 ```js run
 let i = 0;
@@ -10,8 +10,8 @@ while (i < 11) {
 }
 ```
 
-None of them is exactly `10`.
+어떤 경우에도 `i`는 `10`이 될 수 없습니다.
 
-Such things happen because of the precision losses when adding fractions like `0.2`.
+이런 일이 발생하는 이유는 `0.2`와 같은 분수를 더할 때 정밀도 손실이 발생하기 때문입니다.
 
-Conclusion: evade equality checks when working with decimal fractions.
\ No newline at end of file
+그러므로 소수나 분수를 대상으로 작업 할 땐 등호 비교를 피하세요.
diff --git a/1-js/05-data-types/02-number/4-endless-loop-error/task.md b/1-js/05-data-types/02-number/4-endless-loop-error/task.md
index 592ece31c0..a5f63e929f 100644
--- a/1-js/05-data-types/02-number/4-endless-loop-error/task.md
+++ b/1-js/05-data-types/02-number/4-endless-loop-error/task.md
@@ -2,9 +2,9 @@ importance: 4
 
 ---
 
-# An occasional infinite loop
+# 무한 루프
 
-This loop is infinite. It never ends. Why?
+아래 반복문은 무한대로 작동합니다. 왜 그럴까요?
 
 ```js
 let i = 0;
diff --git a/1-js/05-data-types/02-number/8-random-min-max/solution.md b/1-js/05-data-types/02-number/8-random-min-max/solution.md
index 8736c3d561..edbd7752da 100644
--- a/1-js/05-data-types/02-number/8-random-min-max/solution.md
+++ b/1-js/05-data-types/02-number/8-random-min-max/solution.md
@@ -1,8 +1,8 @@
 We need to "map" all values from the interval 0..1 into values from `min` to `max`.
 
-That can be done in two stages:
+이 작업은 두 단계로 이루어집니다.
 
-1. If we multiply a random number from 0..1 by `max-min`, then the interval of possible values increases `0..1` to `0..max-min`.
+1. 0과 1 사이의 임의의 숫자에 `max-min`를 곱하면 가능한 값의 간격이 `0..1`에서 `0..max-min`으로 증가합니다.
 2. Now if we add `min`, the possible interval becomes from `min` to `max`.
 
 The function:
diff --git a/1-js/05-data-types/02-number/8-random-min-max/task.md b/1-js/05-data-types/02-number/8-random-min-max/task.md
index 7037cfcbb9..841da4111c 100644
--- a/1-js/05-data-types/02-number/8-random-min-max/task.md
+++ b/1-js/05-data-types/02-number/8-random-min-max/task.md
@@ -2,13 +2,13 @@ importance: 2
 
 ---
 
-# A random number from min to max
+# min과 max 사이에 있는 임의의 숫자 생성하기
 
-The built-in function `Math.random()` creates a random value from `0` to `1` (not including `1`).
+내장 함수 `Math.random()`은 `0`부터 `1`까지의(`1`은 포함되지 않음) 랜덤한 값을 생성합니다.
 
-Write the function `random(min, max)` to generate a random floating-point number from `min` to `max` (not including `max`).
+`random(min, max)`함수를 작성하여 `min`부터 `max`까지 임의의 부동 소수점 숫자를 생성합니다(`max`는 포함되지 않음).
 
-Examples of its work:
+예시를 살펴봅시다.
 
 ```js
 alert( random(1, 5) ); // 1.2345623452
diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md
index dfaf6d483f..3b04f080a0 100644
--- a/1-js/05-data-types/02-number/article.md
+++ b/1-js/05-data-types/02-number/article.md
@@ -29,8 +29,8 @@ alert( 7.3e9 );  // 73억 (7,300,000,000)
 즉, `'e'`는 e 왼쪽의 수에 e 오른쪽에 있는 수만큼의 10의 거듭제곱을 곱하는 효과가 있습니다.
 
 ```js
-1e3 = 1 * 1000
-1.23e6 = 1.23 * 1000000
+1e3 === 1 * 1000
+1.23e6 === 1.23 * 1000000
 ```
 
 이제 아주 작은 숫자인 1마이크로초(백만 분의 1초)를 표현해보겠습니다.
@@ -51,10 +51,10 @@ let ms = 1e-6; // 1에서 왼쪽으로 6번 소수점 이동
 
 ```js
 // 10을 세 번 거듭제곱한 수로 나눔
-1e-3 = 1 / 1000 (=0.001)
+1e-3 === 1 / 1000 // 0.001
 
 // 10을 여섯 번 거듭제곱한 수로 나눔
-1.23e-6 = 1.23 / 1000000 (=0.00000123)
+1.23e-6 === 1.23 / 1000000 // 0.00000123
 ```
 
 ### 16진수, 2진수, 8진수
diff --git a/1-js/05-data-types/10-destructuring-assignment/article.md b/1-js/05-data-types/10-destructuring-assignment/article.md
index e8076ec788..42842f08a1 100644
--- a/1-js/05-data-types/10-destructuring-assignment/article.md
+++ b/1-js/05-data-types/10-destructuring-assignment/article.md
@@ -7,6 +7,7 @@
 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 합니다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 하죠.
 
 이럴 때 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법인 *구조 분해 할당(destructuring assignment)* 을 사용할 수 있습니다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘합니다.
+*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient.
 
 ## 배열 분해하기
 
@@ -69,7 +70,6 @@ alert( title ); // Consul
 let [a, b, c] = "abc"; // ["a", "b", "c"]
 let [one, two, three] = new Set([1, 2, 3]);
 ```
-
 ````
 
 
diff --git a/1-js/05-data-types/12-json/article.md b/1-js/05-data-types/12-json/article.md
index 129de10388..35a0c0ee94 100644
--- a/1-js/05-data-types/12-json/article.md
+++ b/1-js/05-data-types/12-json/article.md
@@ -178,7 +178,7 @@ JSON.stringify(meetup); // Error: Converting circular structure to JSON
 `JSON.stringify`의 전체 문법은 아래와 같습니다.
 
 ```js
-let json = JSON.stringify(value[, replacer, space])
+let json = JSON.stringify(value, [replacer, space])
 ```
 
 value
diff --git a/1-js/06-advanced-functions/01-recursion/article.md b/1-js/06-advanced-functions/01-recursion/article.md
index b4961d0689..9cb2855435 100644
--- a/1-js/06-advanced-functions/01-recursion/article.md
+++ b/1-js/06-advanced-functions/01-recursion/article.md
@@ -234,7 +234,7 @@ function pow(x, n) {
 
 이젠 호출해야 할 중첩 호출이 없습니다. 따라서 함수는 종료되고 `2`가 반환됩니다.
 
-함수가 종료되었기 때문에 이에 상응하는 실행 컨텍스트는 쓸모가 없어졌습니다. 따라서 해당 실행 컨텍스트는 메모리에서 삭제됩니다. 스택 맨 위엔 이전의 실행 컨텍스가 위치하게 됩니다.
+함수가 종료되었기 때문에 이에 상응하는 실행 컨텍스트는 쓸모가 없어졌습니다. 따라서 해당 실행 컨텍스트는 메모리에서 삭제됩니다. 스택 맨 위엔 이전의 실행 컨텍스트가 위치하게 됩니다.
 
 
 <ul class="function-execution-context-list">
diff --git a/1-js/06-advanced-functions/02-rest-parameters-spread/article.md b/1-js/06-advanced-functions/02-rest-parameters-spread/article.md
index da299578be..ce8317e02c 100644
--- a/1-js/06-advanced-functions/02-rest-parameters-spread/article.md
+++ b/1-js/06-advanced-functions/02-rest-parameters-spread/article.md
@@ -1,4 +1,4 @@
-# 나머지 매개변수와 스프레드 문법
+# 나머지 매개변수와 전개 구문
 
 상당수의 자바스크립트 내장 함수는 인수의 개수에 제약을 두지 않습니다.
 
@@ -148,7 +148,7 @@ alert( Math.max(arr) ); // NaN
 
 `Math.max (arr[0], arr[1], arr[2])` 처럼 배열 요소를 수동으로 나열하는 방법도 있긴 한데, 배열 길이를 알 수 없을 때는 이마저도 불가능합니다. 스크립트가 돌아갈 때 실제 넘어오는 배열의 길이는 아주 길 수도 있고, 아예 빈 배열일 수도 있기 때문입니다. 수동으로 이걸 다 처리하다 보면 코드가 지저분해지겠죠.
 
-*스프레드 문법(spread syntax, 전개 문법)* 은 이럴 때 사용하기 위해 만들어졌습니다. `...`를 사용하기 때문에 나머지 매개변수와 비슷해 보이지만, 스프레드 문법은 나머지 매개변수와 반대되는 역할을 합니다.
+*전개 구문(spread syntax, 스프레드 구문)* 은 이럴 때 사용하기 위해 만들어졌습니다. `...`를 사용하기 때문에 나머지 매개변수와 비슷해 보이지만, 전개 구문은 나머지 매개변수와 반대 역할을 합니다.
 
 함수를 호출할 때 `...arr`를 사용하면, 이터러블 객체 `arr`이 인수 목록으로 '확장'됩니다.
 
@@ -157,7 +157,7 @@ alert( Math.max(arr) ); // NaN
 ```js run
 let arr = [3, 5, 1];
 
-alert( Math.max(...arr) ); // 5 (스프레드 문법이 배열을 인수 목록으로 바꿔주었습니다.)
+alert( Math.max(...arr) ); // 5 (전개 구문이 배열을 인수 목록으로 바꿔주었습니다.)
 ```
 
 아래와 같이 이터러블 객체 여러 개를 전달하는 것도 가능합니다.
@@ -179,7 +179,7 @@ let arr2 = [8, 3, -8, 1];
 alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25
 ```
 
-스프레드 문법은 배열을 합칠 때도 활용할 수 있습니다.
+전개 구문은 배열을 합칠 때도 활용할 수 있습니다.
 
 ```js run
 let arr = [3, 5, 1];
@@ -192,7 +192,7 @@ let merged = [0, ...arr, 2, ...arr2];
 alert(merged); // 0,3,5,1,2,8,9,15 (0, arr, 2, arr2 순서로 합쳐집니다.)
 ```
 
-앞선 예시들에선 '배열'을 대상으로 스프레드 문법이 어떻게 동작하는지 살펴보았습니다. 그런데 배열이 아니더라도 이터러블 객체이면 스프레드 문법을 사용할 수 있습니다.
+앞선 예시들에선 '배열'을 대상으로 전개 구문이 어떻게 동작하는지 살펴보았습니다. 그런데 배열이 아니더라도 이터러블 객체이면 전개 구문을 사용할 수 있습니다.
 
 스프레드 문법을 사용해 문자열을 문자 배열로 변환 시켜 보겠습니다.
 
@@ -202,7 +202,7 @@ let str = "Hello";
 alert( [...str] ); // H,e,l,l,o
 ```
 
-스프레드 문법은 `for..of`와 같은 방식으로 내부에서 이터레이터(iterator, 반복자)를 사용해 요소를 수집합니다.
+전개 구문은 `for..of`와 같은 방식으로 내부에서 이터레이터(iterator, 반복자)를 사용해 요소를 수집합니다.
 
 문자열에 `for..of`를 사용하면 문자열을 구성하는 문자가 반환됩니다. `...str`도 `H,e,l,l,o`가 되는데, 이 문자 목록은 배열 초기자(array initializer) `[...str]`로 전달됩니다.
 
@@ -222,7 +222,7 @@ alert( Array.from(str) ); // H,e,l,l,o
 - `Array.from`은 유사 배열 객체와 이터러블 객체 둘 다에 사용할 수 있습니다.
 - 스프레드 문법은 이터러블 객체에만 사용할 수 있습니다.
 
-이런 이유때문에 무언가를 배열로 바꿀 때는 스프레드 문법보다 `Array.from`이 보편적으로 사용됩니다.
+이런 이유때문에 무언가를 배열로 바꿀 때는 전개 구문보다 `Array.from`이 보편적으로 사용됩니다.
 
 
 ## 배열과 객체의 복사본 만들기
@@ -267,14 +267,14 @@ alert(JSON.stringify(obj)); // {"a":1,"b":2,"c":3,"d":4}
 alert(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3}
 ```
 
-이렇게 스프레드 문법을 사용하면 `let objCopy = Object.assign({}, obj);`, `let arrCopy = Object.assign([], arr);`보다 더 짧은 코드로 배열이나 객체를 복사할 수 있어서 사람들은 이 방법을 선호하는 편입니다.
+이렇게 전개 구문을 사용하면 `let objCopy = Object.assign({}, obj);`, `let arrCopy = Object.assign([], arr);`보다 더 짧은 코드로 배열이나 객체를 복사할 수 있어서 사람들은 이 방법을 선호합니다.
 
 
 ## 요약
 
 `"..."`은 나머지 매개변수나 스프레드 문법으로 사용할 수 있습니다.
 
-나머지 매개변수와 스프레드 문법은 아래의 방법으로 구분할 수 있습니다.
+나머지 매개변수와 전개 구문은 아래의 방법으로 구분할 수 있습니다.
 
 - `...`이 함수 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아주는 '나머지 매개변수'입니다.
 - `...`이 함수 호출 시 사용되거나 기타 경우엔 배열을 목록으로 확장해주는 '스프레드 문법'입니다.
@@ -282,7 +282,7 @@ alert(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3}
 사용 패턴:
 
 - 인수 개수에 제한이 없는 함수를 만들 때 나머지 매개변수를 사용합니다.
-- 다수의 인수를 받는 함수에 배열을 전달할 때 스프레드 문법을 사용합니다.
+- 다수의 인수를 받는 함수에 배열을 전달할 때 전개 구문을 사용합니다.
 
 둘을 함께 사용하면 매개변수 목록과 배열 간 전환을 쉽게 할 수 있습니다.
 
diff --git a/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/solution.md b/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/solution.md
index 7cbd85ab75..ce33d34c0f 100644
--- a/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/solution.md
+++ b/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/solution.md
@@ -1,5 +1,5 @@
-The answer is: **Pete**.
+정답은 **지민**입니다.
 
-A function gets outer variables as they are now, it uses the most recent values.
+함수는 외부 변수의 현재 값 즉, 가장 최신의 값을 사용합니다.
 
-Old variable values are not saved anywhere. When a function wants a variable, it takes the current value from its own Lexical Environment or the outer one.
+이전 값은 어디에도 저장되지 않습니다. 함수에서 변숫값을 사용할 땐 해당 함수의 렉시컬 환경 또는 외부 렉시컬 환경에서 해당 변숫값을 찾습니다.
diff --git a/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/task.md b/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/task.md
index 819189773c..d5e4cee171 100644
--- a/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/task.md
+++ b/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/task.md
@@ -2,22 +2,22 @@ importance: 5
 
 ---
 
-# Does a function pickup latest changes?
+# 함수가 최신 변경 사항을 반영할까요?
 
-The function sayHi uses an external variable name. When the function runs, which value is it going to use?
+함수 `sayHi`는 외부 변수 `name`을 사용하고 있는데, 함수가 실행될 때 두 외부 변수 `name` 중 어떤 값이 사용될까요?
 
 ```js
-let name = "John";
+let name = "보라";
 
 function sayHi() {
-  alert("Hi, " + name);
+  alert(name + "님, 안녕하세요.");
 }
 
-name = "Pete";
+name = "지민";
 
-sayHi(); // what will it show: "John" or "Pete"?
+sayHi(); // "보라" 혹은 "지민" 중 무엇이 출력될까요?
 ```
 
-Such situations are common both in browser and server-side development. A function may be scheduled to execute later than it is created, for instance after a user action or a network request.
+이런 상황은 클라이언트, 서버 개발 모두에서 흔하게 발생합니다. 함수는 이미 생성되어 있는데, 사용자의 특정 작업 이후나 네트워크 요청 이후같이 특정 조건을 만족한 후에 함수 호출을 하게 되는 경우는 종종 발생합니다.
 
-So, the question is: does it pick up the latest changes?
+자, 그럼 다시 질문으로 돌아가 봅시다. 이 함수는 `name` 변경 사항을 반영할까요?
diff --git a/1-js/06-advanced-functions/03-closure/2-closure-variable-access/solution.md b/1-js/06-advanced-functions/03-closure/2-closure-variable-access/solution.md
index 0a522132fe..0ad5203e2c 100644
--- a/1-js/06-advanced-functions/03-closure/2-closure-variable-access/solution.md
+++ b/1-js/06-advanced-functions/03-closure/2-closure-variable-access/solution.md
@@ -1,9 +1,9 @@
-The answer is: **Pete**.
+정답은 **Pete**입니다.
 
-The `work()` function in the code below gets `name` from the place of its origin through the outer lexical environment reference:
+`work()` 함수는 만들어진 곳을 기준으로 외부 렉시컬 변수 참조를 통해 `name`을 가져옵니다.
 
 ![](lexenv-nested-work.svg)
 
-So, the result is `"Pete"` here.
+그래서 결과는 `"Pete"`입니다.
 
-But if there were no `let name` in `makeWorker()`, then the search would go outside and take the global variable as we can see from the chain above. In that case the result would be `"John"`.
+만약 `makeWorker()` 함수 내부에 `let name`가 없었다면 바로 전역 스코프에 해당하는 외부에서 변수를 검색해서 `"John"`이 출력되었을 겁니다.
diff --git a/1-js/06-advanced-functions/03-closure/2-closure-variable-access/task.md b/1-js/06-advanced-functions/03-closure/2-closure-variable-access/task.md
index d12a385c81..33d962047f 100644
--- a/1-js/06-advanced-functions/03-closure/2-closure-variable-access/task.md
+++ b/1-js/06-advanced-functions/03-closure/2-closure-variable-access/task.md
@@ -2,28 +2,28 @@ importance: 5
 
 ---
 
-# Which variables are available?
+# 어떤 변수가 사용될까요?
 
-The function `makeWorker` below makes another function and returns it. That new function can be called from somewhere else.
+아래 `makeWorker` 함수는 내부에서 다른 함수를 만들고 해당 함수를 반환합니다. 반환된 새 함수는 다른 어딘가에서 호출할 수 있습니다.
 
-Will it have access to the outer variables from its creation place, or the invocation place, or both?
+새롭게 반환된 함수는 생성된 곳을 기억하고 그곳의 외부 변수에 접근할까요, 아니면 호출된 위치를 기준으로 외부 변수에 접근할까요? 아니면 둘 다일까요?
 
 ```js
 function makeWorker() {
   let name = "Pete";
 
-  return function() {
+  return function () {
     alert(name);
   };
 }
 
 let name = "John";
 
-// create a function
+// 함수를 만듭니다.
 let work = makeWorker();
 
-// call it
-work(); // what will it show?
+// 함수를 호출합니다.
+work(); // 무엇이 나올까요?
 ```
 
-Which value it will show? "Pete" or "John"?
+"Pete", "John" 중 어떤 어떤 값이 출력될까요?
diff --git a/1-js/06-advanced-functions/03-closure/7-let-scope/solution.md b/1-js/06-advanced-functions/03-closure/7-let-scope/solution.md
index 346e4060a3..7ff607f201 100644
--- a/1-js/06-advanced-functions/03-closure/7-let-scope/solution.md
+++ b/1-js/06-advanced-functions/03-closure/7-let-scope/solution.md
@@ -1,6 +1,6 @@
-The result is: **error**.
+에러가 발생합니다.
 
-Try running it:
+실제 코드를 실행해 봅시다.
 
 ```js run
 let x = 1;
@@ -15,20 +15,20 @@ function func() {
 func();
 ```
 
-In this example we can observe the peculiar difference between a "non-existing" and "uninitialized" variable.
+이 문제는 '존재하지 않는' 변수와 '초기화되지 않은' 변수의 미묘한 차이를 알아보기 위해 만들어졌습니다.
 
-As you may have read in the article [](info:closure), a variable starts in the "uninitialized" state from the moment when the execution enters a code block (or a function). And it stays uninitalized until the corresponding `let` statement.
+[](info:closure)에서 읽은 것처럼 코드 블록(또는 함수) 실행에 들어가는 순간에 그 안의 변수는 '초기화되지 않은' 상태가 됩니다. 그리고 `let`을 만날 때까지 해당 상태가 유지됩니다.
 
-In other words, a variable technically exists, but can't be used before `let`.
+'초기화되지 않은' 상태의 변수는 기술적으론 존재하지만 `let` 문을 만나기 전엔 사용할 수 없습니다.
 
-The code above demonstrates it.
+문제의 코드는 이런 초기화되기 전의 변수에 접근할 때 무슨 일이 일어나는지를 잘 보여줍니다.
 
 ```js
 function func() {
 *!*
-  // the local variable x is known to the engine from the beginning of the function,
-  // but "unitialized" (unusable) until let ("dead zone")
-  // hence the error
+  // 엔진은 함수가 시작될 때 로컬 변수 x의 존재를 알고 있지만
+  // let 문이 실행될 때까지 x는 '초기화되지 않은' 상태(dead zone)이기 때문에
+  // 에러가 발생합니다.
 */!*
 
   console.log(x); // ReferenceError: Cannot access 'x' before initialization
@@ -37,4 +37,4 @@ function func() {
 }
 ```
 
-This zone of temporary unusability of a variable (from the beginning of the code block till `let`) is sometimes called the "dead zone".
+실제 초기화가 일어나기 전 변수를 일시적 사용하지 못하는 구간(코드 블록의 시작부터 `let`이 나올 때까지)을 '데드 존(dead zone)'이라 부릅니다.
diff --git a/1-js/06-advanced-functions/03-closure/7-let-scope/task.md b/1-js/06-advanced-functions/03-closure/7-let-scope/task.md
index fb7445e66a..98f3f43003 100644
--- a/1-js/06-advanced-functions/03-closure/7-let-scope/task.md
+++ b/1-js/06-advanced-functions/03-closure/7-let-scope/task.md
@@ -2,9 +2,9 @@ importance: 4
 
 ---
 
-# Is variable visible?
+# 변수가 보일까요?
 
-What will be the result of this code?
+다음 코드를 실행했을 때 어떤 값이 출력될까요?
 
 ```js
 let x = 1;
@@ -18,4 +18,4 @@ function func() {
 func();
 ```
 
-P.S. There's a pitfall in this task. The solution is not obvious.
+주의: 이 문제에는 함정이 있습니다. 뻔한 답을 떠올리지 마세요.
diff --git a/1-js/06-advanced-functions/03-closure/article.md b/1-js/06-advanced-functions/03-closure/article.md
index 803652fa94..225e510094 100644
--- a/1-js/06-advanced-functions/03-closure/article.md
+++ b/1-js/06-advanced-functions/03-closure/article.md
@@ -175,7 +175,7 @@ alert( counter() ); // 2
 
 이렇게 스크립트 전체와 관련된 렉시컬 환경은 전역 렉시컬 환경(global Lexical Environment)이라고 합니다.
 
-위 그림에서 네모 상자는 변수가 저장되는 환경 레코드를 나타내고 붉은 화살표는 외부 렉시컬 환경에 대한 참조를 나타냅니다. 전역 렉시컬 환경은 외부 참조를 갖지 않기 때문에 화살표가 `null`을 가리키는 걸 확인할 수 있습니다.
+위 그림에서 네모 상자는 변수가 저장되는 환경 레코드(1)를 나타내고 네모 상자 옆, 오른쪽을 향하는 화살표는 외부 렉시컬 환경에 대한 참조(2)를 나타냅니다. 전역 렉시컬 환경은 외부 참조를 갖지 않기 때문에 화살표가 `null`을 가리키는 걸 확인할 수 있습니다.
 
 코드가 실행되고 실행 흐름이 이어져 나가면서 렉시컬 환경은 변화합니다.
 
@@ -185,7 +185,7 @@ alert( counter() ); // 2
 
 우측의 네모 상자들은 코드가 한 줄, 한 줄 실행될 때마다 전역 렉시컬 환경이 어떻게 변화하는지 보여줍니다.
 
-1. 스크립트가 시작되면 스크립트 내에서 선언한 변수 전체가 렉시컬 환경에 올라갑니다(pre-populated).
+1. 스크립트가 시작되면(execution start) 스크립트 내에서 선언한 변수 전체가 렉시컬 환경에 올라갑니다(pre-populated).
     - 이때 변수의 상태는 특수 내부 상태(special internal state)인 'uninitialized'가 됩니다. 자바스크립트 엔진은 uninitialized 상태의 변수를 인지하긴 하지만, `let`을 만나기 전까진 이 변수를 참조할 수 없습니다.
 2. `let phrase`가 나타났네요. 아직 값을 할당하기 전이기 때문에 프로퍼티 값은 `undefined`입니다. `phrase`는 이 시점 이후부터 사용할 수 있습니다.
 3. `phrase`에 값이 할당되었습니다.
@@ -220,9 +220,9 @@ alert( counter() ); // 2
 
 ### 단계 3. 내부와 외부 렉시컬 환경
 
-함수를 호출해 실행하면 새로운 렉시컬 환경이 자동으로 만들어집니다. 이 렉시컬 환경엔 함수 호출 시 넘겨받은 매개변수와 함수의 지역 변수가 저장됩니다. 
+함수를 호출해 실행하면 새로운 렉시컬 환경이 자동으로 만들어집니다. 이 렉시컬 환경엔 함수 호출 시 넘겨받은 매개변수와 함수의 지역 변수가 저장됩니다.
 
-`say("John")`을 호출하면 아래와 같은 내부 변화가 일어납니다(현재 실행 흐름은 붉은색 화살표로 나타낸 줄에 멈춰있는 상황입니다).
+`say("John")`을 호출하면 아래와 같은 내부 변화가 일어납니다(현재 실행 흐름은 함수 내부, 화살표로 표시한 줄(alert 문)에 멈춰있는 상황입니다).
 
 <!--
     ```js
@@ -237,7 +237,7 @@ alert( counter() ); // 2
 
 ![](lexical-environment-simple.svg)
 
-함수가 호출 중인 동안엔 호출 중인 함수를 위한 내부 렉시컬 환경과 내부 렉시컬 환경이 가리키는 외부 렉시컬 환경을 갖게 됩니다.
+함수 호출 중엔 호출 중인 함수를 위한 내부 렉시컬 환경과 내부 렉시컬 환경이 가리키는 외부 렉시컬 환경, 총 2개의 렉시컬 환경을 갖게 됩니다.
 
 - 예시의 내부 렉시컬 환경은 현재 실행 중인 함수인 `say`에 상응합니다. 내부 렉시컬 환경엔 함수의 인자인 `name`으로부터 유래한 프로퍼티 하나만 있네요. `say("John")`을 호출했기 때문에, `name`의 값은 `"John"`이 됩니다.
 - 예시의 외부 렉시컬 환경은 전역 렉시컬 환경입니다. 전역 렉시컬 환경은 `phrase`와 함수 `say`를 프로퍼티로 갖습니다.
@@ -371,7 +371,7 @@ g = null; // 도달할 수 없는 상태가 되었으므로 메모리에서 삭
 
 그러나 실제로는 자바스크립트 엔진이 이를 지속해서 최적화합니다. 자바스크립트 엔진은 변수 사용을 분석하고 외부 변수가 사용되지 않는다고 판단되면 이를 메모리에서 제거합니다.
 
-**디버깅 시, 최적화 과정에서 제거된 변수를 사용할 수 없다는 점은 V8 엔진(Chrome, Opera에서 쓰임)의 주요 부작용입니다.**
+**디버깅 시, 최적화 과정에서 제거된 변수를 사용할 수 없다는 점은 V8 엔진(Chrome, Edge, Opera에서 쓰임)의 주요 부작용입니다.**
 
 Chrome 브라우저에서 개발자 도구를 열고 아래의 코드를 실행해봅시다.
 
@@ -413,6 +413,6 @@ let g = f();
 g();
 ```
 
-이런 V8만의 부작용을 미리 알아 놓는 것이 좋습니다. Chrome이나 Opera에서 디버깅하는 경우라면 언젠간 이 이슈를 만나게 될 테니까요.
+이런 V8만의 부작용을 미리 알아 놓는 것이 좋습니다. Chrome이나 Edge, Opera에서 디버깅하는 경우라면 언젠간 이 이슈를 만나게 될 테니까요.
 
 이 부작용은 버그라기보다는 V8만의 특별한 기능이라고 생각하시면 될 것 같습니다. 미래에 이 기능은 변경될 수 있습니다. 최적화 과정에서 외부 변수가 어떻게 처리되었는지 확인하고 싶다면 이 페이지로 돌아오셔서 예시를 실행해 보세요.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md
index fb0ae7dc19..78b9b05dff 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md
@@ -301,13 +301,13 @@ func.apply(context, args)
 따라서 아래 코드 두 줄은 거의 같은 역할을 합니다.
 
 ```js
-func.call(context, ...args); // 전개 문법을 사용해 인수가 담긴 배열을 전달하는 것과
+func.call(context, ...args); // 전개 구문을 사용해 인수가 담긴 배열을 전달하는 것과
 func.apply(context, args);   // call을 사용하는 것은 동일합니다.
 ```
 
 그런데 약간의 차이가 있긴 합니다.
 
-- 전개 문법 `...`은 *이터러블* `args`을 분해 해 `call`에 전달할 수 있도록 해줍니다.
+- 전개 구문 `...`은 *이터러블* `args`을 분해 해 `call`에 전달할 수 있도록 해줍니다.
 - `apply`는 오직 *유사 배열* 형태의 `args`만 받습니다.
 
 이 차이만 빼면 두 메서드는 완전히 동일하게 동작합니다. 인수가 이터러블 형태라면 `call`을, 유사 배열 형태라면 `apply`를 사용하면 됩니다.
diff --git a/1-js/06-advanced-functions/10-bind/article.md b/1-js/06-advanced-functions/10-bind/article.md
index 576194f684..2d87339856 100644
--- a/1-js/06-advanced-functions/10-bind/article.md
+++ b/1-js/06-advanced-functions/10-bind/article.md
@@ -311,7 +311,7 @@ user.sayNow("Hello");
 - `partial`을 호출할 때 받은 인수(`"10:00"`)는 `...argsBound`에 전달됩니다.
 - 래퍼에 전달된 인수(`"Hello"`)는 `...args`가 됩니다.
 
-전개 문법 덕분에 이 모든 과정이 쉬워졌습니다.
+전개 구문 덕분에 이 모든 과정이 쉬워졌습니다.
 
 lodash 라이브러리의 [_.partial](https://lodash.com/docs#partial)을 사용하면 컨텍스트 없는 부분 적용을 직접 구현하지 않아도 됩니다.
 
diff --git a/1-js/09-classes/04-private-protected-properties-methods/article.md b/1-js/09-classes/04-private-protected-properties-methods/article.md
index 49d1cd0a16..30265bbf51 100644
--- a/1-js/09-classes/04-private-protected-properties-methods/article.md
+++ b/1-js/09-classes/04-private-protected-properties-methods/article.md
@@ -3,7 +3,7 @@
 
 객체 지향 프로그래밍에서 가장 중요한 원리 중 하나는 '내부 인터페이스와 외부 인터페이스를 구분 짓는 것'입니다.
 
-단순히 'hello word'를 출력하는 것이 아닌 복잡한 애플리케이션을 구현하려면, 내부 인터페이스와 외부 인터페이스를 구분하는 방법을 '반드시' 알고 계셔야 합니다.
+단순히 'hello world'를 출력하는 것이 아닌 복잡한 애플리케이션을 구현하려면, 내부 인터페이스와 외부 인터페이스를 구분하는 방법을 '반드시' 알고 계셔야 합니다.
 
 잠시 개발을 벗어나 현실 세계로 눈을 돌려, 내부 인터페이스와 외부 인터페이스 구분이 무엇을 의미하는지 알아봅시다.
 
diff --git a/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.view/index.html b/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.view/index.html
index 7fbb4efcab..ded047297c 100644
--- a/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.view/index.html
+++ b/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.view/index.html
@@ -10,7 +10,7 @@
       text-align: center;
     }
     .circle {
-      transition-property: width, height, margin-left, margin-top;
+      transition-property: width, height;
       transition-duration: 2s;
       position: fixed;
       transform: translateX(-50%) translateY(-50%);
diff --git a/1-js/11-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html b/1-js/11-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html
index 3229daf89f..6052f009ee 100644
--- a/1-js/11-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html
+++ b/1-js/11-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html
@@ -10,7 +10,7 @@
       text-align: center;
     }
     .circle {
-      transition-property: width, height, margin-left, margin-top;
+      transition-property: width, height;
       transition-duration: 2s;
       position: fixed;
       transform: translateX(-50%) translateY(-50%);
diff --git a/1-js/11-async/02-promise-basics/article.md b/1-js/11-async/02-promise-basics/article.md
index a51dec0301..783473f2e4 100644
--- a/1-js/11-async/02-promise-basics/article.md
+++ b/1-js/11-async/02-promise-basics/article.md
@@ -60,7 +60,7 @@ let promise = new Promise(function(resolve, reject) {
 1. executor는 `new Promise`에 의해 자동으로 그리고 즉각적으로 호출됩니다.
 2. executor는 인자로 `resolve`와 `reject` 함수를 받습니다. 이 함수들은 자바스크립트 엔진이 미리 정의한 함수이므로 개발자가 따로 만들 필요가 없습니다. 다만, `resolve`나 `reject` 중 하나는 반드시 호출해야 합니다.
 
-    executor '처리'가 시작 된 지 1초 후, `resolve("done")`이 호출되고 결과가 만들어집니다. 이때 `promise` 객체의 상태는 다음과 같이 변합니다.
+    executor '처리'가 시작 된 지 1초 후, `resolve("완료")`이 호출되고 결과가 만들어집니다. 이때 `promise` 객체의 상태는 다음과 같이 변합니다.
 
     ![](promise-resolve-1.svg)
 
diff --git a/1-js/11-async/04-promise-error-handling/article.md b/1-js/11-async/04-promise-error-handling/article.md
index a1088bba2e..cc48896c52 100644
--- a/1-js/11-async/04-promise-error-handling/article.md
+++ b/1-js/11-async/04-promise-error-handling/article.md
@@ -13,7 +13,7 @@ fetch('https://no-such-server.blabla') // 거부
   .catch(err => alert(err)) // TypeError: failed to fetch (출력되는 내용은 다를 수 있음)
 ```
 
-예시에서 보듯 `.catch`는 첫번째 핸들러일 필요가 없고 하나 혹은 여러 개의 `.then` 뒤에 올 수 있습니다.
+예시에서 보듯 `.catch`는 첫 번째 핸들러일 필요가 없고 하나 혹은 여러 개의 `.then` 뒤에 올 수 있습니다.
 
 이번엔 사이트에는 아무런 문제가 없지만 응답으로 받은 JSON의 형식이 잘못된 경우를 살펴봅시다. 가장 쉬운 에러 처리 방법은 체인 끝에 `.catch`를 붙이는 것입니다.
 
diff --git a/1-js/12-generators-iterators/1-generators/article.md b/1-js/12-generators-iterators/1-generators/article.md
index aaeaeeb757..0eb6dbd283 100644
--- a/1-js/12-generators-iterators/1-generators/article.md
+++ b/1-js/12-generators-iterators/1-generators/article.md
@@ -140,7 +140,7 @@ for(let value of generator) {
 }
 ```
 
-제너레이터는 이터러블 객체이므로 제너레이터에도 전개 문법(`...`) 같은 관련 기능을 사용할 수 있습니다.
+제너레이터는 이터러블 객체이므로 제너레이터에도 전개 구문(`...`) 같은 관련 기능을 사용할 수 있습니다.
 
 ```js run
 function* generateSequence() {
@@ -154,7 +154,7 @@ let sequence = [0, ...generateSequence()];
 alert(sequence); // 0, 1, 2, 3
 ```
 
-위 예시에서 `...generateSequence()`는 반복 가능한 제너레이터 객체를 배열 요소로 바꿔줍니다. (전개 문법에 대한 자세한 설명은 [](info:rest-parameters-spread#spread-syntax)에서 볼 수 있습니다.)
+위 예시에서 `...generateSequence()`는 반복 가능한 제너레이터 객체를 배열 요소로 바꿔줍니다. (전개 구문에 대한 자세한 설명은 [](info:rest-parameters-spread#spread-syntax)에서 볼 수 있습니다.)
 
 ## 이터러블 대신 제너레이터 사용하기
 
diff --git a/1-js/12-generators-iterators/2-async-iterators-generators/article.md b/1-js/12-generators-iterators/2-async-iterators-generators/article.md
index 3f9e0427cb..ef917fa374 100644
--- a/1-js/12-generators-iterators/2-async-iterators-generators/article.md
+++ b/1-js/12-generators-iterators/2-async-iterators-generators/article.md
@@ -121,15 +121,15 @@ let range = {
 | 반복 작업을 위해 사용하는 반복문                          | `for..of`         | `for await..of` |
 
 
-````warn header="전개 문법 `...`은 비동기적으로 동작하지 않습니다."
+````warn header="전개 구문 `...`은 비동기적으로 동작하지 않습니다."
 일반적인 동기 이터레이터가 필요한 기능은 비동기 이터레이터와 함께 사용할 수 없습니다.
 
-전개 문법은 일반 이터레이터가 필요로 하므로 아래와 같은 코드는 동작하지 않습니다.
+전개 구문은 일반 이터레이터가 필요로 하므로 아래와 같은 코드는 동작하지 않습니다.
 ```js
 alert( [...range] ); // Symbol.iterator가 없기 때문에 에러 발생
 ```
 
-전개 문법은 `await`가 없는 `for..of`와 마찬가지로, `Symbol.asyncIterator`가 아닌 `Symbol.iterator`를 찾기 때문에 에러가 발생하는 것은 당연합니다.
+전개 구문은 `await`가 없는 `for..of`와 마찬가지로, `Symbol.asyncIterator`가 아닌 `Symbol.iterator`를 찾기 때문에 에러가 발생하는 것은 당연합니다.
 ````
 
 ## async 제너레이터
diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md
index 31cdf58f7e..7c765f5d18 100644
--- a/1-js/13-modules/02-import-export/article.md
+++ b/1-js/13-modules/02-import-export/article.md
@@ -343,7 +343,7 @@ auth/
 import {login, logout} from 'auth/index.js'
 ```
 
-이때 우리가 만든 패키지를 사용하는 외부 개발자가 패키지 안의 파일들을 뒤져 내부 구조를 건드리게 하면 안 됩니다. 그러려면 공개할 것만 `auth/index.js`에 넣어 내보내기 하고 나머는 숨기는 게 좋겠죠. 
+이때 우리가 만든 패키지를 사용하는 외부 개발자가 패키지 안의 파일들을 뒤져 내부 구조를 건드리게 하면 안 됩니다. 그러려면 공개할 것만 `auth/index.js`에 넣어 내보내기 하고 나머지는 숨기는 게 좋겠죠. 
 
 이때 내보낼 기능을 패키지 전반에 분산하여 구현한 후, `auth/index.js`에서 이 기능들을 가져오고 이를 다시 내보내면 원하는 바를 어느 정도 달성할 수 있습니다.
 
diff --git a/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html b/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html
index d9b3282c96..18197f3081 100644
--- a/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html
+++ b/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html
@@ -7,4 +7,4 @@
     say.default(); // export default한 모듈을 불러왔습니다!
   }
 </script>
-<button onclick="load()">클릭해주세요,</button>
+<button onclick="load()">클릭해주세요</button>
diff --git a/1-js/99-js-misc/01-proxy/article.md b/1-js/99-js-misc/01-proxy/article.md
index 4c8d328819..57ec4e58c1 100644
--- a/1-js/99-js-misc/01-proxy/article.md
+++ b/1-js/99-js-misc/01-proxy/article.md
@@ -994,7 +994,7 @@ We use `WeakMap` instead of `Map` here because it won't block garbage collection
 ## References
 
 - Specification: [Proxy](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots).
-- MDN: [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).
+- MDN: [Proxy](mdn:/JavaScript/Reference/Global_Objects/Proxy).
 
 ## Summary
 
@@ -1016,13 +1016,13 @@ We can trap:
 - Reading (`get`), writing (`set`), deleting (`deleteProperty`) a property (even a non-existing one).
 - Calling a function (`apply` trap).
 - The `new` operator (`construct` trap).
-- Many other operations (the full list is at the beginning of the article and in the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)).
+- Many other operations (the full list is at the beginning of the article and in the [docs](mdn:/JavaScript/Reference/Global_Objects/Proxy)).
 
 That allows us to create "virtual" properties and methods, implement default values, observable objects, function decorators and so much more.
 
 We can also wrap an object multiple times in different proxies, decorating it with various aspects of functionality.
 
-The [Reflect](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect) API is designed to complement [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). For any `Proxy` trap, there's a `Reflect` call with same arguments. We should use those to forward calls to target objects.
+The [Reflect](mdn:/JavaScript/Reference/Global_Objects/Reflect) API is designed to complement [Proxy](mdn:/JavaScript/Reference/Global_Objects/Proxy). For any `Proxy` trap, there's a `Reflect` call with same arguments. We should use those to forward calls to target objects.
 
 Proxies have some limitations:
 
diff --git a/1-js/99-js-misc/05-bigint/article.md b/1-js/99-js-misc/05-bigint/article.md
index 7f59ecb55e..ff99ded971 100644
--- a/1-js/99-js-misc/05-bigint/article.md
+++ b/1-js/99-js-misc/05-bigint/article.md
@@ -126,5 +126,5 @@ We can use such JSBI code "as is" for engines that don't support bigints and for
 
 ## 참고 자료
 
-- [MDN docs on BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt).
+- [MDN docs on BigInt](mdn:/JavaScript/Reference/Global_Objects/BigInt).
 - [Specification](https://tc39.es/ecma262/#sec-bigint-objects).
diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md
index 0a493ffdc7..47a059cff0 100644
--- a/2-ui/1-document/07-modifying-document/article.md
+++ b/2-ui/1-document/07-modifying-document/article.md
@@ -387,7 +387,7 @@ function getListContent() {
 }
 
 *!*
-ul.append(...getListContent()); // append 메서드와 ...(전개 문법)은 궁합이 잘 맞습니다.
+ul.append(...getListContent()); // append 메서드와 ...(전개 구문)은 궁합이 잘 맞습니다.
 */!*
 </script>
 ```
diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md
index 1bf3e861e3..58f633c5e3 100644
--- a/2-ui/1-document/09-size-and-scroll/article.md
+++ b/2-ui/1-document/09-size-and-scroll/article.md
@@ -17,8 +17,8 @@
     width: 300px;
     height: 200px;
     border: 25px solid #E8C48F;
-    padding: 20px;              
-    overflow: auto;             
+    padding: 20px;
+    overflow: auto;
   }
 </style>
 ```
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
index 2c60733165..baf8676644 100644
--- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
@@ -10,7 +10,7 @@
   <div id="carousel" class="carousel">
     <button class="arrow prev">⇦</button>
     <div class="gallery">
-      <ul class="images">
+      <ul>
         <li><img src="https://en.js.cx/carousel/1.png"></li>
         <li><img src="https://en.js.cx/carousel/2.png"></li>
         <li><img src="https://en.js.cx/carousel/3.png"></li>
diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md
index f8a18691af..b223591eb8 100644
--- a/2-ui/2-events/03-event-delegation/article.md
+++ b/2-ui/2-events/03-event-delegation/article.md
@@ -85,7 +85,7 @@ function highlight(td) {
 
 따라서 `table.onclick` 핸들러에서 `event.target`을 이용해 클릭 이벤트가 `<td>`안쪽에서 일어났는지 아닌지를 알아내야 합니다.
 
-이런 단점을 반영하여 기능을 향상한 코드는 아래와 같습니다.
+개선된 코드는 아래와 같습니다.
 
 ```js
 table.onclick = function(event) {
@@ -238,7 +238,7 @@ table.onclick = function(event) {
 
 자바스크립트를 사용하지 않고도 요소에 토글 기능을 추가할 수 있다는 점에 주목합시다. 태그에 `data-toggle-id` 속성만 추가하면 요소를 토글할 수 있습니다.
 
-행동 패턴을 응용하면 토글 기능이 필요한 요소 전체에 자바스크립트로 해 해당 기능을 구현해 주지 않아도 되기 때문에 매우 편리합니다. '행동'을 선언해 주기만 하면 되기 때문입니다. 문서 레벨에 적절한 핸들러를 구현해주기만 하면 페이지 내 모든 요소에 행동을 쉽게 적용할 수 있습니다.
+행동 패턴을 응용하면 토글 기능이 필요한 요소 전체에 자바스크립트로 해당 기능을 구현해 주지 않아도 되기 때문에 매우 편리합니다. '행동'을 선언해 주기만 하면 되기 때문입니다. 문서 레벨에 적절한 핸들러를 구현해주기만 하면 페이지 내 모든 요소에 행동을 쉽게 적용할 수 있습니다.
 
 한 요소에 여러 개의 행동을 조합해 적용하는 것도 가능합니다.
 
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
index 4e6e2a3e95..7503ca9c2f 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
@@ -88,7 +88,7 @@ class HoverIntent {
     if (speed < this.sensitivity) {
       clearInterval(this.checkSpeedInterval);
       this.isHover = true;
-      this.over.call(this.elem, event);
+      this.over.call(this.elem);
     } else {
       // speed fast, remember new coordinates as the previous ones
       this.prevX = this.lastX;
diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 3cf6f53977..33f440a520 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -1,82 +1,82 @@
 
-# Mutation observer
+# 뮤테이션 옵저버
 
-`MutationObserver` is a built-in object that observes a DOM element and fires a callback when it detects a change.
+`MutationObserver`는 DOM 요소를 관찰하다가 변경이 감지되면 콜백을 실행하는 내장 객체입니다.
 
-We'll first take a look at the syntax, and then explore a real-world use case, to see where such thing may be useful.
+먼저 문법을 알아본 다음 실제 사례를 보면서 뮤테이션 옵저버가 어디에 유용한지 살펴보겠습니다.
 
-## Syntax
+## 문법
 
-`MutationObserver` is easy to use.
+`MutationObserver` 사용법은 간단합니다.
 
-First, we create an observer with a callback-function:
+먼저 콜백 함수를 넘겨 옵저버를 만듭니다.
 
 ```js
 let observer = new MutationObserver(callback);
 ```
 
-And then attach it to a DOM node:
+그리고 만든 옵저버를 DOM 노드에 붙입니다.
 
 ```js
 observer.observe(node, config);
 ```
 
-`config` is an object with boolean options "what kind of changes to react on":
-- `childList` -- changes in the direct children of `node`,
-- `subtree` -- in all descendants of `node`,
-- `attributes` -- attributes of `node`,
-- `attributeFilter` -- an array of attribute names, to observe only selected ones.
-- `characterData` -- whether to observe `node.data` (text content),
+`config`는 '어떤 종류의 변경에 반응할지'를 나타내는 불린값 옵션이 담긴 객체입니다.
+- `childList` -- `node`의 직계 자식에서 일어나는 변경
+- `subtree` -- `node`의 모든 자손에서 일어나는 변경
+- `attributes` -- `node`의 속성 변경
+- `attributeFilter` -- 선택한 속성만 관찰하도록 속성 이름을 담은 배열
+- `characterData` -- `node.data`(텍스트 콘텐츠)를 관찰할지 여부
 
-Few other options:
-- `attributeOldValue` -- if `true`, pass both the old and the new value of attribute to callback (see below), otherwise only the new one (needs `attributes` option),
-- `characterDataOldValue` -- if `true`, pass both the old and the new value of `node.data` to callback (see below), otherwise only the new one (needs `characterData` option).
+이 외에 다음 옵션도 있습니다.
+- `attributeOldValue` -- `true`이면 속성의 이전 값과 새 값을 모두 콜백에 전달하고(아래 참고) 그렇지 않으면 새 값만 전달함(`attributes` 옵션 필요)
+- `characterDataOldValue` -- `true`이면 `node.data`의 이전 값과 새 값을 모두 콜백에 전달하고(아래 참고) 그렇지 않으면 새 값만 전달함(`characterData` 옵션 필요)
 
-Then after any changes, the `callback` is executed: changes are passed in the first argument as a list of [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) objects, and the observer itself as the second argument.
+옵저버를 붙인 DOM 노드에 실제 변경이 생길 때마다 `callback`이 실행됩니다. 이때 콜백 함수의 첫 번째 인수로 [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) 객체 목록이, 두 번째 인수로 옵저버 자신이 전달됩니다.
 
-[MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) objects have properties:
+[MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) 객체에는 다음과 같은 프로퍼티가 있습니다.
 
-- `type` -- mutation type, one of
-    - `"attributes"`: attribute modified
-    - `"characterData"`: data modified, used for text nodes,
-    - `"childList"`: child elements added/removed,
-- `target` -- where the change occurred: an element for `"attributes"`, or text node for `"characterData"`, or an element for a `"childList"` mutation,
-- `addedNodes/removedNodes`  -- nodes that were added/removed,
-- `previousSibling/nextSibling` -- the previous and next sibling to added/removed nodes,
-- `attributeName/attributeNamespace` -- the name/namespace (for XML) of the changed attribute,
-- `oldValue` -- the previous value, only for attribute or text changes, if the corresponding option is set `attributeOldValue`/`characterDataOldValue`.
+- `type` -- 뮤테이션 타입으로 다음 중 하나
+    - `"attributes"`: 속성이 수정됨
+    - `"characterData"`: 데이터가 수정됨. 텍스트 노드에 사용됨
+    - `"childList"`: 자식 요소가 추가되거나 삭제됨
+- `target` -- 변경이 일어난 곳. `"attributes"` 뮤테이션이면 요소, `"characterData"` 뮤테이션이면 텍스트 노드, `"childList"` 뮤테이션이면 요소
+- `addedNodes/removedNodes`  -- 추가되거나 삭제된 노드
+- `previousSibling/nextSibling` -- 추가되거나 삭제된 노드의 이전·다음 형제 노드
+- `attributeName/attributeNamespace` -- 변경된 속성의 이름과 (XML의) 네임스페이스
+- `oldValue` -- 이전 값. 속성이나 텍스트가 변경되었고 해당 옵션 `attributeOldValue`/`characterDataOldValue`가 설정된 경우에만 전달됨
 
-For example, here's a `<div>` with a `contentEditable` attribute. That attribute allows us to focus on it and edit.
+예시를 살펴봅시다. 아래 `<div>`에는 `contentEditable` 속성이 있어서 포커스를 준 뒤 내용을 수정할 수 있습니다.
 
 ```html run
-<div contentEditable id="elem">Click and <b>edit</b>, please</div>
+<div contentEditable id="elem">여기를 클릭해 <b>수정</b>해 보세요</div>
 
 <script>
 let observer = new MutationObserver(mutationRecords => {
-  console.log(mutationRecords); // console.log(the changes)
+  console.log(mutationRecords); // 변경 사항이 출력됩니다.
 });
 
-// observe everything except attributes
+// 속성을 제외한 모든 변경을 관찰합니다.
 observer.observe(elem, {
-  childList: true, // observe direct children
-  subtree: true, // and lower descendants too
-  characterDataOldValue: true // pass old data to callback
+  childList: true, // 직계 자식을 관찰함
+  subtree: true, // 하위 자손도 관찰함
+  characterDataOldValue: true // 이전 데이터도 콜백에 전달함
 });
 </script>
 ```
 
-If we run this code in the browser, then focus on the given `<div>` and change the text inside `<b>edit</b>`, `console.log` will show one mutation:
+우측 상단 재생 버튼을 눌러 코드를 브라우저에서 실행하고 `<div>`에 포커스를 준 다음 `<b>수정</b>` 안의 텍스트를 바꾸면 `console.log` 때문에 개발자 도구에 뮤테이션 하나가 출력됩니다.
 
 ```js
 mutationRecords = [{
   type: "characterData",
-  oldValue: "edit",
+  oldValue: "수정",
   target: <text node>,
-  // other properties empty
+  // 다른 프로퍼티는 비어 있음
 }];
 ```
 
-If we make more complex editing operations, e.g. remove the `<b>edit</b>`, the mutation event may contain multiple mutation records:
+`<b>수정</b>`을 통째로 지우는 등 더 복잡한 방식으로 수정을 하면 뮤테이션 이벤트에 뮤테이션 레코드가 여러 개 담길 수 있습니다.
 
 ```js
 mutationRecords = [{
@@ -84,116 +84,116 @@ mutationRecords = [{
   target: <div#elem>,
   removedNodes: [<b>],
   nextSibling: <text node>,
-  previousSibling: <text node>
-  // other properties empty
+  previousSibling: <text node>,
+  // 다른 프로퍼티는 비어 있음
 }, {
-  type: "characterData"
-  target: <text node>
-  // ...mutation details depend on how the browser handles such removal
-  // it may coalesce two adjacent text nodes "edit " and ", please" into one node
-  // or it may leave them separate text nodes
+  type: "characterData",
+  target: <text node>,
+  // ...뮤테이션의 세부 내용은 브라우저가 이런 삭제를 어떻게 처리하는지에 따라 다릅니다.
+  // 인접한 두 텍스트 노드 '여기를 클릭해 '와 '해 보세요'를 하나로 합칠 수도 있고
+  // 별개의 텍스트 노드로 남겨둘 수도 있습니다.
 }];
 ```
 
-So, `MutationObserver` allows to react on any changes within DOM subtree.
+이처럼 `MutationObserver`를 사용하면 DOM 서브트리에서 일어나는 모든 변경에 반응할 수 있습니다.
 
-## Usage for integration
+## 서드파티 스크립트 통합에 활용하기
 
-When such thing may be useful?
+뮤테이션 옵저버는 어떤 경우에 유용할까요?
 
-Imagine the situation when you need to add a third-party script that contains useful functionality, but also does something unwanted, e.g. shows ads `<div class="ads">Unwanted ads</div>`.
+유용한 기능이 들어 있지만 원치 않는 동작도 하는 서드파티 스크립트를 추가해야 하는 상황을 상상해 봅시다. 이 스크립트는 `<div class="ads">원치 않는 광고</div>`같이 광고를 노출합니다.
 
-Naturally, the third-party script provides no mechanisms to remove it.
+당연하게도 서드파티 스크립트는 광고를 제거할 수단을 제공하지 않습니다.
 
-Using `MutationObserver`, we can detect when the unwanted element appears in our DOM and remove it.
+이럴 때 `MutationObserver`를 사용하면 원치 않는 요소가 DOM에 나타나는 순간을 감지해 제거할 수 있습니다.
 
-There are other situations when a third-party script adds something into our document, and we'd like to detect, when it happens, to adapt our page, dynamically resize something etc.
+이 외에도 서드파티 스크립트가 문서에 무언가를 추가하는 시점을 감지해서 페이지를 조정하거나 특정 영역의 크기를 동적으로 조절하고 싶은 경우도 있습니다.
 
-`MutationObserver` allows to implement this.
+이런 작업 역시 `MutationObserver`로 구현할 수 있습니다.
 
-## Usage for architecture
+## 아키텍처 관점에서 활용하기
 
-There are also situations when `MutationObserver` is good from architectural standpoint.
+아키텍처 관점에서 `MutationObserver`가 좋은 선택이 되는 경우도 있습니다.
 
-Let's say we're making a website about programming. Naturally, articles and other materials may contain source code snippets.
+프로그래밍을 다루는 웹사이트를 만들고 있다고 가정해 봅시다. 이런 사이트의 글이나 자료엔 소스 코드 예시가 들어가기 마련입니다.
 
-Such snippet in an HTML markup looks like this:
+코드 예시는 HTML 마크업에서 다음과 같은 모습입니다.
 
 ```html
 ...
 <pre class="language-javascript"><code>
-  // here's the code
+  // 여기에 코드가 들어갑니다.
   let hello = "world";
 </code></pre>
 ...
 ```
 
-For better readability and at the same time, to beautify it, we'll be using a JavaScript syntax highlighting library on our site, like [Prism.js](https://prismjs.com/). To get syntax highlighting for above snippet in Prism, `Prism.highlightElem(pre)` is called, which examines the contents of such `pre` elements and adds special tags and styles for colored syntax highlighting into those elements, similar to what you see in examples here, on this page.
+가독성을 높이는 동시에 보기 좋게 꾸미기 위해 [Prism.js](https://prismjs.com/) 같은 자바스크립트 구문 강조(syntax highlighting) 라이브러리를 사이트에 사용해 본다고 가정하겠습니다. Prism에서 위 예시에 구문 강조를 적용하려면 `Prism.highlightElement(pre)`를 호출합니다. 이 메서드는 `pre` 요소의 내용을 검사해서 색을 입히는 특별한 태그와 스타일을 해당 요소 안에 추가합니다. 지금 보고 있는 이 페이지의 예시 코드와 비슷한 결과물이 만들어지죠.
 
-When exactly should we run that highlighting method? Well, we can do it on `DOMContentLoaded` event, or put the script at the bottom of the page. The moment our DOM is ready, we can search for elements `pre[class*="language"]` and call `Prism.highlightElem` on them:
+그렇다면 구문 강조 메서드는 정확히 언제 실행해야 할까요? `DOMContentLoaded` 이벤트에서 실행할 수도 있고 스크립트를 페이지 맨 아래에 넣을 수도 있습니다. DOM이 준비되면 `pre[class*="language"]`에 해당하는 요소를 찾아 `Prism.highlightElement`를 호출하면 됩니다.
 
 ```js
-// highlight all code snippets on the page
-document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem);
+// 페이지에 있는 코드 예시를 전부 강조 표시합니다.
+document.querySelectorAll('pre[class*="language"]').forEach(elem => Prism.highlightElement(elem));
 ```
 
-Everything's simple so far, right? We find code snippets in HTML and highlight them.
+여기까진 문제 될 게 없습니다. HTML에서 코드 예시를 찾아 강조 표시하면 끝이죠.
 
-Now let's go on. Let's say we're going to dynamically fetch materials from a server. We'll study methods for that [later in the tutorial](info:fetch). For now it only matters that we fetch an HTML article from a webserver and display it on demand:
+이제 한 걸음 더 나아가 봅시다. 서버에서 자료를 동적으로 가져와야 한다고 해봅시다. 자료를 가져오는 메서드는 [튜토리얼 뒷부분](info:fetch)에서 다룰 예정이라 지금은 웹 서버에서 HTML로 된 글을 받아와 요청이 있을 때 화면에 표시한다는 점만 알면 됩니다.
 
 ```js
-let article = /* fetch new content from server */
+let article = /* 서버에서 새 콘텐츠를 가져옴 */
 articleElem.innerHTML = article;
 ```
 
-The new `article` HTML may contain code snippets. We need to call `Prism.highlightElem` on them, otherwise they won't get highlighted.
+새로 받아온 `article` HTML엔 코드 예시가 들어 있을 수 있습니다. `Prism.highlightElement`를 호출하지 않으면 이 코드는 강조 표시되지 않습니다.
 
-**Where and when to call `Prism.highlightElem` for a dynamically loaded article?**
+**그럼 동적으로 불러온 글엔 `Prism.highlightElement`를 어디서, 언제 호출해야 할까요?**
 
-We could append that call to the code that loads an article, like this:
+다음처럼 글을 불러오는 코드 뒤에 호출을 덧붙일 수 있을 겁니다.
 
 ```js
-let article = /* fetch new content from server */
+let article = /* 서버에서 새 콘텐츠를 가져옴 */
 articleElem.innerHTML = article;
 
 *!*
 let snippets = articleElem.querySelectorAll('pre[class*="language-"]');
-snippets.forEach(Prism.highlightElem);
+snippets.forEach(elem => Prism.highlightElement(elem));
 */!*
 ```
 
-...But, imagine if we have many places in the code where we load our content - articles, quizzes, forum posts, etc. Do we need to put the highlighting call everywhere, to highlight the code in content after loading? That's not very convenient.
+그런데 글, 퀴즈, 게시판 글처럼 콘텐츠를 불러오는 곳이 코드 곳곳에 많다고 상상해 봅시다. 불러온 콘텐츠 속 코드를 강조 표시하려고 위와 같은 코드를 모든 곳에 붙여야 할까요? 그다지 편리한 방법이 아닙니다.
 
-And what if the content is loaded by a third-party module? For example, we have a forum written by someone else, that loads content dynamically, and we'd like to add syntax highlighting to it. No one likes patching third-party scripts.
+콘텐츠를 서드파티 모듈이 불러온다면 어떨까요? 예를 들어 다른 사람이 만든 게시판이 콘텐츠를 동적으로 불러오는데 여기에 구문 강조를 적용하고 싶을 수 있습니다. 서드파티 스크립트에 패치를 덧대는 일은 누구도 반기지 않습니다.
 
-Luckily, there's another option.
+다행히 다른 방법이 있습니다.
 
-We can use `MutationObserver` to automatically detect when code snippets are inserted into the page and highlight them.
+`MutationObserver`를 사용하면 코드 예시가 페이지에 삽입되는 순간을 자동으로 감지해 강조 표시할 수 있습니다.
 
-So we'll handle the highlighting functionality in one place, relieving us from the need to integrate it.
+이렇게 하면 강조 기능을 한곳에서 처리할 수 있어 통합 작업을 일일이 할 필요가 없어집니다.
 
-### Dynamic highlight demo
+### 동적 구문 강조 데모
 
-Here's the working example.
+동작하는 예시를 봅시다.
 
-If you run this code, it starts observing the element below and highlighting any code snippets that appear there:
+아래 코드를 실행하면 뮤테이션 옵저버를 등록한 노드의 하위 요소를 관찰하기 시작해서 그곳에 나타나는 코드 예시를 강조해 줍니다.
 
 ```js run
 let observer = new MutationObserver(mutations => {
 
   for(let mutation of mutations) {
-    // examine new nodes, is there anything to highlight?
+    // 강조 표시할 새 노드가 있는지 검사합니다.
 
     for(let node of mutation.addedNodes) {
-      // we track only elements, skip other nodes (e.g. text nodes)
+      // 요소(노드)만 추적하고 다른 노드(예: 텍스트 노드)는 건너뜁니다.
       if (!(node instanceof HTMLElement)) continue;
 
-      // check the inserted element for being a code snippet
+      // 삽입된 요소가 코드 예시인지 확인합니다.
       if (node.matches('pre[class*="language-"]')) {
         Prism.highlightElement(node);
       }
 
-      // or maybe there's a code snippet somewhere in its subtree?
+      // 서브트리 어딘가에 코드 예시가 있을 수 있으니 확인합니다.
       for(let elem of node.querySelectorAll('pre[class*="language-"]')) {
         Prism.highlightElement(elem);
       }
@@ -207,67 +207,67 @@ let demoElem = document.getElementById('highlight-demo');
 observer.observe(demoElem, {childList: true, subtree: true});
 ```
 
-Here, below, there's an HTML-element and JavaScript that dynamically fills it using `innerHTML`.
+바로 아래에 HTML 요소가 하나 있고 `innerHTML`을 사용해 이 요소를 동적으로 채우는 자바스크립트가 있습니다.
 
-Please run the previous code (above, observes that element), and then the code below. You'll see how `MutationObserver` detects and highlights the snippet.
+먼저 위 코드(해당 요소를 관찰함)를 실행한 다음 아래쪽 코드를 실행해 보세요. `MutationObserver`가 코드만 찾아내 강조 표시하는 모습을 볼 수 있습니다.
 
-<p id="highlight-demo" style="border: 1px solid #ddd">A demo-element with <code>id="highlight-demo"</code>, run the code above to observe it.</p>
+<p id="highlight-demo" style="border: 1px solid #ddd"><code>id="highlight-demo"</code>가 붙은 데모 요소입니다. 위 코드를 실행해 이 요소를 관찰해 보세요.</p>
 
-The following code populates its `innerHTML`, that causes the `MutationObserver` to react and highlight its contents:
+아래 코드가 `innerHTML`을 채우면 `MutationObserver`가 반응해 내용을 강조 표시합니다.
 
 ```js run
 let demoElem = document.getElementById('highlight-demo');
 
-// dynamically insert content with code snippets
-demoElem.innerHTML = `A code snippet is below:
+// 코드 예시가 담긴 콘텐츠를 동적으로 삽입합니다.
+demoElem.innerHTML = `아래는 코드 예시입니다.
   <pre class="language-javascript"><code> let hello = "world!"; </code></pre>
-  <div>Another one:</div>
+  <div>예시가 하나 더 있습니다.</div>
   <div>
     <pre class="language-css"><code>.class { margin: 5px; } </code></pre>
   </div>
 `;
 ```
 
-Now we have `MutationObserver` that can track all highlighting in observed elements or the whole `document`. We can add/remove code snippets in HTML without thinking about it.
+이제 관찰 대상 요소나 `document` 전체에서 일어나는 강조 표시를 `MutationObserver`가 전부 추적할 수 있게 되었습니다. 별다른 신경을 쓰지 않아도 HTML에 코드 예시가 추가되거나 삭제되어도 알아서 강조 표시가 됩니다.
 
-## Additional methods
+## 기타 메서드
 
-There's a method to stop observing the node:
+노드 관찰을 중단하는 메서드도 존재합니다.
 
-- `observer.disconnect()` -- stops the observation.
+- `observer.disconnect()` -- 관찰을 중단함
 
-When we stop the observing, it might be possible that some changes were not yet processed by the observer. In such cases, we use
+관찰을 중단하는 시점에 옵저버가 아직 처리하지 않은 변경이 남아 있을 수 있습니다. 이럴 땐 다음 메서드를 사용합니다.
 
-- `observer.takeRecords()` -- gets a list of unprocessed mutation records - those that happened, but the callback has not handled them.
+- `observer.takeRecords()` -- 처리되지 않은 뮤테이션 레코드 목록을 가져옴. 변경은 일어났지만 콜백이 아직 처리하지 않은 레코드가 대상임
 
-These methods can be used together, like this:
+두 메서드는 다음처럼 함께 쓸 수 있습니다.
 
 ```js
-// get a list of unprocessed mutations
-// should be called before disconnecting,
-// if you care about possibly unhandled recent mutations
+// 처리되지 않은 뮤테이션 목록을 가져옵니다.
+// 최근 일어난 변경 중 미처리분까지 챙기려면
+// 관찰을 중단하기 전에 takeRecords를 호출해야 합니다.
 let mutationRecords = observer.takeRecords();
 
-// stop tracking changes
+// 변경 추적을 중단합니다.
 observer.disconnect();
 ...
 ```
 
 
-```smart header="Records returned by `observer.takeRecords()` are removed from the processing queue"
-The callback won't be called for records, returned by `observer.takeRecords()`.
+```smart header="`observer.takeRecords()`가 반환한 레코드는 처리 대기열에서 제거됩니다"
+`observer.takeRecords()`가 반환한 레코드에 대해선 콜백이 호출되지 않습니다.
 ```
 
-```smart header="Garbage collection interaction"
-Observers use weak references to nodes internally. That is, if a node is removed from the DOM, and becomes unreachable, then it can be garbage collected.
+```smart header="가비지 컬렉션과의 상호작용"
+옵저버는 내부적으로 노드에 대해 약한 참조(weak reference)를 사용합니다. 따라서 노드가 DOM에서 제거되어 도달할 수 없게 되면 가비지 컬렉션의 대상이 됩니다.
 
-The mere fact that a DOM node is observed doesn't prevent the garbage collection.
+DOM 노드가 관찰되고 있다는 사실만으로는 가비지 컬렉션이 막히지 않습니다.
 ```
 
-## Summary  
+## 요약  
 
-`MutationObserver` can react to changes in DOM - attributes, text content and adding/removing elements.
+`MutationObserver`는 DOM에서 일어나는 변경(속성, 텍스트 콘텐츠, 요소 추가·삭제)에 반응할 수 있습니다.
 
-We can use it to track changes introduced by other parts of our code, as well as to integrate with third-party scripts.
+코드의 다른 부분에서 일어난 변경을 추적할 때는 물론 서드파티 스크립트와 통합할 때도 사용할 수 있습니다.
 
-`MutationObserver` can track any changes. The config "what to observe" options are used for optimizations, not to spend resources on unneeded callback invocations.
+`MutationObserver`는 어떤 변경이든 추적할 수 있습니다. '무엇을 관찰할지' 정하는 config 옵션은 최적화 용도로, 불필요한 콜백 호출에 자원을 낭비하지 않기 위해 사용합니다.
diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md
index b908eb6b4a..9b6deb0d33 100644
--- a/2-ui/99-ui-misc/02-selection-range/article.md
+++ b/2-ui/99-ui-misc/02-selection-range/article.md
@@ -259,7 +259,7 @@ Click buttons to run methods on the selection, "resetExample" to reset it.
 </script>
 ```
 
-There also exist methods to compare ranges, but these are rarely used. When you need them, please refer to the [spec](https://dom.spec.whatwg.org/#interface-range) or [MDN manual](https://developer.mozilla.org/en-US/docs/Web/API/Range).
+There also exist methods to compare ranges, but these are rarely used. When you need them, please refer to the [spec](https://dom.spec.whatwg.org/#interface-range) or [MDN manual](mdn:/api/Range).
 
 
 ## Selection
diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 7ccbe43aad..b106862152 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -59,7 +59,7 @@ CPU 소모가 아주 많은 태스크 하나가 있다고 가정해 봅시다.
 
 실제 코드를 통해 어떻게 하면 태스크를 쪼갤 수 있는지 알아봅시다. 직접 강조기능을 구현하는 대신 `1`부터 `1000000000`까지의 숫자를 세주는 함수를 사용해 간결한 코드로 시연해 보겠습니다.
 
-먼저 리팩토링 전의 코드를 살펴봅시다. 아래 예시를 실행하면 엔진이 몇 초간 '멈춥니다'. 서버 사이드 환경에서 예시를 실행하면 멈춤 현상이 눈에 잘 띄는데, 지금은 브라우저상에서 예시를 실행하고 있기 때문에 실행 후 페이지 내에 있는 아무 버튼이나 클릭해 지연이 발생하는 것을 직접 확인해 보도록 합시다(마우스 오른쪽 버튼을 누르면 쉽게 이벤트 지연을 확인할 수 있습니다 - 옮긴이). 숫자 카운팅이 끝나고 얼럿 창이 뜨기 전까진 그 어떤 그 어떤 사용자 이벤트도 처리되지 않는 것을 확인할 수 있습니다.
+먼저 리팩토링 전의 코드를 살펴봅시다. 아래 예시를 실행하면 엔진이 몇 초간 '멈춥니다'. 서버 사이드 환경에서 예시를 실행하면 멈춤 현상이 눈에 잘 띄는데, 지금은 브라우저상에서 예시를 실행하고 있기 때문에 실행 후 페이지 내에 있는 아무 버튼이나 클릭해 지연이 발생하는 것을 직접 확인해 보도록 합시다(마우스 오른쪽 버튼을 누르면 쉽게 이벤트 지연을 확인할 수 있습니다 - 옮긴이). 숫자 카운팅이 끝나고 얼럿 창이 뜨기 전까진 그 어떤 사용자 이벤트도 처리되지 않는 것을 확인할 수 있습니다.
 
 ```js run
 let i = 0;
diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md
index 7540b03045..3abccac791 100644
--- a/3-frames-and-windows/01-popup-windows/article.md
+++ b/3-frames-and-windows/01-popup-windows/article.md
@@ -87,7 +87,7 @@ Settings for `params`:
 
 There is also a number of less supported browser-specific features, which are usually not used. Check <a href="https://developer.mozilla.org/en/DOM/window.open">window.open in MDN</a> for examples.
 
-## Example: a minimalistic window   
+## Example: a minimalistic window
 
 Let's open a window with minimal set of features, just to see which of them browser allows to disable:
 
@@ -120,7 +120,7 @@ Rules for omitted settings:
 
 ## Accessing popup from window
 
-The `open` call returns a reference to the new window. It can be used to manipulate it's properties, change location and even more.
+The `open` call returns a reference to the new window. It can be used to manipulate its properties, change location and even more.
 
 In this example, we generate popup content from JavaScript:
 
@@ -239,7 +239,7 @@ There's also `window.onscroll` event.
 
 Theoretically, there are `window.focus()` and `window.blur()` methods to focus/unfocus on a window. And there are also `focus/blur` events that allow to catch the moment when the visitor focuses on a window and switches elsewhere.
 
-Although, in practice they are severely limited, because in the past evil pages abused them. 
+Although, in practice they are severely limited, because in the past evil pages abused them.
 
 For instance, look at this code:
 
@@ -257,10 +257,10 @@ Still, there are some use cases when such calls do work and can be useful.
 
 For instance:
 
-- When we open a popup, it's might be a good idea to run a `newWindow.focus()` on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
+- When we open a popup, it might be a good idea to run `newWindow.focus()` on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
 - If we want to track when a visitor actually uses our web-app, we can track `window.onfocus/onblur`. That allows us to suspend/resume in-page activities, animations etc. But please note that the `blur` event means that the visitor switched out from the window, but they still may observe it. The window is in the background, but still may be visible.
 
-## Summary   
+## Summary
 
 Popup windows are used rarely, as there are alternatives: loading and displaying information in-page, or in iframe.
 
diff --git a/3-frames-and-windows/03-cross-window-communication/article.md b/3-frames-and-windows/03-cross-window-communication/article.md
index 53f5f55fc4..bac89621ee 100644
--- a/3-frames-and-windows/03-cross-window-communication/article.md
+++ b/3-frames-and-windows/03-cross-window-communication/article.md
@@ -268,7 +268,7 @@ Arguments:
 `targetOrigin`
 : Specifies the origin for the target window, so that only a window from the given origin will get the message.
 
-The `targetOrigin` is a safety measure. Remember, if the target window comes from another origin, we can't read it's `location` in the sender window. So we can't be sure which site is open in the intended window right now: the user could navigate away, and the sender window has no idea about it.
+The `targetOrigin` is a safety measure. Remember, if the target window comes from another origin, we can't read its `location` in the sender window. So we can't be sure which site is open in the intended window right now: the user could navigate away, and the sender window has no idea about it.
 
 Specifying `targetOrigin` ensures that the window only receives the data if it's still at the right site. Important when the data is sensitive.
 
diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md
index 6e6ea8022f..ea6e9c87ab 100644
--- a/4-binary/01-arraybuffer-binary-arrays/article.md
+++ b/4-binary/01-arraybuffer-binary-arrays/article.md
@@ -1,87 +1,87 @@
-# ArrayBuffer, binary arrays
+# ArrayBuffer와 이진 배열
 
-In web-development we meet binary data mostly while dealing with files (create, upload, download). Another typical use case is image processing.
+웹 개발에서 파일 생성, 업로드, 다운로드를 처리할 때 이진 데이터를 주로 사용합니다. 이미지 처리 또한 대표적인 이진 데이터 사용 사례 중 하나입니다.
 
-That's all possible in JavaScript, and binary operations are high-performant.
+자바스크립트에서는 이 모든 작업이 가능하며 이진 연산에서도 뛰어난 성능을 보여줍니다.
 
-Although, there's a bit of confusion, because there are many classes. To name a few:
-- `ArrayBuffer`, `Uint8Array`, `DataView`, `Blob`, `File`, etc.
+다만 아래와 같은 다양한 클래스로 인해 약간 혼란스러울 수 있습니다.
+- `ArrayBuffer`, `Uint8Array`, `DataView`, `Blob`, `File` 등
 
-Binary data in JavaScript is implemented in a non-standard way, compared to other languages. But when we sort things out, everything becomes fairly simple.
+자바스크립트에서 이진 데이터는 다른 프로그래밍 언어에 비해 표준적이지 않은 방식으로 구현되어 있습니다. 하지만 개념을 하나씩 정리하고 나면 꽤 단순하게 이해할 수 있습니다.
 
-**The basic binary object is `ArrayBuffer` -- a reference to a fixed-length contiguous memory area.**
+**가장 기본이 되는 이진 객체는 `ArrayBuffer`입니다. `ArrayBuffer`는 고정 길이의 연속된 메모리 영역을 참조합니다.**
 
-We create it like this:
+다음과 같이 `ArrayBuffer`를 생성할 수 있습니다.
 ```js run
-let buffer = new ArrayBuffer(16); // create a buffer of length 16
+let buffer = new ArrayBuffer(16); // 길이가 16바이트인 버퍼 생성
 alert(buffer.byteLength); // 16
 ```
 
-This allocates a contiguous memory area of 16 bytes and pre-fills it with zeroes.
+이 코드는 16바이트의 연속된 메모리 공간을 할당하고 0으로 미리 채웁니다.
 
-```warn header="`ArrayBuffer` is not an array of something"
-Let's eliminate a possible source of confusion. `ArrayBuffer` has nothing in common with `Array`:
-- It has a fixed length, we can't increase or decrease it.
-- It takes exactly that much space in the memory.
-- To access individual bytes, another "view" object is needed, not `buffer[index]`.
+```warn header="`ArrayBuffer`는 배열이 아닙니다."
+혼동할 수 있는 부분을 먼저 짚고 넘어갑시다. `ArrayBuffer`는 `Array`와 전혀 공통점이 없습니다.
+- `ArrayBuffer`는 길이가 고정되어 있어, 늘리거나 줄일 수 없습니다.
+- `ArrayBuffer`는 메모리에서 정확히 선언된 길이만큼만 차지합니다.
+- 개별 바이트에 접근하려면 `buffer[index]`가 아닌 별도의 '뷰(view)' 객체가 필요합니다.
 ```
 
-`ArrayBuffer` is a memory area. What's stored in it? It has no clue. Just a raw sequence of bytes.
+`ArrayBuffer`는 메모리 영역입니다. 이 영역 안에 어떤 것이 저장될까요? `ArrayBuffer`는 알지 못합니다. 그저 가공되지 않은 일련의 바이트일 뿐입니다.
 
-**To manipulate an `ArrayBuffer`, we need to use a "view" object.**
+**`ArrayBuffer`를 조작하기 위해 '뷰' 객체가 필요합니다.**
 
-A view object does not store anything on it's own. It's the "eyeglasses" that give an interpretation of the bytes stored in the `ArrayBuffer`.
+뷰 객체는 자체적으로 어떤 것도 저장하지 않으며 `ArrayBuffer`에 저장된 바이트를 해석하는 '안경' 역할을 수행합니다.
 
-For instance:
+예시:
 
-- **`Uint8Array`** -- treats each byte in `ArrayBuffer` as a separate number, with possible values are from 0 to 255 (a byte is 8-bit, so it can hold only that much). Such value is called a "8-bit unsigned integer".
-- **`Uint16Array`** -- treats every 2 bytes as an integer, with possible values from 0 to 65535. That's called a "16-bit unsigned integer".
-- **`Uint32Array`** -- treats every 4 bytes as an integer, with possible values from 0 to 4294967295. That's called a "32-bit unsigned integer".
-- **`Float64Array`** -- treats every 8 bytes as a floating point number with possible values from <code>5.0x10<sup>-324</sup></code> to <code>1.8x10<sup>308</sup></code>.
+- **`Uint8Array`** -- `ArrayBuffer`의 각 바이트를 별개의 숫자로 취급합니다. 1바이트는 8비트이므로 0부터 255까지의 값을 가질 수 있으며 이러한 값을 '8비트 부호 없는 정수(8-bit unsigned integer)'라고 부릅니다.
+- **`Uint16Array`** -- 2바이트마다 하나의 정수로 취급합니다. 0부터 65535까지의 값을 가질 수 있으며 이러한 값을 '16비트 부호 없는 정수(16-bit unsigned integer)'라고 부릅니다.
+- **`Uint32Array`** -- 4바이트마다 하나의 정수로 취급합니다. 0부터 4294967295까지의 값을 가질 수 있으며 이러한 값을 '32비트 부호 없는 정수(32-bit unsigned integer)'라고 부릅니다.
+- **`Float64Array`** -- 8바이트마다 하나의 부동 소수점 숫자로 취급합니다. <code>5.0x10<sup>-324</sup></code>부터 <code>1.8x10<sup>308</sup></code>까지의 값을 가질 수 있습니다.
 
-So, the binary data in an `ArrayBuffer` of 16 bytes can be interpreted as 16 "tiny numbers", or 8 bigger numbers (2 bytes each), or 4 even bigger (4 bytes each), or 2 floating-point values with high precision (8 bytes each).
+따라서 16바이트 `ArrayBuffer`의 이진 데이터는 16개의 '작은 숫자', 8개의 더 큰 숫자(각 2바이트), 4개의 더 큰 숫자(각 4바이트), 정밀도가 높은 부동 소수점 값 2개(각 8바이트)로 해석할 수 있습니다.
 
 ![](arraybuffer-views.svg)
 
-`ArrayBuffer` is the core object, the root of everything, the raw binary data.
+`ArrayBuffer`는 이진 데이터 처리의 근간이 되는 핵심 객체이며, 가공되지 않은 이진 데이터를 저장하고 있습니다.
 
-But if we're going to write into it, or iterate over it, basically for almost any operation – we must use a view, e.g:
+하지만 `ArrayBuffer`에 값을 쓰거나 순회와 같은 기본 연산을 수행하려면 다음과 같이 뷰를 사용해야 합니다.
 
 ```js run
-let buffer = new ArrayBuffer(16); // create a buffer of length 16
+let buffer = new ArrayBuffer(16); // 길이가 16바이트인 버퍼 생성
 
 *!*
-let view = new Uint32Array(buffer); // treat buffer as a sequence of 32-bit integers
+let view = new Uint32Array(buffer); // 버퍼를 32비트 정수의 연속으로 취급
 
-alert(Uint32Array.BYTES_PER_ELEMENT); // 4 bytes per integer
+alert(Uint32Array.BYTES_PER_ELEMENT); // 정수 하나당 4바이트
 */!*
 
-alert(view.length); // 4, it stores that many integers
-alert(view.byteLength); // 16, the size in bytes
+alert(view.length); // 4, 정수 4개 저장 가능
+alert(view.byteLength); // 16, 전체 바이트 길이
 
-// let's write a value
+// 값을 저장해봅시다.
 view[0] = 123456;
 
-// iterate over values
+// 값을 순회해봅시다.
 for(let num of view) {
-  alert(num); // 123456, then 0, 0, 0 (4 values total)
+  alert(num); // 123456, 그 뒤 0, 0, 0 (총 4개의 값)
 }
 
 ```
 
 ## TypedArray
 
-The common term for all these views (`Uint8Array`, `Uint32Array`, etc) is [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects). They share the same set of methods and properities.
+지금까지 살펴본 모든 뷰(`Uint8Array`, `Uint32Array` 등)를 통칭하는 용어는 [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects)입니다. 앞서 살펴본 뷰들은 같은 메서드와 프로퍼티를 공유합니다.
 
-Please note, there's no constructor called `TypedArray`, it's just a common "umbrella" term to represent one of views over `ArrayBuffer`: `Int8Array`, `Uint8Array` and so on, the full list will soon follow.
+참고로 `TypedArray`라는 생성자는 존재하지 않습니다. `TypedArray`는 `ArrayBuffer`의 여러 뷰를 아울러 지칭하는 상위 용어입니다. 예를 들어 `Int8Array`, `Uint8Array` 등이 있으며 전체 목록은 곧 살펴보겠습니다.
 
-When you see something like `new TypedArray`, it means any of `new Int8Array`, `new Uint8Array`, etc.
+`new TypedArray`와 같은 표현을 본다면 `new Int8Array`, `new Uint8Array`와 같은 뷰 중 하나를 뜻한다고 이해하면 됩니다.
 
-Typed array behave like regular arrays: have indexes and iterable.
+타입이 지정된 배열(typed array)은 일반 배열처럼 인덱스가 있고 반복 가능(iterable, 이터러블)합니다.
 
-A typed array constructor (be it `Int8Array` or `Float64Array`, doesn't matter) behaves differently depending on argument types.
+타입이 지정된 배열의 생성자는 `Int8Array`나 `Float64Array`든 상관없이 주어진 인수 타입에 따라 다르게 동작합니다.
 
-There are 5 variants of arguments:
+5가지 방식으로 인수를 넘길 수 있습니다.
 
 ```js
 new TypedArray(buffer, [byteOffset], [length]);
@@ -91,92 +91,92 @@ new TypedArray(length);
 new TypedArray();
 ```
 
-1. If an `ArrayBuffer` argument is supplied, the view is created over it. We used that syntax already.
+1. `ArrayBuffer` 인수를 전달하면 그 위에 뷰를 바로 생성합니다. 이 문법은 이미 위에서 사용해 보았습니다.
 
-    Optionally we can provide `byteOffset` to start from (0 by default) and the `length` (till the end of the buffer by default), then the view will cover only a part of the `buffer`.
+    선택적으로 시작 위치를 나타내는 `byteOffset`(기본값 0)과 `length`(기본값 버퍼의 끝)를 제공하면 `buffer`의 일부분만 뷰로 지정할 수 있습니다.
 
-2. If an `Array`, or any array-like object is given, it creates a typed array of the same length and copies the content.
+2. `Array`나 유사 배열 객체(array-like object)를 전달하면 타입이 지정된 배열을 동일한 길이로 생성하고 내용을 복사합니다.
 
-    We can use it to pre-fill the array with the data:
+    다음과 같이 사용하여 배열에 미리 값을 채워 넣을 수 있습니다.
     ```js run
     *!*
     let arr = new Uint8Array([0, 1, 2, 3]);
     */!*
-    alert( arr.length ); // 4, created binary array of the same length
-    alert( arr[1] ); // 1, filled with 4 bytes (unsigned 8-bit integers) with given values
+    alert( arr.length ); // 4, 동일한 길이의 이진 배열을 생성
+    alert( arr[1] ); // 1, 주어진 값으로 4바이트 (8비트 부호 없는 정수)를 채움
     ```
-3. If another `TypedArray` is supplied, it does the same: creates a typed array of the same length and copies values. Values are converted to the new type in the process, if needed.
+3. 또 다른 `TypedArray`를 전달해도 동일하게 동작합니다. 타입이 지정된 배열을 동일한 길이로 생성하고 값을 복사합니다. 필요하다면 새로운 타입으로 변환할 수 있습니다.
     ```js run
     let arr16 = new Uint16Array([1, 1000]);
     *!*
     let arr8 = new Uint8Array(arr16);
     */!*
     alert( arr8[0] ); // 1
-    alert( arr8[1] ); // 232, tried to copy 1000, but can't fit 1000 into 8 bits (explanations below)
+    alert( arr8[1] ); // 232, 1000을 복사하려 했지만 1000은 8비트에 담을 수 없습니다(아래 설명 참조).
     ```
 
-4. For a numeric argument `length` -- creates the typed array to contain that many elements. Its byte length will be `length` multiplied by the number of bytes in a single item `TypedArray.BYTES_PER_ELEMENT`:
+4. 숫자 인수 `length`를 전달하면 그만큼의 요소를 저장할 타입이 지정된 배열을 생성합니다. 전체 바이트 길이는 `length` 값에 단일 요소에 대한 바이트 수를 반환하는 `TypedArray.BYTES_PER_ELEMENT`를 곱한 값입니다.
     ```js run
-    let arr = new Uint16Array(4); // create typed array for 4 integers
-    alert( Uint16Array.BYTES_PER_ELEMENT ); // 2 bytes per integer
-    alert( arr.byteLength ); // 8 (size in bytes)
+    let arr = new Uint16Array(4); // 4개의 정수를 저장할 타입이 지정된 배열을 생성
+    alert( Uint16Array.BYTES_PER_ELEMENT ); // 정수 하나당 2바이트로 취급
+    alert( arr.byteLength ); // 8 (전체 바이트 길이)
     ```
 
-5. Without arguments, creates an zero-length typed array.
+5. 인수를 전달하지 않으면 길이가 0인 타입이 지정된 배열을 만듭니다.
 
-We can create a `TypedArray` directly, without mentioning `ArrayBuffer`. But a view cannot exist without an underlying `ArrayBuffer`, so gets created automatically in all these cases except the first one (when provided).
+`ArrayBuffer` 없이 `TypedArray`를 직접 생성할 수 있습니다. 하지만 뷰는 그 기반이 되는 `ArrayBuffer` 없이 존재할 수 없기 때문에 `ArrayBuffer`를 직접 전달하는 첫 번째 경우를 제외하고는 위 경우 모두 `ArrayBuffer`가 자동으로 생성됩니다.
 
-To access the `ArrayBuffer`, there are properties:
-- `arr.buffer` -- references the `ArrayBuffer`.
-- `arr.byteLength` -- the length of the `ArrayBuffer`.
+기반이 되는 `ArrayBuffer`에 접근하기 위해 `TypedArray`의 프로퍼티를 사용할 수 있습니다.
+- `buffer` -- `ArrayBuffer`의 참조
+- `byteLength` -- `ArrayBuffer`의 길이
 
-So, we can always move from one view to another:
+그렇기에 아래와 같이 하나의 뷰에서 다른 뷰를 만들 수 있습니다.
 ```js
 let arr8 = new Uint8Array([0, 1, 2, 3]);
 
-// another view on the same data
+// 동일한 값을 가진 또 다른 뷰
 let arr16 = new Uint16Array(arr8.buffer);
 ```
 
 
-Here's the list of typed arrays:
+타입이 지정된 배열의 목록은 다음과 같습니다.
 
-- `Uint8Array`, `Uint16Array`, `Uint32Array` -- for integer numbers of 8, 16 and 32 bits.
-  - `Uint8ClampedArray` -- for 8-bit integers, "clamps" them on assignment (see below).
-- `Int8Array`, `Int16Array`, `Int32Array` -- for signed integer numbers (can be negative).
-- `Float32Array`, `Float64Array` -- for signed floating-point numbers of 32 and 64 bits.
+- `Uint8Array`, `Uint16Array`, `Uint32Array` -- 8비트, 16비트, 32비트 정수에 사용합니다.
+  - `Uint8ClampedArray` -- 8비트 정수에 사용하며, 값을 할당할 때 값의 범위를 '고정(clamp)'합니다(아래 참조).
+- `Int8Array`, `Int16Array`, `Int32Array` -- 음수를 포함한 부호 있는 정수에 사용합니다.
+- `Float32Array`, `Float64Array` -- 32비트, 64비트 부호 있는 부동 소수점 숫자에 사용합니다.
 
-```warn header="No `int8` or similar single-valued types"
-Please note, despite of the names like `Int8Array`, there's no single-value type like `int`, or `int8` in JavaScript.
+```warn header="`int8`과 같이 단일 값을 나타내는 타입은 없습니다."
+`Int8Array`라는 이름과 달리 자바스크립트에는 `int`나 `int8`과 같은 단일 값 타입이 없다는 것에 유의하세요.
 
-That's logical, as `Int8Array` is not an array of these individual values, but rather a view on `ArrayBuffer`.
+`Int8Array`는 개별 값을 갖는 배열이 아닌 `ArrayBuffer` 위의 뷰입니다.
 ```
 
-### Out-of-bounds behavior
+### 범위를 벗어난 값의 동작
 
-What if we attempt to write an out-of-bounds value into a typed array? There will be no error. But extra bits are cut-off.
+타입이 지정된 배열에 범위를 벗어난 값을 쓰려고 하면 어떻게 될까요? 에러는 발생하지 않습니다. 하지만 범위를 초과한 비트는 잘립니다.
 
-For instance, let's try to put 256 into `Uint8Array`. In binary form, 256 is `100000000` (9 bits), but `Uint8Array` only provides 8 bits per value, that makes the available range from 0 to 255.
+`Uint8Array`에 256을 넣는다고 생각해 봅시다. 256의 이진 형태는 `100000000` (9비트)이지만 `Uint8Array`는 값 하나당 8비트만 제공하기 때문에 0부터 255까지의 값만 가질 수 있습니다.
 
-For bigger numbers, only the rightmost (less significant) 8 bits are stored, and the rest is cut off:
+표현할 수 있는 값의 범위를 초과하는 수에 대해 오른쪽 끝의 하위 8비트만 저장하고 나머지 비트는 잘립니다.
 
 ![](8bit-integer-256.svg)
 
-So we'll get zero.
+결과적으로 0이 나옵니다.
 
-For 257, the binary form is `100000001` (9 bits), the rightmost 8 get stored, so we'll have `1` in the array:
+만약 257을 넣으면 257의 이진 형태는 `100000001` (9비트)이므로 오른쪽 끝의 8비트만 저장하여 배열에 `1`이 들어갑니다.
 
 ![](8bit-integer-257.svg)
 
-In other words, the number modulo 2<sup>8</sup> is saved.
+다시 말해 숫자를 2<sup>8</sup>로 나눈 나머지가 저장됩니다.
 
-Here's the demo:
+아래 사례를 살펴봅시다.
 
 ```js run
 let uint8array = new Uint8Array(16);
 
 let num = 256;
-alert(num.toString(2)); // 100000000 (binary representation)
+alert(num.toString(2)); // 100000000 (이진 표기법)
 
 uint8array[0] = 256;
 uint8array[1] = 257;
@@ -185,88 +185,88 @@ alert(uint8array[0]); // 0
 alert(uint8array[1]); // 1
 ```
 
-`Uint8ClampedArray` is special in this aspect, its behavior is different. It saves 255 for any number that is greater than 255, and 0 for any negative number. That behavior is useful for image processing.
+이 점에서 `Uint8ClampedArray`는 특별하게 동작합니다. `Uint8ClampedArray`는 255보다 큰 숫자는 255로, 음수는 0으로 저장합니다. 이러한 동작은 이미지 처리에 유용합니다.
 
-## TypedArray methods
+## TypedArray 메서드
 
-`TypedArray` has regular `Array` methods, with notable exceptions.
+`TypedArray`는 일반 `Array` 메서드를 사용할 수 있지만 몇 가지 주목할 만한 예외가 존재합니다.
 
-We can iterate, `map`, `slice`, `find`, `reduce` etc.
+기본적으로 `TypedArray`는 배열처럼 순회하거나 `map`, `slice`, `find`, `reduce` 메서드를 사용할 수 있습니다.
 
-There are few things we can't do though:
+하지만 배열처럼 동작하지 않는 부분도 있습니다.
 
-- No `splice` -- we can't "delete" a value, because typed arrays are views on a buffer, and these are fixed, contiguous areas of memory. All we can do is to assign a zero.
-- No `concat` method.
+- `splice` 메서드를 사용할 수 없습니다. 타입이 지정된 배열은 버퍼에 대한 뷰이고, 버퍼는 고정된 일련의 메모리 영역이기 때문에 값을 '제거'할 수 없습니다. 할 수 있는 일이라고는 0을 할당하는 것뿐입니다.
+- `concat` 메서드를 사용할 수 없습니다.
 
-There are two additional methods:
+그 외에 두 가지 메서드가 더 있습니다.
 
-- `arr.set(fromArr, [offset])` copies all elements from `fromArr` to the `arr`, starting at position `offset` (0 by default).
-- `arr.subarray([begin, end])` creates a new view of the same type from `begin` to `end` (exclusive). That's similar to `slice` method (that's also supported), but doesn't copy anything -- just creates a new view, to operate on the given piece of data.
+- `arr.set(fromArr, [offset])`는 `fromArr`의 `offset`(기본값 0) 위치부터 모든 요소를 `arr`에 복사합니다.
+- `arr.subarray([begin, end])`는 `begin`부터 `end` 이전까지 동일한 타입의 새로운 뷰를 생성합니다. `slice` 메서드와 유사하지만(`slice`도 지원합니다) 범위 내 요소를 복사하지 않고 별도의 새로운 뷰를 생성합니다.
 
-These methods allow us to copy typed arrays, mix them, create new arrays from existing ones, and so on.
+지금까지 본 메서드를 통해 타입이 지정된 배열을 복사하거나 조합하고 기존 배열에서 새로운 배열을 생성하는 등 여러 작업을 수행할 수 있습니다.
 
 
 
 ## DataView
 
-[DataView](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView) is a special super-flexible "untyped" view over `ArrayBuffer`. It allows to access the data on any offset in any format.
+[DataView](mdn:/JavaScript/Reference/Global_Objects/DataView)는 `ArrayBuffer` 위에 놓이는 특별하고 매우 유연한 '타입이 없는(untyped)' 뷰입니다. `DataView`는 임의의 오프셋에 있는 데이터를 원하는 형식으로 읽고 쓸 수 있게 합니다.
 
-- For typed arrays, the constructor dictates what the format is. The whole array is supposed to be uniform. The i-th number is `arr[i]`.
-- With `DataView` we access the data with methods like `.getUint8(i)` or `.getUint16(i)`. We choose the format at method call time instead of the construction time.
+- 타입이 지정된 배열에서는 생성자가 데이터 형식을 결정합니다. 배열 전체가 같은 타입이라고 가정하며 i번째 숫자는 `arr[i]`를 통해 접근합니다.
+- `DataView`는 `.getUint8(i)`나 `.getUint16(i)`와 같은 메서드를 사용하여 데이터에 접근합니다. 데이터 형식은 생성 시점이 아닌 메서드 호출 시점에 결정됩니다.
 
-The syntax:
+문법:
 
 ```js
 new DataView(buffer, [byteOffset], [byteLength])
 ```
 
-- **`buffer`** -- the underlying `ArrayBuffer`. Unlike typed arrays, `DataView` doesn't create a buffer on its own. We need to have it ready.
-- **`byteOffset`** -- the starting byte position of the view (by default 0).
-- **`byteLength`** -- the byte length of the view (by default till the end of `buffer`).
+- **`buffer`** -- 뷰의 기반이 되는 `ArrayBuffer`입니다. 타입이 지정된 배열과 달리 `DataView`는 스스로 새로운 버퍼를 만들지 않기 때문에 전달할 버퍼가 필요합니다.
+- **`byteOffset`** -- 뷰의 시작 바이트 지점(기본값 0)
+- **`byteLength`** -- 뷰의 바이트 길이(기본값 `buffer`의 끝)
 
-For instance, here we extract numbers in different formats from the same buffer:
+예를 들어 아래와 같이 동일한 버퍼에서 다른 데이터 형식의 숫자를 추출할 수 있습니다.
 
 ```js run
-// binary array of 4 bytes, all have the maximal value 255
+// 모든 값이 최댓값 255인 4바이트 이진 배열
 let buffer = new Uint8Array([255, 255, 255, 255]).buffer;
 
 let dataView = new DataView(buffer);
 
-// get 8-bit number at offset 0
+// 오프셋 0에서 8비트 숫자를 가져옵니다.
 alert( dataView.getUint8(0) ); // 255
 
-// now get 16-bit number at offset 0, it consists of 2 bytes, together interpreted as 65535
-alert( dataView.getUint16(0) ); // 65535 (biggest 16-bit unsigned int)
+// 오프셋 0에서 16비트 숫자를 가져옵니다. 이 숫자는 2바이트로 구성되며 두 바이트를 함께 해석하여 65535가 됩니다.
+alert( dataView.getUint16(0) ); // 65535 (16비트 부호 없는 정수 중 가장 큰 값)
 
-// get 32-bit number at offset 0
-alert( dataView.getUint32(0) ); // 4294967295 (biggest 32-bit unsigned int)
+// 오프셋 0에서 32비트 숫자를 가져옵니다.
+alert( dataView.getUint32(0) ); // 4294967295 (32비트 부호 없는 정수 중 가장 큰 값)
 
-dataView.setUint32(0, 0); // set 4-byte number to zero, thus setting all bytes to 0
+dataView.setUint32(0, 0); // 4바이트 숫자를 0으로 설정하여 모든 바이트를 0으로 만듭니다.
 ```
 
-`DataView` is great when we store mixed-format data in the same buffer. For example, when we store a sequence of pairs (16-bit integer, 32-bit float), `DataView` allows to access them easily.
+`DataView`는 동일한 버퍼에 여러 데이터 형식의 데이터를 저장할 때 유용합니다. 예를 들어 16비트 정수와 32비트 부동 소수점 값을 한 쌍으로 묶어 연속해서 저장할 때, `DataView`를 사용하면 쉽게 데이터에 접근할 수 있습니다.
 
-## Summary
+## 요약
 
-`ArrayBuffer` is the core object, a reference to the fixed-length contiguous memory area.
+`ArrayBuffer`는 고정 길이의 연속된 메모리 영역을 참조하는 핵심 객체입니다.
 
-To do almost any operation on `ArrayBuffer`, we need a view.
+`ArrayBuffer`의 데이터를 조작하기 위해 뷰가 필요합니다.
 
-- It can be a `TypedArray`:
-    - `Uint8Array`, `Uint16Array`, `Uint32Array` -- for unsigned integers of 8, 16, and 32 bits.
-    - `Uint8ClampedArray` -- for 8-bit integers, "clamps" them on assignment.
-    - `Int8Array`, `Int16Array`, `Int32Array` -- for signed integer numbers (can be negative).
-    - `Float32Array`, `Float64Array` -- for signed floating-point numbers of 32 and 64 bits.
-- Or a `DataView` -- the view that uses methods to specify a format, e.g. `getUint8(offset)`.
+- `TypedArray`가 뷰의 역할을 수행합니다.
+    - `Uint8Array`, `Uint16Array`, `Uint32Array` -- 8비트, 16비트, 32비트 부호 없는 정수에 사용합니다.
+    - `Uint8ClampedArray` -- 8비트 정수에 사용하며, 값을 할당할 때 값을 '고정'합니다.
+    - `Int8Array`, `Int16Array`, `Int32Array` -- 음수를 포함한 부호 있는 정수에 사용합니다.
+    - `Float32Array`, `Float64Array` -- 32비트, 64비트 부호 있는 부동 소수점 숫자에 사용합니다.
+- 또는 `DataView` -- `DataView`는 `getUint8(offset)` 같은 메서드로 형식을 지정하는 뷰입니다.
 
-In most cases we create and operate directly on typed arrays, leaving `ArrayBuffer` under cover, as a "common discriminator". We can access it as `.buffer` and make another view if needed.
+대부분의 경우 `ArrayBuffer`를 내부에 감춘 채 타입이 지정된 배열을 직접 생성하고 값을 다룹니다. 이때 `ArrayBuffer`는 '공통분모(common denominator)' 역할을 합니다. 필요하다면 `.buffer`로 `ArrayBuffer`에 접근하여 또 다른 뷰를 만들 수 있습니다.
 
-There are also two additional terms, that are used in descriptions of methods that operate on binary data:
-- `ArrayBufferView` is an umbrella term for all these kinds of views.
-- `BufferSource` is an umbrella term for `ArrayBuffer` or `ArrayBufferView`.
+이진 데이터를 다루는 메서드를 설명할 때 사용하는 용어가 두 가지 더 있습니다.
+- `ArrayBufferView`는 이런 모든 종류의 뷰를 아울러 지칭하는 상위 용어입니다.
+- `BufferSource`는 `ArrayBuffer` 또는 `ArrayBufferView`를 아울러 지칭하는 상위 용어입니다.
 
-We'll see these terms in the next chapters. `BufferSource` is one of the most common terms, as it means "any kind of binary data" -- an `ArrayBuffer` or a view over it.
+다음 챕터에서 이런 용어들에 대해 더 자세히 살펴보겠습니다. `BufferSource`는 가장 흔하게 쓰이는 용어 중 하나로, `ArrayBuffer`나 그 위의 뷰처럼 '모든 종류의 이진 데이터'를 의미합니다.
 
-Here's a cheatsheet:
+요약표는 다음과 같습니다.
 
 ![](arraybuffer-view-buffersource.svg)
diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md
index 84cf6f1cca..bb475bc7fa 100644
--- a/4-binary/03-blob/article.md
+++ b/4-binary/03-blob/article.md
@@ -119,7 +119,7 @@ An alternative to `URL.createObjectURL` is to convert a `Blob` into a base64-enc
 
 That encoding represents binary data as a string of ultra-safe "readable" characters with ASCII-codes from 0 to 64. And what's more important -- we can use this encoding in "data-urls".
 
-A [data url](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) has the form `data:[<mediatype>][;base64],<data>`. We can use such urls everywhere, on par with "regular" urls.
+A [data url](mdn:/http/Data_URIs) has the form `data:[<mediatype>][;base64],<data>`. We can use such urls everywhere, on par with "regular" urls.
 
 For instance, here's a smiley:
 
@@ -166,8 +166,8 @@ We can create a `Blob` of an image, an image part, or even make a page screensho
 
 Image operations are done via `<canvas>` element:
 
-1. Draw an image (or its part) on canvas using [canvas.drawImage](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage).
-2. Call canvas method [.toBlob(callback, format, quality)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) that creates a `Blob` and runs `callback` with it when done.
+1. Draw an image (or its part) on canvas using [canvas.drawImage](mdn:/api/CanvasRenderingContext2D/drawImage).
+2. Call canvas method [.toBlob(callback, format, quality)](mdn:/api/HTMLCanvasElement/toBlob) that creates a `Blob` and runs `callback` with it when done.
 
 In the example below, an image is just copied, but we could cut from it, or transform it on canvas prior to making a blob:
 
diff --git a/5-network/06-fetch-api/article.md b/5-network/06-fetch-api/article.md
index 413aa47b06..2ce43e11a8 100644
--- a/5-network/06-fetch-api/article.md
+++ b/5-network/06-fetch-api/article.md
@@ -179,7 +179,7 @@ The `integrity` option allows to check if the response matches the known-ahead c
 
 As described in the [specification](https://w3c.github.io/webappsec-subresource-integrity/), supported hash-functions are SHA-256, SHA-384, and SHA-512, there might be others depending on a browser.
 
-For example, we're downloading a file, and we know that it's SHA-256 checksum is "abcdef" (a real checksum is longer, of course).
+For example, we're downloading a file, and we know that its SHA-256 checksum is "abcdef" (a real checksum is longer, of course).
 
 We can put it in the `integrity` option, like this:
 
diff --git a/5-network/07-url/article.md b/5-network/07-url/article.md
index c41400451d..09a4696e73 100644
--- a/5-network/07-url/article.md
+++ b/5-network/07-url/article.md
@@ -145,10 +145,10 @@ If we use a string though, we need to encode/decode special characters manually.
 
 There are built-in functions for that:
 
-- [encodeURI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) - encodes URL as a whole.
-- [decodeURI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI) - decodes it back.
-- [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) - encodes a URL component, such as a search parameter, or a hash, or a pathname.
-- [decodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent) - decodes it back.
+- [encodeURI](mdn:/JavaScript/Reference/Global_Objects/encodeURI) - encodes URL as a whole.
+- [decodeURI](mdn:/JavaScript/Reference/Global_Objects/decodeURI) - decodes it back.
+- [encodeURIComponent](mdn:/JavaScript/Reference/Global_Objects/encodeURIComponent) - encodes a URL component, such as a search parameter, or a hash, or a pathname.
+- [decodeURIComponent](mdn:/JavaScript/Reference/Global_Objects/decodeURIComponent) - decodes it back.
 
 A natural question is: "What's the difference between `encodeURIComponent` and `encodeURI`? When we should use either?"
 
diff --git a/5-network/08-xmlhttprequest/article.md b/5-network/08-xmlhttprequest/article.md
index 41b18ade04..1a2b754e0a 100644
--- a/5-network/08-xmlhttprequest/article.md
+++ b/5-network/08-xmlhttprequest/article.md
@@ -332,7 +332,7 @@ There are 3 methods for HTTP-headers:
 
 ## POST, FormData
 
-To make a POST request, we can use the built-in [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object.
+To make a POST request, we can use the built-in [FormData](mdn:api/FormData) object.
 
 The syntax:
 
diff --git a/5-network/12-server-sent-events/article.md b/5-network/12-server-sent-events/article.md
index f6fd8dbdf6..eed0de03ab 100644
--- a/5-network/12-server-sent-events/article.md
+++ b/5-network/12-server-sent-events/article.md
@@ -1,80 +1,80 @@
-# Server Sent Events
+# 서버 전송 이벤트
 
-The [Server-Sent Events](https://html.spec.whatwg.org/multipage/comms.html#the-eventsource-interface) specification describes a built-in class `EventSource`, that keeps connection with the server and allows to receive events from it.
+[서버 전송 이벤트(Server-Sent Events)](https://html.spec.whatwg.org/multipage/comms.html#the-eventsource-interface) 명세는 내장 클래스 `EventSource`를 정의합니다. `EventSource`를 사용하면 서버와 커넥션을 유지하면서 서버가 보내는 이벤트를 받을 수 있습니다.
 
-Similar to `WebSocket`, the connection is persistent.
+`WebSocket`과 마찬가지로 서버 전송 이벤트에서도 커넥션은 지속됩니다.
 
-But there are several important differences:
+그런데 둘 사이엔 중요한 차이가 몇 가지 있습니다.
 
 | `WebSocket` | `EventSource` |
 |-------------|---------------|
-| Bi-directional: both client and server can exchange messages | One-directional: only server sends data |
-| Binary and text data | Only text |
-| WebSocket protocol | Regular HTTP |
+| 양방향 통신. 클라이언트와 서버 모두 메시지를 주고받을 수 있음 | 단방향 통신. 서버만 데이터를 보냄 |
+| 바이너리와 텍스트 데이터 전송 가능 | 텍스트만 전송 가능 |
+| 웹소켓 프로토콜 사용 | 일반 HTTP 사용 |
 
-`EventSource` is a less-powerful way of communicating with the server than `WebSocket`.
+이렇게 보면 `EventSource`는 `WebSocket`보다 서버와 통신하는 능력이 부족한 수단 같아 보입니다.
 
-Why should one ever use it?
+그런데도 `EventSource`를 써야 할 이유가 있을까요?
 
-The main reason: it's simpler. In many applications, the power of `WebSocket` is a little bit too much.
+물론 있습니다. 단순하다는 점이죠. 상당수 애플리케이션엔 `WebSocket`에서 제공하는 능력까지는 필요하지 않습니다.
 
-We need to receive a stream of data from server: maybe chat messages or market prices, or whatever. That's what `EventSource` is good at. Also it supports auto-reconnect, something  we need to implement manually with `WebSocket`. Besides, it's a plain old HTTP, not a new protocol.
+채팅 메시지나 주식 시세처럼 서버에서 흘러오는 데이터 스트림을 받기만 하면 되는 상황이라면 `EventSource`가 제격입니다. `EventSource`는 `WebSocket`에선 직접 구현해야 하는 자동 재연결도 지원합니다. 게다가 새로운 프로토콜이 아니라 익숙한 HTTP를 그대로 사용합니다.
 
-## Getting messages
+## 메시지 받기
 
-To start receiving messages, we just need to create `new EventSource(url)`.
+서버에서 보내는 메시지는 브라우저에서 실행 중인 클라이언트 측 자바스크립트에서 `new EventSource(url)`를 만들기만 하면 받을 수 있습니다.
 
-The browser will connect to `url` and keep the connection open, waiting for events.
+그러면 브라우저가 알아서 `url`로 접속해 커넥션을 열어둔 채 이벤트를 기다립니다.
 
-The server should respond with status 200 and the header `Content-Type: text/event-stream`, then keep the connection and write messages into it in the special format, like this:
+서버는 본문 전체를 보내는 대신 우선 상태 코드 200과 헤더 `Content-Type: text/event-stream`만 보내 응답한 뒤, 커넥션을 유지하면서 다음과 같은 특별한 형식의 메시지를 클라이언트로 흘려보냅니다.
 
 ```
-data: Message 1
+data: 메시지 1
 
-data: Message 2
+data: 메시지 2
 
-data: Message 3
-data: of two lines
+data: 메시지 3
+data: 두 번째 줄
 ```
 
-- A message text goes after `data:`, the space after the colon is optional.
-- Messages are delimited with double line breaks `\n\n`.
-- To send a line break `\n`, we can immediately send one more `data:` (3rd message above).
+- 메시지 본문은 `data:` 뒤에 붙이는데, 콜론 뒤 공백은 생략할 수 있습니다.
+- 메시지끼리는 두 번의 줄바꿈 `\n\n`으로 구분합니다.
+- 줄바꿈 `\n`을 보내고 싶으면 바로 다음 줄에 `data:`를 한 번 더 씁니다(위 예시의 세 번째 메시지).
 
-In practice, complex messages are usually sent JSON-encoded. Line-breaks are encoded as `\n` within them, so multiline `data:` messages are not necessary.
+실무에선 복잡한 메시지는 보통 JSON으로 인코딩해 보냅니다. JSON으로 인코딩하면 줄바꿈이 문자열 안에서 `\n`으로 처리되기 때문에 `data:`를 여러 줄로 나눠 쓸 일도 없습니다.
 
-For instance:
+예시를 살펴봅시다.
 
 ```js
-data: {"user":"John","message":"First line*!*\n*/!* Second line"}
+data: {"user":"보라","message":"첫 번째 줄*!*\n*/!* 두 번째 줄"}
 ```
 
-...So we can assume that one `data:` holds exactly one message.
+이런 관례 덕분에 `data:` 하나가 곧 메시지 하나라고 생각해도 됩니다.
 
-For each such message, the `message` event is generated:
+이렇게 메시지가 하나 도착할 때마다 `message` 이벤트가 만들어집니다.
 
 ```js
 let eventSource = new EventSource("/events/subscribe");
 
 eventSource.onmessage = function(event) {
-  console.log("New message", event.data);
-  // will log 3 times for the data stream above
+  console.log("새 메시지", event.data);
+  // 위 데이터 스트림이라면 세 번 출력됩니다.
 };
 
-// or eventSource.addEventListener('message', ...)
+// eventSource.addEventListener('message', ...)를 사용해도 됩니다.
 ```
 
-### Cross-origin requests
+### 크로스 오리진 요청
 
-`EventSource` supports cross-origin requests, like `fetch` any other networking methods. We can use any URL:
+`EventSource`는 `fetch`를 비롯한 여타 네트워크 메서드처럼 크로스 오리진 요청을 지원합니다. 어떤 URL이든 사용할 수 있죠.
 
 ```js
 let source = new EventSource("https://another-site.com/events");
 ```
 
-The remote server will get the `Origin` header and must respond with `Access-Control-Allow-Origin` to proceed.
+`EventSource`로 접속한 크로스 오리진 원격 서버는 브라우저가 요청을 보낼 때 자동으로 붙인 `Origin` 헤더를 받습니다. 요청을 받은 서버는 응답에 `Access-Control-Allow-Origin` 헤더를 넣어 해당 오리진의 접근을 허용한다고 응답합니다.
 
-To pass credentials, we should set the additional option `withCredentials`, like this:
+자격 증명을 함께 보내려면 다음과 같이 옵션 `withCredentials`를 추가로 설정합니다.
 
 ```js
 let source = new EventSource("https://another-site.com/events", {
@@ -82,30 +82,30 @@ let source = new EventSource("https://another-site.com/events", {
 });
 ```
 
-Please see the chapter <info:fetch-crossorigin> for more details about cross-origin headers.
+크로스 오리진 헤더에 대한 자세한 내용은 <info:fetch-crossorigin> 챕터를 참고하세요.
 
 
-## Reconnection
+## 재연결
 
-Upon creation, `new EventSource` connects to the server, and if the connection is broken -- reconnects.
+`new EventSource`로 객체를 만들면 브라우저가 알아서 서버에 커넥션을 엽니다. 이때 커넥션이 끊어져도 브라우저가 알아서 다시 접속합니다.
 
-That's very convenient, as we don't have to care about it.
+재연결을 직접 신경 쓰지 않아도 되니 아주 편리하죠.
 
-There's a small delay between reconnections, a few seconds by default.
+다만, 재연결 사이엔 짧은 지연이 있는데 기본값(브라우저에서 지정)은 몇 초 정도입니다.
 
-The server can set the recommended delay using `retry:` in response (in milliseconds):
+재연결 지연 시간은 서버가 원하는 값으로 바꿀 수 있습니다. 서버는 응답에 `retry:`를 실어 권장 지연 시간을 밀리초 단위로 설정할 수 있습니다.
 
 ```js
 retry: 15000
-data: Hello, I set the reconnection delay to 15 seconds
+data: 안녕하세요. 재연결 지연 시간을 15초로 설정했습니다.
 ```
 
-The `retry:` may come both together with some data, or as a standalone message.
+`retry:`는 데이터와 함께 보낼 수도 있고 단독 메시지로 보낼 수도 있습니다.
 
-The browser should wait that many milliseconds before reconnecting. Or longer, e.g. if the browser knows (from OS) that there's no network connection at the moment, it may wait until the connection appears, and then retry.
+브라우저는 재연결하기 전에 지정된 시간만큼 기다립니다. 더 오래 기다리기도 합니다. 운영체제로부터 현재 네트워크 연결이 없다는 정보를 받았다면 연결이 살아날 때까지 기다렸다가 다시 시도합니다.
 
-- If the server wants the browser to stop reconnecting, it should respond with HTTP status 204.
-- If the browser wants to close the connection, it should call `eventSource.close()`:
+- 서버 쪽에서 브라우저의 재연결 시도를 멈추고 싶다면 HTTP 상태 코드 204로 응답해야 합니다.
+- 브라우저 쪽에서 커넥션을 닫고 싶다면 `eventSource.close()`를 호출해야 합니다.
 
 ```js
 let eventSource = new EventSource(...);
@@ -113,159 +113,159 @@ let eventSource = new EventSource(...);
 eventSource.close();
 ```
 
-Also, there will be no reconnection if the response has an incorrect `Content-Type` or its HTTP status differs from 301, 307, 200 and 204. In such cases the `"error"` event will be emitted, and the browser won't reconnect.
+이렇게 서버나 브라우저에서 명시적으로 재연결을 멈출 때 말고, 응답의 `Content-Type`이 올바르지 않거나 HTTP 상태 코드가 301, 307, 200, 204가 아닐 때도 재연결은 일어나지 않습니다. 이때는 `"error"` 이벤트가 발생하고 브라우저는 재연결을 시도하지 않습니다.
 
 ```smart
-When a connection is finally closed, there's no way to "reopen" it. If we'd like to connect again, just create a new `EventSource`.
+한 번 완전히 닫힌 커넥션은 다시 여는 방법이 없습니다. 다시 접속하고 싶다면 새로운 `EventSource`를 만드세요.
 ```
 
-## Message id
+## 메시지 id
 
-When a connection breaks due to network problems, either side can't be sure which messages were received, and which weren't.
+네트워크 문제로 커넥션이 끊어지면 어떤 메시지가 도착했고 어떤 메시지가 유실됐는지 어느 쪽도 확신할 수 없습니다.
 
-To correctly resume the connection, each message should have an `id` field, like this:
+커넥션을 정확히 이어가려면 다음과 같이 메시지마다 `id` 필드가 있어야 합니다.
 
 ```
-data: Message 1
+data: 메시지 1
 id: 1
 
-data: Message 2
+data: 메시지 2
 id: 2
 
-data: Message 3
-data: of two lines
+data: 메시지 3
+data: 두 번째 줄
 id: 3
 ```
 
-When a message with `id:` is received, the browser:
+`id:`가 붙은 메시지를 받으면 브라우저는 다음 두 가지 일을 합니다.
 
-- Sets the property `eventSource.lastEventId` to its value.
-- Upon reconnection sends the header `Last-Event-ID` with that `id`, so that the server may re-send following messages.
+- 프로퍼티 `eventSource.lastEventId`에 받은 값을 설정합니다.
+- 재연결 시 헤더 `Last-Event-ID`에 이 `id`를 실어 보내, 서버가 그다음 메시지부터 다시 보낼 수 있게 합니다.
 
-```smart header="Put `id:` after `data:`"
-Please note: the `id` is appended below message `data` by the server, to ensure that `lastEventId` is updated after the message is received.
+```smart header="`id:`는 `data:` 뒤에 넣어주세요"
+주의하세요. 서버가 `id`를 메시지 `data` 아래에 붙이는 이유는 메시지를 다 받은 후에 `lastEventId`가 갱신되도록 보장하기 위해서입니다.
 ```
 
-## Connection status: readyState
+## readyState로 커넥션 상태 확인하기
 
-The `EventSource` object has `readyState` property, that has one of three values:
+`EventSource` 객체의 프로퍼티 `readyState`는 세 값 중 하나를 갖습니다.
 
 ```js no-beautify
-EventSource.CONNECTING = 0; // connecting or reconnecting
-EventSource.OPEN = 1;       // connected
-EventSource.CLOSED = 2;     // connection closed
+EventSource.CONNECTING = 0; // 연결 중이거나 재연결 중
+EventSource.OPEN = 1;       // 연결됨
+EventSource.CLOSED = 2;     // 커넥션 닫힘
 ```
 
-When an object is created, or the connection is down, it's always `EventSource.CONNECTING` (equals `0`).
+객체가 막 만들어졌을 때나 커넥션이 끊어져 있을 때 값은 항상 `EventSource.CONNECTING`(`0`)입니다.
 
-We can query this property to know the state of `EventSource`.
+이 프로퍼티를 조회하면 `EventSource`의 상태를 알 수 있습니다.
 
-## Event types
+## 이벤트 타입
 
-By default `EventSource` object generates three events:
+기본적으로 `EventSource` 객체는 세 가지 이벤트를 만들어냅니다.
 
-- `message` -- a message received, available as `event.data`.
-- `open` -- the connection is open.
-- `error` -- the connection could not be established, e.g. the server returned HTTP 500 status.
+- `message` -- 메시지가 도착함. 내용은 `event.data`로 접근
+- `open` -- 커넥션이 열림
+- `error` -- 커넥션을 맺지 못함. 서버가 HTTP 상태 코드 500을 반환한 경우 등
 
-The server may specify another type of event with `event: ...` at the event start.
+서버는 이벤트 시작 부분에 `event: ...`를 붙여 다른 타입의 이벤트를 지정할 수 있습니다.
 
-For example:
+예시를 살펴봅시다.
 
 ```
 event: join
-data: Bob
+data: 보라
 
-data: Hello
+data: 안녕하세요.
 
 event: leave
-data: Bob
+data: 보라
 ```
 
-To handle custom events, we must use `addEventListener`, not `onmessage`:
+이런 커스텀 이벤트를 처리하려면 `onmessage`가 아니라 `addEventListener`를 사용해야 합니다.
 
 ```js
 eventSource.addEventListener('join', event => {
-  alert(`Joined ${event.data}`);
+  alert(`${event.data}님이 입장했습니다.`);
 });
 
 eventSource.addEventListener('message', event => {
-  alert(`Said: ${event.data}`);
+  alert(`${event.data}`);
 });
 
 eventSource.addEventListener('leave', event => {
-  alert(`Left ${event.data}`);
+  alert(`${event.data}님이 퇴장했습니다.`);
 });
 ```
 
-## Full example
+## 전체 예시
 
-Here's the server that sends messages with `1`, `2`, `3`, then `bye` and breaks the connection.
+아래 서버는 `1`, `2`, `3`을 차례로 보내고 마지막에 `bye`를 보낸 뒤 커넥션을 끊습니다.
 
-Then the browser automatically reconnects.
+커넥션이 끊어지면 브라우저가 자동으로 재연결하는 것을 확인해 보세요.
 
 [codetabs src="eventsource"]
 
-## Summary
+## 요약
 
-`EventSource` object automatically establishes a persistent connection and allows the server to send messages over it.
+`EventSource` 객체는 지속적인 커넥션을 자동으로 맺고, 서버가 이 커넥션을 통해 메시지를 보낼 수 있게 해줍니다.
 
-It offers:
-- Automatic reconnect, with tunable `retry` timeout.
-- Message ids to resume events, the last received identifier is sent in `Last-Event-ID` header upon reconnection.
-- The current state is in the `readyState` property.
+`EventSource`는 다음 기능을 제공합니다.
+- 자동 재연결. 재시도 간격은 `retry`로 조정 가능
+- 이벤트를 이어받기 위한 메시지 id. 마지막으로 받은 식별자는 재연결 시 `Last-Event-ID` 헤더에 실려 전송됨
+- 프로퍼티 `readyState`를 통한 현재 상태 확인
 
-That makes `EventSource` a viable alternative to `WebSocket`, as it's more low-level and lacks such built-in features (though they can be implemented).
+이런 내장 기능 덕분에 `EventSource`는 `WebSocket`의 훌륭한 대안이 됩니다. `WebSocket`은 더 저수준이라 이런 기능을 직접 구현해야 하기 때문입니다.
 
-In many real-life applications, the power of `EventSource` is just enough.
+실제 애플리케이션 상당수엔 `EventSource`가 제공하는 능력만으로도 충분합니다.
 
-Supported in all modern browsers (not IE).
+`EventSource`는 IE를 제외한 모든 모던 브라우저에서 지원합니다.
 
-The syntax is:
+문법은 다음과 같습니다.
 
 ```js
 let source = new EventSource(url, [credentials]);
 ```
 
-The second argument has only one possible option: `{ withCredentials: true }`, it allows sending cross-origin credentials.
+두 번째 인수에 쓸 수 있는 옵션은 `{ withCredentials: true }` 하나뿐입니다. 이 옵션을 켜면 크로스 오리진 자격 증명을 보낼 수 있습니다.
 
-Overall cross-origin security is same as for `fetch` and other network methods.
+전반적인 크로스 오리진 보안 정책은 `fetch` 등 다른 네트워크 메서드와 같습니다.
 
-### Properties of an `EventSource` object
+### `EventSource` 객체의 프로퍼티
 
 `readyState`
-: The current connection state: either `EventSource.CONNECTING (=0)`, `EventSource.OPEN (=1)` or `EventSource.CLOSED (=2)`.
+: 현재 커넥션 상태. `EventSource.CONNECTING (=0)`, `EventSource.OPEN (=1)`, `EventSource.CLOSED (=2)` 중 하나
 
 `lastEventId`
-: The last received `id`. Upon reconnection the browser sends it in the header `Last-Event-ID`.
+: 마지막으로 받은 `id`. 재연결 시 브라우저는 이 값을 헤더 `Last-Event-ID`에 실어 보냄
 
-### Methods
+### 메서드
 
 `close()`
-: Closes the connection.
+: 커넥션을 닫음
 
-### Events
+### 이벤트
 
 `message`
-: Message received, the data is in `event.data`.
+: 메시지가 도착함. 데이터는 `event.data`에 저장됨
 
 `open`
-: The connection is established.
+: 커넥션이 맺어짐
 
 `error`
-: In case of an error, including both lost connection (will auto-reconnect) and fatal errors. We can check `readyState` to see if the reconnection is being attempted.
+: 에러가 발생함. 자동 재연결이 이어지는 커넥션 유실과 치명적인 에러 모두 해당됨. 재연결 시도 중인지는 `readyState`로 확인 가능
 
-The server may set a custom event name in `event:`. Such events should be handled using `addEventListener`, not `on<event>`.
+서버는 `event:`에 커스텀 이벤트 이름을 지정할 수 있습니다. 이런 이벤트는 `on<event>`가 아니라 `addEventListener`로 처리해야 합니다.
 
-### Server response format
+### 서버 응답 형식
 
-The server sends messages, delimited by `\n\n`.
+서버는 메시지를 `\n\n`으로 구분해 보냅니다.
 
-A message may have following fields:
+메시지엔 다음 필드가 들어갈 수 있습니다.
 
-- `data:` -- message body, a sequence of multiple `data` is interpreted as a single message, with `\n` between the parts.
-- `id:` -- renews `lastEventId`, sent in `Last-Event-ID` on reconnect.
-- `retry:` -- recommends a retry delay for reconnections in ms. There's no way to set it from JavaScript.
-- `event:` -- event name, must precede `data:`.
+- `data:` -- 메시지 본문. 연속된 `data`는 부분 사이에 `\n`이 있는 하나의 메시지로 해석됨
+- `id:` -- `lastEventId`를 갱신함. 재연결 시 `Last-Event-ID`로 전송됨
+- `retry:` -- 재연결 지연 시간(밀리초)을 권장함. 자바스크립트에서 설정하는 방법은 없음
+- `event:` -- 이벤트 이름. `data:`보다 앞에 와야 함
 
-A message may include one or more fields in any order, but `id:` usually goes the last.
+필드는 어떤 순서로든 하나 이상 넣을 수 있는데 관례상 `id:`를 마지막에 둡니다.
diff --git a/7-animation/2-css-animations/3-animate-circle/solution.view/index.html b/7-animation/2-css-animations/3-animate-circle/solution.view/index.html
index 88b1542545..43b927e8ab 100644
--- a/7-animation/2-css-animations/3-animate-circle/solution.view/index.html
+++ b/7-animation/2-css-animations/3-animate-circle/solution.view/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <style>
     .circle {
-      transition-property: width, height, margin-left, margin-top;
+      transition-property: width, height;
       transition-duration: 2s;
       position: fixed;
       transform: translateX(-50%) translateY(-50%);
diff --git a/7-animation/2-css-animations/3-animate-circle/source.view/index.html b/7-animation/2-css-animations/3-animate-circle/source.view/index.html
index a423280de0..e305f4cf61 100644
--- a/7-animation/2-css-animations/3-animate-circle/source.view/index.html
+++ b/7-animation/2-css-animations/3-animate-circle/source.view/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <style>
     .circle {
-      transition-property: width, height, margin-left, margin-top;
+      transition-property: width, height;
       transition-duration: 2s;
       position: fixed;
       transform: translateX(-50%) translateY(-50%);
diff --git a/7-animation/3-js-animation/1-animate-ball/solution.view/index.html b/7-animation/3-js-animation/1-animate-ball/solution.view/index.html
index 7e031e8d13..146033cf72 100644
--- a/7-animation/3-js-animation/1-animate-ball/solution.view/index.html
+++ b/7-animation/3-js-animation/1-animate-ball/solution.view/index.html
@@ -21,7 +21,7 @@
     }
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }
diff --git a/7-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html b/7-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html
index b246f422f0..f587ff607a 100644
--- a/7-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html
+++ b/7-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html
@@ -21,7 +21,7 @@
     }
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }
diff --git a/7-animation/3-js-animation/article.md b/7-animation/3-js-animation/article.md
index 0049543401..bb56244f44 100644
--- a/7-animation/3-js-animation/article.md
+++ b/7-animation/3-js-animation/article.md
@@ -159,7 +159,7 @@ Function `animate` accepts 3 parameters that essentially describes the animation
     }
     ```
 
-    It's graph:
+    Its graph:
     ![](linear.svg)
 
     That's just like `transition-timing-function: linear`. There are more interesting variants shown below.
@@ -283,7 +283,7 @@ The `bounce` function does the same, but in the reverse order: "bouncing" starts
 
 ```js
 function bounce(timeFraction) {
-  for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+  for (let a = 0, b = 1; 1; a += b, b /= 2) {
     if (timeFraction >= (7 - 4 * a) / 11) {
       return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
     }
diff --git a/7-animation/3-js-animation/bounce-easeinout.view/index.html b/7-animation/3-js-animation/bounce-easeinout.view/index.html
index 837c50db1c..aed3d9d081 100644
--- a/7-animation/3-js-animation/bounce-easeinout.view/index.html
+++ b/7-animation/3-js-animation/bounce-easeinout.view/index.html
@@ -26,7 +26,7 @@
 
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }
diff --git a/7-animation/3-js-animation/bounce-easeout.view/index.html b/7-animation/3-js-animation/bounce-easeout.view/index.html
index e52eae8deb..69dbb7ce08 100644
--- a/7-animation/3-js-animation/bounce-easeout.view/index.html
+++ b/7-animation/3-js-animation/bounce-easeout.view/index.html
@@ -22,7 +22,7 @@
     }
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }
diff --git a/7-animation/3-js-animation/bounce.view/index.html b/7-animation/3-js-animation/bounce.view/index.html
index 1be2580d98..3575ed8205 100644
--- a/7-animation/3-js-animation/bounce.view/index.html
+++ b/7-animation/3-js-animation/bounce.view/index.html
@@ -19,7 +19,7 @@
       animate({
         duration: 3000,
         timing: function bounce(timeFraction) {
-          for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+          for (let a = 0, b = 1; 1; a += b, b /= 2) {
             if (timeFraction >= (7 - 4 * a) / 11) {
               return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
             }
diff --git a/7-animation/3-js-animation/text.view/index.html b/7-animation/3-js-animation/text.view/index.html
index e404fe5c40..001b0ae94c 100644
--- a/7-animation/3-js-animation/text.view/index.html
+++ b/7-animation/3-js-animation/text.view/index.html
@@ -36,7 +36,7 @@
 
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }
diff --git a/8-web-components/2-custom-elements/article.md b/8-web-components/2-custom-elements/article.md
index 702ff90739..5a07cc6794 100644
--- a/8-web-components/2-custom-elements/article.md
+++ b/8-web-components/2-custom-elements/article.md
@@ -115,7 +115,7 @@ customElements.define("time-formatted", TimeFormatted); // (2)
 ></time-formatted>
 ```
 
-1. The class has only one method `connectedCallback()` -- the browser calls it when `<time-formatted>` element is added to page (or when HTML parser detects it), and it uses the built-in [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) data formatter, well-supported across the browsers, to show a nicely formatted time.
+1. The class has only one method `connectedCallback()` -- the browser calls it when `<time-formatted>` element is added to page (or when HTML parser detects it), and it uses the built-in [Intl.DateTimeFormat](mdn:/JavaScript/Reference/Global_Objects/DateTimeFormat) data formatter, well-supported across the browsers, to show a nicely formatted time.
 2. We need to register our new element by `customElements.define(tag, class)`.
 3. And then we can use it everywhere.
 
diff --git a/9-regular-expressions/04-regexp-anchors/article.md b/9-regular-expressions/04-regexp-anchors/article.md
index f0796d928f..edd221c0a0 100644
--- a/9-regular-expressions/04-regexp-anchors/article.md
+++ b/9-regular-expressions/04-regexp-anchors/article.md
@@ -16,7 +16,7 @@ alert( /^Mary/.test(str1) ); // true
 위와 유사하게 `pattern:snow$`를 사용해서 문자열이 `snow`로 끝나는지 검사할 수 있습니다.
 
 ```js run
-let str1 = "it's fleece was white as snow";
+let str1 = "its fleece was white as snow";
 alert( /snow$/.test(str1) ); // true
 ```
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d4dc77b04a..13c2093ff0 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -26,7 +26,7 @@ PR 전 본인의 작업물이 어떻게 사이트에 반영될지 확인하고 
 * 줄 바꿈과 단락은 '원문 그대로'를 유지합니다. 영어 원문 수정사항을 병합할 때 중요합니다. **번역 후 줄 수가 원문의 줄 수와 다른 경우는 PR 받지 않겠습니다.**
 * 공백(스페이스), 큰따옴표("), 작은따옴표('), 대시(-), 백틱(\`)을 비롯한 모든 특수문자는 수정하시면 안 됩니다. **자연어만 수정(알파벳을 한글로 수정)해주세요!** [로컬 서버 세팅 방법](https://github.com/javascript-tutorial/ko.javascript.info/wiki/%EB%A1%9C%EC%BB%AC-%EC%84%9C%EB%B2%84-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0)을 참고하셔서 내가 작성한 코드(번역물)가 어떻게 반영될지 확인 후 PR 보내주세요.
 * 소스 코드 내 공백 등은 원문 병합 시 충돌을 예방하기 위해 되도록 수정하지 않습니다. 자연어(주석)만 번역하도록 합니다.
-* [번역 모범 사례](https://github.com/javascript-tutorial/ko.javascript.info/wiki/%EB%B2%88%EC%97%AD-%EB%AA%A8%EB%B2%94-%EC%82%AC%EB%A1%80)와 [KIGO 번역 스타일가이드](https://www.facebook.com/groups/kigostyleguide/permalink/930262127127479/), [자주 하는 실수](https://docs.google.com/spreadsheets/d/1fYaEI8vz26N3R2VaxrlNnk9fMQ8zIy4RpvjRp4jZd0Q/edit#gid=579221672)를 읽어보시고 작업에 참여해주세요.
+* [번역 모범 사례](https://github.com/javascript-tutorial/ko.javascript.info/wiki/%EB%B2%88%EC%97%AD-%EB%AA%A8%EB%B2%94-%EC%82%AC%EB%A1%80)와 [KIGO 번역 스타일가이드](https://drive.google.com/file/d/1p6g48TK6GwHDq-88lqTTYgptjpYNRT5d/view?usp=drive_link), [자주 하는 실수](https://docs.google.com/spreadsheets/d/1fYaEI8vz26N3R2VaxrlNnk9fMQ8zIy4RpvjRp4jZd0Q/edit#gid=579221672)를 읽어보시고 작업에 참여해주세요.
 * 주제에서 새롭게 등장하는 키워드는 한-영 병기`(예: 프로퍼티(property), 브라우저 객체 모델(Browser Object Model, BOM))`합니다.
 * [합의된 번역어](https://docs.google.com/spreadsheets/d/1fYaEI8vz26N3R2VaxrlNnk9fMQ8zIy4RpvjRp4jZd0Q/edit#gid=1401860741)로 번역합니다. 공동작업에선 번역어 통일이 매우 중요합니다.
 * 에러 내용은 번역하지 않습니다.
@@ -39,7 +39,7 @@ PR 전 본인의 작업물이 어떻게 사이트에 반영될지 확인하고 
   * 인사이드 자바스크립트([링크](https://www.kyobobook.co.kr/product/detailViewKor.laf?mallGb=KOR&ejkGb=KOR&barcode=9788968480652))
   * 러닝 자바스크립트([링크](https://www.kyobobook.co.kr/product/detailViewKor.laf?mallGb=KOR&ejkGb=KOR&barcode=9788968483387))
   * 초보자를 위한 JavaScript 200제([링크](http://www.yes24.com/Product/Goods/70746749?Acode=101))
-  * 국립국어원 외래어 표기법 용례 찾기([링크](http://www.korean.go.kr/front/foreignSpell/foreignSpellList.do?mn_id=96))
+  * 국립국어원 외래어 표기법 용례 찾기([링크](https://korean.go.kr/kornorms/main/main.do))
   * 한글라이즈([링크](https://hangulize.org/))
 * 원문에는 없으나 독자의 이해를 돕기 위해 번역자가 추가하는 내용은 문장 중간이나 끝에 `(.....부가설명..... - 옮긴이)` 형태로 부가설명을 추가하도록 합니다.
 
diff --git a/README.md b/README.md
index bd784db697..981d426406 100755
--- a/README.md
+++ b/README.md
@@ -3,9 +3,8 @@
 본 저장소에선 <https://javascript.info>의 내용을 영-한 번역하여 한국어가 모국어인 개발자가 양질의 웹 개발 학습자료를 접할 수 있도록 하는데 목표를 두고 있습니다. 자세한 소개는 [링크](https://medium.com/@violetboralee/%EB%AA%A8%EB%8D%98-javascript-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-4338630fef35)를 참고해주세요.
 
 ### 의사소통
-- [카카오톡 오픈채팅방](https://open.kakao.com/o/gSBnoLab)
-- [![Gitter](https://badges.gitter.im/javascript-tutorial/ko.javascript.info.svg)](https://gitter.im/javascript-tutorial/ko.javascript.info?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-- **양방향 소통**은 Gitter를 사용합니다. 카카오톡 오픈채팅방은 주요 공지사항을 **일방향**으로 전달하는 용도로 사용합니다. 
+- [모던웹개발연구소 디스코드](https://discord.gg/ZJ6gDAS4tk)의 '모던JAVASCRIPT튜토리얼' 카테고리 내 채널로 오시면 다양한 채널이 개설되어 있습니다. `학습-qna`, `메인테이너-qna` 채널 등 목적에 맞는 채널에 오셔서 소통해 주세요.
+
 
 ### 진행 상황
 번역이 진행되고 있는 언어 목록과 언어별 번역률은 <https://javascript.info/translate>에서 확인할 수 있습니다.
@@ -13,30 +12,42 @@
 ## 참여하기
 본 저장소에 기여하고 싶다면 [CONTRIBUTING.md](https://github.com/javascript-tutorial/ko.javascript.info/blob/master/CONTRIBUTING.md)를 참고해 주세요.
 
+### 번역 스킬 사용(권장)
+
+앞으로 번역은 **[tech-translation-ko 스킬](https://github.com/Violet-Bora-Lee/tech-translation-ko)** 을 사용해 진행합니다. 이 저장소의 번역 관행(번역 커밋 전수 분석에서 추출한 문장 패턴, 용어집, 서식 규칙, 검수 체크리스트)을 스킬 하나로 옮겨 두었습니다. Claude Code 같은 AI 코딩 에이전트에 스킬을 설치하면 번역 → 구조·용어 린트(`check_translation.py`) → 셀프 리뷰 → 맞춤법 검사 순서의 워크플로우가 적용됩니다. 사람이 직접 번역할 때도 스킬 저장소의 `references/` 문서를 가이드로 활용할 수 있습니다.
+
+### 프로젝트 정책
+
+스킬 사용 여부와 관계없이 지켜야 하는 PR 수용 기준입니다.
+
 * 경어체를 사용합니다.
-* PR 전 [맞춤법 검사기](http://speller.cs.pusan.ac.kr/)를 사용해 틀린 부분을 교정합니다. **검사기를 돌리지 않았다고 판단되는 커밋은 PR 받지 않겠습니다.** 리뷰자 역시 맞춤법 검사기를 사용해, 번역자가 맞춤법을 지켜 번역했는지 확인합니다.
-* 줄 바꿈과 단락은 "원문 그대로"를 유지합니다. 영어 원문 수정사항을 병합할 때 중요합니다. **번역 후 줄 수가 원문의 줄 수와 다른 경우는 PR 받지 않겠습니다.**
+* PR 전 [바른한글 맞춤법 검사기](https://nara-speller.co.kr/speller/)(구 부산대 검사기)를 사용해 틀린 부분을 교정합니다. **검사기를 돌리지 않았다고 판단되는 커밋은 PR 받지 않겠습니다.** 리뷰자 역시 맞춤법 검사기를 사용해, 번역자가 맞춤법을 지켜 번역했는지 확인합니다. 검사기는 대학 연구실에서 무료로 운영하므로 자동화 파이프라인엔 넣지 않고 문서당 1회 수동으로 실행합니다.
+* 줄 바꿈과 단락은 '원문 그대로'를 유지합니다. 영어 원문 수정사항을 병합할 때 중요합니다. **번역 후 줄 수가 원문의 줄 수와 다른 경우는 PR 받지 않겠습니다.**
 * 공백(스페이스), 큰따옴표("), 작은따옴표('), 대시(-), 백틱(\`)을 비롯한 모든 특수문자는 수정하시면 안 됩니다. **자연어만 수정(알파벳을 한글로 수정)해주세요!** [로컬 서버 세팅 방법](https://github.com/javascript-tutorial/ko.javascript.info/wiki/%EB%A1%9C%EC%BB%AC-%EC%84%9C%EB%B2%84-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0)을 참고하셔서 내가 작성한 코드(번역물)가 어떻게 반영될지 확인 후 PR 보내주세요.
 * 소스 코드 내 공백 등은 원문 병합 시 충돌을 예방하기 위해 되도록 수정하지 않습니다. 자연어(주석)만 번역하도록 합니다.
-* [번역 모범 사례](https://github.com/javascript-tutorial/ko.javascript.info/wiki/%EB%B2%88%EC%97%AD-%EB%AA%A8%EB%B2%94-%EC%82%AC%EB%A1%80)와 [KIGO 번역 스타일가이드](https://www.facebook.com/groups/kigostyleguide/permalink/930262127127479/), [자주 하는 실수](https://docs.google.com/spreadsheets/d/1fYaEI8vz26N3R2VaxrlNnk9fMQ8zIy4RpvjRp4jZd0Q/edit#gid=579221672)를 읽어보시고 작업에 참여해주세요.
-* 주제에서 새롭게 등장하는 키워드는 한-영 병기`(예: 프로퍼티(property), 브라우저 객체 모델(Browser Object Model, BOM))`합니다.
-* [합의된 번역어](https://docs.google.com/spreadsheets/d/1fYaEI8vz26N3R2VaxrlNnk9fMQ8zIy4RpvjRp4jZd0Q/edit#gid=1401860741)로 번역합니다. 공동작업에선 번역어 통일이 매우 중요합니다.
-* 에러 내용은 번역하지 않습니다.
-  * 예시: let rabbit = new Rabbit("White Rabbit"); // Error: this is not defined에서 주석은 번역하지 않습니다.
-* 등록되지 않은 새로운 용어는 [용어집](https://docs.google.com/spreadsheets/u/1/d/1fYaEI8vz26N3R2VaxrlNnk9fMQ8zIy4RpvjRp4jZd0Q/edit#gid=1401860741)에 용어를 등록한 후 번역합니다.
-* 번역어는 출판된 도서, 국립국어원의 외래어 표기법 용례, 한글라이즈 사이트 등을 기준으로 선정합니다. 주 참고자료는 다음과 같습니다.
-  * 마이크로소프트 Language Portal의 Terminology Search 페이지([링크](https://www.microsoft.com/en-us/language/Search))
-  * 프론트엔드 개발자를 위한 자바스크립트 프로그래밍([링크](https://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9788966260768&orderClick=LIK&Kc=))
-  * 인사이드 자바스크립트([링크](https://www.kyobobook.co.kr/product/detailViewKor.laf?mallGb=KOR&ejkGb=KOR&barcode=9788968480652))
-  * 러닝 자바스크립트([링크](https://www.kyobobook.co.kr/product/detailViewKor.laf?mallGb=KOR&ejkGb=KOR&barcode=9788968483387))
-  * 초보자를 위한 JavaScript 200제([링크](http://www.yes24.com/Product/Goods/70746749?Acode=101))
-  * 국립국어원 외래어 표기법 용례 찾기([링크](http://www.korean.go.kr/front/foreignSpell/foreignSpellList.do?mn_id=96))
-  * 한글라이즈([링크](https://hangulize.org/))
-* 원문에는 없으나 독자의 이해를 돕기 위해 번역자가 추가하는 내용은 문장 중간이나 끝에 `(.....부가설명..... - 옮긴이)` 형태로 부가설명을 추가하도록 합니다.
-* '적∙의를 보이는 것∙들'에 대한 내용은 될 수 있으면 사용하지 않습니다.([링크](https://m.blog.naver.com/ojhnews/220840570533))
+* 등록되지 않은 새로운 용어는 [용어집](https://docs.google.com/spreadsheets/u/1/d/1fYaEI8vz26N3R2VaxrlNnk9fMQ8zIy4RpvjRp4jZd0Q/edit#gid=1401860741)에 용어를 등록한 후 번역합니다. 공동작업에선 번역어 통일이 매우 중요합니다.
+
+위 기준 중 줄 수·특수문자·용어집 위반은 스킬의 린터가 자동으로 검사합니다.
 
 잘못된 번역, 오타 및 기타 개선사항은 [이슈](https://github.com/javascript-tutorial/ko.javascript.info/issues)로 등록 부탁드립니다.
 
+### (deprecated) 수기 번역 권고사항
+
+아래 권고사항은 tech-translation-ko 스킬에 통합되어 더는 개별 항목으로 관리하지 않습니다. 스킬을 사용하면 번역 과정에 자동으로 적용되고, 각 항목의 최신 내용은 스킬 저장소의 `references/` 문서에서 확인할 수 있습니다.
+
+<details>
+<summary>스킬로 대체된 항목 펼쳐보기</summary>
+
+* ~~[번역 모범 사례](https://github.com/javascript-tutorial/ko.javascript.info/wiki/%EB%B2%88%EC%97%AD-%EB%AA%A8%EB%B2%94-%EC%82%AC%EB%A1%80)와 [KIGO 번역 스타일가이드](https://drive.google.com/file/d/1p6g48TK6GwHDq-88lqTTYgptjpYNRT5d/view?usp=drive_link), [자주 하는 실수](https://docs.google.com/spreadsheets/d/1fYaEI8vz26N3R2VaxrlNnk9fMQ8zIy4RpvjRp4jZd0Q/edit#gid=579221672)를 읽어보시고 작업에 참여해주세요.~~ → 스킬 `references/principles.md`, `formatting.md`, `kigo-conventions.md`에 통합
+* ~~주제에서 새롭게 등장하는 키워드는 한-영 병기`(예: 프로퍼티(property), 브라우저 객체 모델(Browser Object Model, BOM))`합니다.~~ → 스킬 `references/terminology.md`(병기는 본문 첫 등장에서 한 번, 과잉 병기 금지 규칙 포함)
+* ~~[합의된 번역어](https://docs.google.com/spreadsheets/d/1fYaEI8vz26N3R2VaxrlNnk9fMQ8zIy4RpvjRp4jZd0Q/edit#gid=1401860741)로 번역합니다.~~ → 스킬 용어집(`glossary.tsv`, 768개 표제어)과 `glossary_lookup.py` 조회 도구로 통합
+* ~~에러 내용은 번역하지 않습니다.~~ → 스킬 `references/formatting.md`(플랫폼이 생성하는 에러 출력은 유지, 예제가 정의하는 에러 문자열은 번역하는 경계 규칙 포함)
+* ~~번역어는 출판된 도서, 국립국어원의 외래어 표기법 용례, 한글라이즈 사이트 등을 기준으로 선정합니다.~~ → 스킬 `references/terminology.md`(마이크로소프트 Language Portal, 국립국어원 용례, 참고 도서 목록 포함)
+* ~~원문에는 없으나 독자의 이해를 돕기 위해 번역자가 추가하는 내용은 `(.....부가설명..... - 옮긴이)` 형태로 부가설명을 추가하도록 합니다.~~ → 스킬 `references/sentence-patterns.md`(옮긴이 주 형식과 사용 기준)
+* ~~'적∙의를 보이는 것∙들'에 대한 내용은 될 수 있으면 사용하지 않습니다.([링크](https://m.blog.naver.com/ojhnews/220840570533))~~ → 스킬 `references/principles.md`(번역투 회피 규칙)와 린터 경고로 통합
+
+</details>
+
 ## 기여자
 튜토리얼 원문에 기여하신 분들은 <https://javascript.info/about#contributors>에서 확인할 수 있습니다. 한국어 번역에 기여해주신 분들은 <https://ko.javascript.info/about#contributors>에서 확인할 수 있습니다.