recursal/MDN huggingface dataset:
WebRTC 프로토콜 소개
==============

이 글은 WebRTC API에 대한 프로토콜을 소개하기 위해 작성 되었습니다.

ICE
---

Interactive Connectivity Establishment (ICE) 는 브라우저가 peer를 통한 연결이 가능하도록 하게 해주는 프레임워크입니다. Peer A에서 Peer B까지 단순하게 연결하는 것으로는 작동하지 않는 것에 대한 이유는 많이 있습니다. 연결을 시도하는 방화벽을 통과해야하기도 하고, 단말에 퍼블릭 IP가 없다면 유일한 주소값을 할당해야할 필요도 있으며 라우터가 peer간의 직접연결을 허용하지 않을 때에는 데이터를 릴레이해야할 경우도 있습니다. ICE는 이러한 작업을 수행하기 위해 STUN과 TURN 서버 둘다 혹은 하나의 서버를 사용합니다.

STUN
----

Session Traversal Utilities for **NAT** (STU**N**) (단축어 안의 단축어) 는 당신의 공개 주소(public address)를 발견하거나 peer간의 직접 연결을 막는 등의 라우터의 제한을 결정하는 프로토콜입니다.

클라이언트는 인터넷을 통해 클라이언트의 공개주소와 라우터의 NAT 뒤에 있는 클라이언트가 접근가능한지에 대한 답변을 위한 요청을 STUN서버에 보냅니다.

![An interaction between two users of a WebRTC application involving a STUN server.](/ko/docs/Web/API/WebRTC_API/Protocols/webrtc-stun.png)

NAT
---

Network Address Translation (NAT) 는 단말에 공개 IP주소를 할당하기 위해 사용됩니다. 라우터는 공개 IP 주소를 갖고 있고 모든 단말들은 라우터에 연결되어 있으며 비공개 IP주소(private IP Address)를 갖고 있습니다. 요청은 단말의 비공개 주소로부터 라우터의 공개 주소와 유일한 포트를 기반으로 번역될 것입니다. 이러한 경유로 각각의 단말이 유일한 공개 IP 없이 인터넷 상에서 검색 될 수 있는 방법입니다.

어떠한 라우터들은 네트워크에 연결할수 있는 제한을 갖고 있습니다. 따라서 STUN서버에 의해 공개 IP주소를 발견한다고 해도 모두가 연결을 할수 있다는 것은 아닙니다. 이를 위해 TURN이 필요합니다.

TURN
----

몇몇의 라우터들은 Symmetric NAT이라고 불리우는 제한을 위한 NAT을 채용하고 있습니다. 이 말은 peer들이 오직 이전에 연결한 적 있는 연결들만 허용한다는 것입니다.

Traversal Using Relays around NAT (TURN) 은 TURN 서버와 연결하고 모든 정보를 그 서버에 전달하는 것으로 Symmetric NAT 제한을 우회하는 것을 의미합니다. 이를 위해 TURN 서버와 연결을 한 후 모든 peer들에게 저 서버에 모든 패킷을 보내고 다시 나에게 전달해달라고 해야 합니다. 이것은 명백히 오버헤드가 발생하므로 이 방법은 다른 대안이 없을 경우만 사용하게 됩니다.

![An interaction between two users of a WebRTC application involving STUN and TURN servers.](/ko/docs/Web/API/WebRTC_API/Protocols/webrtc-turn.png)

SDP
---

Session Description Protocol (SDP) 은 해상도나 형식, 코덱, 암호화등의 멀티미디어 컨텐츠의 연결을 설명하기 위한 표준입니다. 이러한 것이 두개의 peer가 다른 한쪽이 데이터가 전송되고 있다는 것을 알게 해줍니다. 이것은 기본적으로 미디어 컨텐츠 자체가 아닌 컨텐츠에 대한 메타데이터 설명이 됩니다.

기술적으로 보자면 SDP 는 프로토콜이 아닙니다. 그러나 데이터 포멧은 디바이스간의 미디어를 공유하기 위한 연결을 설명하기 위해 사용됩니다.

