Please Korean Translation All done to README.md (#126)

* Korean Translation: Fix typos, Finish visible to README.md * Korean Translation: Fix typos, Finish all translations
2018-05-14 13:12:47 +09:00 · 2018-05-14 13:12:47 +09:00 · 7eda319967
parent 84d44f732a
commit 7eda319967
5 changed files with 160 additions and 164 deletions
--- a/README.md
+++ b/README.md
@ -33,9 +33,6 @@ You might be interested in the [Tech Interview Handbook](https://github.com/yang
 * [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
 * [Tagalog](/Translations/Tagalog/README.md)
 * [Japanese (日本語)](/Translations/Japanese/README.md)
-
-**In Progress**
-
 * [Korean](/Translations/Korean/README.md)

 ## Related
--- a/Translations/Korean/README.md
+++ b/Translations/Korean/README.md
@ -10,7 +10,7 @@
    </em>
  </p>
  <p>
-    <em>번역: <a href="https://github.com/ysm0622">@양성민</a>, <a href="https://github.com/devjang">@장현석</a>, <a href="https://github.com/tuhbm">@김태균</a>
+    <em>번역: <a href="https://github.com/ysm0622">@양성민</a>, <a href="https://github.com/devjang">@장현석</a>, <a href="https://github.com/tuhbm">@김태균</a>, <a href="https://github.com/octave08">@황규정</a>
    </em>
  </p>
 </div>
@ -37,9 +37,6 @@
 * [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
 * [Tagalog](/Translations/Tagalog/README.md)
 * [Japanese (日本語)](/Translations/Japanese/README.md)
-
-**제작중**
-
 * [Korean (한국어)](/Translations/Korean/README.md)

 ## 관련 정보
--- a/Translations/Korean/questions/css-questions.md
+++ b/Translations/Korean/questions/css-questions.md
@ -26,10 +26,10 @@
 * [`inline` 과 `inline-block` 의 차이점은 무엇입니까?](#inline-과-inline-block-의-차이점은-무엇입니까)
 * [`relative`, `fixed`, `absolute` 와 `static` 요소의 차이점은 무엇입니까?](#relative-fixed-absolute-와-static-요소의-차이점은-무엇입니까)
 * [로컬 또는 프로덕션 환경에서 사용했던 기존 CSS 프레임워크는 무엇입니까? 어떻게 그들을 바꾸거나 개선할 수 있을까요?](#로컬-또는-프로덕션-환경에서-사용했던-기존-css-프레임워크는-무엇입니까-어떻게-그들을-바꾸거나-개선할-수-있을까요)
-* [새로운 CSS Flexbox 또는 그리드 스펙을 사용해본적이 있나요?](#새로운-css-flexbox-또는-그리드-스펙을-사용해본적이-있나요)
+* [새로운 CSS Flexbox 또는 그리드 스펙을 사용해본 적이 있나요?](#새로운-css-flexbox-또는-그리드-스펙을-사용해본-적이-있나요)
 * [반응형 웹사이트를 코딩하는 것과 모바일 우선 전략을 사용하는 것 사이의 차이점을 설명하시오.](#반응형-웹사이트를-코딩하는-것과-모바일-우선-전략을-사용하는-것-사이의-차이점을-설명하시오)
 * [반응형 디자인은 적응형 디자인과 어떻게 다른가요?](#반응형-디자인은-적응형-디자인과-어떻게-다른가요)
-* [레티나 그래픽으로 작업 해본적이 있습니까? 그렇다면, 언제 그리고 어떤 기술을 사용하였습니까?](#레티나-그래픽으로-작업-해본적이-있습니까-그렇다면-언제-그리고-어떤-기술을-사용하였습니까)
+* [레티나 그래픽으로 작업 해본 적이 있습니까? 그렇다면, 언제 그리고 어떤 기술을 사용하였습니까?](#레티나-그래픽으로-작업-해본-적이-있습니까-그렇다면-언제-그리고-어떤-기술을-사용하였습니까)
 * [`absolute` 포지셔닝 대신 `translate()`를 사용하는 이유가 무엇입니까? 또는 그 반대의 경우에 대해서는 어떻게 생각하십니까?, 그 이유는 무엇입니까?](#absolute-포지셔닝-대신-translate를-사용하는-이유가-무엇입니까-또는-그-반대의-경우에-대해서는-어떻게-생각하십니까-그-이유는-무엇입니까)

 ## CSS 질문
@ -59,7 +59,7 @@ Pull Request 를 통한 제안 및 수정 요청을 환영합니다.

 ### "Resetting"과 "Normalizing" CSS 의 차이점은 무엇입니까? 당신은 무엇을 선택할 것이며, 그 이유는 무엇입니까?

-* **Resetting** - Resetting 은 요소의 모든 기본 브라우저 스타일을 제거하기 위한 것입니다. 예 : `margin`, `padding`s,`font-size`는 같은 값으로 재설정됩니다. 일반적인 타이포그래피 요소에 대한 스타일을 재 선언해야합니다.
+* **Resetting** - Resetting 은 요소의 모든 기본 브라우저 스타일을 제거하기 위한 것입니다. 예 : `margin`, `padding`,`font-size`는 같은 값으로 재설정됩니다. 일반적인 타이포그래피 요소에 대한 스타일을 재 선언해야합니다.

 * **Normalizing** - Normalizing 는 모든 것을 "정리"하는 것이 아니라 유용한 기본 스타일을 보존합니다. 또한 일반적인 브라우저 종속성에 대한 버그를 수정합니다.

@ -75,7 +75,7 @@ Float 은 CSS 위치 지정 속성입니다. Float 된 요소는 페이지의

 CSS `clear` 속성은`left`/`right`/`both` float 엘리먼트 아래에 위치하도록 사용될 수 있습니다.

-부모 요소에 float 된 요소만 있으면 그 높이가 무효로 됩니다. 컨테이너의 플로팅 된 요소 다음에 있지만 컨테이너가 닫히기 전에 float 를 clear 하면 해결할 수 있습니다.
+부모 요소에 float 된 요소만 있으면 그 높이는 무효가 됩니다. 컨테이너의 플로팅된 요소 다음에 있지만 컨테이너가 닫히기 전에 float 를 clear 하면 해결할 수 있습니다.

 `.clearfix` 핵은 영리한 CSS 의사 선택자 (`: after`)를 사용하여 실수를 제거합니다. 상위 클래스에 overflow 를 설정하는 대신 추가 클래스 `clearfix`를 적용합니다. 그런 다음이 CSS 를 적용하십시오:

@ -89,7 +89,7 @@ CSS `clear` 속성은`left`/`right`/`both` float 엘리먼트 아래에 위치
 }
 ```

-양자택일로, 부모 요소에 `overflow : auto` 또는 `overflow : hidden` 속성을 주면 자식 요소 내부에 새로운 블록 형식화 문맥을 설정하고 자식을 포함하도록 확장합니다.
+양자택일로, 부모 요소에 `overflow : auto` 또는 `overflow : hidden` 속성을 주면 자식 요소 내부에 새로운 블록 포맷 컨텍스트을 설정하고 자식을 포함하도록 확장합니다.

 ###### 참고자료

@ -99,7 +99,7 @@ CSS `clear` 속성은`left`/`right`/`both` float 엘리먼트 아래에 위치

 CSS 의 `z-index`속성은 요소의 겹치는 요소의 순서를 제어합니다. `z-index`는 `static`이 아닌 `position` 값을 갖는 요소에만 영향을 줍니다.

-`z-index` 값이 없으면 DOM 에 나타나는 순서대로 요소가 쌓이게 됩니다 (동일한 레이어에서 가장 낮은 레이어의 맨 위에 나타납니다). 정적이지 않은(non-static) 위치 지정 요소 (및 해당 하위 요소)는 HTML 레이어 구조와 상관없이 기본 정적 위치 지정을 사용하여 항상 요소 위에 나타납니다.
+`z-index` 값이 없으면 DOM에 나타나는 순서대로 요소가 쌓이게 됩니다 (동일한 레이어에서 가장 낮은 레이어의 맨 위에 나타납니다). 정적이지 않은(non-static) 위치 지정 요소 (및 해당 하위 요소)는 HTML 레이어 구조와 상관없이 기본 정적 위치 지정을 사용하여 항상 요소 위에 나타납니다.

 쌓임 맥락(stacking context)은 레이어 집합을 포함하는 요소입니다. 쌓임 맥락(stacking context) 지역 내에서 자식의 `z-index` 값은 문서 루트가 아닌 해당 요소를 기준으로 설정됩니다. 해당 컨텍스트 외부의 레이어 — 즉 로컬 쌓임 맥락의 형제 요소 — 그 사이의 레이어에 어울릴 수 없습니다. 요소 B 가 요소 A 의 상단에 위치하는 경우, 요소 A 의 하위 요소 C 는 요소 C 가 요소 B 보다 `z-index`가 더 높은 경우에도 요소 B 보다 높을 수 없습니다.

@ -113,9 +113,9 @@ CSS 의 `z-index`속성은 요소의 겹치는 요소의 순서를 제어합니

 ### 블록 서식 문맥(BFC)과 작동 방식을 설명하세요.

-BFC(블록 서식 문맥)는 블록 박스가 배치된 웹 페이지의 시각적 CSS 렌더링의 일부입니다. Floats, absolutely positioned elements, `inline-blocks`, `table-cells`, `table-caption`s, and elements with `overflow` other than `visible` (그 값이 viewport 에 전파되었을 때는 제외) establish new block formatting contexts.
+BFC(블록 서식 문맥)는 블록 박스가 배치된 웹 페이지의 시각적 CSS 렌더링의 일부입니다. Floats, absolutely로 배치된 요소,`inline-blocks`, `table-cells`, `table-caption` 그리고 `visible`(그 값이 viewport 에 전파되었을 때는 제외) 이외의 `overflow`가 있는 요소들이 새로운 블록 포맷 컨텍스트를 만듭니다.

-BFC 는 다음 조건 중 하나 이상을 충족시키는 HTML 박스입니다:
+BFC는 다음 조건 중 하나 이상을 충족시키는 HTML 박스입니다:

 * `float`의 값은 `none`이 아닙니다.
 * `position`의 값은 `static`도 아니고 `relative`도 아닙니다.
@ -144,7 +144,7 @@ BFC 상쇄(collapse)시 인접한 블록 레벨 박스 사이의 Vertical 마진
 CSS 스프라이트는 여러 이미지를 하나의 큰 이미지로 결합합니다. 일반적으로 아이콘에 사용되는 기술(Gmail 에서 사용)입니다. 구현방법:

 1.  스프라이트 생성기를 사용하여 여러 이미지를 하나로 묶어 적절한 CSS 를 생성합니다.
-2.  각 이미지는`background-image`,`background-position` 및`background-size` 속성이 정의 된 해당 CSS 클래스를 갖습니다.
+2.  각 이미지는 `background-image`,`background-position` 및`background-size` 속성이 정의 된 해당 CSS 클래스를 갖습니다.
 3.  해당 이미지를 사용하려면 요소에 해당 클래스를 추가하십시오.

 **장점:**
@ -182,7 +182,7 @@ CSS 스프라이트는 여러 이미지를 하나의 큰 이미지로 결합합
 * 메타 데이터. 예를 들어, Schema.org, RDF 및 JSON-LD 를 사용합니다.
 * WAI-ARIA. 웹 페이지의 액세스 가능성을 높이는 방법을 지정하는 W3C 기술 사양입니다.

-WAI-ARIA 가 이상적인 해결책이라 하더라도, 저는 `absolute` 접근법을 택할 것입니다. 대부분요소에 적용되고, 쉽고 주의해야할 것이 가장 적습니다.
+WAI-ARIA 가 이상적인 해결책이라 하더라도 저는 `absolute` 접근법을 택할 것입니다. 대부분의 요소에서 작동하며 간단한 기술입니다.

 ###### 참고자료

@ -204,13 +204,14 @@ WAI-ARIA 가 이상적인 해결책이라 하더라도, 저는 `absolute` 접근

 ### screen 이 아닌 @media 속성의 예를 들려 줄 수 있습니까?

-예, @ media 속성을 screen 포함하여 4 가지 종류가 있습니다. :
+예, @ media 속성을 screen 포함하여 4 가지 종류가 있습니다 :

-* all - for all media type devices
-* print - for printers
-* speech - for screenreaders that "reads"the page out loud
-* screen - for computer screens, tablets, smart-phones etc.
-* print 미디어 유형의 사용 예제 :
+* all - 모든 미디어 기기 장치
+* print - 프린터
+* speech - 화면을 크게 읽는 스크린리더
+* screen - 컴퓨터 스크린, 태블릿, 스마트 폰 등
+
+`print` 미디어의 사용 예제 :

 ```css
@media print {
@ -226,7 +227,7 @@ WAI-ARIA 가 이상적인 해결책이라 하더라도, 저는 `absolute` 접근

 [BEM (Block Element Modifier)](https://bem.info/)의 방법론에서는 모두 단일 클래스를 갖고, 계층구조가 필요한 곳에서는 클래스의 이름이 확장되기를 권장합니다. 따라서 선택자를 쉽고 효율적으로 재정의 할 수 있습니다.

-어떠한 CSS 속성이 리플로우또는 합성되는 것을 주의 하십시오. 가능하다면 레이아웃을 변경하는 스타일링(리플로우를 작동시키는 스타일)은 작성하지 마십시오.g styles that change the layout (trigger reflow) where possible.
+어떠한 CSS 속성이 리플로우, 리페인트 그리고 합성을 트리거 하는지 알아 두십시오. 가능하면 레이아웃(트리거 리플로우)를 변경하는 스타일은 작성하지 마십시오.

 ###### 참고 자료

@ -249,15 +250,15 @@ WAI-ARIA 가 이상적인 해결책이라 하더라도, 저는 `absolute` 접근

 ### 사용했던 CSS 전처리기에 대해 좋아하는 것과 싫어하는 것을 설명하십시오.

-**좋은것:**
+**좋은 것:**

-* 대부분 위에서 언급 한 장점이 있습니다..
+* 대부분 위에서 언급한 장점이 있습니다.
 * Less 는 자바 스크립트로 작성되었으며 Node 와 잘 작동합니다.

-**싫은것:**
+**싫은 것:**

-* 나는 C++로 작성된 LibSass 를 바인딩인 'node-sass'를 통해 Sass 를 사용합니다. 노드 버전이 바뀔 때 자주 다시 컴파일해야합니다.
-* Less 에서는 변수 이름의 접두어가`@`로되어 있으며, `@media`, `@import` 및 `@font-face` 규칙과 같은 고유 CSS 키워드와 혼동 될 수 있습니다.
+* 저는 C++로 작성된 LibSass 를 바인딩인 'node-sass'를 통해 Sass 를 사용합니다. 노드 버전이 바뀔 때 자주 다시 컴파일해야합니다.
+* Less 에서는 변수 이름의 접두어가 `@`로 되어 있으며 `@media`, `@import` 및 `@font-face` 규칙과 같은 고유 CSS 키워드와 혼동될 수 있습니다.

 ### 비표준 글꼴을 사용하는 웹 디자인 디자인을 구현하는 방법은 무엇입니까?

@ -265,9 +266,9 @@ WAI-ARIA 가 이상적인 해결책이라 하더라도, 저는 `absolute` 접근

 ### CSS 셀렉터에 일치하는 요소가 어떤 것인지 브라우저가 어떻게 결정되는지를 설명하시오.

-이 부분은 위의 효율적인 CSS 작성에 대한 것입니다. 브라우저는 셀렉터를 오른쪽(선택자)에서 왼쪽으로 일치시킵니다. 브라우저는 선택자에 따라 DOM 의 요소를 필터링하고 부모 요소를 검사하여 일치를 판정합니다. 선택자 체인의 길이가 짧을수록, 브라우저가 해당 요소가 선택기에 일치하는지 여부를 판단 할 수 있습니다.
+이 부분은 위의 효율적인 CSS 작성에 대한 것입니다. 브라우저는 셀렉터를 오른쪽(선택자)에서 왼쪽으로 일치시킵니다. 브라우저는 선택자에 따라 DOM 의 요소를 필터링하고 부모 요소를 검사하여 일치를 판정합니다. 선택자 체인의 길이가 짧을수록, 브라우저가 해당 요소가 선택기에 일치하는지 여부를 판단할 수 있습니다.

-예를 들어,이 셀렉터 `p span`는 브라우저는 먼저 모든 `<span>`요소를 찾아 그 부모의 루트까지 모두 통과하여 `<p>`요소를 찾습니다. 특정한 `<span>`의 경우 `<p>`를 찾는 즉시 `<span>`이 일치하는 것을 알고 있으며, 그에 따라 매칭 중지합니다.
+예를 들어, 이 셀렉터 `p span`는 브라우저는 먼저 모든 `<span>`요소를 찾아 그 부모의 루트까지 모두 통과하여 `<p>`요소를 찾습니다. 특정한 `<span>`의 경우 `<p>`를 찾는 즉시 `<span>`이 일치하는 것을 알고 있으며, 그에 따라 매칭 중지합니다.

 ###### 참고자료

@ -275,7 +276,7 @@ WAI-ARIA 가 이상적인 해결책이라 하더라도, 저는 `absolute` 접근

 ### Pseudo-elements 에 대해 설명하고 그 요소가 무엇을 위해 사용되는지 설명하시오.

-CSS Pseudo-element 는 Selector 에 추가 된 키워드로, 선택한 요소의 특정한 부분을 스타일링 할 수 있습니다. 마크업을 수정하지 않고 (`:before`, `:after`) 텍스트 데코레이션을 위해 사용하거나 (`:first-line`, `:first-letter`) 또는 마크 업에 요소를 추가할 수 있습니다. (`content: ...` 와 결합)
+CSS Pseudo-element 는 Selector 에 추가된 키워드로, 선택한 요소의 특정한 부분을 스타일링 할 수 있습니다. 마크업을 수정하지 않고 (`:before`, `:after`) 텍스트 데코레이션을 위해 사용하거나 (`:first-line`, `:first-letter`) 또는 마크 업에 요소를 추가할 수 있습니다. (`content: ...` 와 결합)

 * `:first-line` 과 `:first-letter` 는 텍스트를 데코레이션하는데 사용될 수 있습니다.
 * 위와 같이 `.clearfix` 에 사용되어 `clear: both` 로 영역을 차지하지 않는 요소를 추가합니다.
@ -331,9 +332,7 @@ TODO
 | 위치                             | 새 줄에서 시작하고 그 옆에 HTML 요소를 허용하지 않습니다 (`float`을 추가 할 때를 제외하고). | 다른 콘텐츠와 함께 흐르고 다른 요소는 옆에 있는 것을 허용합니다. | F 다른 콘텐츠와 함께 흐르고 다른 요소는 옆에 있는 것을 허용합니다.                                                                                                                |
 | `width`, `height` 지정 가능 여부 | 가능                                                                                        | 가능                                                             | 불가능. 설정되면 무시됩니다.                                                                                                                                                      |
 | `vertical-align` 정렬 가능 여부  | 불가능                                                                                      | 불가능                                                           | 불가능                                                                                                                                                                            |
-| margin 및 padding                | 모든방향에서 가능.                                                                          | 모든방향에서 가능.                                               | 수평방향만 가능. 세로방향을 지정하면 레이아웃에 영향을 주지 않습니다. `border` 와 `padding` 이 콘텐츠 주위에 시각적으로 나타나는 경우에도 수직영역은 `line-height` 에 의존합니다. |
-
-Becomes like a `block` element where you can set vertical margins and paddings.
+| margin 및 padding                | 모든 방향에서 가능.                                                                          | 모든 방향에서 가능.                                               | 수평방향만 가능. 세로방향을 지정하면 레이아웃에 영향을 주지 않습니다. `border` 와 `padding` 이 콘텐츠 주위에 시각적으로 나타나는 경우에도 수직영역은 `line-height` 에 의존합니다. | 
 | Float | - | - | 수직 margin 과 padding 을 설정할 수 있는 `block` 엘리먼트와 같습니다. |

 ### `relative`, `fixed`, `absolute` 와 `static` 요소의 차이점은 무엇입니까?
@ -352,13 +351,13 @@ Becomes like a `block` element where you can set vertical margins and paddings.

 ### 로컬 또는 프로덕션 환경에서 사용했던 기존 CSS 프레임워크는 무엇입니까? 어떻게 그들을 바꾸거나 개선할 수 있을까요?

-* **Bootstrap** - 느린 릴리스 주기. 부트스트랩 4 는 거의 2년동안 알파 상태였습니다. 널리 사용되는 것처럼 Spinner 버튼 컴포넌트를 추가하세요.
-* **Semantic UI** - 소스 코드 구조는 테마 사용자 정의를 이해하기 어렵게 만듭니다. 틀에 얽매이지 않는 테마 시스템으로 사용자 정의하기가 어렵습니다. 공급 업체 라이브러리 내의 하드 코드 된 구성 경로. 부트 스트랩과 달리 변수 오버라이드에 대해s 잘 설계되지 않았습니다.
+* **Bootstrap** - 느린 릴리스 주기. 부트스트랩 4 는 거의 2년 동안 알파 상태였습니다. 널리 사용되는 것처럼 Spinner 버튼 컴포넌트를 추가하세요.
+* **Semantic UI** - 소스 코드 구조는 테마 사용자 정의를 이해하기 어렵게 만듭니다. 틀에 얽매이지 않는 테마 시스템으로 사용자 정의하기가 어렵습니다. 공급 업체 라이브러리내의 하드 코딩된 구성 경로. 부트스트랩과 달리 변수 오버라이드에 대해 잘 설계되지 않았습니다.
 * **Bulma** - 많은 의미없고 불필요한 클래스와 마크업을 필요로 합니다. 이전 버전과 호환되지 않습니다. 버전을 업그레이드하면 미묘한 방식으로 앱이 손상됩니다.

 [[↑] 맨 위로](#css-questions)

-### 새로운 CSS Flexbox 또는 그리드 스펙을 사용해본적이 있나요?
+### 새로운 CSS Flexbox 또는 그리드 스펙을 사용해본 적이 있나요?

 예. Flexbox는 주로 1차원 레이아웃을 대상으로 하며 Grid는 2차원 레이아웃을 대상으로 합니다.

@ -407,7 +406,7 @@ Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 가장

 모바일 우선 전략은 2가지 주요 장점을 가지고 있습니다.

-* 모바일 장치에서 적용되는 모든 규칙이 미디어 쿼리에 대해 유효성 검사를받을 필요가 없으므로 모바일 장치에서 더 뛰어난 성능을 발휘합니다.
+* 모바일 장치에서 적용되는 모든 규칙이 미디어 쿼리에 대해 유효성 검사를 받을 필요가 없으므로 모바일 장치에서 더 뛰어난 성능을 발휘합니다.
 * 반응형 CSS 규칙과 관련하여 보다 명확한 코드를 작성해야합니다.

 [[↑] 맨 위로](#css-questions)
@ -416,7 +415,7 @@ Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 가장

 반응형 및 적응형 디자인은 서로 다른 뷰포트 사이즈, 해상도, 사용 컨텍스트 그리고 제어 메커니즘 등을 조정하여 다양한 장치에서 사용자 경험을 최적화하려고 시도합니다.

-반은형 디자인은 유연성 원칙에 따라 작동합니다. 즉, 어떤 장치에서나 보기 좋은 단일 변하기 쉬운 웹 사이트입니다. 반응형 웹 사이트는 미디어 쿼리, 유연한 그리드 및 반응 형 이미지를 사용하여 다양한 요인에 따라 유연하고 변화하는 사용자 경험을 제공합니다. 마치 하나의 공이 여러개의 서로 다른 링을 통과하기 위해 커지거나 줄어드는 것과 유사합니다.
+반응형 디자인은 유연성 원칙에 따라 작동합니다. 즉, 어떤 장치에서나 보기 좋은 단일 변하기 쉬운 웹 사이트입니다. 반응형 웹 사이트는 미디어 쿼리, 유연한 그리드 및 반응 형 이미지를 사용하여 다양한 요인에 따라 유연하고 변화하는 사용자 경험을 제공합니다. 마치 하나의 공이 여러개의 서로 다른 링을 통과하기 위해 커지거나 줄어드는 것과 유사합니다.

 적응형 디자인는 점진적 향상의 현대적 정의에 더 가깝습니다. 하나의 유연한 디자인 대신에, 적응형 설계는 장치 및 기타 기능을 감지 한 다음 사전 정의 된 뷰포트 크기 및 기타 특성 세트를 기반으로 적절한 기능 및 레이아웃을 제공합니다. 하나의 공이 여러개의 서로 다른 링을 통과하는 대신, 후프의 크기에 따라 여러개의 공을 사용할 수 있습니다. 

@ -428,7 +427,7 @@ Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 가장
 * <http://mediumwell.com/responsive-adaptive-mobile/>
 * <https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/>

-### 레티나 그래픽으로 작업 해본적이 있습니까? 그렇다면, 언제 그리고 어떤 기술을 사용하였습니까?
+### 레티나 그래픽으로 작업 해본 적이 있습니까? 그렇다면, 언제 그리고 어떤 기술을 사용하였습니까?

 저는 레티나 디스플레이를 다루기 위해 고해상도 그래픽을 사용하는 경향이 있습니다. 가장 좋은 방법은 `@media only screen and (min-device-pixel-ratio : 2) {...}`와 같은 미디어 쿼리를 사용하고 `background-image`를 변경하는 것입니다.

--- a/Translations/Korean/questions/html-questions.md
+++ b/Translations/Korean/questions/html-questions.md
@ -146,12 +146,23 @@ JavaScript 프레임워크가 인기를 끌기 전에 전에 프런트엔드 개

 ### 이미지 태그에 `srcset` 속성을 사용하는 이유는 무엇입니까? 이 속성의 컨텐츠를 평가할 때 브라우저가 사용하는 프로세스를 설명하세요.

-TODO
+기기의 디스플레이 너비에 따라 다른 이미지를 사용자에게 제공하려는 경우 `srcset` 속성을 사용합니다 - 레티나 디스플레이를 통해 장치에 고품질 이미지를 제공하여 사용자 경험을 향상시키고 저해상도 이미지를 저사양 기기에 제공하여 성능을 높이고 데이터 낭비를 줄입니다. (왜냐하면 더 큰 이미지를 제공하는 것은 눈에 보일 정도의 차이가 없기 때문). 예를 들면: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` 클라이언트의 해상도에 따라 브라우저에 small, medium 또는 large `.jpg` 그래픽을 표시하도록 지시합니다. 첫 번째 값은 이미지 이름이고 두 번째 값은 픽셀 단위의 이미지 너비입니다. 320px의 장치 너비의 경우 다음 계산이 수행됩니다:
+
+* 500 / 320 = 1.5625
+* 1000 / 320 = 3.125
+* 2000 / 320 = 6.25
+
+클라이언트의 해상도가 1x 일 경우, 1.5625가 가장 가깝고 `small.jpg`에 해당하는 `500w`가 브라우저에 의해 선택됩니다.
+
+해상도가 레티나 (2x)인 경우 브라우저는 최소 이상의 해상도를 사용합니다. 
+500w (1.5625)는 1보다 크고 이미지가 좋지 않을 수 있기 때문에 선택하지 않는다는 것을 의미합니다. 그러면 브라우저는 결과 비율이 2에 가까울 때 1000w (3.125)인 이미지를 선택합니다.
+
+`srcset`는 데스크탑 디스플레이처럼 큰 이미지가 필요하지 않기 때문에 작은 이미지 파일을 좁은 화면 장치에 제공하려는 문제를 해결합니다 — 또한 선택적으로 고해상도/저밀도 화면에 다른 해상도 이미지를 제공할 수도 있습니다.

 ###### 참고자료

-* <https://stackoverflow.com/questions/33651166/what-is-progressive-rendering>
-* <http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/>
+* <https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images>
+* <https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset>

 ### 다른 HTML 템플릿 언어를 사용해본 적이 있습니까?

--- a/Translations/Korean/questions/javascript-questions.md
+++ b/Translations/Korean/questions/javascript-questions.md
@ -7,7 +7,7 @@
 * [다음 내용이 IIFE로 작동하지 않는 이유를 설명하세요: `function foo(){ }();`를 IIFE로 만들기 위해서는 무엇이 바뀌어야 할까요?](#다음-내용이-iife로-작동하지-않는-이유를-설명하세요-function-foo-를-iife로-만들기-위해서는-무엇이-바뀌어야-할까요)
 * [`null`, `undefined`, `선언되지 않은 변수` 의 차이점은 무엇입니까? 당신은 어떻게 이 상태들에 대한 점검을 할 것입니까?](#null-undefined-선언되지-않은-변수-의-차이점은-무엇입니까-당신은-어떻게-이-상태들에-대한-점검을-할-것입니까)
 * [클로저는 무엇이며, 어떻게/왜 사용합니까?](#클로저는-무엇이며-어떻게왜-사용합니까)
-* [`.forEach` 루프와 `.map()` 루프 사이의 주요 차이점을 설명할 수 있습니까? 왜 둘중 하나를 선택하겠습니까?](#foreach-루프와-map-루프-사이의-주요-차이점을-설명할-수-있습니까-왜-둘중-하나를-선택하겠습니까)
+* [`.forEach` 루프와 `.map()` 루프 사이의 주요 차이점을 설명할 수 있습니까? 왜 둘 중 하나를 선택하겠습니까?](#foreach-루프와-map-루프-사이의-주요-차이점을-설명할-수-있습니까-왜-둘-중-하나를-선택하겠습니까)
 * [익명 함수의 일반적인 사용 사례는 무엇입니까?](#익명-함수의-일반적인-사용-사례는-무엇입니까)
 * [코드를 어떻게 구성합니까? (모듈 패턴, 고전적인 상속?)](#코드를-어떻게-구성합니까-모듈-패턴-고전적인-상속)
 * [호스트 객체와 내장 객체의 차이점은 무엇입니까?](#호스트-객체와-내장-객체의-차이점은-무엇입니까)
@ -16,11 +16,11 @@
 * [`Function.prototype.bind`에 대해 설명하세요.](#functionprototypebind에-대해-설명하세요)
 * [언제 `document.write()`를 사용합니까?](#언제-documentwrite를-사용합니까)
 * [Feature detection, Feature inference, UA String 의 차이점은 무엇입니까?](#feature-detection-feature-inference-ua-string-의-차이점은-무엇입니까)
-* [Ajax에 대해 가능한한 자세히 설명하십시오.](#ajax에-대해-가능한한-자세히-설명하십시오)
+* [Ajax에 대해 가능한 한 자세히 설명하십시오.](#ajax에-대해-가능한-한-자세히-설명하십시오)
 * [Ajax를 사용하는 것의 장단점은 무엇입니까?](#ajax를-사용하는-것의-장단점은-무엇입니까)
 * [JSONP의 작동 방식(Ajax가 아닌 방법)을 설명하십시오.](#jsonp의-작동-방식ajax가-아닌-방법을-설명하십시오)
-* [자바스크립트 템플릿을 사용한 적이 있습니까? 사용해봤다면, 어떤 라이브러리를 사용했습니까?](#자바스크립트-템플릿을-사용한-적이-있습니까-사용해봤다면-어떤-라이브러리를-사용했습니까)
-* [`hoisting`에 대해 설명하세요.](#hoisting에-대해-설명하세요)
+* [JavaScript 템플릿을 사용한 적이 있습니까? 사용해봤다면, 어떤 라이브러리를 사용했습니까?](#JavaScript-템플릿을-사용한-적이-있습니까-사용해봤다면-어떤-라이브러리를-사용했습니까)
+* [`호이스팅`에 대해 설명하세요.](#호이스팅에-대해-설명하세요)
 * [event bubbling에 대해 설명하세요.](#event-bubbling에-대해-설명하세요)
 * ["attribute"와 "property"의 차이점은 무엇입니까?](#attribute와-property의-차이점은-무엇입니까)
 * [내장 JavaScript 객체를 확장하는 것이 좋은 생각이 아닌 이유는 무엇입니까?](#내장-javascript-객체를-확장하는-것이-좋은-생각이-아닌-이유는-무엇입니까)
@ -32,7 +32,7 @@
 * [`"use strict";` 이 무엇입니까? 사용시 장단점이 무엇인가요?](#use-strict-이-무엇입니까-사용시-장단점이-무엇인가요)
 * [100까지 증가하면서 `3`의 배수에는 `fizz`를 출력하고, `5`의 배수에는 `buzz`를 출력하고, `3`과 `5`의 배수에는 `fizzbuzz`를 출력하는 for loop를 만드세요.](#100까지-증가하면서-3의-배수에는-fizz를-출력하고-5의-배수에는-buzz를-출력하고-3과-5의-배수에는-fizzbuzz를-출력하는-for-loop를-만드세요)
 * [일반적으로 웹 사이트의 전역 스코프를 그대로 두고 건드리지 않는 것이 좋은 이유는 무엇입니까?](#일반적으로-웹-사이트의-전역-스코프를-그대로-두고-건드리지-않는-것이-좋은-이유는-무엇입니까)
-* [왜 `load` 이벤트와 같은 것을 사용하나요? 이 이벤트에는 단점이 있나요? 다른 대안을 알고있나요? 알고있다면 왜 그것을 사용할건가요?](#왜-load-이벤트와-같은-것을-사용하나요-이-이벤트에는-단점이-있나요-다른-대안을-알고있나요-알고있다면-왜-그것을-사용할건가요)
+* [왜 `load` 이벤트와 같은 것을 사용하나요? 이 이벤트에는 단점이 있나요? 다른 대안을 알고 있나요? 알고 있다면 왜 그것을 사용할 건가요?](#왜-load-이벤트와-같은-것을-사용하나요-이-이벤트에는-단점이-있나요-다른-대안을-알고-있나요-알고-있다면-왜-그것을-사용할-건가요)
 * [single page app이 무엇인지 설명하고 SEO-friendly한 앱을 만드는 방법을 설명하십시오.](#single-page-app이-무엇인지-설명하고-seo-friendly한-앱을-만드는-방법을-설명하십시오)
 * [Promises 와/또는 Polyfill에 대한 당신의 경험은 어느 정도입니까?](#promises-와-또는-polyfill에-대한-당신의-경험은-어느-정도입니까)
 * [Callback 대신에 Promise를 사용할 때의 장점과 단점은 무엇입니까?](#callback-대신에-promise를-사용할-때의-장점과-단점은-무엇입니까)
@ -45,14 +45,14 @@
 * [`function foo() {}`와 `var foo = function() {}` 사이에서 `foo` 사용법의 차이에 대해 설명하시오.](#function-foo-와-var-foo--function--사이에서-foo-사용법의-차이에-대해-설명하시오)
 * [`let`, `var` 또는 `const`를 사용하여 생성된 변수들의 차이점은 무엇인가요?](#let-var-또는-const를-사용하여-생성된-변수들의-차이점은-무엇인가요)
 * [ES6 클래스와 ES5 함수 생성자의 차이점은 무엇입니까?](#es6-클래스와-es5-함수-생성자의-차이점은-무엇입니까)
-* [새 화살표 => 함수 구문에 대한 사용 예시를 들수 있습니까? 이 새로운 구문은 다른 함수와 어떻게 다릅니까?](#새-화살표--함수-구문에-대한-사용-예시를-들수-있습니까-이-새로운-구문은-다른-함수와-어떻게-다릅니까)
+* [새 화살표 => 함수 구문에 대한 사용 예시를 들 수 있습니까? 이 새로운 구문은 다른 함수와 어떻게 다릅니까?](#새-화살표--함수-구문에-대한-사용-예시를-들-수-있습니까-이-새로운-구문은-다른-함수와-어떻게-다릅니까)
 * [생성자의 메서드에 화살표 구문을 사용하면 어떤 이점이 있습니까?](#생성자의-메서드에-화살표-구문을-사용하면-어떤-이점이-있습니까)
 * [고차 함수의 정의는 무엇입니까?](#고차-함수의-정의는-무엇입니까)
-* [객체나 배열에 대한 디스트럭쳐링 예시를 들수 있습니까?](#객체나-배열에-대한-디스트럭쳐링-예시를-들수-있습니까)
-* [ES6 템플릿 리터럴은 문자열을 생성하는 데 많은 유연성을 제공합니다. 이에 대한 예를 들수 있습니까?](#es6-템플릿-리터럴은-문자열을-생성하는-데-많은-유연성을-제공합니다-이에-대한-예를-들-수-있습니까)
+* [객체나 배열에 대한 디스트럭쳐링 예시를 들 수 있습니까?](#객체나-배열에-대한-디스트럭쳐링-예시를-들-수-있습니까)
+* [ES6 템플릿 리터럴은 문자열을 생성하는 데 많은 유연성을 제공합니다. 이에 대한 예를 들 수 있습니까?](#es6-템플릿-리터럴은-문자열을-생성하는-데-많은-유연성을-제공합니다-이에-대한-예를-들-수-있습니까)
 * [curry 함수의 예를 들어 줄 수 있습니까? 이 구문은 어떤 이점을 가지고 있나요?](#curry-함수의-예를-들어-줄-수-있습니까-이-구문은-어떤-이점을-가지고-있나요)
 * [스프레드 구문을 사용할 때의 이점은 무엇이며 나머지 구문과 다른 점은 무엇입니까?](#스프레드-구문을-사용할-때의-이점은-무엇이며-rest-구문과-다른-점은-무엇입니까)
-* [파일 간에 코드를 공유하려면 어떻게 해야합니까?](#파일-간에-코드를-공유하려면-어떻게-해야합니까)
+* [파일 간에 코드를 공유하려면 어떻게 해야 합니까?](#파일-간에-코드를-공유하려면-어떻게-해야-합니까)
 * [정적인 클래스 멤버를 만드는 것이 좋은 이유는 무엇입니까?](#정적인-클래스-멤버를-만드는-것이-좋은-이유는-무엇입니까)

 ---
@ -64,9 +64,9 @@ Pull Request 를 통한 제안 및 수정 요청을 환영합니다.

 ### 이벤트 위임에 대해 설명하세요.

-이벤트 위임은 이벤트 리스너를 하위 요소에 추가하는 대신 상위 요소에 추가하는 기법입니다. 리스너는 DOM 의 버블링된 이벤트로 인해 하위 요소에서 이벤트가 발생될 때마다 실행됩니다. 이 기술의 이점은 다음과 같습니다.
+이벤트 위임은 이벤트 리스너를 하위 요소에 추가하는 대신 상위 요소에 추가하는 기법입니다. 리스너는 DOM의 bubbling된 이벤트로 인해 하위 요소에서 이벤트가 발생될 때마다 실행됩니다. 이 기술의 이점은 다음과 같습니다.

-* 각 하위 항목에 이벤트 핸들러를 연결하지 않고 상위 요소에 하나의 단일 핸들러만 필요하기 때문에 메모리 사용 공간이 줄어 듭니다.
+* 각 하위 항목에 이벤트 핸들러를 연결하지 않고 상위 요소에 하나의 단일 핸들러만 필요하기 때문에 메모리 사용 공간이 줄어듭니다.
 * 제거된 요소에서 핸들러를 해제하고 새 요소에 대해 이벤트를 바인딩할 필요가 없습니다.

 ###### 참고자료
@ -96,7 +96,7 @@ Pull Request 를 통한 제안 및 수정 요청을 환영합니다.

 ### 프로토타입 상속이 어떻게 작동하는지 설명하세요.

-이것은 매우 일반적인 JavaScript 인터뷰 질문입니다. 모든 JavaScript 객체는 다른 객체에 대한 참조인 `prototype` 프로퍼티를 가지고 있습니다. 객체의 프로퍼티에 접근할 때 해당 객체에 해당 프로퍼티가 없으면 JavaScript 엔진은 객체의 `prototype`과 `prototype`의 `prototype`등을 보고 프로퍼티가 정의될 때까지 찾고 만약 객체의 프로퍼티에 접근할 때 해당 객체에 해당 프로퍼티가 없으면 프로토타입 체인 중 하나에 있거나 프로토타입 체인의 끝에 도달 할 때까지 찾습니다. 이 동작은 고전적인 상속을 흉내내지만 실제로 [상속보다 위임](https://davidwalsh.name/javascript-objects)에 더 가깝습니다.
+이것은 매우 일반적인 JavaScript 인터뷰 질문입니다. 모든 JavaScript 객체는 다른 객체에 대한 참조인 `prototype` 프로퍼티를 가지고 있습니다. 객체의 프로퍼티에 접근할 때 해당 객체에 해당 프로퍼티가 없으면 JavaScript 엔진은 객체의 `prototype`과 `prototype`의 `prototype`등을 보고 프로퍼티가 정의될 때까지 찾고 만약 객체의 프로퍼티에 접근할 때 해당 객체에 해당 프로퍼티가 없으면 프로토타입 체인 중 하나에 있거나 프로토타입 체인의 끝에 도달할 때까지 찾습니다. 이 동작은 고전적인 상속을 흉내 내지만 실제로 [상속보다 위임](https://davidwalsh.name/javascript-objects)에 더 가깝습니다.

 ###### 참고자료

@ -130,7 +130,7 @@ JavaScript 파서는 `function foo () {} ();`를`function foo () {}`와 `();`로

 ### `null`, `undefined`, `선언되지 않은 변수` 의 차이점은 무엇입니까? 당신은 어떻게 이 상태들에 대한 점검을 할 것입니까?

-**선언되지 않은 변수** 변수는 이전에 `var`, `let`, `const` 를 사용하여 생성되지 않은 식별자에 값을 할당 할 때 생성됩니다. `선언되지 않은 변수` 는 현재 범위 외부에서 전역으로 정의됩니다. strict 모드에서는 `선언되지 않은 변수` 에 할당하려고 할 때 `ReferenceError` 가 throw 됩니다. `선언되지 않은 변수` 는 전역 변수처럼 좋지 않은 것입니다. 그것들은 모두 피하세요! 이들을 검사하기 위해 사용할 때 `try` / `catch` 블록에 감싸십시오.
+**선언되지 않은 변수** 변수는 이전에 `var`, `let`, `const` 를 사용하여 생성되지 않은 식별자에 값을 할당할 때 생성됩니다. `선언되지 않은 변수` 는 현재 범위 외부에서 전역으로 정의됩니다. strict 모드에서는 `선언되지 않은 변수` 에 할당하려고 할 때 `ReferenceError` 가 throw 됩니다. `선언되지 않은 변수` 는 전역 변수처럼 좋지 않은 것입니다. 그것들은 모두 피하세요! 이들을 검사하기 위해 사용할 때 `try` / `catch` 블록에 감싸십시오.

 ```js
 function foo() {
@ -149,7 +149,7 @@ console.log(foo); // undefined
 console.log(foo === undefined); // true
 console.log(typeof foo === 'undefined'); // true

-console.log(foo == null); // true. Wrong, don't use this to check!
+console.log(foo == null); // true. 옳지않습니다. 확인하는 데 사용하지 마세요.

 function bar() {}
 var baz = bar();
@ -162,7 +162,7 @@ console.log(baz); // undefined
 var foo = null;
 console.log(foo === null); // true

-console.log(foo == undefined); // true. Wrong, don't use this to check!
+console.log(foo == undefined); // true. 옳지않습니다. 확인하는 데 사용하지 마세요.
 ```

 개인적 습관으로, 저는 변수를 선언하지 않거나 할당하지 않은 상태로 두지 않습니다. 아직 사용하지 않으려는 경우, 선언한 후에 명시적으로 `null` 을 할당할 것입니다.
@ -186,7 +186,7 @@ console.log(foo == undefined); // true. Wrong, don't use this to check!
 * <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures>
 * <https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36>

-### `.forEach` 루프와 `.map()` 루프 사이의 주요 차이점을 설명할 수 있습니까? 왜 둘중 하나를 선택하겠습니까?
+### `.forEach` 루프와 `.map()` 루프 사이의 주요 차이점을 설명할 수 있습니까? 왜 둘 중 하나를 선택하겠습니까?

 이 두 함수의 차이점을 이해하기 위해 각 함수가 무엇을 하는지 살펴보겠습니다.

@ -199,7 +199,7 @@ console.log(foo == undefined); // true. Wrong, don't use this to check!
 ```js
 const a = [1, 2, 3];
 const doubled = a.forEach((num, index) => {
-  // Do something with num and/or index.
+  // num 및 / 또는 index로 무엇이든 해보세요.
 });

 // doubled = undefined
@ -208,7 +208,7 @@ const doubled = a.forEach((num, index) => {
 **`map`**

 * 배열의 요소를 반복합니다.
-* 각 요소에서 함수를 호출하여 결과로 새 배열을 작성하여 각 요소를 새 요소에 맵핑합니다.
+* 각 요소에서 함수를 호출하여 결과로 새 배열을 작성하여 각 요소를 새 요소에 매핑합니다.

 ```js
 const a = [1, 2, 3];
@ -231,11 +231,11 @@ const doubled = a.map(num => {

 ```js
 (function() {
-  // Some code here.
+  // 몇몇 코드
 })();
 ```

-한 번 사용되며 다른 곳에서는 사용할 필요가 없는 콜백으로 사용됩니다. 함수 본체를 찾기 위해 다른 곳을 찾아볼 필요없이 코드를 호출하는 코드 바로 안에 핸들러가 정의되어 있으면 코드가 보다 독립적이고 읽기 쉽게 보일 것입니다.
+한 번 사용되며 다른 곳에서는 사용할 필요가 없는 콜백으로 사용됩니다. 함수 본체를 찾기 위해 다른 곳을 찾아볼 필요 없이 코드를 호출하는 코드 바로 안에 핸들러가 정의되어 있으면 코드가 보다 독립적이고 읽기 쉽게 보일 것입니다.

 ```js
 setTimeout(function() {
@ -262,7 +262,7 @@ console.log(double); // [2, 4, 6]

 과거에는 Backbone 모델을 만들고 그 모델에 메소드를 연결하는 등 OOP 접근 방식을 장려하는 모델에 Backbone 을 사용했습니다.

-모듈 패턴은 여전히  훌륭하지만, 요즘에는 React/Redux 기반의 Flux 아키텍처를 사용합니다. 이 아키텍처는 단방향 프로그래밍 방식을 권장합니다. 저는 평범한 객체를 사용하여 응용 프로그램의 모델을 표현하고 이러한 객체를 조작하는 유틸리티 순수 함수를 작성합니다. 상태는 다른 Redux 응용 프로그램에서와 마찬가지로 action 및 reducer 를 사용하여 조작됩니다.
+모듈 패턴은 여전히 훌륭하지만, 요즘에는 React/Redux 기반의 Flux 아키텍처를 사용합니다. 이 아키텍처는 단방향 프로그래밍 방식을 권장합니다. 저는 평범한 객체를 사용하여 응용 프로그램의 모델을 표현하고 이러한 객체를 조작하는 유틸리티 순수 함수를 작성합니다. 상태는 다른 Redux 응용 프로그램에서와 마찬가지로 action 및 reducer 를 사용하여 조작됩니다.

 가능한 경우 고전적인 상속을 사용하지 않습니다. 저는 [이 규칙들](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4)을 유지합니다.

@ -278,7 +278,7 @@ console.log(double); // [2, 4, 6]

 ### `Person(){}`, `var person = Person()`, `var person = new Person()` 의 차이점은 무엇입니까?

-이 질문은 굉장해 애매합니다. 질문의 의도에 대한 저의 최선의 추측은 자바스크립트의 생성자에 대해 묻는 것입니다. 엄밀히 말하면, `function Person(){}`은 정상적인 함수 선언 일뿐입니다. 이 컨벤션은 생성자로 사용하기 위해 함수에 PascalCase 를 사용합니다.
+이 질문은 굉장해 애매합니다. 질문의 의도에 대한 저의 최선의 추측은 JavaScript의 생성자에 대해 묻는 것입니다. 엄밀히 말하면, `function Person(){}`은 정상적인 함수 선언일뿐입니다. 이 컨벤션은 생성자로 사용하기 위해 함수에 PascalCase 를 사용합니다.

 `var person = Person()`은 생성자가 아니며 `Person`을 함수로 호출합니다. 함수를 생성자로 사용하려는 경우에 이렇게 호출하는 것이 일반적인 실수입니다. 일반적으로 생성자는 아무것도 반환하지 않으므로 일반 함수처럼 생성자를 호출하면 `undefined`가 반환되고 지정된 변수에 할당됩니다.

@ -291,7 +291,7 @@ function Person(name) {

 var person = Person('John');
 console.log(person); // undefined
-console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined
+console.log(person.name); // Uncaught TypeError: 정의되지 않은 'name' 프로퍼티를 읽을 수 없습니다

 var person = new Person('John');
 console.log(person); // Person { name: "John" }
@ -304,7 +304,7 @@ console.log(person.name); // "john"

 ### `.call`과 `.apply`의 차이점은 무엇입니까?

-`.call`과 `.apply`는 모두 함수를 호출하는데 사용되며 첫 번째 매개 변수는 함수 내에서 `this`의 값으로 사용됩니다. 그러나 `.call`은 쉼표로 구분된 인수를 두번째 인수로 취하고 `.apply`는 인수의 배열을 두번째 인수로 취합니다. `call`은 `C`: Comma 로 구분되며 `apply`는 인수 배열인 `A`: `arguments` 라고 기억하면 쉽습니다.
+`.call`과 `.apply`는 모두 함수를 호출하는데 사용되며 첫 번째 매개 변수는 함수 내에서 `this`의 값으로 사용됩니다. 그러나 `.call`은 쉼표로 구분된 인수를 두번째 인수로 취하고 `.apply`는 인수의 배열을 두 번째 인수로 취합니다. `call`은 `C`: `Comma` 로 구분되며 `apply`는 인수 배열인 `A`: `arguments` 라고 기억하면 쉽습니다.

 ```js
 function add(a, b) {
@ -319,9 +319,9 @@ console.log(add.apply(null, [1, 2])); // 3

 [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)에서 인용.

-> `bind()` 메소드는 호출될 때 this 키워드가 제공된 값으로 설정되고 새로운 함수가 호출될 때 주어진 인자 앞에 주어진 시퀀스가  선행되는 새로운 함수를 생성합니다.
+> `bind()` 메소드는 호출될 때 this 키워드가 제공된 값으로 설정되고 새로운 함수가 호출될 때 주어진 인자 앞에 주어진 시퀀스가 선행되는 새로운 함수를 생성합니다.

-내 경험상, 다른 함수로 전달하고자하는 클래스의 메소드에서 `this`의 값을 바인딩할 때 가장 유용합니다. 이것은 종종 React 컴포넌트에서 사용됩니다.
+저의 경험상, 다른 함수로 전달하고자 하는 클래스의 메소드에서 `this`의 값을 바인딩할 때 가장 유용합니다. 이것은 종종 React 컴포넌트에서 사용됩니다.

 ###### 참고자료

@ -331,7 +331,7 @@ console.log(add.apply(null, [1, 2])); // 3

 `document.write()`는 `document.open()`에 의해 열린 문서 스트림에 텍스트 문자열을 씁니다. 페이지가 로드된 후에 `document.write()`가 실행되면 `document.open`을 호출하여 문서 전체를 지우고 (`<head>`와 `<body>`를 지웁니다!). 문자열로 주어진 매개 변수 값으로 대체합니다. 그러므로 일반적으로 위험하고 오용되기 쉽습니다.

-`document.write()`가 코드분석이나 [JavaScript 가 활성화된 경우에만 작동하는 스타일을 포함하고 싶을 때](https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html) 사용되는 경우를 설명하는 온라인 답변이 몇 가지 있습니다. 심지어 HTML5 보일러 플레이트에서 [스크립트를 병렬로로드하고 실행 순서를 보존](https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag)할때도 사용됩니다! 그러나, 저는 그 이유가 시대에 뒤 떨어진 것으로 생각하고 있으며, 현재는 `document.write()`를 사용하지 않고도 할 수 있습니다. 이것이 틀렸다면 고쳐주세요.
+`document.write()`가 코드분석이나 [JavaScript 가 활성화된 경우에만 작동하는 스타일을 포함하고 싶을 때](https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html) 사용되는 경우를 설명하는 온라인 답변이 몇 가지 있습니다. 심지어 HTML5 보일러 플레이트에서 [스크립트를 병렬로 로드하고 실행 순서를 보존](https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag)할 때도 사용됩니다! 그러나, 저는 그 이유가 시대에 뒤떨어진 것으로 생각하고 있으며, 현재는 `document.write()`를 사용하지 않고도 할 수 있습니다. 이것이 틀렸다면 고쳐주세요.

 ###### 참고자료

@ -342,13 +342,13 @@ console.log(add.apply(null, [1, 2])); // 3

 **Feature Detection**

-Feature Detection은 브라우저가 특정 코드 블록을 지원하는지에 따라 다른 코드를 실행하도록 하여, 일부 브라우저에서 항상 오류가 발생하도록합니다. 예:
+Feature Detection은 브라우저가 특정 코드 블록을 지원하는지에 따라 다른 코드를 실행하도록 하여, 일부 브라우저에서 항상 오류가 발생하도록 합니다. 예:

 ```js
 if ('geolocation' in navigator) {
-  // Can use navigator.geolocation
+  // navigator.geolocation를 사용할 수 있습니다
 } else {
-  // Handle lack of feature
+  // 부족한 기능 핸들링
 }
 ```

@ -368,7 +368,7 @@ if (document.getElementsByTagName) {

 **UA String**

-네트워크 프로토콜 피어가 요청하는 소프트웨어 사용자 에이전트의 응용 프로그램 유형, 운영 체제, 소프트웨어 공급 업체 또는 소프트웨어 버전을 식별 할 수 있도록 해주는 browser-reported String입니다. `navigator.userAgent` 를 통해 액세스 할 수 있습니다. 하지만 문자열은 구문 분석하기 까다로우며 스푸핑 될 수 있습니다. 예를 들어 Chrome은 Chrome과 Safari로 모두 보고됩니다. Safari를 감지하기 위해서는 Safari 문자열이 있는지와 Chrome 문자열이 없는지 확인해야합니다. 이 방법은 사용하지 마십시오.
+네트워크 프로토콜 피어가 요청하는 소프트웨어 사용자 에이전트의 응용 프로그램 유형, 운영 체제, 소프트웨어 공급 업체 또는 소프트웨어 버전을 식별할 수 있도록 해주는 browser-reported String입니다. `navigator.userAgent` 를 통해 접근 할 수 있습니다. 하지만 문자열은 구문 분석하기 까다로우며 스푸핑 될 수 있습니다. 예를 들어 Chrome은 Chrome과 Safari로 모두 보고됩니다. Safari를 감지하기 위해서는 Safari 문자열이 있는지와 Chrome 문자열이 없는지 확인해야 합니다. 이 방법은 사용하지 마십시오.

 ###### 참고자료

@ -376,9 +376,9 @@ if (document.getElementsByTagName) {
 * <https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th>
 * <https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent>

-### Ajax에 대해 가능한한 자세히 설명하십시오.
+### Ajax에 대해 가능한 한 자세히 설명하십시오.

-Ajax (asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을 만들기 위해 클라이언트 측에서 여러 웹 기술을 사용하는 웹 개발 기술의 집합입니다. Ajax를 사용하면 웹 애플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있습니다. Ajax는 프리젠테이션 레이어에서 데이터 교환 레이어를 분리함으로써 웹 페이지 및 확장 웹 애플리케이션이 전체 페이지를 다시로드 할 필요없이 동적으로 컨텐츠를 변경할 수 있도록 합니다. 실제로 최근에는 일반적으로 네이티브 자바스크립트의 장점 때문에 XML대신 JSON을 사용합니다.
+Ajax (asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을 만들기 위해 클라이언트 측에서 여러 웹 기술을 사용하는 웹 개발 기술의 집합입니다. Ajax를 사용하면 웹 애플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있습니다. Ajax는 프리젠테이션 레이어에서 데이터 교환 레이어를 분리함으로써 웹 페이지 및 확장 웹 애플리케이션이 전체 페이지를 다시 로드 할 필요 없이 동적으로 컨텐츠를 변경할 수 있도록 합니다. 실제로 최근에는 일반적으로 네이티브 JavaScript의 장점 때문에 XML 대신 JSON을 사용합니다.

 `XMLHttpRequest` API는 비동기 통신 또는 최근 `fetch` API에 자주 사용됩니다.

@ -391,16 +391,16 @@ Ajax (asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을

 **장점**

-* 상호작용성이 좋아집니다. 서버의 새로운 컨텐츠를 전체 페이지를 다시로드 할 필요없이 동적으로 변경할 수 있습니다.
-* 스크립트 및 스타일 시트는 한 번만 요청하면되므로 서버에 대한 연결을 줄여줍니다.
+* 상호작용성이 좋아집니다. 서버의 새로운 컨텐츠를 전체 페이지를 다시로드 할 필요 없이 동적으로 변경할 수 있습니다.
+* 스크립트 및 스타일 시트는 한 번만 요청하면 되므로 서버에 대한 연결을 줄여줍니다.
 * 상태를 페이지에서 관리 할 수 있습니다. 메인 컨테이너 페이지가 다시 로드되지 않기 때문에 JavaScript의 변수와 DOM의 상태가 유지됩니다.
 * 기본적으로 SPA의 장점 대부분입니다.

 **단점**

 * 동적 웹 페이지는 북마크 하기 어렵습니다.
-* 브라우저에서 JavaScript가 비활성화 된 경우 작동하지 않습니다.
-* 일부 웹 크롤러는 자바 스크립트를 실행하지 않으며 JavaScript에 의해 로드된 콘텐츠를 볼 수 없습니다.
+* 브라우저에서 JavaScript가 비활성화된 경우 작동하지 않습니다.
+* 일부 웹 크롤러는 JavaScript를 실행하지 않으며 JavaScript에 의해 로드된 콘텐츠를 볼 수 없습니다.
 * SPA의 대부분의 단점이 대부분입니다.

 ### JSONP의 작동 방식(Ajax가 아닌 방법)을 설명하십시오.
@ -421,13 +421,13 @@ function printData(data) {
 ```

 ```js
-// File loaded from https://example.com?callback=printData
+// https://example.com?callback=printData 에서 로드된 파일
 printData({ name: 'Yang Shun' });
 ```

-클라이언트는 전역 범위에 있는 `printData` 함수를 가져야만하고 cross-origin domain으로부터의 응답이 수신 될 때 함수가 클라이언트에 의해 실행됩니다.
+클라이언트는 전역 범위에 있는 `printData` 함수를 가져야만 하고 cross-origin domain으로부터의 응답이 수신될 때 함수가 클라이언트에 의해 실행됩니다.

-JSONP는 안전하지 않을 수 있으며 보안과 관련이 있습니다. JSONP은 실제로 JavaScript고, JavaScript가 할 수 있는 모든 작업을 수행 할 수 있으므로 JSONP 데이터 공급자를 신뢰해야만 합니다.
+JSONP는 안전하지 않을 수 있으며 보안과 관련이 있습니다. JSONP은 실제로 JavaScript고, JavaScript가 할 수 있는 모든 작업을 수행할 수 있으므로 JSONP 데이터 공급자를 신뢰해야만 합니다.

 요즘에는 [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing)가 권장되는 접근 방식이며 JSONP는 해킹으로 간주됩니다.

@ -435,28 +435,28 @@ JSONP는 안전하지 않을 수 있으며 보안과 관련이 있습니다. JSO

 * <https://stackoverflow.com/a/2067584/1751946>

-### 자바스크립트 템플릿을 사용한 적이 있습니까? 사용해봤다면, 어떤 라이브러리를 사용했습니까?
+### JavaScript 템플릿을 사용한 적이 있습니까? 사용해봤다면, 어떤 라이브러리를 사용했습니까?

-네. Handlebars, Underscore, Lodash, AngularJS 및 JSX. 저는 AngularJS에서 템플릿을 싫어했습니다. 지시자에서 문자열을 많이 사용하게 되며 오타가 발견되지 않기 때문입니다. JSX는 자바스크립트에 가깝고 배워야 하는 새로운 구문이 거의 없기 때문에 흥미롭습니다. 요즘 Third-party 코드에 의존하지 않고 템플릿을 만드는 빠른 방법으로 ES2015 템플릿 문자열 리터럴을 사용할 수도 있습니다.
+네. Handlebars, Underscore, Lodash, AngularJS 및 JSX. 저는 AngularJS에서 템플릿을 싫어했습니다. 지시자에서 문자열을 많이 사용하게 되며 오타가 발견되지 않기 때문입니다. JSX는 JavaScript에 가깝고 배워야 하는 새로운 구문이 거의 없기 때문에 흥미롭습니다. 요즘 Third-party 코드에 의존하지 않고 템플릿을 만드는 빠른 방법으로 ES2015 템플릿 문자열 리터럴을 사용할 수도 있습니다.

 ```js
 const template = `<div>My name is: ${name}</div>`;
 ```

-그러나 템플릿 라이브러리와 달리 Contents가 이스케이프되지 않으므로 위의 접근 방식에서 잠재적 XSS를 알고 있어야합니다.
+그러나 템플릿 라이브러리와 달리 컨텐츠가 이스케이프되지 않으므로 위의 접근 방식에서 잠재적 XSS를 알고 있어야 합니다.

-### `hoisting`에 대해 설명하세요.
+### `호이스팅`에 대해 설명하세요.

-Hoisting은 코드에서 변수 선언의 동작을 설명하는데 사용되는 용어입니다. `var` 키워드로 선언 혹은 초기화된 변수는 현재 스코프의 최상위까지 `hoisted`됩니다. 그러나 선언문만 `hoisted`되며 할당(있는 경우)은 그대로입니다. 몇 가지 예를 들어 설명해 보겠습니다.
+호이스팅은 코드에서 변수 선언의 동작을 설명하는데 사용되는 용어입니다. `var` 키워드로 선언 혹은 초기화된 변수는 현재 스코프의 최상위까지 `호이스팅`됩니다. 그러나 선언문만 `호이스팅`되며 할당(있는 경우)은 그대로입니다. 몇 가지 예를 들어 설명해 보겠습니다.

 ```js
-// var declarations are hoisted.
+// var 선언이 호이스팅됩니다
 console.log(foo); // undefined
 var foo = 1;
 console.log(foo); // 1

-// let/const declarations are NOT hoisted.
-console.log(bar); // ReferenceError: bar is not defined
+// let / const 선언은 호이스팅되지 않습니다.
+console.log(bar); // ReferenceError: bar는 정의되지 않았습니다
 let bar = 2;
 console.log(bar); // 2
 ```
@ -464,7 +464,7 @@ console.log(bar); // 2
 함수 선언은 바디를 호이스팅되는 반면 변수 선언 형태로 작성된 함수 표헌식은 변수 선언만 호이스팅됩니다.

 ```js
-// Function Declaration
+// 함수 선언
 console.log(foo); // [Function: foo]
 foo(); // 'FOOOOO'
 function foo() {
@ -472,9 +472,9 @@ function foo() {
 }
 console.log(foo); // [Function: foo]

-// Function Expression
+// 함수 표현식
 console.log(bar); // undefined
-bar(); // Uncaught TypeError: bar is not a function
+bar(); // Uncaught TypeError: bar는 함수가 아닙니다
 var bar = function() {
  console.log('BARRRR');
 };
@ -483,11 +483,11 @@ console.log(bar); // [Function: bar]

 ### event bubbling에 대해 설명하세요.

-DOM 요소에서 이벤트가 트리거되면 리스너가 연결되어 있는 경우 이벤트 처리를 시도한 다음 해당 이벤트가 부모에게 버블링되고 같은 이벤트가 발생합니다. 이 버블링은 요소의 조상 `document` 까지 계속적으로 발생시킵니다. 이벤트 버블링은 이벤트 위임의 메커니즘입니다.
+DOM 요소에서 이벤트가 트리거되면 리스너가 연결되어 있는 경우 이벤트 처리를 시도한 다음 해당 이벤트가 부모에게 bubbling되고 같은 이벤트가 발생합니다. 이 bubbling은 요소의 조상 `document` 까지 계속적으로 발생시킵니다. 이벤트 bubbling은 이벤트 위임의 메커니즘입니다.

 ### "attribute"와 "property"의 차이점은 무엇입니까?

-속성은 HTML 마크업에 정의되지만 속성은 DOM에 정의됩니다. 차이점을 설명하기 위해 HTML에이 텍스트 필드가 있다고 생각해보새요. `<input type="text" value="Hello">`.
+속성은 HTML 마크업에 정의되지만 속성은 DOM에 정의됩니다. 차이점을 설명하기 위해 HTML에 이 텍스트 필드가 있다고 생각해보새요. `<input type="text" value="Hello">`.

 ```js
 const input = document.querySelector('input');
@ -508,9 +508,9 @@ console.log(input.value); // Hello World!

 ### 내장 JavaScript 객체를 확장하는 것이 좋은 생각이 아닌 이유는 무엇입니까?

-빌트인/네이티브 JavaScript 객체를 확장한다는 것은 prototype에 속성/함수를 추가한다는 것을 의미합니다. 이것은 처음에는 좋은 생각처럼 보일 수 있지만 실제로는 위험합니다. 여러분의 코드가 동일한 `contains` 메소드를 추가함으로써 `Array.prototype`을 확장하는 여러가지 라이브러리를 사용한다고 상상해보십시오. 이러한 구현은 메소드를 서로 덮어쓰게 되며 이 두 메소드의 동작이 동일하지 않으면 코드가 망가질것입니다.
+빌트인/네이티브 JavaScript 객체를 확장한다는 것은 prototype에 속성/함수를 추가한다는 것을 의미합니다. 이것은 처음에는 좋은 생각처럼 보일 수 있지만 실제로는 위험합니다. 여러분의 코드가 동일한 `contains` 메소드를 추가함으로써 `Array.prototype`을 확장하는 여러가지 라이브러리를 사용한다고 상상해보십시오. 이러한 구현은 메소드를 서로 덮어쓰게 되며 이 두 메소드의 동작이 동일하지 않으면 코드가 망가질 것입니다.

-네이티브 객체를 확장 할 수 있는 유일한 경우는 폴리필을 만들려고 할 때입니다. 자바스크립트 사양의 일부이지만 오래된 브라우저이기 때문에 사용자 브라우저에 없을 수도 있는 메서드에 대한 고유한 구현을 제공해야할 경우입니다.
+네이티브 객체를 확장할 수 있는 유일한 경우는 polyfill을 만들려고 할 때입니다. JavaScript 사양의 일부이지만 오래된 브라우저이기 때문에 사용자 브라우저에 없을 수도 있는 메서드에 대한 고유한 구현을 제공해야 할 경우입니다.

 ###### 참고자료

@ -554,7 +554,7 @@ console.log(a == undefined); // true

 ### JavaScript와 관련하여 same-origin 정책을 설명하십시오.

-same-origin 정책은 JavaScript가 도메인 경계를 넘어서 요청하는 것을 방지합니다. origin은 URI 체계, 호스트 이름 및 포트 번호의 조합으로 정의됩니다. 이 정책은 한 페이지의 악의적인 스크립트가 해당 페이지의 문서 객체 모델을 통해 다른 웹 페이지의 중요한 데이터에 액세스하는 것을 방지합니다.
+same-origin 정책은 JavaScript가 도메인 경계를 넘어서 요청하는 것을 방지합니다. origin은 URI 체계, 호스트 이름 및 포트 번호의 조합으로 정의됩니다. 이 정책은 한 페이지의 악의적인 스크립트가 해당 페이지의 문서 객체 모델을 통해 다른 웹 페이지의 중요한 데이터에 접근하는 것을 방지합니다.

 ###### 참고자료

@ -576,7 +576,7 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]

 ### 왜 Ternary 표현이라고 부르고, "Ternary"라는 단어는 무엇을 나타냅니까?

-"Ternary"는 삼항을 나타내고 삼항 표현식은 세가지 피연산자, 테스트 조건문, "then"표현식, "else"표현식을 받습니다. 삼항 표현식은 자바 스크립트에만 해당되는 것이 아니며 왜 이 목록에 있는지 잘 모르겠습니다.
+"Ternary"는 삼항을 나타내고 삼항 표현식은 세가지 피연산자, 테스트 조건문, "then"표현식, "else"표현식을 받습니다. 삼항 표현식은 JavaScript에만 해당되는 것이 아니며 왜 이 목록에 있는지 잘 모르겠습니다.

 ###### 참고자료

@ -594,12 +594,12 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
 * 함수의 매개변수 이름은 고유해야합니다.
 * `this`는 전역 컨텍스트에서 undefined입니다.
 * 예외를 발생시키는 몇가지 일반적인 코딩을 잡아냅니다.
-* 헷갈리거나 잘 모르는 기능을 사용할수 없게 합니다.
+* 헷갈리거나 잘 모르는 기능을 사용할 수 없게 합니다.

 단점 :

 * 일부 개발자는 익숙하지 않은 기능이 많습니다.
-* `function.caller`와 `function.arguments`에 더 이상 접근 할 수 없습니다.
+* `function.caller`와 `function.arguments`에 더 이상 접근할 수 없습니다.
 * 서로 다른 엄격한 모드로 작성된 스크립트를 병합하면 문제가 발생할 수 있습니다.

 전반적으로 장점이 단점보다 중요하다고 생각합니다. 엄격 모드가 차단하는 기능에 의존하지 않아도됩니다. 엄격한 모드를 사용하는 것을 추천합니다.
@ -629,13 +629,13 @@ for (let i = 1; i <= 100; i++) {

 ### 일반적으로 웹 사이트의 전역 스코프를 그대로 두고 건드리지 않는 것이 좋은 이유는 무엇입니까?

-모든 스크립트는 전역 스코프에 액세스할 수 있으며 모든 사람이 전역 네임스페이스를 사용하여 변수를 정의하면 충돌이 발생할 수 있습니다. 모듈 패턴 (IIFEs)을 사용하여 변수를 로컬 네임스페이스 내에 캡슐화하십시오.
+모든 스크립트는 전역 스코프에 접근할 수 있으며 모든 사람이 전역 네임스페이스를 사용하여 변수를 정의하면 충돌이 발생할 수 있습니다. 모듈 패턴 (IIFEs)을 사용하여 변수를 로컬 네임스페이스 내에 캡슐화하십시오.

-### 왜 `load` 이벤트와 같은 것을 사용하나요? 이 이벤트에는 단점이 있나요? 다른 대안을 알고있나요? 알고있다면 왜 그것을 사용할건가요?
+### 왜 `load` 이벤트와 같은 것을 사용하나요? 이 이벤트에는 단점이 있나요? 다른 대안을 알고 있나요? 알고 있다면 왜 그것을 사용할 건가요?

 `load` 이벤트는 문서로딩 프로세스가 끝날 때 발생됩니다. 이 시점에서 문서의 모든 객체가 DOM에 있고, 모든 이미지, 스크립트, 링크 및 하위 프레임로딩이 완료됩니다.

-DOM 이벤트 `DOMContentLoaded`는 페이지의 DOM이 생성 된 후에 발생하지만 다른 리소스가 로딩되기를 기다리지 않습니다. 이것은 초기화되기 전에 전체 페이지가 로드될 필요가없는 경우에 선호됩니다.
+DOM 이벤트 `DOMContentLoaded`는 페이지의 DOM이 생성된 후에 발생하지만 다른 리소스가 로딩되기를 기다리지 않습니다. 이것은 초기화되기 전에 전체 페이지가 로드될 필요가 없는 경우에 선호됩니다.

 TODO.

@ -645,19 +645,19 @@ TODO.

 ### single page app이 무엇인지 설명하고 SEO-friendly한 앱을 만드는 방법을 설명하십시오.

-아래는 [Grab Front End Guide](https://github.com/grab/front-end-guide)에서 가져온 것이며, 우연히도 저를 위해 쓰여졌습니다!
+아래는 [Grab Front End Guide](https://github.com/grab/front-end-guide)에서 가져온 것이며, 우연히도 저를 위해 쓰였습니다!

 웹 개발자는 요즘 웹 사이트가 아닌 웹 앱으로 제작한 제품을 언급합니다. 두 가지 용어 사이에는 엄격한 차이는 없지만 웹 앱은 대화형 및 동적인 경향이 있어 사용자가 작업을 수행하고 작업에 대한 응답을 받을 수 있습니다. 전통적으로, 브라우저는 서버에서 HTML을 받아 렌더링합니다. 사용자가 다른 URL로 이동하면 전체페이지 새로고침이 필요하며 서버는 새페이지에 대해 새 HTML을 보냅니다. 이를 server-side rendering이라고합니다.

-그러나 현대 SPA에서는 대신 클라이언트 측 렌더링이 사용됩니다. 브라우저는 전체 애플리케이션에 필요한 스크립트(프레임워크, 라이브러리, 앱 코드) 및 스타일시트와 함께 서버의 초기 페이지를 로드합니다. 사용자가 다른 페이지로 이동하면 페이지 새로고침이 발생하지 않습니다. 페이지의 URL은 [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)를 통해 업데이트됩니다. 일반적으로 JSON 형식의 새 페이지에 필요한 새 데이터는 브라우저에서 [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started) 요청을 통해 서버로 전송됩니다. SPA는 초기 페이지 로딩에서 미리 다운로드된 자바스크립트를 통해 페이지를 동적으로 업데이트합니다. 이 모델은 네이티브 모바일 앱의 작동 방식과 유사합니다.
+그러나 현대 SPA에서는 대신 클라이언트 측 렌더링이 사용됩니다. 브라우저는 전체 애플리케이션에 필요한 스크립트(프레임워크, 라이브러리, 앱 코드) 및 스타일시트와 함께 서버의 초기 페이지를 로드합니다. 사용자가 다른 페이지로 이동하면 페이지 새로고침이 발생하지 않습니다. 페이지의 URL은 [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)를 통해 업데이트됩니다. 일반적으로 JSON 형식의 새 페이지에 필요한 새 데이터는 브라우저에서 [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started) 요청을 통해 서버로 전송됩니다. SPA는 초기 페이지 로딩에서 미리 다운로드된 JavaScript를 통해 페이지를 동적으로 업데이트합니다. 이 모델은 네이티브 모바일 앱의 작동 방식과 유사합니다.

 장점들:

-* 전체페이지 새로고침으로 인해 페이지탐색 사이에 하얀화면이 보이지 않아 앱이 더 반응적으로 느껴지게 됩니다.
+* 전체 페이지 새로고침으로 인해 페이지 탐색 사이에 하얀 화면이 보이지 않아 앱이 더 반응적으로 느껴지게 됩니다.

-* 동일한 애셋을 페이지로드마다 다시 다운로드 할 필요가 없으므로 서버에 대한 HTTP 요청이 줄어 듭니다.
+* 동일한 애셋을 페이지 로드마다 다시 다운로드할 필요가 없으므로 서버에 대한 HTTP 요청이 줄어듭니다.

-* 클라이언트와 서버 사이의 고려해야할 부분을 명확하게 구분합니다. 서버 코드를 수정하지 않고도 다양한 플랫폼(예: 모바일, 채팅 봇, 스마트워치)에 맞는 새로운 클라이언트를 쉽게 구축 할 수 있습니다. 또한 API 계약이 깨지지 않는한 내에서 클라이언트와 서버에서 기술 스택을 독립적으로 수정할 수 있습니다.
+* 클라이언트와 서버 사이의 고려해야 할 부분을 명확하게 구분합니다. 서버 코드를 수정하지 않고도 다양한 플랫폼(예: 모바일, 채팅 봇, 스마트워치)에 맞는 새로운 클라이언트를 쉽게 구축할 수 있습니다. 또한 API 계약이 깨지지 않는 한 내에서 클라이언트와 서버에서 기술 스택을 독립적으로 수정할 수 있습니다.

 단점들:

@ -665,9 +665,9 @@ TODO.

 * 모든 요청을 단일 진입점으로 라우트하고 클라이언트 측 라우팅이 그 한곳에서 인계받을 수 있도록 서버를 구성하는 추가 단계가 수행되어야합니다.

-* SPA는 콘텐츠를 렌더링하기 위해 JavaScript에 의존하지만 모든 검색 엔진이 크롤링 중에 JavaScript를 실행하지는 않으며 페이지에 빈 콘텐츠가 표시 될 수 있습니다. 이로 인해 의도치 않게 앱의 검색 엔진 최적화 (SEO)가 어려워집니다.
+* SPA는 콘텐츠를 렌더링하기 위해 JavaScript에 의존하지만 모든 검색 엔진이 크롤링 중에 JavaScript를 실행하지는 않으며 페이지에 빈 콘텐츠가 표시될 수 있습니다. 이로 인해 의도치 않게 앱의 검색 엔진 최적화 (SEO)가 어려워집니다.

-그러나 대부분의 경우 앱을 제작할 때 검색 엔진에서 모든 콘텐츠 색인할 필요는 없으므로 SEO가 가장 중요한 요소는 아닙니다. 이를 극복하기 위해, 앱을 서버 측 렌더링하거나 [Prerender](https://prerender.io/)와 같은 서비스를 사용하여 "브라우저에서 자바 스크립트를 렌더링하고, 정적 HTML을 저장한 다음, 크롤러에게 반환합니다".
+그러나 대부분의 경우 앱을 제작할 때 검색 엔진에서 모든 콘텐츠 색인할 필요는 없으므로 SEO가 가장 중요한 요소는 아닙니다. 이를 극복하기 위해, 앱을 서버 측 렌더링하거나 [Prerender](https://prerender.io/)와 같은 서비스를 사용하여 "브라우저에서 JavaScript를 렌더링하고, 정적 HTML을 저장한 다음, 크롤러에게 반환합니다".

 ###### 참고자료

@ -678,7 +678,7 @@ TODO.

 ### Promises 와/또는 Polyfill에 대한 당신의 경험은 어느 정도입니까?

-Promise는 어느 시점에 resolve된 값 또는 resolve되지 않은 이유(예: 네트워크 오류가 발생) 중 하나의 값을 생성 할 수있는 객체입니다. promise는 fulfilled, rejected, pending 3가지 상태 중 하나일 수 있습니다. promise 사용자는 콜백을 붙여서 fulfill된 값이나 reject된 이유를 처리할 수 있습니다.
+Promise는 어느 시점에 resolve된 값 또는 resolve되지 않은 이유(예: 네트워크 오류가 발생) 중 하나의 값을 생성할 수있는 객체입니다. promise는 fulfilled, rejected, pending 3가지 상태 중 하나일 수 있습니다. promise 사용자는 콜백을 붙여서 fulfill된 값이나 reject된 이유를 처리할 수 있습니다.

 일반적인 polyfill은 `$.deferred`, Q 와 Bluebird 입니다만, 모두가 스펙을 따르는 것은 아닙니다. ES2015는 즉시 사용할 수 있는 Promise를 지원하며 일반적으로 요즘 polyfill은 필요하지 않습니다.

@ -697,7 +697,7 @@ Promise는 어느 시점에 resolve된 값 또는 resolve되지 않은 이유(
 **단점**

 * 약간 더 복잡한 소스코드(논쟁의 여지가 있음)
-* ES2015를 지원하지 않는 이전 브라우저에서 이를 사용하기 위해서는 polyfill을 로드해야합니다.
+* ES2015를 지원하지 않는 이전 브라우저에서 이를 사용하기 위해서는 polyfill을 로드해야 합니다.

 ### JavaScript로 컴파일되는 언어로 JavaScript 코드를 작성하는 경우의 장단점은 무엇입니까?

@ -711,8 +711,8 @@ JavaScript로 컴파일되는 언어의 예로 CoffeeScript, Elm, ClojureScript,

 단점:

-* 브라우저는 오직 JavaScript만 실행하기 때문에 빌드/컴파일 프로세스가 필요하며 브라우저에 제공되기 전에 자바 스크립트로 코드를 컴파일해야합니다.
-* 소스 맵이 미리 컴파일 된 소스에 잘 맵핑되지 않으면 디버깅이 어려울 수 있습니다.
+* 브라우저는 오직 JavaScript만 실행하기 때문에 빌드/컴파일 프로세스가 필요하며 브라우저에 제공되기 전에 JavaScript로 코드를 컴파일해야 합니다.
+* 소스 맵이 미리 컴파일된 소스에 잘 매핑되지 않으면 디버깅이 어려울 수 있습니다.
 * 대부분의 개발자들은 이러한 언어에 익숙하지 않으므로 이를 배워야합니다. 프로젝트에 사용할 경우 팀의 비용이 증가합니다.
 * 소규모 커뮤니티 (언어에 따라 다름)는 리소스, 자습서, 라이브러리 및 툴링을 찾기가 어려울 수 있음을 의미합니다.
 * IDE / 편집기 지원이 부족할 수 있습니다.
@ -747,11 +747,11 @@ JavaScript로 컴파일되는 언어의 예로 CoffeeScript, Elm, ClojureScript,
 * `for` 반복문 - `for (var property in obj) { console.log(property); }`. 그러나 이것은 상속된 속성도 반복되며, 사용하기전에 `obj.hasOwnProperty(property)` 체크를 추가해야 합니다.
 * `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`. 
 `Object.keys ()`는 전달하는 객체의 열거 가능한 모든 속성을 나열하는 정적 메서드입니다.
-* `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`. `Object.getOwnPropertyNames ()`는 전달하는 객체의 열거 가능한 속성과 열거되지 않는 모든 속성을 나열하는 정적 메서드입니다.
+* `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`. `Object.getOwnPropertyNames()`는 전달하는 객체의 열거 가능한 속성과 열거되지 않는 모든 속성을 나열하는 정적 메서드입니다.

 배열의 경우:

-* `for` 반복문 - `for (var i = 0; i < arr.length; i++)`. 여기에있는 일반적인 함정은 'var'이 함수 범위에 있고 블록 범위가 아니며 대부분 블록 범위의 반복자 변수를 원할 것이라는 점입니다. ES2015에는 블록 범위가 있는 `let`을 도입하고 대신 사용할 것을 권장합니다. 그래서 다음과 같이 됩니다. `for (let i = 0; i < arr.length; i++)`.
+* `for` 반복문 - `for (var i = 0; i < arr.length; i++)`. 여기에 있는 일반적인 함정은 'var'이 함수 범위에 있고 블록 범위가 아니며 대부분 블록 범위의 반복자 변수를 원할 것이라는 점입니다. ES2015에는 블록 범위가 있는 `let`을 도입하고 대신 사용할 것을 권장합니다. 그래서 다음과 같이 됩니다. `for (let i = 0; i < arr.length; i++)`.
 * `forEach` - `arr.forEach(function (el, index) { ... })`. 필요한 모든 것이 배열 요소라면 `index`를 사용할 필요가 없기 때문에 이 구조가 더 편리 할 수 있습니다. 또한 `every`과 `some` 메서드를 이용하여 반복을 일찍 끝낼 수 있습니다.

 대부분의 경우, `.forEach` 메서드를 선호하지만 무엇을 하느냐에 따라서 각 상황에 맞게 사용하는 것이 좋습니다. `for`루프는 `break`를 사용하여 루프를 조기에 종료하거나 루프 당 두 번 이상 반복자를 증가시키는 것과 같이 더 많은 유연성을 허용합니다.
@ -772,9 +772,9 @@ TODO

 ### 이벤트 루프란 무엇입니까? 콜 스택과 태스크 큐의 차이점은 무엇입니까?

-이벤트 루프는 콜 스택을 모니터하고 태스크 큐에서 수행 할 작업이 있는지 확인하는 단일 스레드 루프입니다. 콜 스택이 비어 있고 태스크 큐에 콜백 함수가있는 경우, 함수는 큐에서 제외되고 실행될 콜 스택으로 푸시됩니다.
+이벤트 루프는 콜 스택을 모니터하고 태스크 큐에서 수행할 작업이 있는지 확인하는 단일 스레드 루프입니다. 콜 스택이 비어 있고 태스크 큐에 콜백 함수가 있는 경우, 함수는 큐에서 제외되고 실행될 콜 스택으로 푸시됩니다.

-Philip Robert의 [talk on the Event Loop](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html)를 아직 확인하지 않은 경우, , 확인하세요. 자바 스크립트에서 가장 많이 본 동영상 중 하나입니다.
+Philip Robert의 [talk on the Event Loop](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html)를 아직 확인하지 않은 경우 확인하십시오. JavaScript에서 가장 많이 본 동영상 중 하나입니다.

 ###### 참고자료

@ -783,7 +783,7 @@ Philip Robert의 [talk on the Event Loop](https://2014.jsconf.eu/speakers/philip

 ### `function foo() {}`와 `var foo = function() {}` 사이에서 `foo` 사용법의 차이에 대해 설명하시오.

-전자는 함수 선언인 반면 후자는 함수 표현입니다. 주요한 차이점은 함수 선언은 몸체가 호이스트되지만 함수 표현의 몸체는 호이스트되지 않습니다.(변수와 동일한 호이스팅 동작을 가짐) 호이스팅에 대한 자세한 설명은 위의 호이 스팅 질문을 참조하십시오. 함수 표현식을 정의하기 전에 호출하려고하면 `Uncaught TypeError : XXX is not function` 오류가 발생합니다.
+전자는 함수 선언인 반면 후자는 함수 표현입니다. 주요한 차이점은 함수 선언은 몸체가 호이스트되지만 함수 표현의 몸체는 호이스트되지 않습니다.(변수와 동일한 호이스팅 동작을 가짐) 호이스팅에 대한 자세한 설명은 위의 호이 스팅 질문을 참조하십시오. 함수 표현식을 정의하기 전에 호출하려고 하면 `Uncaught TypeError : XXX is not function` 오류가 발생합니다.

 **함수 선언**

@ -797,7 +797,7 @@ function foo() {
 **함수 표현**

 ```js
-foo(); // Uncaught TypeError: foo is not a function
+foo(); // Uncaught TypeError: foo는 함수가 아닙니다
 var foo = function() {
  console.log('FOOOOO');
 };
@ -809,11 +809,11 @@ var foo = function() {

 ### `let`, `var` 또는 `const`를 사용하여 생성된 변수들의 차이점은 무엇인가요?

-`var` 키워드를 사용하여 선언 된 변수는 함수가 생성 된 함수 나 함수 밖에서 생성 된 함수에 전역 오브젝트로 적용됩니다. `let`과 `const` 블록 범위입니다. 즉, 가장 가까운 중괄호(function, if-else 블록 또는 for-loop) 내에서만 접근할 수 있습니다.
+`var` 키워드를 사용하여 선언된 변수는 함수가 생성된 함수나 함수 밖에서 생성 된 함수에 전역 오브젝트로 적용됩니다. `let`과 `const` 블록 범위입니다. 즉, 가장 가까운 중괄호(function, if-else 블록 또는 for-loop) 내에서만 접근할 수 있습니다.

 ```js
 function foo() {
-  // All variables are accessible within functions
+  // 함수 내에서 모든 변수에 접근할 수 있습니다.
  var bar = 'bar';
  let baz = 'baz';
  const qux = 'qux';
@ -823,9 +823,9 @@ function foo() {
  console.log(qux); // "qux"
 }

-console.log(bar); // ReferenceError: bar is not defined
-console.log(baz); // ReferenceError: baz is not defined
-console.log(qux); // ReferenceError: qux is not defined
+console.log(bar); // ReferenceError: bar가 정의되지 않았습니다
+console.log(baz); // ReferenceError: baz가 정의되지 않았습니다
+console.log(qux); // ReferenceError: qux가 정의되지 않았습니다
 ```

 ```js
@ -835,11 +835,11 @@ if (true) {
  const qux = 'qux';
 }

-// var declared variables are accessible anywhere in the function scope
+// var로 선언된 변수는 함수 스코프의 어디에서나 접근할 수 있습니다.
 console.log(bar); // "bar"
-// let and const defined variables are not accessible outside of the block they were defined in
-console.log(baz); // ReferenceError: baz is not defined
-console.log(qux); // ReferenceError: qux is not defined
+// let과 const로 정의된 변수는 정의된 블록 외부에서 접근할 수 없습니다.
+console.log(baz); // ReferenceError: baz가 정의되지 않았습니다
+console.log(qux); // ReferenceError: qux가 정의되지 않았습니다
 ```

 `var`는 변수가 올라가도록 허용합니다. 즉, 변수가 선언되기 전에 코드에서 참조 될 수 있습니다. `let`과 `const`는 이것을 허락하지 않고 대신 에러를 던집니다.
@ -849,11 +849,11 @@ console.log(foo); // undefined

 var foo = 'foo';

-console.log(baz); // ReferenceError: can't access lexical declaration `baz' before initialization
+console.log(baz); // ReferenceError: 초기화 전에 렉시컬 선언 `baz`에 접근할 수 없습니다.

 let baz = 'baz';

-console.log(bar); // ReferenceError: can't access lexical declaration `bar' before initialization
+console.log(bar); // ReferenceError: 초기화 전에 렉시컬 선언 `bar`에 접근할 수 없습니다.

 const bar = 'bar';
 ```
@ -866,17 +866,17 @@ var foo = 'bar';
 console.log(foo); // "bar"

 let baz = 'baz';
-let baz = 'qux'; // SyntaxError: redeclaration of let baz
+let baz = 'qux'; // SyntaxError: let baz의 재선언
 ```

 `let`은 변수의 값을 재할당 할 수 있지만 `const`는 재할당 할 수 없다는 점이 다릅니다.

 ```js
-// this is fine
+// 괜찮습니다
 let foo = 'foo';
 foo = 'bar';

-// this causes an exception
+// 예외가 발생합니다
 const baz = 'baz';
 baz = 'qux';
 ```
@ -892,12 +892,12 @@ baz = 'qux';
 먼저 각각의 예를 살펴 보겠습니다.

 ```js
-// ES5 Function Constructor
+// ES5 함수 생성자
 function Person(name) {
  this.name = name;
 }

-// ES6 Class
+// ES6 클래스
 class Person {
  constructor(name) {
    this.name = name;
@ -910,19 +910,19 @@ class Person {
 생성자의 주요 차이점은 상속을 사용할 때 발생합니다. `Person`의 하위 클래스이면서 `studentId` 필드를 추가로 가지고 있는 `Student` 클래스를 만들고자 한다면, 이것이 우리가 위에 추가해서 해야 할 일입니다.

 ```js
-// ES5 Function Constructor
+// ES5 함수 생성자
 function Student(name, studentId) {
-  // Call constructor of superclass to initialize superclass-derived members.
+  // 수퍼 클래스의 생성자를 호출하여 수퍼 클래스에서 상속된 멤버를 초기화합니다.
  Person.call(this, name);

-  // Initialize subclass's own members.
+  // 서브 클래스의 멤버를 초기화합니다.
  this.studentId = studentId;
 }

 Student.prototype = Object.create(Person.prototype);
 Student.prototype.constructor = Student;

-// ES6 Class
+// ES6 클래스
 class Student extends Person {
  constructor(name, studentId) {
    super(name);
@ -938,7 +938,7 @@ ES5에서 상속을 사용하는 것이 훨씬 더 상세하며 ES6 버전은
 * https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
 * https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5

-### 새 화살표 => 함수 구문에 대한 사용 예시를 들수 있습니까? 이 새로운 구문은 다른 함수와 어떻게 다릅니까?
+### 새 화살표 => 함수 구문에 대한 사용 예시를 들 수 있습니까? 이 새로운 구문은 다른 함수와 어떻게 다릅니까?

 TODO

@ -948,7 +948,7 @@ TODO

 ### 고차 함수의 정의는 무엇입니까?

-고차 함수는 다른 함수를 매개 변수로 사용하여 일부 데이터에서 작동하거나 결과로 함수를 반환하는 함수입니다. 고차 함수는 반복적으로 수행되는 일부 연산을 추상화하기위한 것입니다. 전형적인 예는 배열과 함수를 인수로 취하는 `map`입니다. `map`은 고차 함수를 사용하여 배열의 각 항목을 변환하고 변환 된 데이터로 새로운 배열을 반환합니다. JavaScript에서 흔히 볼 수있는 다른 예로 `forEach`, `filter`, `reduce`가 있습니다. 다른 함수에서 함수를 반환하는 많은 사용 사례가 있기 때문에 고차 함수는 배열을 조작할 필요가 없습니다. `Array.prototype.bind`는 JavaScript에서 그러한 예시 중 하나입니다.
+고차 함수는 다른 함수를 매개 변수로 사용하여 일부 데이터에서 작동하거나 결과로 함수를 반환하는 함수입니다. 고차 함수는 반복적으로 수행되는 일부 연산을 추상화하기 위한 것입니다. 전형적인 예는 배열과 함수를 인수로 취하는 `map`입니다. `map`은 고차 함수를 사용하여 배열의 각 항목을 변환하고 변환 된 데이터로 새로운 배열을 반환합니다. JavaScript에서 흔히 볼 수 있는 다른 예로 `forEach`, `filter`, `reduce`가 있습니다. 다른 함수에서 함수를 반환하는 많은 사용 사례가 있기 때문에 고차 함수는 배열을 조작할 필요가 없습니다. `Array.prototype.bind`는 JavaScript에서 그러한 예시 중 하나입니다.

 ##### Map

@ -969,7 +969,7 @@ const transformNamesToUppercase = names => {
 transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
 ```

-`.map(transformerFn)`을 사용하면 더 간단 해지고 추론하기 쉽고 읽기 쉬워집니다.
+`.map(transformerFn)`을 사용하면 더 간단해지고 추론하기 쉽고 읽기 쉬워집니다.

 ```js
 const transformNamesToUppercase = names =>
@ -1031,7 +1031,7 @@ const sumOfNumbers = numbers =>
 sumOfNumbers(numbers); // 15
 ```

-**고차 함수**를 사용하여 코드를 쉽게 추론하고 코드 품질을 향상시킬 수 있습니다. 이것은 당신의 코드가 즉흥적이기 보다 더 읽기쉽도록 만들어줍니다. 
+**고차 함수**를 사용하여 코드를 쉽게 추론하고 코드 품질을 향상시킬 수 있습니다. 이것은 당신의 코드가 즉흥적이기 보다 더 읽기 쉽도록 만들어줍니다. 

 ###### 참고자료

@ -1039,14 +1039,14 @@ sumOfNumbers(numbers); // 15
 * <https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a>
 * <https://eloquentjavascript.net/05_higher_order.html>

-### 객체나 배열에 대한 디스트럭쳐링 예시를 들수 있습니까?
+### 객체나 배열에 대한 디스트럭쳐링 예시를 들 수 있습니까?

 디스트럭쳐링은 ES6에서 사용할 수 있는 표현식으로 개체 또는 배열의 값을 추출하여 다른 변수에 배치하는 간결하고 편리한 방법을 제공합니다.

 **배열 디스트럭쳐링**

 ```js
-// Variable assignment.
+// 변수 할당.
 const foo = ['one', 'two', 'three'];

 const [one, two, three] = foo;
@ -1056,7 +1056,7 @@ console.log(three); // "three"
 ```

 ```js
-// Swapping variables
+// 변수 교환
 let a = 1;
 let b = 3;

@ -1068,7 +1068,7 @@ console.log(b); // 1
 **객체 디스트럭쳐링**

 ```js
-// Variable assignment.
+// 변수 할당.
 const o = { p: 42, q: true };
 const { p, q } = o;

@ -1088,7 +1088,7 @@ TODO

 ### curry 함수의 예를 들어 줄 수 있습니까? 이 구문은 어떤 이점을 가지고 있나요? 

-currying은 둘 이상의 매개 변수가있는 함수가 여러 함수로 분리 된 패턴으로, 직렬로 호출하면 필요한 모든 매개 변수가 한 번에 하나씩 누적됩니다. 이 기술은 기능 스타일로 작성된 코드를 읽고 작성하기가 더 쉬워 진 경우 유용 할 수 있습니다. 함수를 currying하려면 하나의 함수로 시작한 다음 하나의 매개 변수를 취하는 일련의 함수로 분리해야합니다.
+currying은 둘 이상의 매개 변수가있는 함수가 여러 함수로 분리된 패턴으로, 직렬로 호출하면 필요한 모든 매개 변수가 한 번에 하나씩 누적됩니다. 이 기술은 기능 스타일로 작성된 코드를 읽고 작성하기가 더 쉬워진 경우 유용할 수 있습니다. 함수를 currying하려면 하나의 함수로 시작한 다음 하나의 매개 변수를 취하는 일련의 함수로 분리해야 합니다.

 ```js
 function curry(fn) {
@ -1124,7 +1124,7 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]

 ### 스프레드 구문을 사용할 때의 이점은 무엇이며 rest 구문과 다른 점은 무엇입니까?

-ES6의 스프레드 구문은 함수적인 패러다임에서 코딩 할 때 매우 유용합니다. 왜냐하면 `Object.create`, `slice` 또는 라이브러리 함수를 사용하지 않고도 배열이나 객체의 복사본을 쉽게 만들 수 있기 때문입니다. 이 언어 기능은 Redux 또는 RX.js를 사용하는 프로젝트에서 많이 사용됩니다. 
+ES6의 스프레드 구문은 함수적인 패러다임에서 코딩할 때 매우 유용합니다. 왜냐하면 `Object.create`, `slice` 또는 라이브러리 함수를 사용하지 않고도 배열이나 객체의 복사본을 쉽게 만들 수 있기 때문입니다. 이 언어 기능은 Redux 또는 RX.js를 사용하는 프로젝트에서 많이 사용됩니다. 

 ```js
 function putDookieInAnyArray(arr) {
@ -1141,7 +1141,7 @@ var person = {
 var copyOfTodd = { ...person };
 ```

-ES6의 rest 구문은 함수에 전달할 임의의 수의 인수를 포함하는 약식을 제공합니다. 이는 데이터의 배열을 채우기보다는 데이터를 가져 와서 배열로 채우는 확산 구문의 역과 비슷하지만 함수 인수에서만 작동합니다. 
+ES6의 rest 구문은 함수에 전달할 임의의 수의 인수를 포함하는 약식을 제공합니다. 이는 데이터의 배열을 채우기보다는 데이터를 가져와서 배열로 채우는 스프레드 구문의 역순과 같으며 배열 및 객체 디스트럭쳐링 할당뿐만 아니라 함수 인수에서도 작동합니다.

 ```js
 function addFiveToABunchOfNumbers(...numbers) {
@ -1156,11 +1156,11 @@ var result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12,
 * <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax>
 * <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters>

-### 파일 간에 코드를 공유하려면 어떻게 해야합니까?
+### 파일 간에 코드를 공유하려면 어떻게 해야 합니까?

 이것은 Javascript 환경에 따라 다릅니다. 

-클라이언트(브라우저 환경)에서는 변수/함수가 전역 범위 (`window`)에 선언되어있는 한 모든 스크립트가 이를 참조 할 수 있습니다. 또는, 보다 모듈형 접근 방식을 위해 Require2S를 통해 비동기 모듈 정의(AMD)를 이용합니다. 
+클라이언트(브라우저 환경)에서는 변수/함수가 전역 범위 (`window`)에 선언되어있는 한 모든 스크립트가 이를 참조할 수 있습니다. 또는, 보다 모듈형 접근 방식을 위해 Require2S를 통해 비동기 모듈 정의(AMD)를 이용합니다. 

 서버(Node.js)에서 일반적인 방법은 CommanJS를 사용하는 것입니다. 각 파일은 모듈로 취급되며 변수와 함수를`module.exports` 객체에 첨부하여 내보낼 수 있습니다. 
 
@ -1179,11 +1179,3 @@ ES2015에서는 AMD 및 commonJS를 모두 대체하기 위한 모듈 구문을
 ### 다른 답변들

 * <http://flowerszhong.github.io/2013/11/20/javascript-questions.html>
-
-## Related
-
-If you are interested in how data structures are implemented, check out [Lago](https://github.com/yangshun/lago), a Data Structures and Algorithms library for JavaScript. It is pretty much still WIP but I intend to make it into a library that is able to be used in production and also a reference resource for revising Data Structures and Algorithms.
-
-## Contributing
-
-Feel free to make pull requests to correct any mistakes in the answers or suggest new questions.