Translate: Dom Manipulation(~ Document Interface)

ss-won · ss-won · commit 27ee1deae315 · 2020-08-19T22:31:13.000+09:00
* ~ Basic Example 번역

* ~ The Document Interface 번역

* 맞춤법검사, 테스트
diff --git a/pages/tutorials/dom-manipulation.md b/pages/tutorials/dom-manipulation.md
@@ -5,21 +5,21 @@ permalink: /docs/handbook/dom-manipulation.html
 oneline: Using the DOM with TypeScript
 ---
 
-# DOM Manipulation
+# DOM 조작 (DOM Manipulation)
 
-### _An exploration into the `HTMLElement` type_
+### _`HTMLElement` 타입 탐구_ (_An exploration into the `HTMLElement` type_)
 
-In the 20+ years since its standardization, JavaScript has come a very long way. While in 2020, JavaScript can be used on servers, in data science, and even on IoT devices, it is important to remember its most popular use case: web browsers.
+표준화 이후 20여 년 동안, JavaScript는 많은 발전을 이루었습니다. 2020년에는 서버, 데이터 사이언스, 그리고 IoT 기기에도 JavaScript를 사용할 수 있지만, 가장 인기 있는 활용 사례는 웹 브라우저인 것을 기억하는 것이 중요합니다.
 
-Website are made up of HTML and/or XML documents. These documents are static, they do not change. The D*ocument Object Model (DOM) is* a programming interface implemented by browsers in order to make static websites functional. The DOM API can be used to change the document structure, style, and content. The API is so powerful that countless frontend frameworks (jQuery, React, Angular, etc.) have been developed around it in order to make dynamic websites even easier to develop.
+웹 사이트는 HTML 및/또는 XML 문서로 구성됩니다. 이러한 문서들은 정적이어서, 변하지 않습니다. *문서 객체 모델(DOM)은* 정적 웹 사이트를 기능적으로 작동시키기 위해 브라우저에 의해 구현된 프로그래밍 인터페이스입니다. DOM API를 사용하면 문서의 구조, 스타일, 그리고 내용을 변경할 수 있습니다. API는 매우 강력해서 이를 바탕으로 보다 쉽게 동적인 웹사이트들 개발하기 위해 수많은 프런트엔드 프레임워크(jQuery, React, Angular 등)가 개발되었습니다.
 
-TypeScript is a typed superset of JavaScript, and it ships type definitions for the DOM API. These definitions are readily available in any default TypeScript project. Of the 20,000+ lines of definitions in _lib.dom.d.ts_, one stands out among the rest: `HTMLElement` . This type is the backbone for DOM manipulation with TypeScript.
+TypeScript는 타입이 있는 JavaScript 상위 집합(superset)이며, DOM API에 대한 타입 정의를 제공합니다. 이러한 정의는 모든 기본 TypeScript 프로젝트에서 쉽게 사용 가능합니다. _lib.dom.d.ts_ 에 있는 2만여 줄의 정의 중에서, 가장 눈에 띄는 것은 `HTMLElement`입니다. 이 타입은 TypeScript를 사용한 DOM 조작의 중축입니다.
 