SDP의 문서화는 다른 웹상에서도 잘되어 있으므로 이 문서에서는 간단히 소개하는 것으로 마무리 짓도록 하겠습니다.

### 구조

SDP는 한줄 이상의 UTF-8 텍스트로 구성됩니다. 이 텍스트의 시작은 한글자로 구성되며 한글자 뒤에 등호기호 (`"="`)가 옵니다. 그리고 그 뒤에는 포멧에 맞게 값이나 설명이 적혀있습니다. 한글자로 시작되는 그 글자는 일반적으로 "letter-lines"를 뜻합니다. 예를들어 미디어 설명을 제공하는 것이라면 `"m"` 이라고 적어두고 이것은 m-lines을 뜻합니다.

### 자세히

SDP에 대해 더 알고 싶으시다면 아래 유용한 자료들이 있습니다.

* 명세: RFC 4566: SDP: Session Description Protocol
* IANA registry of SDP parameters
performance.mark()
==================

**`mark()`** 메소드는 브라우저의 *performance entry buffer*에 주어진 이름으로 `timestamp` (en-US)를 생성합니다. timestamp가 정의된 응용프로그램은 `Performance` (en-US) 인터페이스의 `getEntries*()` 메소드들을 통해 불러올 수 있습니다. (`getEntries()` (en-US), `getEntriesByName()` (en-US), `getEntriesByType()` (en-US)).

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

`mark`의 `performance entry`는 다음 속성값을 갖습니다:

* `entryType` (en-US) - "`mark`"로 설정됩니다.
* `name` (en-US) - mark가 생성될 때 주어진 "`name`"으로 설정됩니다.
* `startTime` (en-US) - `mark()`가 호출되었을 때의 `timestamp` (en-US)가 설정됩니다.
* `duration` (en-US) - "`0`"으로 설정됩니다. (*duration*이 없는 mark).

만약 메서드에 주어진 `name`이 이미 `PerformanceTiming` (en-US) 인터페이스 상에 존재한다면 `SyntaxError`를 throw 합니다.

Syntax
------


```js
performance.mark(name);
```

### Arguments

name

mark의 이름을 나타내는 `DOMString`.

### Return value

void

Example
-------

다음 예시는 mark()를 사용하여 `PerformanceMark` (en-US)를 생성하고 불러오는 방법을 보여줍니다.


```js
// Create a bunch of marks.
performance.mark("squirrel");
performance.mark("squirrel");
performance.mark("monkey");
performance.mark("monkey");
performance.mark("dog");
performance.mark("dog");

// Get all of the PerformanceMark entries.
const allEntries = performance.getEntriesByType("mark");
console.log(allEntries.length);
// 6

// Get all of the "monkey" PerformanceMark entries.
const monkeyEntries = performance.getEntriesByName("monkey");
console.log(monkeyEntries.length);
// 2

// Clear out all of the marks.
performance.clearMarks();
```

명세서
---

| Specification |
| --- |
| User Timing # dom-performance-mark |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DataTransfer: files 속성
======================

`DataTransfer` 객체의 **`files`** 속성은 드래그 작업에서의 `파일 목록`입니다. 작업에 파일이 없으면 목록은 비어 있습니다.

이 기능은 사용자의 데스크탑에서 브라우저로 파일을 드래그하기 위해 사용될 수 있습니다.

**참고:** `DataTransfer` 객체의 `files` 속성은 `drop` 이벤트 내에서만 접근될 수 있습니다. 모든 다른 이벤트의 경우 기본 데이터 저장소가 보호 모드이기 때문에 `files` 속성은 비어 있을 것입니다.

값
-

드래그 작업에서 파일의 `목록`으로 작업의 각 파일은 하나의 목록 항목입니다. 드래그 작업에 파일이 없으면 목록은 비어 있습니다.

예제
--

이 인터페이스에는 두 가지 실제 예제가 있습니다.

* Firefox: https://jsfiddle.net/9C2EF/
* 모든 브라우저: https://jsbin.com/hiqasek/
명세서
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-files-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DataTransfer: DataTransfer() 생성자
================================

**`DataTransfer`** 생성자는 새로운 `DataTransfer` 객체 인스턴스를 생성합니다.

구문
--


```js
new DataTransfer()
```

### 매개변수

없음.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DataTransfer.getData()
======================

**`DataTransfer.getData()`** 메소드는 특정 형태를 위해 (`DOMString`로) 끌어낸 데이터를 회수한다. 가령, 끌어내는 동작이 데이터를 포함하지 않는다면, 이 메소드는 빈 문자열을 반환한다.

예시 데이터 형식으로는 `text/plain` 와 `text/uri-list` 이 있다.

구문
--


```js
dataTransfer.getData(format);
```

### 매개변수

`format`

회수할 데이터 형식을 나타내는 `DOMString`

### 반환 값

`DOMString`

특정 `format`을 위해 끌어낸 데이터를 나타내는 `DOMString`. 만약 끌어내는 동작이 데이터를 가지고 있지 않거나 동작이 특정 `format` 에 대한 데이터를 가지고 있지 않다면, 이 메소드는 빈 문자열을 반환한다.

예제
--

이 예시는 `DataTransfer` 객체의 `getData()` 와 `setData()` (en-US) 메소드의 사용을 보여준다.

### HTML 내용


```html
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <span id="drag" draggable="true" ondragstart="drag(event)"
 >drag me to the other box</span
 >
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
```

### CSS 내용


```css
#div1,
#div2 {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
```

### JavaScript 내용


```js
function allowDrop(allowdropevent) {
  allowdropevent.target.style.color = "blue";
  allowdropevent.preventDefault();
}

function drag(dragevent) {
  dragevent.dataTransfer.setData("text", dragevent.target.id);
  dragevent.target.style.color = "green";
}

function drop(dropevent) {
  dropevent.preventDefault();
  var data = dropevent.dataTransfer.getData("text");
  dropevent.target.appendChild(document.getElementById(data));
  document.getElementById("drag").style.color = "black";
}
```

### 결과

명세서
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-getdata-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Drag and drop
* Drag Operations (en-US)
* Recommended Drag Types (en-US)
* Dragging and Dropping Multiple Items
* DataTransfer test - Paste or Drag
DataTransfer: items 속성
======================

읽기 전용 `DataTransfer`의 `items` 속성은 드래그 작업에서 데이터 전송 항목 (en-US)의 `목록` (en-US)입니다. 목록은 작업의 각 항목에 대해 하나의 항목이 포함되며 작업에 항목이 없으면 목록은 비어 있습니다.

값
-

드래그 작업에서 드래그되는 항목을 나타내는 `DataTransferItem` (en-US) 객체를 포함하는 `DataTransferItemList` (en-US) 객체입니다. 드래그되는 각 객체에 대해 하나의 목록 항목이 있습니다. 드래그 작업에 데이터가 없으면 목록은 비어 있습니다.

예제
--

### 드래그된 항목 로깅

이 예제는 드래그된 항목에 대한 정보를 기록하기 위해 `items`를 사용합니다.

#### HTML


```html
<ul>
  <li id="source1" draggable="true">Drag Item 1 to the Drop Zone</li>
  <li id="source2" draggable="true">Drag Item 2 to the Drop Zone</li>
</ul>
<div id="target">Drop Zone</div>

<button id="reset">Reset</button>
```


#### CSS


```css
div {
  margin: 0em;
  padding: 2em;
}

#target {
  border: 1px solid black;
}
```


#### JavaScript