-> You can explore the source code for the [DOM type definitions](https://github.com/microsoft/TypeScript/blob/master/lib/lib.dom.d.ts)
+> [DOM 타입 정의](https://github.com/microsoft/TypeScript/blob/master/lib/lib.dom.d.ts)에 대한 소스코드는 이곳에서 볼 수 있습니다.
 
-## Basic Example
+## 기본 예제 (Basic Example)
 
-Given a simplified _index.html_ file:
+간단한 예시 파일 _index.html_:
 
     <!DOCTYPE html>
     <html lang="en">
@@ -31,60 +31,60 @@ Given a simplified _index.html_ file:
       </body>
     </html>
 
-Lets explore a TypeScript script that adds a `<p>Hello, World</p>` element to the `#app` element.
+`#app` 요소에 `<p>Hello, World</p>` 요소를 추가하는 TypeScript 스크립트를 살펴보겠습니다.
 
 ```ts
-// 1. Select the div element using the id property
+// 1. id 프로퍼티를 사용하여 div 요소를 선택합니다.
 const app = document.getElementById("app");
 
-// 2. Create a new <p></p> element programmatically
+// 2. 새로운 <p></p> 요소를 프로그래밍 방식으로 생성합니다.
 const p = document.createElement("p");
 
-// 3. Add the text content
+// 3. 텍스트 내용을 추가합니다.
 p.textContent = "Hello, World!";
 
-// 4. Append the p element to the div element
+// 4. div 요소에 p 요소를 자식 노드로 추가합니다.
 app?.appendChild(p);
 ```
 
-After compiling and running the _index.html_ page, the resulting HTML will be:
+_index.html_ 페이지를 컴파일하고 실행한 후, HTML 결과:
 
 ```html
 <div id="app">
   <p>Hello, World!</p>
 </div>
 ```
 
-## The `Document` Interface
+## `Document` 인터페이스 (The `Document` Interface)
 
-The first line of the TypeScript code uses a global variable `document` , inspecting the variable shows it is defined by the `Document` interface from the _lib.dom.d.ts_ file. The code snippet contains calls to two methods, `getElementById` and `createElement`.
+TypeScript 코드의 첫 번째 줄은 전역변수 `document`를 사용하며, 그 변수를 검사하면 _lib.dom.d.ts_ 파일의 `Document` 인터페이스에 의해 정의된 것으로 표시됩니다. 그 코드의 스니펫(snippet)에는 `getElementById`와 `createElement`라는 두 가지 메서드 호출이 포함되어 있습니다.
 
 ### `Document.getElementById`
 
-The definition for this method is as follows:
+이 메서드의 정의는 다음과 같습니다:
 
 ```ts
 getElementById(elementId: string): HTMLElement | null;
 ```
 
-Pass it an element id string and it will return either `HTMLElement` or `null` . This method introduces one of the most important types, `HTMLElement`. It serves as the base interface for every other element interface. For example, the `p` variable in the code example is of type `HTMLParagraphElement`. Also take note that this method can return `null`. This is because the method can't be certain pre-runtime if it will be able to actually find the specified element or not. In the last line of the code snippet, the new _optional chaining_ operator is used in order to call `appendChild`.
+문자열 id 요소가 전달되면 `HTMLElement` 또는 `null`이 반환됩니다. 이 메서드는 가장 중요한 타입들 중 하나인 `HTMLElement`를 도입합니다. 이 타입은 다른 모든 요소 인터페이스의 기본 인터페이스 역할을 합니다. 예를 들면, 예제 코드에서 `p` 변수는 `HTMLParagraphElement` 타입입니다. 다음으로, 이 메서드는 `null`을 반환할 수 있다는 점에 유의해야 합니다. 메서드가 실제로 지정된 요소를 찾을 수 있을지 없을지에 따라 확실한 사전 런타임이 될 수 없기 때문입니다. 스니펫 코드의 마지막 줄에는, `appendChild`를 호출하기 위해 새로운 _선택적 체이닝(optional chaining)_ 연산자가 사용되고 있습니다.
 
 ### `Document.createElement`
 
-The definition for this method is (I have omitted the _deprecated_ definition):
+이 메서드의 정의는 다음과 같습니다(_deprecated_ 표기된 정의는 생략했습니다):
 
 ```ts
 createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
 createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;
 ```
 
-This is an overloaded function definition. The second overload is simplest and works a lot like the `getElementById` method does. Pass it any `string` and it will return a standard HTMLElement. This definition is what enables developers to create unique HTML element tags.
+이는 오버 로드된 함수 정의입니다. 두 번째 오버로드는 가장 단순하며 `getElementById` 메서드와 매우 유사하게 작동합니다. 어떤 `문자열`이 전달되면 HTMLElement 표준이 반환됩니다. 이 정의는 개발자가 고유한 HTML 요소 태그를 생성할 수 있게 합니다.
 
-For example `document.createElement('xyz')` returns a `<xyz></xyz>` element, clearly not an element that is specified by the HTML specification.
+예를 들면 `document.createElement('xyz')`는 HTML 규격에 지정된 요소가 아닌 `<xyz></xyz>` 요소를 반환합니다.
 
-> For those interested, you can interact with custom tag elements using the `document.getElementsByTagName`
+> 관심 있는 사람들을 위해 언급하자면, `document.getElementsByTagName`를 사용해 사용자 정의 태그(custom tag) 요소와 상호작용할 수 있습니다.
 
-For the first definition of `createElement`, it is using some advanced generic patterns. It is best understood broken down into chunks. Starting with the generic expression: `<K extends keyof HTMLElementTagNameMap>`. This expression defines a generic parameter `K` that is _constrained_ to the keys of the interface `HTMLElementTagNameMap`. The map interface contains every specified HTML tag name and its corresponding type interface. For example here are the first 5 mapped values:
+`createElement`의 첫 번째 정의에는, 고급 제네릭 패턴들을 사용하고 있습니다. 이는 내용을 나누어 이해하는 것이 가장 좋습니다. 먼저 `<K extends keyof HTMLElementTagNameMap>`라는 제네릭 표현부터 시작합니다. 이 표현식은 `HTMLElementTagNameMap` 인터페이스의 키에 제약을 받는 제네릭 매개변수 `K`를 정의하고 있습니다. 그 맵 인터페이스는 모든 지정된 HTML 태그 이름과 해당 타입 인터페이스를 포함하고 있습니다. 예를 들면 여기 코드 초반에 5개의 매핑된 값이 있습니다:
 
 ```ts
 interface HTMLElementTagNameMap {
@@ -97,9 +97,9 @@ interface HTMLElementTagNameMap {
 }
 ```
 
-Some elements do not exhibit unique properties and so they just return `HTMLElement`, but other types do have unique properties and methods so they return their specific interface (which will extend from or implement `HTMLElement`).
+일부 요소들은 고유한 프로퍼티를 나타내지 않아 `HTMLElement`를 반환하기도 하지만, 그 외 타입 요소들은 고유한 프로퍼티와 메서드를 가지고 특정 인터페이스(`HTMLElement`에서 확장되거나 구현됨)를 반환합니다.
 
-Now, for the remainder of the `createElement` definition: `(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K]`. The first argument `tagName` is defined as the generic parameter `K` . The TypeScript interpreter is smart enough to _infer_ the generic parameter from this argument. This means that the developer does not actually have to specify the generic parameter when using the method; whatever value is passed to the `tagName` argument will be inferred as `K` and thus can be used throughout the remainder of the definition. Which is exactly what happens; the return value `HTMLElementTagNameMap[K]` takes the `tagName` argument and uses it to return the corresponding type. This definition is how the `p` variable from the code snippet gets a type of `HTMLParagraphElement`. And if the code was `document.createElement('a')`, then it would be a element of type `HTMLAnchorElement`.
+이제, `createElement` 정의의 나머지 부분인 `(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K]`를 살펴보겠습니다. 첫 번째 인수 `tagName`은 일반적 매개변수 `K`로 정의됩니다. TypeScript 인터프리터는 이 인수로부터 일반 매개변수를 _추론_ 할 수 있는 충분한 성능을 가지고 있습니다. 이는 개발자가 메서드를 사용할 때 실제로 일반적인 매개변수를 지정할 필요가 없음을 의미하며, 어떤 값이 `tagName`인수로 전달되든 간에 `K`로 추론되므로 정의의 나머지 부분에 사용할 수 있을 것입니다. 정확히 무슨 일이 일어나는지를 보면 반환값 `HTMLElementTagNameMap[K]`는 `tagName`인수를 가지고 해당 타입을 반환합니다. 이 정의는 스니펫 코드 `p` 변수에서 `HTMLParagraphElement`타입을 얻는 방법입니다. 그리고 코드가 `document.createElement('a')`였다면, `HTMLAnchorElement`타입의 요소가 됩니다.
 
 ## The `Node` interface
 