```js
function dragstartHandler(ev) {
  console.log(`dragstart: target.id = ${ev.target.id}`);
  // 요소의 id를 드래그 페이로드에 추가합니다.
  // 그러면 드롭 핸들러가 트리에 추가할 요소를 알 수 있습니다.
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
}

function dropHandler(ev) {
  ev.preventDefault();
  // 대상의 id를 가져오고 이동된 요소를 대상의 DOM에 추가합니다.
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  // 각 항목의 "kind"와 "type"을 출력합니다.
  if (ev.dataTransfer.items) {
    for (const item of ev.dataTransfer.items) {
      console.log(`kind = ${item.kind}, type = ${item.type}`);
    }
  }
}

function dragoverHandler(ev) {
  ev.preventDefault();
  // 이동할 dropEffect를 설정합니다.
  ev.dataTransfer.dropEffect = "move";
}

const source1 = document.querySelector("#source1");
const source2 = document.querySelector("#source2");
const target = document.querySelector("#target");

source1.addEventListener("dragstart", dragstartHandler);
source2.addEventListener("dragstart", dragstartHandler);
target.addEventListener("dragover", dragoverHandler);
target.addEventListener("drop", dropHandler);

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
```


#### 결과

명세서
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-items-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* HTML 드래그 앤 드롭 API
* Drag Operations (en-US)
* Recommended Drag Types (en-US)
* DataTransfer test - Paste or Drag
WebSocket.readyState
====================

**`WebSocket.readyState`** 읽기 전용 속성은 `WebSocket` 연결의 현재 상태를 반환합니다.

값
-

아래의 `unsigned short` 값 중 하나입니다.

| 값 | 상태 | 설명 |
| --- | --- | --- |
| `0` | `CONNECTING` | 소켓이 생성됐으나 연결은 아직 개방되지 않았습니다. |
| `1` | `OPEN` | 연결이 개방되어 통신할 수 있습니다. |
| `2` | `CLOSING` | 연결을 닫는 중입니다. |
| `3` | `CLOSED` | 연결이 닫혔거나, 개방할 수 없었습니다. |

명세
--

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-readystate① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WebSocket()
===========

**`WebSocket()`** 생성자는 새로운 `WebSocket` 객체를 반환합니다.

구문
--


```js
new WebSocket(url);
new WebSocket(url, protocols);
```

### 매개변수

`url`

연결할 URL입니다. WebSocket 서버가 응답할 URL이어야 합니다.

`protocols` Optional

하나의 프로토콜 문자열, 또는 프로토콜 문자열로 구성된 배열입니다. 하나의 서버가 다수의 WebSocket 하위 프로토콜을 구현할 수 있도록, 사용할 하위 프로토콜을 가리키기 위한 값입니다. (예를 들어, 지정한 `protocol`에 따라 하나의 서버로 서로 다른 유형의 상호작용을 처리하길 바랄 때 사용할 수 있습니다)

생략할 때의 기본 값은 빈 배열, 즉 `[]` 입니다.

### 예외

`SyntaxError` `DOMException` (en-US)

아래의 경우 발생합니다.

* `url`을 파싱할 수 없음
* `url`의 스킴이 `ws`와 `wss` 중 하나가 아님
* `url`에 프래그먼트가 있음
* `protocols` 배열의 값들이 고유하지 않거나, WebSocket Protocol 명세가 정의한 `Sec-WebSocket-Protocol` (en-US)의 필드 값을 구성하는 요소들의 요구사항에 맞지 않음

명세
--

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-websocket① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* RFC 6455 (WebSocket Protocol 명세)
EventTarget()
=============

**`EventTarget()`** 생성자는 새로운 `EventTarget` 객체 인스턴스를 생성합니다.

**참고:** 이 생성자를 명시적으로 사용하는 경우는 거의 없습니다. 보통은 `EventTarget`을 상속하는 객체의 생성자 내에서 `super` 키워드로 사용됩니다.

구문
--


```js
new EventTarget();
```

### 매개변수

없음.

### 반환 값

`EventTarget` 객체의 새로운 인스턴스.

예제
--


```js
class MyEventTarget extends EventTarget {
  constructor(mySecret) {
    super();
    this._secret = mySecret;
  }

  get secret() {
    return this._secret;
  }
}

let myEventTarget = new MyEventTarget(5);
let value = myEventTarget.secret; // == 5
myEventTarget.addEventListener("foo", function (e) {
  this._secret = e.detail;
});

let event = new CustomEvent("foo", { detail: 7 });
myEventTarget.dispatchEvent(event);
let newValue = myEventTarget.secret; // == 7
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-eventtarget-eventtarget① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `EventTarget`
EventTarget.dispatchEvent()
===========================

`EventTarget` 인터페이스의 **`dispatchEvent()`** 메서드는 `EventTarget` 객체로 `Event`를 발송해서, 해당 이벤트에 대해 등록된 `EventListener`들을 (동기적으로) 순서대로 호출합니다. `dispatchEvent()`를 통해 직접 발송한 이벤트에도 캡처링과 버블링 단계를 포함한 일반적인 이벤트 처리 규칙이 적용됩니다.

`dispatchEvent()` 호출은 이벤트 발송 과정의 마지막 단계입니다. 발송에 앞서 우선 `Event()` 생성자로 이벤트를 생성 및 초기화해야 합니다.

**참고:** `dispatchEvent()` 사용 시, `Event.target` 속성은 현재 `EventTarget`으로 초기화됩니다.

브라우저가 발송하는 "네이티브" 이벤트는 이벤트 루프를 통해 비동기적으로 처리기들을 호출하지만, `dispatchEvent()`로 발송된 이벤트는 처리기를 동기적으로 호출합니다. 즉, 모든 적합한 처리기의 호출과 반환이 끝나야 `dispatchEvent()` 역시 반환합니다.

구문
--


```js
dispatchEvent(event);
```

### 매개변수

`event`

발송할 `Event` 객체입니다. `Event.target`은 현재 `EventTarget`으로 설정됩니다.

### 반환 값

`event`가 취소 가능하고, 이벤트 처리기 중 하나에서 `Event.preventDefault()`를 호출한 경우 `false`, 그 외에는 `true`.

### 예외

`InvalidStateError` `DomException` (en-US)

이벤트 초기화 시 이벤트 유형을 지정하지 않은 경우 발생합니다.


**경고:** 이벤트 처리기에서 발생한 예외는 처리하지 않은 예외로 보고됩니다. 이벤트 처리기는 중첩 호출 스택에서 동작하므로, 실행이 끝날 때까지 호출자는 대기하지만, 예외는 호출자로 전파되지 않습니다.

예외
--

이벤트 생성과 발동를 확인하세요.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-eventtarget-dispatchevent③ |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The Event object reference
NodeList.item()
===============

`NodeList` 의 node를 index로 돌려줍니다. 이 메서드는 인수(arguments)를 제공하는 한 exceptions 을 throw 하지 않습니다. index가 범위를 벗어나면 `null` 값이 반환되고, 인수가 제공되지 않으면 `TypeError` 가 throw 됩니다.

Syntax
------


```js
nodeItem = nodeList.item(index);
```


* `nodeList` 는 `NodeList` 입니다. 일반적으로 childNodes 와 같은 다른 DOM 속성(property) 또는 메서드에서 가져옵니다.
* `index` 는 fetch될 node의 index입니다. index는 0 에서 부터 시작합니다.
* `nodeItem` 은 `item` 메서드가 반환 한 `nodeList` 의 node `index` 입니다.
Alternate Syntax
----------------

JavaScript는 NodeList 에서 index를 얻기 위한, 배열과 같은 브라켓 문법([])을 제공합니다 :


```js
nodeItem = nodeList[index];
```

Example
-------


```js
var tables = document.getElementsByTagName("table");
var firstTable = tables.item(1); // or simply tables[1] - returns the second table in the DOM
```

Specification
-------------

DOM Level 1 Core: NodeList.item()

DOM Level 2 Core: NodeList.item()

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
NodeList.values()
=================

**`NodeList.values()`** 메서드는 이 객체에 포함된 모든 값을 통과할 수 있는 `iterator`를 반환합니다. 값은 `Node` (en-US) 객체 입니다.

Syntax
------


```js
nodeList.values();
```

### Return value

`iterator`를 반환합니다.

Example
-------


```js
var node = document.createElement("div");
var kid1 = document.createElement("p");
var kid2 = document.createTextNode("hey");
var kid3 = document.createElement("span");

node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);

var list = node.childNodes;

// Using for..of
for (var value of list.values()) {
  console.log(value);
}
```


결과는 다음과 같습니다 :
```

<p>
#text "hey"
<span>
```

명세서
---

#### No specification found

No specification data found for `api.NodeList.values`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Node` (en-US)
* `NodeList`
element.length
==============

요약
--

`length`는 `NodeList`의 항목수를 반환합니다.

구문
--


```js
numItems = nodeList.length;
```


* `numItems`은 `NodeList`의 항목수를 나타내는 정수값입니다.
예
-


```js
// 문서의 모든 paragraph
var items = document.getElementsByTagName("p");
// 목록의 각 항목에,
// HTML의 문자열로 전체 요소를 추가
var gross = "";
for (var i = 0; i < items.length; i++) {
  gross += items[i].innerHTML;
}
// gross는 이제 모두 paragraph을 위한 HTML
```

주의
--

reference에서 이 페이지의 위치에도 불구하고, `length`는 Element의 프로퍼티가 아니고, `NodeList`의 프로퍼티입니다. NodeList 개체는 document.getElementsByTagName과 같은 많은 DOM 메소드에서 반환됩니다.

`length`는 DOM 프로그래밍에서 아주 흔한 프로퍼티입니다. 위 예에서처럼 목록의 길이(적어도 있는 지 보기 위해)를 조사하고 for 루프에서 훑개(반복자, iterator)로 널리 쓰입니다.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-nodelist-length① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
NodeList.entries()
==================

**`NodeList.entries()`** 메서드는 이 객체에 포함된 모든 key/value 쌍을 통과하는 `iterator` 를 반환합니다. 이 값(value)은 `Node` (en-US) 객체입니다.

Syntax
------


```js
list.entries();
```

### Return value

`iterator` 를 반환합니다.

Example
-------


```js
var node = document.createElement("div");
var kid1 = document.createElement("p");
var kid2 = document.createTextNode("hey");
var kid3 = document.createElement("span");
node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);

var list = node.childNodes;

// Using for..of
for (var entry of list.entries()) {
  console.log(entry);
}
```


결과는 다음과 같습니다:
```

Array [ 0, <p> ]
Array [ 1, #text "hey" ]
Array [ 2, <span> ]
```

명세서
---

#### No specification found

No specification data found for `api.NodeList.entries`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Node` (en-US)
* `NodeList`
NodeList.prototype.forEach()
============================

`NodeList` 인터페이스의 **`forEach()`** 메서드는 리스트 내의 각각의 값 쌍에 대해 매개 변수에 지정된 콜백을 삽입 순서로 호출합니다.

문법Syntax
--------


```js
NodeList.forEach(callback[, thisArg]);
```

### Parameters

`callback`

 각각의 요소에 대해 실행하는 함수로, 3개의 인수(arguments)를 갖습니다:\_ *`currentValue`*
 \_ : NodeList에서 처리중인 현재 요소(element)입니다.


`currentIndex`

NodeList에서 처리중인 현재 요소의 인덱스입니다.

*`listObj`*

`forEach()` 가 적용되고 있는 NodeList 객체입니다.


`thisArg` Optional

`callback` 을 실행할 때 `this` 에 대입할 값입니다.

### Return value

`undefined`.

Exceptions
----------

*None*.

Example
-------


```js
var node = document.createElement("div");
var kid1 = document.createElement("p");
var kid2 = document.createTextNode("hey");
var kid3 = document.createElement("span");

node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);

var list = node.childNodes;

list.forEach(function (currentValue, currentIndex, listObj) {
  console.log(currentValue + ", " + currentIndex + ", " + this);
}, "myThisArg");
```


결과는 다음과 같습니다.
```

[object HTMLParagraphElement], 0, myThisArg
[object Text], 1, myThisArg
[object HTMLSpanElement], 2, myThisArg
```

Polyfill
--------

이 polyfill 은 ES5 를 지원하는 모든 브라우저에서 동작합니다:


```js
if (window.NodeList && !NodeList.prototype.forEach) {
  NodeList.prototype.forEach = function (callback, thisArg) {
    thisArg = thisArg || window;
    for (var i = 0; i < this.length; i++) {
      callback.call(thisArg, this[i], i, this);
    }
  };
}
```


또는


```js
if (window.NodeList && !NodeList.prototype.forEach) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}
```


The above behavior is how many browsers actually implement NodeList.prototype.forEach (Chrome, for example).

명세서
---

| Specification |
| --- |
| DOM Standard # interface-nodelist |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Node` (en-US)
* `NodeList`
NodeList.keys()
===============

**`NodeList.keys()`** 메서드는 이 객체에 포함된 모든 키를 통과할 수 있는 `iterator` 를 반환합니다. 이 키는 부호없는 정수형(`unsigned integer`) 입니다.

Syntax
------


```js
nodeList.keys();
```

### Return value

`iterator`를 반환합니다.

Example
-------


```js
var node = document.createElement("div");
var kid1 = document.createElement("p");
var kid2 = document.createTextNode("hey");
var kid3 = document.createElement("span");

node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);

var list = node.childNodes;

// Using for..of
for (var key of list.keys()) {
  console.log(key);
}
```


결과는 다음과 같습니다 :
```

0
1
2
```

명세서
---

#### No specification found

No specification data found for `api.NodeList.keys`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Node` (en-US)
* `NodeList`
Geolocation.clearWatch()
========================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**`Geolocation.clearWatch()`** 메서드는 `Geolocation.watchPosition()`로 등록한 위치 변화 감지 콜백을 해제합니다.

구문
--


```js
navigator.geolocation.clearWatch(id);
```

### 매개변수

`id`

`Geolocation.watchPosition()` 메서드가 반환하는 콜백 ID.

예제
--


```js
var id, target, option;

function success(pos) {
  var crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log("Congratulation, you reach the target");
    navigator.geolocation.clearWatch(id);
  }
}

function error(err) {
  console.warn("ERROR(" + err.code + "): " + err.message);
}

target = {
  latitude: 0,
  longitude: 0,
};

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0,
};

id = navigator.geolocation.watchPosition(success, error, options);
```

명세
--

| Specification |
| --- |
| Geolocation API # clearwatch-method |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Geolocation API 사용하기
* `Geolocation`
* `Geolocation.watchPosition()`
* `Geolocation.getCurrentPosition()`
Geolocation.watchPosition()
===========================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

`Geolocation` 인터페이스의 **`watchPosition()`** 메서드는 장치의 위치가 바뀔 때마다 자동으로 호출할 처리기 함수를 등록할 때 사용합니다. 선택적으로 오류 발생 시 사용할 콜백 함수도 지정할 수 있습니다.

구문
--


```js
navigator.geolocation.watchPosition(success[, error[, options]])
```

### 매개변수

`success`

`GeolocationPosition` 객체를 입력 매개변수로 사용하는 콜백 함수.

`error` Optional

`GeolocationPositionError` (en-US) 객체를 입력 매개변수로 사용하는 콜백 함수.

`options` Optional

위치 감지 설정 옵션을 제공하는 `PositionOptions` 객체.

### 반환 값

등록한 처리기를 식별할 때 사용하는 정수 ID. ID를 `Geolocation.clearWatch()`에 전달해 등록을 해제할 수 있습니다.

예제
--


```js
var id, target, options;

function success(pos) {
  var crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log("Congratulations, you reached the target");
    navigator.geolocation.clearWatch(id);
  }
}

function error(err) {
  console.warn("ERROR(" + err.code + "): " + err.message);
}

target = {
  latitude: 0,
  longitude: 0,
};

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0,
};

id = navigator.geolocation.watchPosition(success, error, options);
```

명세
--

| Specification |
| --- |
| Geolocation API # watchposition-method |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Geolocation API 사용하기
* 메서드가 속한 `Geolocation` 인터페이스와, 접근하는 방법인 `NavigatorGeolocation.geolocation` (en-US).
* 처리기를 해제하는 `Geolocation.clearWatch()` 메서드
* 비슷한 `Geolocation.getCurrentPosition()` 메서드