Cooperative Scheduling of Background Tasks API - Web API

Cooperative Scheduling of Background Tasks API
==============================================

**Cooperative Scheduling of Background Tasks API** (Background Tasks API 또는 간단하게 `requestIdleCallback()` API 라고도 부릅니다.) 는 user agnet가 자유 시간이 있다고 판단되면, 자동으로 실행될 작업을 대기열(queue tasks)에 넣을 수 있는 기능을 제공합니다.

Concepts and usage
------------------

웹 브라우저의 메인 스레드는 이벤트 루프를 중심으로 배치됩니다. 이 코드는 현재 표시중인 `Document`에 대한 모든 대기중인 업데이트를 가져오고, 페이지에서 실행해야하는 모든 JavaScript 코드를 실행하고, 입력 장치에서 이벤트를 받아들이고, 이를 받을 요소(엘리먼트)에 해당 이벤트를 전달(dispatch) 합니다. 또한 이벤트 루프는 운영 체제와의 상호작용, 브라우저 자체 유저 인터페이스에 대한 업데이트 등을 처리합니다. 이것은 매우 복잡한 코드 덩어리이며, 메인 JavaScript 코드는 이 모든 스레드와 코드가 함께 바로 실행될 수 있습니다. 유저 인터페이스 변경이 메인 스레드에서만 가능하기 때문에, 대부분의 코드가 DOM을 변경할 수 있는 것은 아니지만 메인 스레드에서 실행되고 있습니다.

이벤트 처리 및 화면 업데이트는 유저가 성능 문제를 인식하는 가장 분명한 두 가지 부분입니다. 따라서 우리의 코드가 웹의 훌륭한 시민이되고, 이벤트 루프의 실행이 지연되는 것을 방지하는것이 중요합니다. 과거에는 최대한 효율적으로 코드를 작성하고, 가능한 많은 작업을 웹 워커(workers) 에게 맡기는 것 외에는 안정적으로 수행할 수 있는 방법이 없었습니다. `Window.requestIdleCallback()`을 사용하면 브라우저의 이벤트 루프가 원활하게 실행되도록 보장하는데 적극적으로 참여할 수 있습니다. 또한 브라우저가 시스템에서 지연없이 안전하게 사용할 수 있는 시간을 코드에 알릴 수 있습니다. 그리고 주어진 한도 내에 있으면 사용자의 경험을 훨씬 향상 시킬 수 있습니다.

### Getting the most out of idle callbacks

아이들 콜백(idle callbacks)은 코드를 이벤트 루프와 협력하여 시스템이 과도하게 작업하지 않고, 최대한의 잠재력을 발휘할 수 있도록 하기 위한 것입니다. 지연 또는 기타 성능 문제가 발생하는 경우, 이를 사용하는 방법에 대해 생각해볼 수 있습니다.

* **우선순위(priority)가 높지 않은 태스크에 아이들 콜백을 사용합니다.** 얼마나 많은 콜백이 설정되었는지 알지 못하고, 사용자의 시스템이 얼마나 바쁜지 알지 못합니다. 때문에, 콜백이 얼마나 자주 실행되는지 알 수 없습니다(`timeout`을 지정하지 않으면). 이벤트 루프(또는 모든 화면 업데이트 주기)를 통과할 때 마다 아이들 콜백이 실행된다는 보장이 없습니다. 이벤트 루프가 사용 가능한 모든 시간을 사용하면, 당신은 운이 없습니다(다시한번, 말하지만 `timeout`을 사용하지 않으면).
* **아이들 콜백은 할당 된 시간을 초과하지 않도록 최선을 다해야 합니다.** 브라우저, 우리의 코드, 웹은 일반적으로 지정된 시간 제한을 초과해도 정상적으로 계속 실행되지만(심지어 시간이 지났더라도), 시간 제한(time restriction)은 시스템을 종료할 시간을 충분히 확보하도록 하기 위한 것입니다. 이벤트 루프를 통해 현재 패스를 끝내고, 다른 코드가 버벅이거나 애니메이션 효과가 지연되지 않도록 다음 이벤트로 넘어갑니다. 현재 `timeRemaining()` (en-US) 에는 50 밀리초의 상한선이 있습니다. 그러나 실제로는 이벤트 루프가 복잡한 사이트에서는 프로세서 시간을 필요로 하는 브라우저 확장 등으로 이미 그 시간을 점유하고 있기 때문에, 실제로 상한선은 더 적습니다.
* **아이들 콜백 내에서 DOM 변경은 피해야 합니다.** 콜백을 실행할 때 까지, 현재 프레임은 이미 드로잉을 마쳤으며 모든 레이아웃 업데이트와 계산이 완료됩니다. 레이아웃에 영향을 주는 변경사항을 적용하면, 브라우저가 중지되어야하고 그러면 다시 계산해야 하는 상황이 발생할 수 있습니다. 만약 콜백이 DOM을 변경해야 한다면, `Window.requestAnimationFrame()`을 사용하여 DOM을 예약해야 합니다.
* **실행시간을 예측할 수 없는 태스크는 피해야 합니다.** 아이들 콜백은 예측할 수 없는 시간이 걸릴 수 있는 일은 하지 말아야 합니다. 예를들어, 레이아웃에 영향을 줄 수 있는 사항은 피해야 합니다. 또한 `Promise` (en-US)를 해결(resolve)하거나, 거절(reject)하는것은 피해야 합니다. 콜백이 반환되는 순간, 해당 promise의 해결 혹은 거절에 대한 처리기를 호출하기 때문입니다.
* **timeout은 필요할 때, 정말 필요할 때만 써야 합니다.** timeout을 사용하면 코드가 적시에 실행되도록 할 수 있습니다. 하지만 성능에 영향을 주지 않으면서 실행할 만한 충분한 시간이 있지 않다면, 브라우저가 사용자를 호출해 지연이나 애니메이션 버벅임을 유발할 수 있습니다.
### Falling back to setTimeout

Background Tasks API는 매우 새롭기 때문에, 우리의 코드가 아직 이 API를 지원하지 않는 브라우저에서 작동해야 하는 경우가 있을 수 있습니다. 우리는 `setTimeout()`을 fallback 옵션으로 사용하는 간단한 shim으로 그렇게 할 수 있습니다. 이것은 기능적으로 동일하지 않기 때문에 polyfill이 아닙니다. `setTimeout()`을 사용하면 유휴 기간(idle periods)을 사용할 수 없습니다. 하지만 대신에 가능한 경우 코드를 실행하여, 사용자가 성능 지연을 경험하지 못하도록 최대한 방지합니다.

```js
window.requestIdleCallback =
  window.requestIdleCallback ||
  function (handler) {
    let startTime = Date.now();

    return setTimeout(function () {
      handler({
        didTimeout: false,
        timeRemaining: function () {
          return Math.max(0, 50.0 - (Date.now() - startTime));
        },
      });
    }, 1);
  };
```

`window.requestIdleCallback`이 선언되지 않았다면, 위와같이 만들어 줍니다. 함수는 우리의 코드가 호출 된 시간을 기록하는 것으로 시작합니다. 우리는 이것을 사용하여 `timeRemaining()` (en-US)에 대해 shim에서 반환 한 값을 계산합니다.

그리고 나서 `setTimeout()`을 호출하여, 우리의 `requestIdleCallback()` 구현에 전달 된 콜백을 실행하는 함수를 전달합니다. 이 콜백은 `IdleDeadline`을 준수하는 객체로 전달됩니다. 이 객체는 `didTimeout`을 false로 설정하고, `timeRemaining()` (en-US) 메서드가 전달되어 콜백에 50 밀리초의 시간을 제공합니다. `timeRemaining()`이 호출될 때 마다 본래의 50밀리초에서 경과시간을 뺀 남은 시간을 결정합니다.

결과적으로, 우리의 shim이 현재 `requestIdleCallback()`처럼 지금 이벤트 루프에 남아있는 유휴 시간(idle time)의 양을 제한하지는 않습니다. 하지만 콜백을 적어도 패스당 50밀리초 이하의 실행시간으로 제한합니다.

`cancelIdleCallback()` (en-US)에 대한 shim 구현은 훨씬 간단합니다:

```js
window.cancelIdleCallback =
  window.cancelIdleCallback ||
  function (id) {
    clearTimeout(id);
  };
```

`cancelIdleCallback()`이 선언되지 않은 경우, 이는 단순히 지정된 콜백 ID를 `clearTimeout()` (en-US)에 전달하는 메서드를 생성합니다.

이제 우리의 코드는 효율적이지는 않지만, Background Tasks API를 지원하지 않는 브라우저에서도 작동합니다.

Interfaces
----------

Background Tasks API 는 단 하나의 새 인터페이스를 추가합니다:

`IdleDeadline`

이 유형의 객체는 유휴 콜백(idle callback)에 전달되어 유휴 기간(idle period)이 지속되는 예상시간과, timeout 기간이 만료되어 콜백이 실행중인지 여부를 제공합니다.

`Window` 인터페이스 또한 `requestIdleCallback()`, `cancelIdleCallback()` (en-US) 이라는 새로운 두 메서드를 제공하는 API에 의해 확장되었습니다.

Example
-------

이 예제에서는 `requestIdleCallback()`을 사용하여 브라우저가 유휴 상태인 시간 동안, 시간이 많이 걸리면서 우선 순위가 낮은 작업을 실행하는 방법을 살펴 보겠습니다. 또한 이 예제는 `requestAnimationFrame()`을 사용하여 문서 내용에 대한 업데이트를 예약하는 방법을 보여줍니다.

아래 예제에서는 HTML과 JavaScript만 볼 수 있습니다. CSS는 이 기능을 이해하는데 특별히 중요하지 않아서, 표시하지 않습니다.

### HTML content

우리가 성취하려는 것을 지향하기 위해 HTML을 살펴보겠습니다. 이것은 텍스트 출력을 표시하는데 사용되는 두 번째 메인 박스(ID "logBox")뿐만 아니라, 작업 진행 상황을 나타내는데 사용되는 박스(ID "Container")를 만듭니다. 이는 quantum filament tachyon emissions의 해독이 얼마나 걸릴지 알 수 없기 때문입니다.

```html
<p>
  Demonstration of using
  <a href="https://developer.mozilla.org/ko/docs/Web/API/Background\_Tasks\_API">
    cooperatively scheduled background tasks</a
 >
  using the <code>requestIdleCallback()</code>
  method.
</p>

<div class="container">
  <div class="label">Decoding quantum filament tachyon emissions...</div>
  <progress id="progress" value="0"></progress>
  <div class="button" id="startButton">Start</div>
  <div class="label counter">
    Task <span id="currentTaskNumber">0</span> of
    <span id="totalTaskCount">0</span>
  </div>
</div>

<div class="logBox">
  <div class="logHeader">Log</div>
  <div id="log"></div>
</div>
```

progress box는 진행률을 나타내는 `<progress>` 요소(엘리먼트)를 사용합니다. 또한 진행률에 대한 정보를 숫자로 표시하며, 얼마나 변경이 되었는지 확인할 수 있는 label을 사용합니다. 또한 사용자가 데이터 처리를 시작하는데 사용하는 "Start" 버튼(ID "startButton")이 있습니다.
```

body {
  font-family: "Open Sans", "Lucida Grande", "Arial", sans-serif;
  font-size: 16px;
}

.logBox {
  margin-top: 16px;
  width: 400px;
  height: 500px;
  border-radius: 6px;
  border: 1px solid black;
  box-shadow: 4px 4px 2px black;
}

.logHeader {
  margin: 0;
  padding: 0 6px 4px;
  height: 22px;
  background-color: lightblue;
  border-bottom: 1px solid black;
  border-radius: 6px 6px 0 0;
}

#log {
  font:
    12px "Courier",
    monospace;
  padding: 6px;
  overflow: auto;
  overflow-y: scroll;
  width: 388px;
  height: 460px;
}

.container {
  width: 400px;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid black;
  box-shadow: 4px 4px 2px black;
  display: block;
  overflow: auto;
}

.label {
  display: inline-block;
}

.counter {
  text-align: right;
  padding-top: 4px;
  float: right;
}

.button {
  padding-top: 2px;
  padding-bottom: 4px;
  width: 100px;
  display: inline-block;
  float: left;
  border: 1px solid black;
  cursor: pointer;
  text-align: center;
  margin-top: 0;
  color: white;
  background-color: darkgreen;
}

#progress {
  width: 100%;
  padding-top: 6px;
}
```

### JavaScript content

 이제 문서 구조가 정의되었으므로, 작업을 수행할 JavaScript 코드를 작성하겠습니다.
 목표: 시스템이 유휴 상태일 때 마다 해당 기능을 실행하는 유휴 콜백과 함께, 함수를 호출하기 위한 요청을 큐에 추가할 수 있습니다.

#### Variable declarations

```js
let taskList = [];
let totalTaskCount = 0;
let currentTaskNumber = 0;
let taskHandle = null;
```

이 변수들은 처리 대기중인 태스크 리스트(task list)와, 태스크 큐(task queue) 및 실행에 대한 상태 정보를 관리하는데 사용합니다:

* `taskList` 는 객체의 배열(`Array`)로, 각각은 실행 대기중인 하나의 태스크(task)를 나타냅니다.
* `totalTaskCount` 는 큐에 추가된 태스크 수를 셉니다. 올라갈 수는 있지만, 결코 내려가지 않습니다. 우리는 이 값을 토대로 작업의 진행률을 표시하는 수학 계산에 사용합니다.
* `currentTaskNumber` 는 지금까지 처리한 태스크 수를 추적하는데 사용합니다.
* `taskHandle` 은 지금 처리중인 태스크에 대한 참조입니다.

```js
let totalTaskCountElem = document.getElementById("totalTaskCount");
let currentTaskNumberElem = document.getElementById("currentTaskNumber");
let progressBarElem = document.getElementById("progress");
let startButtonElem = document.getElementById("startButton");
let logElem = document.getElementById("log");
```

다음으로 우리는 상호작용할 필요가 있는 DOM 요소를 참조하는 변수를 선언합니다. 이 요소들은 다음과 같습니다:

* `totalTaskCountElem` 은 생성한 총 태스크 수를 progress box에 삽입하여 상태를 표시하는데 사용할 `<span>` 입니다.
* `currentTaskNumberElem` 은 지금까지 처리한 태스크 수를 표시하는데 사용되는 요소입니다.
* `progressBarElem` 은 지금까지 처리한 태스크의 백분율을 보여주는 `<progress>` 요소입니다.
* `startButtonElem` 은 시작 버튼 입니다.
* `logElem` 은 텍스트 메시지를 로그로 기록할 `<div>` (en-US) 입니다.

```js
let logFragment = null;
let statusRefreshScheduled = false;
```

마지막으로 다른 항목에 대한 몇 가지 변수를 설정합니다:

* `logFragment` 는 우리의 로깅 함수에 의해 생성된 `DocumentFragment` 를 저장하는데 사용됩니다. 다음 애니메이션 프레임이 렌더링 될 때 로그에 추가할 내용을 만듭니다.
* `statusRefreshScheduled` 는 앞으로의 프레임에 대한 상태 표시 박스의 업데이트를 이미 예약했는지 여부를 추적하는데 사용됩니다. 그렇기 때문에 프레임당 한 번만 수행합니다.

The shim to function even if idle callbacks aren't supported. Already discussed above, so it's hidden here to save space in the article.

```js
window.requestIdleCallback =
  window.requestIdleCallback ||
  function (handler) {
    let startTime = Date.now();

    return setTimeout(function () {
      handler({
        didTimeout: false,
        timeRemaining: function () {
          return Math.max(0, 50.0 - (Date.now() - startTime));
        },
      });
    }, 1);
  };

window.cancelIdleCallback =
  window.cancelIdleCallback ||
  function (id) {
    clearTimeout(id);
  };
```

#### Managing the task queue

다음으로 수행해야 할 태스크를 관리하는 방법을 알아보겠습니다. 우리는 아이들 콜백(idle callback) 기간 동안 시간이 허락하는대로, 태스크의 FIFO 큐를 생성함으로써 이를 수행할 것입니다.

##### Enqueueing tasks

첫째, 향후 실행을 위해 태스크를 큐에 넣는 함수가 필요합니다. 그 함수인 `enqueueTask()`는 다음과 같습니다:

```js
function enqueueTask(taskHandler, taskData) {
  taskList.push({
    handler: taskHandler,
    data: taskData,
  });

  totalTaskCount++;

  if (!taskHandle) {
    taskHandle = requestIdleCallback(runTaskQueue, { timeout: 1000 });
  }

  scheduleStatusRefresh();
}
```

`enqueueTask()` 는 입력으로 두 개의 매개변수(parameter)를 허용합니다:

* `taskHandler` 는 태스크를 처리하기 위해 호출 될 함수입니다.
* `taskData` 는 태스크 핸들러에 입력 매개 변수로 전달되는 객체이며, 태스크가 사용자 정의 데이터를 수신할 수 있게 합니다.

태스크를 큐에 넣기 위해 객체를 `taskList` 배열에 push 합니다. 객체는 각각 `handler` 와 `data` 라는 이름 아래에 `taskHandler` 와 `taskData` 값을 포함합니다. 그리고나서 대기열에 들어간 작업의 총 수를 반영하는 `totalTaskCount`를 증가시켜 나갑니다(태스크가 큐에서 제거될 때 우리는 그것을 감소시키지 않습니다).

다음으로 우리는 이미 유휴 콜백(idle callback)이 생성되었는지 확인합니다. 만약 `taskHandle` 이 0이면 아직 유휴 콜백이 없다는 것을 알기 때문에, `requestIdleCallback()`을 호출하여 `taskHandle` 을 생성합니다. 이 함수는 `runTaskQueue()`라는 함수를 호출하도록 구성되어 있습니다. 그리고 이 함수는 1초의 `timeout`을 갖고있기 때문에, 사용 가능한 실제 유휴 시간이 없는 경우에도 초당1회 이상 실행됩니다.

##### Running tasks

유휴 콜백 핸들러인 `runTaskQueue()` 는 브라우저가 유휴 시간이 충분하다고 판단하거나, 1초의 timeout이 만료될 때 호출됩니다. 이 함수의 일은 대기열에 넣어진 태스크를 실행하는 것입니다.

```js
function runTaskQueue(deadline) {
  while (
    (deadline.timeRemaining() > 0 || deadline.didTimeout) &&
    taskList.length
  ) {
    let task = taskList.shift();
    currentTaskNumber++;

    task.handler(task.data);
    scheduleStatusRefresh();
  }

  if (taskList.length) {
    taskHandle = requestIdleCallback(runTaskQueue, { timeout: 1000 });
  } else {
    taskHandle = 0;
  }
}
```

`runTaskQueue()`의 핵심은 계속되는 반복문입니다. 이 반복문은 taskList에 태스크가 있어야하고, 다음 두 조건 중 하나를 만족해야 합니다.
 `IdleDeadline.timeRemaining`을 검사하여 결정된 시간이 0 이상이거나 timeout이 한계에 도달하여 `deadline.didTimeout`이 참 이어야 합니다.

실행 시간이 있는 큐의 각 태스트에 대해 다음 작업을 수행합니다:

1. 큐에서 태스크 객체를 제거합니다.
2. `currentTaskNumber` 를 증가시켜서 우리가 실행한 태스크의 수를 추적합니다.
3. 태스크를 처리할 때 호출하는 `task.handler`에 태스크 데이터 객체(`task.data`)를 전달합니다.
4. 우리는 `scheduleStatusRefresh()`함수를 호출하여 진행 상황의 변화를 반영하도록 화면을 업데이트 합니다.

시간이 다 되었을 때, 여전히 리스트에 태스크가 남아있다면 `requestIdleCallback()`을 다시 호출하여, 다음에 유휴 시간이 있을 때 작업을 계속 처리할 수 있게 예약 합니다. 큐가 비어 있으면, taskHandle을 0으로 설정하여 콜백을 예약하지 않았음을 나타냅니다. 그러면 우리는 이제 `enqueueTask()`가 호출 된 다음에 콜백을 요청하는 방법을 알 수 있습니다.

#### Updating the status display

우리는 로그를 출력하고, 진행 상황을 document에 업데이트 하길 원합니다. 그러나 유휴 콜백 내에서 안전하게 DOM을 변경할 수는 없습니다. 대신 `requestAnimationFrame()`을 사용하여 브라우저에게 문의하도록 요청하여 안전할 때 디스플레이를 업데이트합니다.

##### Scheduling display updates

DOM 변경은 `scheduleStatusRefresh()`함수를 호출하여 예약합니다.

```js
function scheduleStatusRefresh() {
  if (!statusRefreshScheduled) {
    requestAnimationFrame(updateDisplay);
    statusRefreshScheduled = true;
  }
}
```

이것은 간단한 함수입니다. `statusRefreshScheduled`값을 확인하여 디스플레이 새로고침을 예약했는지 여부를 확인합니다. 만약 `false` 라면 `requestAnimationFrame()`을 호출하여 새로고침을 예약하고, 해당 작업을 처리하기 위해 `updateDisplay()` 함수를 호출합니다.

##### Updating the display

`updateDisplay()` 함수는 progress box의 내용과 로그를 그립니다. 다음 프레임을 렌더링하는 과정에서 변경 사항을 적용하기 위해, DOM이 안전한 상태인 경우 브라우저에서 호출합니다.

```js
function updateDisplay() {
  let scrolledToEnd =
    logElem.scrollHeight - logElem.clientHeight <= logElem.scrollTop + 1;

  if (totalTaskCount) {
    if (progressBarElem.max != totalTaskCount) {
      totalTaskCountElem.textContent = totalTaskCount;
      progressBarElem.max = totalTaskCount;
    }

    if (progressBarElem.value != currentTaskNumber) {
      currentTaskNumberElem.textContent = currentTaskNumber;
      progressBarElem.value = currentTaskNumber;
    }
  }

  if (logFragment) {
    logElem.appendChild(logFragment);
    logFragment = null;
  }

  if (scrolledToEnd) {
    logElem.scrollTop = logElem.scrollHeight - logElem.clientHeight;
  }

  statusRefreshScheduled = false;
}
```

첫 번째로, 로그의 텍스트가 맨 아래로 스크롤되면 `scrolledToEnd` 가 `true` 로 설정됩니다. 그렇지 않으면 `false`로 설정됩니다. 우리는 이것을 사용하여 컨텐츠에 로그가 추가될 때 마다, 스크롤이 바닥에 유지되도록 스크롤 위치를 업데이트할지 여부를 결정합니다.

다음으로, 태스크가 큐에 들어간 경우 진행 상태 및 상태 정보를 업데이트 합니다.

1. 진행률 막대의 현재 최대 값이 지금 큐에 대기중인 태스크의 총 개수(`totalTaskCount`)와 다른 경우, 표시되는 전체 태스크 수(`totalTaskCountElem`)의 내용과 진행률 막대의 최대 값을 업데이트 합니다. 이 값은 적절하게 비례합니다.
2. 지금까지 처리 한 태스크의 수와 동일한 작업을 수행합니다. `progressBarElem.value`가 현재 처리중인 태스크 넘버(`currentTaskNumber`)와 다른 경우, 현재 처리중인 태스크와 진행 막대바의 현재 값을 업데이트하여 표시합니다.

그런 다음, 로그에 추가되기를 기다리는 텍스트가 있는 경우(즉, `logFragment`가 `null`이 아닌 경우), `Element.appendChild()`를 사용하여 log 요소(엘리먼트)에 `logFragment`를 추가합니다. 그 후 `logFragment` 를 `null` 로 설정하여 다시 추가하지 않도록합니다.

시작했을 때 로그가 끝까지 스크롤 되면, 우리는 여전히 로그를 확인할 수 있습니다. 그런 다음 `statusRefreshScheduled` 를 `false`로 설정하여 새로고침을 처리했으며, 새 것을(태스크를) 요청하는것이 안전하다는 것을 표시합니다.

#### Adding text to the log

`log()` 함수는 지정된 텍스트를 로그에 추가합니다. DOM을 바로 수정하는것이 안전한지 아닌지 `log()` 함수가 호출될때 우리는 알지 못합니다. 때문에 업데이트가 안전할 때 까지 로그 텍스트를 캐싱합니다. 위의 `updateDisplay()` 코드에서, 애니메이션 프레임이 업데이트 될 때 실제로 로그 요소에 기록된 텍스트를 추가하는 코드를 찾을 수 있습니다.

```js
function log(text) {
  if (!logFragment) {
    logFragment = document.createDocumentFragment();
  }

  let el = document.createElement("div");
  el.innerHTML = text;
  logFragment.appendChild(el);
}
```

먼저, 지금은 존재하지 않는 `logFragment`라는 `DocumentFragment`객체를 생성합니다. 이 요소는 메인 DOM 자체를 즉시 변경하지 않고, 요소를 삽입할 수 있는 pseudo-DOM 입니다.

그런 다음 새로운 `<div>` (en-US) 요소를 만들고, 내용을 입력 `text`와 일치하도록 설정합니다. 그리고나서 `logFragment`에 있는 pseudo-DOM의 끝에 새 요소를 추가합니다. DOM에 대한 변경 때문에, `logFragment`는 `updateDisplay()`가 호출 될 때까지 로그 항목을 누적합니다.

### Running tasks

이제 우리는 태스크 관리 및 출력 유지보수 코드를 완성했습니다. 실제로 작업을 완료하는 태스크를 실행하기 위한 설정을 시작할 수 있습니다.

#### The task handler

우리가 태스크 핸들러—즉, 태스크 객체의 `handler` 속성(property) 값으로 사용할 함수—로 사용할 함수는 `logTaskHandler()` 입니다. 이것은 각 태스크에 대한 로그에 많은 내용을 출력하는 간단한 함수입니다. 만약 우리가 원한다면, 우리의 어플리케이션에서 이 코드를 유휴 시간(idle time)동안 수행하는 작업으로 대체할 수 있습니다. 단지, DOM을 변경해야 하는 작업은 `requestAnimationFrame()`을 통해 처리해야한다는 것을 기억해야합니다.

```js
function logTaskHandler(data) {
  log("<strong>Running task #" + currentTaskNumber + "</strong>");

  for (i = 0; i < data.count; i += 1) {
    log((i + 1).toString() + ". " + data.text);
  }
}
```

#### The main program

사용자가 시작 버튼을 클릭하면 `decodeTechnoStuff()` 함수가 호출되며 모든것이 시작됩니다.

The `[getRandomIntInclusive()](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random?document_saved=true#Getting_a_random_integer_between_two_values_inclusive)` method comes from the examples for `Math.random()`; we'll just link to it below but it needs to be included here for the example to work.

```js
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() \* (max - min + 1)) + min;
}
```

```js
function decodeTechnoStuff() {
  totalTaskCount = 0;
  currentTaskNumber = 0;
  updateDisplay();

  let n = getRandomIntInclusive(100, 200);

  for (i = 0; i < n; i++) {
    let taskData = {
      count: getRandomIntInclusive(75, 150),
      text: "This text is from task number " + (i + 1).toString() + " of " + n,
    };

    enqueueTask(logTaskHandler, taskData);
  }
}

document
  .getElementById("startButton")
  .addEventListener("click", decodeTechnoStuff, false);
```

`decodeTechnoStuff()`가 시작하면 `totalTaskCount`(현재까지 큐에 추가된 태스크의 수)의 값과 `currentTaskNumber`(현재 실행중인 태스크의 수) 값을 0으로 설정합니다. 그리고 `updateDisplay()`를 호출하여 "아직 아무일도 일어나지 않았습니다(nothing's happened yet)" 상태로 재설정합니다.

이 예제에서는 임의의 수의 태스크(100개에서 200개 사이)를 만듭니다. 이를 위해 우리는 `Math.random()`에 대한 문서에서 예제로 제공되는, `getRandomIntInclusive()` 함수를 사용하여 생성할 태스크 수를 얻습니다.

그런 다음 루프를 시작하여 실제 태스크를 만듭니다. 각 태스크마다 두 개의 속성(property)이 포함된 `taskData`객체를 만듭니다:

* `count` 는 태스크에서 로그로 출력할 문자열 수입니다.
* `text` 는 `count`로 지정된 횟수만큼 로그에 출력하는 텍스트입니다.

그러면 각 태스크는 `enqueueTask()`를 호출하여 대기열에 추가되고 `logTaskHandler()` 가 핸들러 함수로 전달됩니다. 함수가 호출될 때 함수에 전달할 객체로 `taskData` 객체를 사용합니다.

### Result

아래는 위 코드의 실제 작동 결과입니다. 사용해보고, 브라우저의 개발자 도구에서 사용하고, 코드에서도 직접 사용해 보세요.

명세서
---

| Specification |
| --- |
| requestIdleCallback() Cooperative Scheduling of Background Tasks # the-requestidlecallback-method |

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

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

See also
--------

* `Window.requestIdleCallback()`
* `Window.cancelIdleCallback()` (en-US)
* `IdleDeadline`


CSS - Web API

CSS
===

**`CSS`** 인터페이스는 유용한 CSS 관련 메서드를 가집니다. `CSS` 인터페이스는 정적 속성과 메서드만 가지고 있으며 아무런 객체도 `CSS` 인터페이스를 구현하지 않습니다.

속성
--

*CSS 인터페이스는 유틸리티 인터페이스이며, 이러한 형식의 어떠한 객체도 만들수 없으며 오직 정적 속성으로만 정의할 수 있습니다.*

### 정적 속성

`CSS.paintWorklet` (en-US)
Experimental
 Secure context

페인팅(painting)에 관련된 모든 클래스를 지닌 워크렛(worklet)에 접근할 수 있습니다.

메서드
---

### 정적 메서드

`CSS.registerProperty()` (en-US)

사용자 지정 CSS 속성 (en-US)을 등록하고 속성 자료형 검사, 기본값, 상속 여부 등을 설정할 수 있습니다.

`CSS.supports()` (en-US)

매개변수로 주어진 속성-값 쌍 또는 조건의 지원 여부를 나타내는 `Boolean`을 반환합니다.

`CSS.escape()` (en-US)
Experimental

CSS 선택자로 사용할 문자열을 이스케이프해서 반환합니다.

CSS 팩토리 함수 (en-US)

 매개변수로 지정한 값을 담은 새로운 `CSSUnitValue` (en-US)를 생성합니다. 단위는 팩토리 함수의 이름입니다.
 `CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}`

명세
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # namespacedef-css |
| CSS Properties and Values API Level 1  |

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

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


The HTML DOM API - Web API

The HTML DOM API
================

**HTML DOM API**는 HTML의 각 elements의 기능을 정의하는 인터페이스와 해당 요소가 의존하는 모든 지원 유형 및 인터페이스로 구성됩니다.

HTML DOM API에 포함된 기능 영역은 다음과 같습니다.

* DOM을 통한 HTML 요소에 대한 접근 및 제어.
* 양식 데이터에 대한 접근 및 조작.
* 2D 이미지의 콘텐츠 및 HTML `<canvas>`의 맥락과 해당 요소 위에 그리는 것과 같은 상호 작용.
* HTML 미디어 요소 (`<audio>` (en-US) 및 `<video>`)에 연결된 미디어 관리.
* 웹 페이지에서 콘텐츠 드래그 앤 드롭.
* 브라우저 탐색 기록에 대한 접근
* Web Components, Web Storage, Web Workers, WebSocket 및 Server-sent events와 같은 기타 API에 대한 연결 인터페이스 지원.
HTML DOM 개념 및 사용법
-----------------

이 글에서는 HTML 요소와 관련된 HTML DOM 부분에 초점을 맞추겠습니다. Drag and Drop, WebSockets, Web Storage와 같은 다른 영역에 대한 설명은 해당 API의 문서에서 확인할 수 있습니다.

### HTML 문서의 구조

문서 객체 모델(DOM)은 `document`의 구조를 설명하는 아키텍처로, 각 문서는 `Document` 인터페이스의 인스턴스로 표현됩니다. 문서는 **노드**의 계층적 트리로 구성되며, 문서 내의 단일 객체(예: 요소 또는 텍스트 노드)를 나타내는 기본 레코드입니다.

노드는 다른 노드를 함께 그룹화하거나 계층 구조를 구성할 수 있는 지점을 제공하는 등 엄격하게 조직화될 수 있으며, 다른 노드는 문서의 눈에 보이는 구성 요소를 나타낼 수 있습니다. 각 노드는 노드에 대한 정보를 가져오는 속성과 DOM 내에서 노드를 생성, 삭제 및 구성하는 메서드를 제공하는 `Node` (en-US) 인터페이스를 기반으로 합니다.

노드는 문서에 실제로 표시되는 콘텐츠를 포함한다는 개념이 없습니다. 노드는 빈 그릇입니다. 시각적 콘텐츠를 나타낼 수 있는 노드의 기본 개념은 `Element` (en-US) 인터페이스에 의해 도입되었습니다.`요소` 객체 인스턴스는 HTML 또는 SVG와 같은 XML 어휘를 사용하여 만든 문서에서 단일 요소를 나타냅니다.

예를 들어 두 개의 요소가 있고, 그 중 하나에 두 개의 요소가 더 중첩되어 있는 문서를 생각해 봅시다.

![Structure of a document with elements inside a document in a window](/ko/docs/Web/API/HTML_DOM_API/dom-structure.svg)

`Document` 인터페이스는 DOM 사양의 일부로 정의되어 있지만, HTML 명세서는 웹 브라우저의 맥락에서 DOM 사용과 관련된 정보를 추가하고, HTML 문서를 구체적으로 표현하는 데 사용할 수 있도록 크게 향상되었습니다.

HTML 표준에 의해 `Document`에 추가된 기능은 다음과 같습니다.

* 문서가 로드된 location, cookies (en-US), modification date (en-US), referring site 등 페이지를 로드할 때, HTTP 헤더에서 제공하는 다양한 정보에 접근할 수 있도록 지원합니다.
* 문서의 `<head>` 블록 및 body에 포함된 images, links, scripts (en-US) 등의 목록에 접근합니다.
* focus를 조사하고 편집 가능한 콘텐츠에 대한 명령을 실행하여 사용자와 상호 작용할 수 있도록 지원합니다.
* mouse 및 keyboard 이벤트, drag and drop, media control 등에 접근할 수 있도록 HTML 표준에 정의된 문서 이벤트용 이벤트 핸들러입니다.
* copy (en-US), cut (en-US) 및 paste (en-US)와 같은 요소와 문서 모두에 전달할 수 있는 이벤트 핸들러를 제공합니다.
### HTML 요소 인터페이스

`Element` 인터페이스는 보다 구체적인 모든 HTML 요소 클래스가 상속하는 `HTMLElement` 인터페이스를 도입하여 HTML 요소를 구체적으로 표현하도록 조정되었습니다. 이를 통해 `Element` 클래스가 확장되어 요소 노드에 HTML 관련 일반 기능을 추가할 수 있습니다. `HTMLElement`에 의해 추가된 속성에는 `hidden` (en-US) 및 `innerText` 등이 있습니다.

HTML 문서는 각 노드가 HTML 요소인 DOM 트리로, `HTMLElement` 인터페이스로 표시됩니다. `HTMLElement` 클래스는 차례로 `Node`를 구현하므로 모든 요소는 노드이기도 합니다(그 반대는 아닙니다). 이렇게 하면 `Node` (en-US) 인터페이스가 구현하는 구조적 기능을 HTML 요소에서도 사용할 수 있으므로, 서로 중첩하고, 생성 및 삭제하고, 이동하는 등의 작업을 수행할 수 있습니다.

`HTMLElement` 인터페이스는 일반적이며, 요소의 ID, 좌표, 요소를 구성하는 HTML, 스크롤 위치에 대한 정보 등 모든 HTML 요소에 공통된 기능만 제공합니다.

특정 요소에 필요한 기능을 제공하는 핵심 `HTMLElement` 인터페이스의 기능을 확장하기 위해, `HTMLElement` 클래스를 필요한 속성과 메서드를 추가하도록 하위 클래스화합니다. 예를 들어 `<canvas>` 요소는 `HTMLCanvasElement` 유형의 객체로 표시됩니다. `HTMLCanvasElement`는 캔버스 관련 기능을 제공하기 위해, `height` (en-US)와 같은 속성과 `getContext()` 같은 메서드를 추가하여 `HTMLElement` 유형을 보강합니다.

HTML 요소 클래스의 전체 상속은 다음과 같습니다.

![Hierarchy of interfaces for HTML elements](/ko/docs/Web/API/HTML_DOM_API/html-dom-hierarchy.svg)

이와 같이 모든 요소는 모든 상위 요소의 속성과 메서드를 상속합니다. 예를 들어, DOM에서 `HTMLAnchorElement` (en-US) 유형의 객체로 표시되는 `<a>` 요소를 생각해 봅시다. 그러면 이 요소에는 해당 클래스의 문서에 설명된 앵커 관련 속성 및 메서드뿐만 아니라 `HTMLElement` 및 `Element` (en-US), `Node` (en-US), 마지막으로 `EventTarget`에서 정의한 속성 및 메서드도 포함됩니다.

각 레벨은 요소의 유용성에 대한 핵심적인 측면을 정의합니다. `Node`에서 요소는 요소가 다른 요소에 의해 포함될 수 있고, 요소 자체가 다른 요소를 포함할 수 있는 기능을 둘러싼 개념을 상속받습니다. 특히 중요한 것은 마우스 클릭, 재생 및 일시 정지 이벤트 등과 같은 이벤트를 수신하고 처리하는 기능인 `EventTarget`에서 상속함으로써 얻을 수 있는 기능입니다.

공통점을 공유하여 추가적인 중간 유형을 갖는 요소가 있습니다. 예를 들어 `<audio>` (en-US) 및 `<video>` 요소는 모두 시청각 미디어를 나타냅니다. 해당 유형인 `HTMLAudioElement` (en-US)와 `HTMLVideoElement`는 모두 공통 유형인 `HTMLMediaElement`를 기반으로 하며, 이 유형은 다시 `HTMLElement` 등을 기반으로 합니다. `HTMLMediaElement`는 오디오 요소와 비디오 요소 간에 공통으로 사용되는 메서드와 속성을 정의합니다.

이러한 요소별 인터페이스는 HTML DOM API의 대부분을 구성하며, 이 글에서 중점적으로 다룹니다. DOM의 실제 구조에 대해 자세히 알아보려면, Introduction to the DOM 문서를 참조하세요.

HTML DOM 대상 그룹
--------------

 HTML DOM에 의해 노출되는 기능은 웹 개발자 도구상자에서 가장 일반적으로 사용되는 API 중 하나입니다.
 가장 단순한 웹 애플리케이션을 제외한 모든 웹 애플리케이션은 HTML DOM의 일부 기능을 사용합니다.

HTML DOM API 인터페이스
------------------

HTML DOM API를 구성하는 대부분의 인터페이스는 개별 HTML 요소 또는 유사한 기능을 가진 소수의 요소 그룹에 거의 일대일로 매핑됩니다. 또한 HTML DOM API에는 HTML 요소 인터페이스를 지원하기 위한 몇 가지 인터페이스와 유형이 포함되어 있습니다.

### HTML 요소 인터페이스

이러한 인터페이스는 특정 HTML 요소(또는 이와 관련된 동일한 속성 및 메서드를 가진 관련 요소 집합)를 나타냅니다.

* `HTMLAnchorElement` (en-US)
* `HTMLAreaElement` (en-US)
* `HTMLAudioElement` (en-US)
* `HTMLBaseElement` (en-US)
* `HTMLBodyElement` (en-US)
* `HTMLBRElement`
* `HTMLButtonElement` (en-US)
* `HTMLCanvasElement`
* `HTMLDataElement` (en-US)
* `HTMLDataListElement` (en-US)
* `HTMLDetailsElement` (en-US)
* `HTMLDialogElement` (en-US)
* `HTMLDirectoryElement`
* `HTMLDivElement`
* `HTMLDListElement` (en-US)
* `HTMLElement`
* `HTMLEmbedElement` (en-US)
* `HTMLFieldSetElement` (en-US)
* `HTMLFormElement` (en-US)
* `HTMLHRElement` (en-US)
* `HTMLHeadElement` (en-US)
* `HTMLHeadingElement` (en-US)
* `HTMLHtmlElement` (en-US)
* `HTMLIFrameElement` (en-US)
* `HTMLImageElement` (en-US)
* `HTMLInputElement` (en-US)
* `HTMLLabelElement` (en-US)
* `HTMLLegendElement` (en-US)
* `HTMLLIElement`
* `HTMLLinkElement` (en-US)
* `HTMLMapElement` (en-US)
* `HTMLMediaElement`
* `HTMLMenuElement` (en-US)
* `HTMLMetaElement` (en-US)
* `HTMLMeterElement` (en-US)
* `HTMLModElement` (en-US)
* `HTMLObjectElement` (en-US)
* `HTMLOListElement` (en-US)
* `HTMLOptGroupElement` (en-US)
* `HTMLOptionElement` (en-US)
* `HTMLOutputElement` (en-US)
* `HTMLParagraphElement` (en-US)
* `HTMLPictureElement` (en-US)
* `HTMLPreElement` (en-US)
* `HTMLProgressElement` (en-US)
* `HTMLQuoteElement` (en-US)
* `HTMLScriptElement` (en-US)
* `HTMLSelectElement` (en-US)
* `HTMLSlotElement` (en-US)
* `HTMLSourceElement` (en-US)
* `HTMLSpanElement`
* `HTMLStyleElement` (en-US)
* `HTMLTableCaptionElement` (en-US)
* `HTMLTableCellElement` (en-US)
* `HTMLTableColElement` (en-US)
* `HTMLTableElement`
* `HTMLTableRowElement` (en-US)
* `HTMLTableSectionElement` (en-US)
* `HTMLTemplateElement`
* `HTMLTextAreaElement` (en-US)
* `HTMLTimeElement` (en-US)
* `HTMLTitleElement`
* `HTMLTrackElement` (en-US)
* `HTMLUListElement` (en-US)
* `HTMLUnknownElement` (en-US)
* `HTMLVideoElement`

#### 더 이상 사용되지 않는 HTML 요소 인터페이스

* `HTMLMarqueeElement` (en-US)
지원이 중단되었습니다

#### 폐기된 HTML 요소 인터페이스

* `HTMLFontElement` (en-US)
지원이 중단되었습니다
* `HTMLFrameElement`
지원이 중단되었습니다
* `HTMLFrameSetElement` (en-US)
지원이 중단되었습니다
* `HTMLIsIndexElement`
지원이 중단되었습니다
* `HTMLMenuItemElement` (en-US)
지원이 중단되었습니다
### 웹 앱 및 브라우저 통합 인터페이스

이러한 인터페이스는 HTML에 포함된 브라우저 창과 문서는 물론 브라우저의 상태, 사용가능한 플러그인(있는 경우) 및 다양한 구성 옵션에 대한 접근을 제공합니다.

* `BarProp` (en-US)
* `Navigator`
* `Window`

#### 더 이상 사용되지 않는 웹 앱 및 브라우저 통합 인터페이스

* `External`
지원이 중단되었습니다

#### 폐기된 웹 앱 및 브라우저 통합 인터페이스

* `ApplicationCache`
지원이 중단되었습니다
* `Plugin`
지원이 중단되었습니다
* `PluginArray` (en-US)
지원이 중단되었습니다
### 양식 지원 인터페이스

이러한 인터페이스는 `<form>`과 `<input>` (en-US) 요소를 포함하여, 양식을 만들고 관리하는 데 사용되는 요소에 필요한 구조와 기능을 제공합니다.

* `FormDataEvent` (en-US)
* `HTMLFormControlsCollection` (en-US)
* `HTMLOptionsCollection` (en-US)
* `RadioNodeList` (en-US)
* `ValidityState`
### 캔버스 및 이미지 인터페이스

이러한 인터페이스는 캔버스 API에서 사용하는 객체와 `<img>` 요소 및 `<picture>` (en-US) 요소를 나타냅니다.

* `CanvasGradient` (en-US)
* `CanvasPattern` (en-US)
* `CanvasRenderingContext2D` (en-US)
* `ImageBitmap` (en-US)
* `ImageBitmapRenderingContext` (en-US)
* `ImageData`
* `OffscreenCanvas`
* `OffscreenCanvasRenderingContext2D` (en-US)
* `Path2D` (en-US)
* `TextMetrics` (en-US)
### 미디어 인터페이스

미디어 인터페이스는 `<audio>` (en-US)와 `<video>`와 같은 미디어 요소의 콘텐츠에 대한 HTML 접근을 제공합니다.

* `AudioTrack` (en-US)
* `AudioTrackList` (en-US)
* `MediaError` (en-US)
* `TextTrack` (en-US)
* `TextTrackCue` (en-US)
* `TextTrackCueList` (en-US)
* `TextTrackList` (en-US)
* `TimeRanges` (en-US)
* `TrackEvent` (en-US)
* `VideoTrack` (en-US)
* `VideoTrackList` (en-US)
### 드래그 앤드 드롭 인터페이스

이러한 인터페이스는 HTML Drag and Drop API에서 드래그 가능한(또는 끌 수 있는) 개별 항목 및 그룹을 나타내고, 드래그 앤 드롭 프로세스를 처리하는 데 사용됩니다.

* `DataTransfer`
* `DataTransferItem` (en-US)
* `DataTransferItemList` (en-US)
* `DragEvent` (en-US)
### 페이지 이력 인터페이스

History API 인터페이스를 사용하면 브라우저의 방문 이력에 대한 정보에 접근할 수 있을 뿐만 아니라, 해당 방문 이력을 통해 브라우저의 현재 탭을 앞뒤로 이동할 수 있습니다.

* `BeforeUnloadEvent` (en-US)
* `HashChangeEvent` (en-US)
* `History`
* `Location`
* `PageTransitionEvent` (en-US)
* `PopStateEvent` (en-US)
### 웹 구성요소 인터페이스

이러한 인터페이스는 Web Components API에서 사용할 수 있는 사용자 정의 요소를 생성하고 관리하는 데 사용됩니다.

* `CustomElementRegistry`
### 기타 및 지원 인터페이스

이러한 지원 객체 유형은 HTML DOM API에서 다양한 방식으로 사용됩니다. 또한 `PromiseRejectionEvent` (en-US)는 JavaScript `Promise`가 거부될 때 전달되는 이벤트를 나타냅니다.

* `DOMStringList` (en-US)
* `DOMStringMap` (en-US)
* `ErrorEvent` (en-US)
* `HTMLAllCollection` (en-US)
* `MimeType` (en-US)
* `MimeTypeArray` (en-US)
* `PromiseRejectionEvent` (en-US)
### 다른 API에 속하는 인터페이스

몇몇 인터페이스는 기술적으로 HTML 사양에 정의되어 있지만 실제로는 다른 API의 일부이기도 합니다.

#### 웹 스토리지 인터페이스

Web Storage API는 웹사이트가 나중에 재사용할 수 있도록 데이터를 사용자 디바이스에 일시적 또는 영구적으로 저장할 수 있는 기능을 제공합니다.

* `Storage`
* `StorageEvent`

#### 웹 워커 인터페이스

이러한 인터페이스는 Web Workers API에서 작업자가 앱 및 해당 콘텐츠와 상호 작용할 수 있는 기능을 설정하는 데 사용될 뿐만 아니라 창 또는 앱 간의 메시징을 지원하는 데에도 사용됩니다.

* `BroadcastChannel`
* `DedicatedWorkerGlobalScope` (en-US)
* `MessageChannel` (en-US)
* `MessageEvent`
* `MessagePort` (en-US)
* `SharedWorker`
* `SharedWorkerGlobalScope` (en-US)
* `Worker`
* `WorkerGlobalScope` (en-US)
* `WorkerLocation` (en-US)
* `WorkerNavigator` (en-US)

#### 웹소켓 인터페이스

HTML 사양에 정의된 이러한 인터페이스는 WebSockets API에서 사용됩니다.

* `CloseEvent` (en-US)
* `WebSocket`

#### 서버 전송 이벤트 인터페이스

`EventSource` (en-US) 인터페이스는 server-sent events를 전송했거나 전송 중인 소스를 나타냅니다.

* `EventSource` (en-US)
예제
--

이 예시에서는 지정된 필드에 현재 값이 있는지에 따라 양식의 "제출" 버튼의 상태를 업데이트하기 위해 `<input>` (en-US) 요소의 `input` 이벤트를 모니터링합니다.

### JavaScript

```js
const nameField = document.getElementById("userName");
const sendButton = document.getElementById("sendButton");

sendButton.disabled = true;
// [참고: 이 예제는 항상 이 예제에 초점을 맞추고 스크롤한 상태로 로드되므로 비활성화되어 있습니다].
//nameField.focus();

nameField.addEventListener("input", (event) => {
  const elem = event.target;
  const valid = elem.value.length !== 0;

  if (valid && sendButton.disabled) {
    sendButton.disabled = false;
  } else if (!valid && !sendButton.disabled) {
    sendButton.disabled = true;
  }
});
```

이 코드는 `Document` 인터페이스의 `getElementById()` 메서드를 사용하여, ID가 `userName` and `sendButton`인 `<input>` (en-US) 요소를 나타내는 DOM 객체를 가져옵니다. 이를 통해 이러한 요소에 대한 정보를 제공하고 제어 권한을 부여하는 속성과 메서드에 접근할 수 있습니다.

"보내기" 버튼의 `disabled` (en-US) 속성에 대한 `HTMLInputElement` (en-US) 객체가 `true`로 설정되어 "보내기" 버튼을 클릭할 수 없도록 비활성화합니다. 또한 사용자 이름 입력 필드는 `HTMLElement`에서 상속하는 `focus()` (en-US) 메서드를 호출하여 활성 포커스로 설정됩니다.

그런 다음 `addEventListener()`를 호출하여 사용자 이름 입력에 `input` 이벤트에 대한 핸들러를 추가합니다. 이 코드는 입력의 현재 값의 길이를 확인하여 0이면 "보내기" 버튼이 아직 비활성화되어 있지 않은 경우 비활성화합니다. 그렇지 않으면 이 코드는 버튼이 활성화 되도록 합니다.

이렇게 하면 사용자 이름 입력 필드에 값이 있을 때마다 '보내기' 버튼이 항상 활성화되고 비어 있으면 비활성화됩니다.

### HTML

양식(form)에 대한 HTML은 다음과 같습니다.

```html
<p>아래 정보를 제공해주세요. "*" 표시가 되어있는 부분은 필수 정보입니다.</p>
<form action="" method="get">
  <p>
    <label for="userName" required>Your name:</label>
    <input type="text" id="userName" /> (*)
  </p>
  <p>
    <label for="email">Email:</label>
    <input type="email" id="userEmail" />
  </p>
  <input type="submit" value="Send" id="sendButton" />
</form>
```

### 결과

명세서
---

| Specification |
| --- |
| HTML Standard # htmlelement |

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

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

같이 보기
-----

### 참고서

* HTML 요소 참고서
* HTML 특성 참고서
* Document Object Model (DOM) 참고서
### 안내서

* Manipulating documents (en-US): DOM 조작에 대한 초보자 가이드.


MessageEvent - Web API

MessageEvent
============

**`MessageEvent`** 는 `WebSocket` 또는 WebRTC `RTCDataChannel` (en-US) 으로 된 타겟으로 부터 전달받은 메시지를 보여주는 interface 입니다.

이 이벤트는 `WebSocket.onmessage` (en-US) 또는 `RTCDataChannel.onmessage` (en-US) 으로 설정된 이벤트 핸들러를 통해 실행이 되게 됩니다.

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

생성자
---

`MessageEvent()` (en-US)

새로운 `MessageEvent를 생성합니다.`

속성
--

*이 interface는 부모 객체인 `Event`의 속성을 상속받습니다.*

`MessageEvent.data` (en-US) 읽기 전용

emitter에 의해 보내진 데이터인 `DOMString`, `Blob` 또는 `ArrayBuffer`를 포함합니다.

`MessageEvent.origin` (en-US)

`DOMString` 입니다.…

`MessageEvent.ports` (en-US)

…

`MessageEvent.source` (en-US)

…

메서드
---

*이 interface는 부모 객체인 `Event`의 메서드를 상속받습니다.*

`MessageEvent.initMessageEvent()`
지원이 중단되었습니다

 … **더 이상 사용하지 마십시오**
 : `MessageEvent()` (en-US) 생성자를 대신 사용하십시오.

Browser 호환성
-----------

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

See also
--------

* `ExtendableMessageEvent` (en-US), 와 유사한 interface이며, 개발자에게 더 유연성을 제공하기 위해 사용되는 interface 입니다.
* WebSocket API (en-US)
* WebRTC API


HTMLBRElement - Web API

HTMLBRElement
=============

**`HTMLBRElement`** 인터페이스는 HTML 줄바꿈 요소(`<br>`)를 나타냅니다. `HTMLElement`를 상속합니다.

속성
--

*부모인 `HTMLElement`로부터 상속합니다.*

`HTMLBRElement.clear`
지원이 중단되었습니다

떠있는 요소 주변 텍스트의 흐름을 나타내는 `DOMString`입니다.

메서드
---

*부모인 `HTMLElement`로부터 상속합니다.*

명세
--

| Specification |
| --- |
| HTML Standard # htmlbrelement |

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

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

같이 보기
-----

* 인터페이스를 구현하는 HTML 요소 `<br>`.


NodeList - Web API

NodeList
========

**`NodeList`** 객체는 일반적으로 `element.childNodes`와 같은 속성(property)과 `document.querySelectorAll` 와 같은 메서드에 의해 반환되는 노드의 콜렉션입니다.

**참고:** `NodeList` 가 `Array` 는 아니지만, `forEach()` 를 사용하여 반복할 수 있습니다. 또한 `Array.from()` 을 사용하여 `Array` 로 변환 할 수도 있습니다.그러나 일부 오래된 브라우저는 아직`NodeList.forEach()` 또는 `Array.from()` 를 구현하지 않았습니다. 이것은 `Array.prototype.forEach()` 를 사용하여 회피할 수 있습니다. — 이 문서의 예제를 참조하세요.

경우에 따라, `NodeList`는 라이브 콜렉션으로, DOM의 변경 사항을 실시간으로 콜렉션에 반영합니다. 예를 들어, `Node.childNodes` 는 실시간입니다:

```js
var parent = document.getElementById("parent");
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // let's assume "2"
parent.appendChild(document.createElement("div"));
console.log(child_nodes.length); // should output "3"
```

다른 경우 `NodeList`는 정적 콜렉션입니다. DOM을 변경해도 콜렉션 내용에는 영향을 주지 않습니다. `document.querySelectorAll()` 은 정적 `NodeList`를 반환합니다.

`NodeList`의 항목(items)을 순회(iterate)하거나, 특히 리스트의 길이를 캐시(cache)해야 할 때, 이 구분을 유지하는것이 좋습니다.

속성(Properties)
--------------

`NodeList.length`

`NodeList`의 노드의 개수를 반환합니다.

메서드(Methods)
------------

`NodeList.item()`
리스트 내 항목(item)의 인덱스를 반환하고, 인덱스가 범위 외의 경우일 땐 `null`을 반환합니다.
`nodeList[idx]`의 대안으로 사용할 수 있습니다.(`i` 가범위를 벗어날 때(out-of-bounds) `undefined` 를 반환합니다.) 이것은 비 JavaScript 언어 DOM 구현에 유용합니다.
`NodeList.entries()`
`iterator` 를 반환하여 코드가 콜렉션에 포함된 모든 키/값 쌍을 순회할 수 있도록 합니다. (이 경우 키는 0부터 시작하는 숫자이고, 값은 노드가 됩니다.)
`NodeList.forEach()`
`NodeList`의 요소(element)마다 한 번씩, 인자로 전달 받은 함수를 실행하여 요소를 인수(argument)로 함수에 전달합니다.
`NodeList.keys()`
`iterator`를 반환하여 콜렉션에 포함된 키/값 쌍의 모든 키를 코드가 순회하도록 합니다. (이 경우 키는 0부터 시작하는 숫자입니다.)
`NodeList.values()`
콜렉션에 포함된 키/값 쌍의 모든 값(nodes)을 코드가 순회할 수 있게 해주는 `iterator`를 반환합니다.
Example
-------

for 루프를 사용하여 `NodeList`의 항목을 반복할 수 있습니다.

```js
for (var i = 0; i < myNodeList.length; ++i) {
  var item = myNodeList[i]; // Calling myNodeList.item(i) isn't necessary in JavaScript
}
```

**리스트의 항목(items)을 열거하기 위해 for...in 또는 for each...in를 사용하지 않길 바랍니다.** `NodeList`의 길이와 항목 속성까지 열거합니다. 또한 스크립트가 요소(`element` (en-US)) 객체만 처리한다고 가정하면 오류가 발생할 수 있습니다. 게다가, `for..in`은 고정된 순서로 각 속성들을 접근한다는 보장이 없습니다.

`for...of` (en-US) 루프는 `NodeList` 객체를 올바르게 반복합니다.

```js
var list = document.querySelectorAll("input[type=checkbox]");
for (var item of list) {
  item.checked = true;
}
```

최신 브라우저는 반복자(iterator) 메서드인 `forEach()`만이 아니라, `entries()`, `values()`, `keys()` 까지도 지원합니다.

인터넷 익스플로러의 호환을 위해서는 `Array.prototype.forEach` 를 사용하는 방법도 있습니다.

```js
var list = document.querySelectorAll("input[type=checkbox]");
Array.prototype.forEach.call(list, function (item) {
  item.checked = true;
});
```

Array로 변환하는 법
-------------

NodeList의 컨텐츠를 Array의 메소드를 통해 다루는 것이 더 쉬울 때도 있다. 아래는 NodeList 객체를 Array로 변환하는 기법이다.

```js
var div_list = document.querySelectorAll("div"); // returns NodeList
var div_array = Array.prototype.slice.call(div_list); // converts NodeList to Array
```

NodeList prototype
------------------

NodeList에 프로토타입을 추가할 수도 있다.

```js
var elements = document.querySelectorAll(".suggestions");

NodeList.prototype.addEventListener = function (event, func) {
  this.forEach(function (content, item) {
    content.addEventListener(event, func);
  });
};

function log() {
  console.log(this, " was clicked");
}

elements.addEventListener("click", log);
//or
elements.addEventListener("click", function () {
  console.log(this, " awas clicked");
});
// 클릭된 요소로부터 출력될 요소는 둘 모두 HTML 요소가 된다.
```

forEach에 대한 자세한 내용은 Array.prototype.forEach() 를 참조하길 바란다.

명세서
---

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

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

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


WritableStream - Web API

WritableStream
==============

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

Streams API의 **`WritableStream`** 는 지정된 곳에 스트림 데이터를 writing하기 위한 싱크 추상 인터페이스입니다. 이 객체는 내장 백프레셔와 큐잉으로 구성되어 있다.

생성자
---

`WritableStream()` (en-US)

새 `WritableStream` 오브젝트를 생성한다.

속성
--

`WritableStream.locked` (en-US) 읽기 전용

`WritableStream`의 locked 여부를 boolean 값으로 반환한다.

메소드
---

`WritableStream.abort()` (en-US)

스트림을 중단한다. 생산자에게 더 이상 쓰기 스트림을 사용할 수 없으며 에러 상태로 전한됨을 고지한다. 큐잉되어 있던 모든 쓰기 작업은 소실된다.

`WritableStream.getWriter()` (en-US)

새 `WritableStreamDefaultWriter` (en-US) 인스턴스를 반환하고 스트림에 락을 건다. 스트림에 락이 걸린 동안에는 해제하기 전까지 다른 writer를 요청할 수 없다.

예시
--

아래 예시는 본 인터페이스의 몇 가지 기능을 소개합니다. 커스텀 콜백과 API를 통한 queuing strategy 값을 가지고 `WritableStream`을 생성하는 법을 보여줍니다. 그 후 생성된 스트림과 문자열을 전달하여 `sendMessage()`를 합니다. 함수 내부에선 `WritableStreamDefaultWriter` (en-US) 인스턴스를 반환하는 스트림의 `getWriter()` 메소드를 호출합니다. 문자열 조각들을 각각 스트림에 쓰기 위해 `forEach()` 를 사용하구요. 마지막으로 문자열 조각과 스트림 성공/실패를 처리하기 위해 `write()`와 `close()`는 Promise를 반환합니다.

```js
const list = document.querySelector("ul");

function sendMessage(message, writableStream) {
  // defaultWriter is of type WritableStreamDefaultWriter
  const defaultWriter = writableStream.getWriter();
  const encoder = new TextEncoder();
  const encoded = encoder.encode(message, { stream: true });
  encoded.forEach((chunk) => {
    defaultWriter.ready
      .then(() => {
        return defaultWriter.write(chunk);
      })
      .then(() => {
        console.log("Chunk written to sink.");
      })
      .catch((err) => {
        console.log("Chunk error:", err);
      });
  });
  // Call ready again to ensure that all chunks are written
  // before closing the writer.
  defaultWriter.ready
    .then(() => {
      defaultWriter.close();
    })
    .then(() => {
      console.log("All chunks written");
    })
    .catch((err) => {
      console.log("Stream error:", err);
    });
}

const decoder = new TextDecoder("utf-8");
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
let result = "";
const writableStream = new WritableStream(
  {
    // Implement the sink
    write(chunk) {
      return new Promise((resolve, reject) => {
        var buffer = new ArrayBuffer(2);
        var view = new Uint16Array(buffer);
        view[0] = chunk;
        var decoded = decoder.decode(view, { stream: true });
        var listItem = document.createElement("li");
        listItem.textContent = "Chunk decoded: " + decoded;
        list.appendChild(listItem);
        result += decoded;
        resolve();
      });
    },
    close() {
      var listItem = document.createElement("li");
      listItem.textContent = "[MESSAGE RECEIVED] " + result;
      list.appendChild(listItem);
    },
    abort(err) {
      console.log("Sink error:", err);
    },
  },
  queuingStrategy,
);

sendMessage("Hello, world.", writableStream);
```

Simple writer example에서 전체 코드를 볼 수 있습니다.

### 백프레셔(배압)

API 내부에서 백프레셔가 어떻게 구현되어 있는지에 따라 코드가 보기에 영 깔끔하지 않을 수 있습니다. 세 가지 관점에서 백프레셔가 어떻게 구현되어 있는지 알아봅시다.

* Counting strategy를 생성할 때 35라인에서 지정 된 `highWaterMark` 프로퍼티는 `write()`를 한 번 호출할때 `WritableStream`가 처리할 수 있는 최대 데이터량을 지정합니다. 이 예시에선 `defaultWriter.write()` 에 처리할 수 있는 최대량이 전달됩니다 (line 9).
* `writer.ready`프로퍼티는 `(WritableStream` 생성자의 첫 번째 파라미터로 전달 된) 콜백 객체가 데이터 쓰기를 완료했을 때 resolved되는 Promise를 반환합니다. 데이터 소스는 추가 데이터를 write하거나 (line 9) `close()` 를 호출할 수 있습니다(line 21). close()를 빨리 호출하면 더 이상 데이터를 쓸 수 없게 막을 수 있습니다. 예시에서 `writer.ready`를 두 번 호출한 이유입니다 (lines 7 and 19).
* 콜백 객체의 `write()`가 반환한 `Promise`는 `WritableStream`과 그 writer가 `writer.ready`를 언제 resolve 해야 할 지 알려줍니다.
명세서
---

| Specification |
| --- |
| Streams Standard # ws-class |

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

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

더 보기
----

* WHATWG Stream Visualiser, redable, writable 스트림 및 스트림간 변환을 시각화 한 예시.


MediaDevices - Web API

MediaDevices
============

**`MediaDevices`** 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스입니다. 다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어로 접근할 수 있는 방법입니다.

속성
--

부모 인터페이스인 `EventTarget`의 속성을 상속합니다.

이벤트
---

`devicechange` (en-US)

 사용자 컴퓨터에 미디어 입출력 장치가 추가되거나 제거됐을 때 발생합니다.
 `ondevicechange` (en-US) 속성으로도 사용할 수 있습니다.

메서드
---

부모 인터페이스인 `EventTarget`의 메서드를 상속합니다.

`enumerateDevices()`
시스템에서 사용 가능한 미디어 입출력 장치의 정보를 담은 배열을 가져옵니다.
`getSupportedConstraints()` (en-US)
`MediaStreamTrack` 인터페이스가 지원하는 제약을 나타내는 `MediaTrackSupportedConstraints` (en-US) 호환 객체를 반환합니다.
See [Capabilities and constraints](/ko/docs/Web/API/Media\_Streams\_API#capabilities\_and\_constraints) to learn more about constraints and how to use them.
`getDisplayMedia()` (en-US)
`MediaStream` (en-US)으로 캡처해 공유나 녹화 용도로 사용할 화면 혹은 화면의 일부(창)를 선택하도록 사용자에게 요청합니다. `MediaStream`으로 이행하는 `Promise`를 반환합니다.
`getUserMedia()` (en-US)
사용자에게 권한을 요청한 후, 시스템의 카메라와 오디오 각각 혹은 모두 활성화하여, 장치의 입력 데이터를 비디오/오디오 트랙으로 포함한 `MediaStream` (en-US)을 반환합니다.
예제
--

```js
"use strict";

// Put variables in global scope to make them available to the browser console.
var video = document.querySelector("video");
var constraints = (window.constraints = {
  audio: false,
  video: true,
});
var errorElement = document.querySelector("#errorMsg");

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(function (stream) {
    var videoTracks = stream.getVideoTracks();
    console.log("Got stream with constraints:", constraints);
    console.log("Using video device: " + videoTracks[0].label);
    stream.onremovetrack = function () {
      console.log("Stream ended");
    };
    window.stream = stream; // make variable available to browser console
    video.srcObject = stream;
  })
  .catch(function (error) {
    if (error.name === "ConstraintNotSatisfiedError") {
      errorMsg(
        "The resolution " +
          constraints.video.width.exact +
          "x" +
          constraints.video.width.exact +
          " px is not supported by your device.",
      );
    } else if (error.name === "PermissionDeniedError") {
      errorMsg(
        "Permissions have not been granted to use your camera and " +
          "microphone, you need to allow the page access to your devices in " +
          "order for the demo to work.",
      );
    }
    errorMsg("getUserMedia error: " + error.name, error);
  });

function errorMsg(msg, error) {
  errorElement.innerHTML += "<p>" + msg + "</p>";
  if (typeof error !== "undefined") {
    console.error(error);
  }
}
```

명세
--

| Specification |
| --- |
| Media Capture and Streams # mediadevices |

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

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

같이 보기
-----

* 인터페이스가 속한 Media Capture and Streams API
* `getDisplayMedia()` (en-US) 메서드를 정의하는 Screen Capture API (en-US)
* WebRTC API
* 장치에 접근할 때 사용할 `MediaDevices` 객체의 참조를 반환하는 `Navigator.mediaDevices`


Blob - Web API

Blob
====

**`Blob`** 객체는 파일류의 불변하는 미가공 데이터를 나타냅니다. 텍스트와 이진 데이터의 형태로 읽을 수 있으며, `ReadableStream`으로 변환한 후 스트림 메서드를 사용해 데이터를 처리할 수도 있습니다.

`Blob`은 JavaScript 네이티브 형태가 아닌 데이터도 표현할 수 있습니다. `File`이 `Blob`에 기반한 인터페이스로, 사용자 시스템의 파일을 지원하기 위해 `Blob` 인터페이스를 상속해 기능을 확장한 것입니다.

블롭 사용하기
-------

블롭이 아닌 객체와 데이터로 `Blob`을 생성하려면 `Blob()` 생성자를 사용하세요. 다른 블롭의 일부에서 새로운 블롭을 생성할 땐 `slice()` (en-US) 메서드를 사용할 수 있습니다. 사용자의 파일 시스템 내 파일을 `Blob`으로 얻는 방법은 `File` 문서를 참고하세요.

`Blob` 객체를 받을 수 있는 API의 목록도 `File` 문서에 있습니다.

생성자
---

`Blob()`

매개변수로 제공한 배열의 모든 데이터를 합친 데이터를 담은 새로운 `Blob` 객체를 반환합니다.

속성
--

`Blob.prototype.size` 읽기 전용

`Blob` 객체가 담은 데이터의 바이트 단위의 사이즈입니다.

`Blob.prototype.type` 읽기 전용

`Blob` 객체가 담은 데이터의 MIME 유형을 나타내는 문자열입니다. 유형을 알 수 없는 경우 빈 문자열을 반환합니다.

인스턴스 메서드
--------

`Blob.prototype.arrayBuffer()` (en-US)

`Blob`의 전체 내용을 이진 데이터로 담은 `ArrayBuffer`로 이행하는 프로미스를 반환합니다

`Blob.prototype.slice()` (en-US)

메서드를 호출한 블롭의 바이트를 주어진 시작 바이트와 끝 바이트 범위에서 복제해 새로운 `Blob` 객체를 생성하고 반환합니다.

`Blob.prototype.stream()` (en-US)

`Blob`의 콘텐츠를 읽을 수 있는 `ReadableStream`을 반환합니다.

`Blob.prototype.text()` (en-US)

`Blob`의 전체 내용을 UTF-8 텍스트로 담은 `USVString`으로 이행하는 프로미스를 반환합니다.

예제
--

### 블롭 생성하기

`Blob()` 생성자를 사용해 다른 객체에서 블롭을 생성할 수 있습니다. 예를 들어, 아래 코드는 문자열에서 블롭을 생성합니다.

```js
const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});
```

### 형식화 배열의 콘텐츠를 나타내는 URL 생성하기

다음 코드는 JavaScript 형식화 배열을 생성하고, 배열의 데이터를 담은 `Blob` 객체도 만듭니다. 그 후, `URL.createObjectURL()`을 호출해 블롭을 URL로 변환합니다.

#### HTML

```html
<p>
  이 예제는 스페이스 문자부터 대문자 Z까지의 ASCII 코드를 담은 형식화 배열을
  생성한 후 객체 URL로 변환합니다. 아래에 링크를 추가했으니, 클릭해서 디코딩한
  객체 URL을 확인하세요.
</p>
```

#### JavaScript

아래 코드의 주제는 `typedArrayToURL()` 함수로, 주어진 형식화 배열에서 `Blob`을 생성한 후 블롭의 객체 URL을 반환합니다. 데이터를 객체 URL로 변환한 후에는 (데이터가 이미지 정보라면) `<img>` 요소의 `src` 특성에 지정하는 등 다양하게 사용할 수 있습니다.

```js
function typedArrayToURL(typedArray, mimeType) {
  return URL.createObjectURL(new Blob([typedArray.buffer], { type: mimeType }));
}

const bytes = new Uint8Array(59);

for (let i = 0; i < 59; i++) {
  bytes[i] = 32 + i;
}

const url = typedArrayToURL(bytes, "text/plain");

const link = document.createElement("a");
link.href = url;
link.innerText = "배열 URL 열기";

document.body.appendChild(link);
```

#### 결과

예제의 링크를 클릭해서 브라우저가 객체 URL을 디코딩한 결과를 확인하세요.

### 블롭에서 데이터 추출하기

블롭에서 데이터를 읽는 방법 중 하나는 `FileReader`를 사용하는 것입니다. 다음 코드는 `Blob`의 콘텐츠를 형식화 배열로 가져옵니다.

```js
const reader = new FileReader();
reader.addEventListener("loadend", () => {
  // reader.result에 블롭의 내용이 형식화 배열로 들어있음
});
reader.readAsArrayBuffer(blob);
```

`Response`를 사용하는 방법도 있습니다. 다음 코드는 `Blob`의 내용을 텍스트로 가져옵니다.

```js
const text = await new Response(blob).text();
```

텍스트로 가져올 땐 `Blob.prototype.text()` (en-US)를 사용할 수도 있습니다.

```js
const text = await blob.text();
```

`FileReader`의 다른 메서드를 사용하면 블롭의 데이터를 문자열이나 데이터 URL로도 읽어올 수 있습니다.

명세
--

| Specification |
| --- |
| File API # blob-section |

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

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

같이 보기
-----

* `BlobBuilder` (en-US)
* `FileReader`
* `File`
* `URL.createObjectURL`
* 웹 애플리케이션에서 파일 사용하기


Worker - Web API

Worker
======

Web Workers API의 **`Worker`** 인터페이스는 스크립트로 생성하고, 생성자와 메시지로 통신하는 백그라운드 작업을 나타냅니다. 워커의 생성은 `Worker("path/to/worker/script")` 생성자를 통해 할 수 있습니다.

워커는 부모 페이지와 같은 출처에 호스팅 된 다른 워커를 생성할 수 있습니다. (참고: WebKit은 아직 중첩 워커를 구현하지 않았습니다.)

`Worker` 내에서 사용할 수 있는 인터페이스와 함수 (en-US)는 제한돼있습니다. 워커는 `XMLHttpRequest`를 사용해 네트워크 통신을 할 수 있지만, 응답의 `responseXML`과 `channel` 특성은 항상 `null`입니다. (`fetch`는 이러한 제한 없이 사용할 수 있습니다.)

생성자
---

`Worker()` (en-US)

주어진 URL의 스크립트를 실행하는 전용 웹 워커를 생성합니다. Blob URL도 사용할 수 있습니다.

속성
--

부모 `EventTarget`에서 속성을 상속하고, `AbstractWorker` (en-US)의 속성을 구현합니다.

### 이벤트 처리기

`AbstractWorker.onerror` (en-US)

`error` 유형의 `ErrorEvent` (en-US)가 워커로 확산되면 호출할 `EventListener`입니다. `AbstractWorker` (en-US)에서 상속합니다.

`Worker.onmessage` (en-US)

`message` 유형의 `MessageEvent`가 워커로 확산되면, 즉 `DedicatedWorkerGlobalScope.postMessage` (en-US)를 통해 워커에서 부모 문서로 메시지를 전송하면 호출할 `EventListener`입니다. 메시지는 `data` (en-US) 속성에 들어있습니다.

`Worker.onmessageerror` (en-US)

`messageerror` 이벤트가 발생하면 호출할 `event handler`입니다.

메서드
---

부모 `EventTarget`에서 메서드를 상속하고, `AbstractWorker` (en-US)의 메서드를 구현합니다.

`Worker.postMessage()` (en-US)

워커의 내부 범위로 메시지를 전송합니다. 메시지는 임의의 JavaScript 객체입니다.

`Worker.terminate()`

워커를 즉시 종료합니다. 현재 워커가 연산을 진행 중이더라도 완료를 기다리지 않습니다. `ServiceWorker` 인스턴스는 이 메서드를 지원하지 않습니다.

이벤트
---

`message` (en-US)

 워커의 부모가 워커로부터 메시지를 수신했을 대 발생합니다.
 `onmessage` (en-US) 속성에서도 사용 가능합니다.

`messageerror` (en-US)

`Worker` 객체가 역직렬화 할 수 없는 객체를 메시지로 받았을 대 발생합니다.
 `onmessageerror` (en-US) 속성에서도 사용 가능합니다.

`rejectionhandled` (en-US)

`Promise`가 거부될 때마다 발생합니다. 거부를 처리할 처리기의 존재 유무는 고려하지 않습니다.
 `onrejectionhandled` (en-US) 속성에서도 사용 가능합니다.

`unhandledrejection` (en-US)

`Promise`가 거부됐는데, 처리할 처리기가 없을 때 발생합니다.
 `onunhandledrejection` (en-US) 속성에서도 사용 가능합니다.

예제
--

다음 코드 조각은 `Worker()` (en-US) 생성자를 사용해 `Worker` 객체를 생성한 후, 그 `Worker`를 사용합니다.

```js
var myWorker = new Worker("worker.js");
var first = document.querySelector("#number1");

first.onchange = function () {
  myWorker.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};
```

전체 예제를 보시려면 저희의 simple-web-worker 예제 (라이브)를 참고하세요.

명세
--

| Specification |
| --- |
| HTML Standard # dedicated-workers-and-the-worker-interface |

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

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

워커의 종류마다 지원 상황이 다릅니다. 각각의 페이지를 방문해 더 자세히 알아보세요.

### 교차 출처에서의 워커 오류 동작

초기 명세에서는 교차 출처 워커 스크립트를 불러오려 시도하면 `SecurityError`가 발생했습니다. 요즘은 오류 대신 `error (en-US)` 이벤트가 발생합니다.

같이 보기
-----

* 웹 워커 사용하기 (en-US)
* 워커에서 사용할 수 있는 함수와 클래스 (en-US)
* 다른 종류의 워커: `SharedWorker`와 서비스 워커.


SharedWorker - Web API

SharedWorker
============

**`SharedWorker`** 인터페이스는 윈도우 창이나 iframe, 워커등의 다른 브라우징 컨텍스트에서도 접근이 가능한 특정 종류의 워커를 의미합니다. 기존의 다른 종류의 워커들과 다른 전역 스코프를 갖는 인터페이스를 구현합니다. `SharedWorkerGlobalScope` (en-US).

**참고:** **참고 :** SharedWorker 가 몇개의 다른 브라우징 컨텍스트에서 접근이 가능하면, 그 브라우징 컨텍스트들은 모두 정확히 같은 오리진을 공유해야 합니다. (같은 프로토콜, 호스트, 포트 등)

생성자
---

`SharedWorker()` (en-US)

특정 URL에서 스크립트를 실행하는 shared web worker를 생성합니다.

속성
--

*`EventTarget`* 의 속성들을 상속 받습니다. 그리고 *`AbstractWorker` (en-US)* 의 속성들을 구현할 수 있습니다.

`AbstractWorker.onerror` (en-US)

워커에서 `ErrorEvent` (en-US) 타입의 에러가 발생했을 때 호출되는는 `EventListener`

`SharedWorker.port` (en-US) 읽기 전용

shared worker를 제어하거나 통신하기 위해 사용되는 `MessagePort` (en-US) 객체를 반환

메서드
---

*`EventTarget`* 의 속성들을 상속 받습니다. 그리고 *`AbstractWorker` (en-US)* 의 속성들을 구현할 수 있습니다.

예제
--

Basic shared worker example (run shared worker) 를 보시면 2개의 HTML 페이지가 있습니다. 각각 간단한 계산을 위해 JavaScript를 사용합니다. 각기 다른 스크립트가 계산을 위해 같은 워커 파일을 사용합니다 — 두 개 페이지가 모두 다른 윈도우창에서 실행되더라도 같은 워커에 접근할 수 있습니다.

아래 코드 스니펫은 `SharedWorker()` (en-US) 생성자를 이용해 `SharedWorker` 객체를 생성합니다. 두 스크립트 모두 아래를 포함합니다.

```js
var myWorker = new SharedWorker("worker.js");
```

두 스크립트는 `SharedWorker.port` (en-US) 속성으로 생성한 `MessagePort` (en-US) 객체를 통해 워커에 접근할 수 있습니다. `addEventListener` 를 이용하여 `onmessage` 가 추가되면, port는 `start()` 메서드를 이용하여 수동으로 시작할 수 있습니다.

```js
myWorker.port.start();
```

포트가 시작되면, 양 스크립트는 워커에 메시지를 보내고 `port.postMessage()`와 `port.onmessage` 를 각각 이용하여 메시지를 처리합니다.

```js
first.onchange = function () {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

second.onchange = function () {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

myWorker.port.onmessage = function (e) {
  result1.textContent = e.data;
  console.log("Message received from worker");
};
```

워커에서 `SharedWorkerGlobalScope.onconnect` (en-US) 핸들러를 이용하여 위에 언급된 포트에 접속할 수 있습니다. 워커에 연관되어 있는 포트는 `connect` 이벤트 포트 속성에 접근할 수 있습니다 — 그리고나서 `MessagePort` (en-US) `start()` 메서드로 포트를 시작하고, onmessage 핸들러로 메인쓰레드에서 받은 메시지를 처리합니다.

```js
onconnect = function (e) {
  var port = e.ports[0];

  port.addEventListener("message", function (e) {
    var workerResult = "Result: " + e.data[0] \* e.data[1];
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};
```

명세
--

| Specification |
| --- |
| HTML Standard # shared-workers-and-the-sharedworker-interface |

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

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

같이 보기
-----

* `Worker`
* Using web workers (en-US)


MediaStreamTrack - Web API

MediaStreamTrack
================

**`MediaStreamTrack`** 인터페이스는 스트림 내의 단일 미디어 트랙을 나타냅니다. 보통 오디오와 비디오 트랙이지만, 다른 종류도 존재할 수 있습니다.

속성
--

`MediaStreamTrack`은 다음에 나열된 속성 외에도 `applyConstraints()`로 설정하고 `getConstraints()`와 `getSettings()`로 접근 가능한 제약 속성을 가집니다. 기능, 제약, 설정 (en-US) 문서를 방문해 제약 속성을 다루는 법을 알아보세요. 올바르게 다루지 않으면 불안정한 코드를 낳을 수 있습니다.

`MediaStreamTrack.contentHint` (en-US)

트랙 유형에 대한 힌트를 제공하는 문자열입니다. 웹 애플리케이션이 트랙의 처리 방식을 결정할 때 사용할 수 있습니다.

`MediaStreamTrack.enabled`

트랙을 활성화, 즉 미디어 출처 스트림의 렌더링을 허용하면 `true`이고 비활성화, 즉 미디어 소스 스트림 렌더링을 허용하지 않아 검은 화면과 조용함만 확인할 수 있으면 `false`인 속성입니다. 트랙의 연결이 끊긴 경우에도 값을 바꿀 수는 있으나 아무런 효과도 없습니다.> **참고:** 일반적인 "음소거" 기능은 `enabled`를 `false`로 바꿔서 구현할 수 있습니다. `muted` 속성은 기술적인 문제로 인해 미디어가 존재하지 않을 때를 나타냅니다.

`MediaStreamTrack.id` 읽기 전용

트랙의 고유 식별자(GUID)를 담은 `DOMString`을 반환합니다. 고유 식별자는 브라우저가 생성합니다.

`MediaStreamTrack.isolated` 읽기 전용

트랙이 **고립**된 경우 `true`인 속성입니다. 고립 상태란 해당 `MediaStreamTrack`을 소유한 문서에서 트랙에 접근할 수 없을 때를 의미합니다. `peerIdentity` 속성이 설정된 경우, 그리고 트랙의 소스가 교차 출처에 위치하는 경우 발생합니다.

`MediaStreamTrack.kind` 읽기 전용

오디오 트랙인 경우 `"audio"`, 비디오 트랙인 경우 `"video"`인 `DOMString`을 반환합니다. 트랙이 소스에서 분리된 경우 변하지 않습니다.

`MediaStreamTrack.label` 읽기 전용

트랙 소스에 대해 사용자 에이전트가 할당한 식별자를 담은 `DOMString`을 반환합니다. 식별자의 예시는 `"internal microphone"`입니다. 빈 문자열일 수 있으며, 연결된 소스가 없는 경우 계속 빈 문자열로 남아 있습니다. 트랙이 소스에서 분리되더라도 식별자는 변하지 않습니다.

`MediaStreamTrack.muted` 읽기 전용

기술적인 문제로 인해 트랙이 미디어 데이터를 제공할 수 없음을 나타내는 불리언 값을 반환합니다.> **참고:** 일반적인 "음소거" 기능은 `enabled`를 `false`로 바꿔서 구현할 수 있으며, 음소거 해제는 `enabled`를 다시 `true`로 바꾸면 됩니다.

`MediaStreamTrack.readonly` 읽기 전용

읽기 전용 트랙(비디오 파일 소스, 설정을 바꿀 수 없는 카메라 등)인 경우 `true`를 반환합니다. 그 외의 경우 `false`를 반환합니다.

`MediaStreamTrack.readyState` 읽기 전용

트랙의 상태를 나타내는 열거형 값을 반환합니다. 가능한 값은 다음과 같습니다.\* `"live"`는 입력이 연결됐으며 실시간 데이터를 제공하고 있음을 나타냅니다. 이때, `enabled` 특성을 사용해 데이터 출력을 켜거나 끌 수 있습니다.

* `"ended"`는 입력이 더 이상 데이터를 전달하지 않고 있으며, 앞으로도 새로운 데이터를 제공하지 않을 것임을 나타냅니다.

`MediaStreamTrack.remote` (en-US) 읽기 전용
지원이 중단되었습니다

Returns a Boolean with a value of `true` if the track is sourced by a `RTCPeerConnection` (en-US), `false` otherwise.
메서드
---

`MediaStreamTrack.applyConstraints()`

애플리케이션이 `MediaStreamTrack`에 사용 가능한 제약 속성을 원하는 값과 범위로 지정할 수 있는 메서드입니다.

`MediaStreamTrack.clone()`

`MediaStreamTrack`의 복제본을 반환합니다.

`MediaStreamTrack.getCapabilities()`

`MediaStreamTrack`에 사용 가능한 제약 속성을 반환합니다.

`MediaStreamTrack.getConstraints()`

`MediaStreamTrack`에 현재 지정된 제약을 담은 `MediaTrackConstraints` (en-US) 객체를 반환합니다. 이전에 `applyConstraints()`로 설정한 값과 동일합니다.

`MediaStreamTrack.getSettings()`

`MediaStreamTrack`에 현재 지정된 제약 속성 각각의 값을 담은 `MediaTrackSettings` (en-US) 객체를 반환합니다.

`MediaStreamTrack.stop()`

트랙에 연결된 소스의 재생을 중단하고, 서로 분리합니다. 트랙의 상태는 `ended`로 변경합니다.

이벤트
---

다음 이벤트는 `MediaStreamTrack`의 `addEventListener()`를 사용하거나 `oneventname` 속성을 사용해 수신할 수 있습니다.

`ended` (en-US)

 트랙의 플레이백이 끝났을 때, 즉 `readyState`의 값이 `ended`로 변했을 때 발생합니다.
 `onended` (en-US) 이벤트 처리기 속성으로도 수신할 수 있습니다.

`mute` (en-US)

 기술적인 이유(네트워크 문제 등)로 인해 일시적으로 트랙이 데이터를 제공하지 못할 때, 즉 `muted`의 값이 `true`로 변했을 때 발생합니다.
 `onmute` (en-US) 이벤트 처리기 속성으로도 수신할 수 있습니다.

`isolationchange`

 문서가 트랙에 대한 접근 권한을 얻거나 잃었을 때, 즉 `isolated`의 값이 변할 때 발생합니다.
 `onisolationchange` 이벤트 처리기 속성으로도 수신할 수 있습니다.

`unmute` (en-US)

 데이터를 다시 사용할 수 있어서 `muted` 상태가 끝날 때 발생합니다.
 `onunmute` (en-US) 이벤트 처리기 속성으로도 수신할 수 있습니다.

`overconstrained (en-US)`
지원이 중단되었습니다

지정한 제약이 트랙과 호환되지 않아서 해당 제약을 무시할 때 발생합니다.
`onoverconstrained (en-US)` 이벤트 처리기 속성으로도 수신할 수 있습니다.
명세
--

| Specification |
| --- |
| Media Capture and Streams # mediastreamtrack |

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

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

같이 보기
-----

* Media Capture and Streams API
* `MediaStream` (en-US)


WebGLRenderbuffer - Web API

WebGLRenderbuffer
=================

**WebGLRenderbuffer** 인터페이스는 WebGL API 의 부분입니다. 그리고 이미지를 담거나 렌더링 연산의 소스나 타겟이 될 수 있는 버퍼를 말합니다.

설명
--

`WebGLRenderbuffer` 오브젝트는 메소드나 프로퍼티를 정의 하지 않으며 직접적으로 접근할 수 없습니다. When working with `WebGLRenderbuffer` 오브젝트와 작업하려면 다음의 `WebGLRenderingContext` (en-US) 메소드가 도움이 될 것입니다.

* `WebGLRenderingContext.bindRenderbuffer()` (en-US)
* `WebGLRenderingContext.createRenderbuffer()` (en-US)
* `WebGLRenderingContext.deleteRenderbuffer()` (en-US)
* `WebGLRenderingContext.isRenderbuffer()` (en-US)
예
-

### 렌더 버퍼 만들기

```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var buffer = gl.createRenderbuffer();
```

명세서
---

| Specification |
| --- |
| WebGL Specification # 5.7 |

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

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

함께 보기
-----

* `WebGLRenderingContext.bindRenderbuffer()` (en-US)
* `WebGLRenderingContext.createRenderbuffer()` (en-US)
* `WebGLRenderingContext.deleteRenderbuffer()` (en-US)
* `WebGLRenderingContext.isRenderbuffer()` (en-US)
* Other buffers: `WebGLBuffer` (en-US), `WebGLFramebuffer` (en-US)


History - Web API

History
=======

**`History`** 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다.

속성
--

*`History` 인터페이스는 어떤 속성도 상속하지 않습니다.*

`History.length` 읽기 전용

현재 페이지를 포함해, 세션 기록의 길이를 나타내는 정수를 반환합니다.

`History.scrollRestoration`

기록 탐색 시 스크롤 위치 복원 여부를 명시할 수 있습니다. 가능한 값은 `auto`와 `manual`입니다.

`History.state` 읽기 전용

기록 스택 최상단의 스테이트를 나타내는 값을 반환합니다. `popstate` 이벤트를 기다리지 않고 현재 기록의 스테이트를 볼 수 있는 방법입니다.

메서드
---

*`History` 인터페이스는 어떤 메서드도 상속하지 않습니다.*

`History.back()`

세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드입니다. 브라우저의 `뒤로 가기` 버튼을 눌렀을 때, 그리고 `history.go(-1)`을 사용했을 때와 같습니다.> **참고:** 세션 기록의 제일 첫 번째 페이지에서 호출해도 오류는 발생하지 않습니다.

`History.forward()`

세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드입니다. 브라우저의 `앞으로 가기` 버튼을 눌렀을 때, 그리고 `history.go(1)`을 사용했을 때와 같습니다.> **참고:** 세션 기록의 제일 마지막 페이지에서 호출해도 오류는 발생하지 않습니다.

`History.go()`

현재 페이지를 기준으로, 상대적인 위치에 존재하는 세션 기록 내 페이지로 이동하는 비동기 메서드입니다. 예를 들어, 매개변수로 `-1`을 제공하면 바로 뒤로, `1`을 제공하면 바로 앞으로 이동합니다. 세션 기록의 범위를 벗어나는 값을 제공하면 아무 일도 일어나지 않습니다. 매개변수를 제공하지 않거나, `0`을 제공하면 현재 페이지를 다시 불러옵니다.

`History.pushState()`

주어진 데이터를 지정한 제목(제공한 경우 URL도)으로 세션 기록 스택에 넣습니다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있습니다. 참고로, Safari를 제외한 모든 브라우저는 `title` 매개변수를 무시합니다.

`History.replaceState()`

세션 기록 스택의 제일 최근 항목을 주어진 데이터, 지정한 제목 및 URL로 대체합니다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있습니다. 참고로, Safari를 제외한 모든 브라우저는 `title` 매개변수를 무시합니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-history-interface |

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

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

같이 보기
-----

* `History` 객체 참조를 반환하는 `Window.history` 속성.


KeyboardEvent - Web API

KeyboardEvent
=============

**`KeyboardEvent`** 객체는 키보드와 사용자의 상호 작용을 나타냅니다. 각 이벤트는 사용자와 키보드의 키(또는 보조 키를 같이 눌렀을 때의 결합)를 나타냅니다. 이벤트 타입 (`keydown (en-US)`, `keypress (en-US)` 또는 `keyup (en-US)`)은 키보드에서 어떤 행동이 일어났는지 식별합니다.

**참고:** `KeyboardEvent` 이벤트는 로우 레벨에서 사용자가 키보드의 키와 어떤 상호 작용을 했는지를 식별할 뿐이며, 그 상호 작용에 대한 맥락적 의미는 담고 있지 않습니다. 텍스트 입력이 필요할 때는 `input (en-US)` 를 대신 사용하세요. 사용자가 태블릿으로 손글씨를 쓰거나, 태블릿으로 그래픽 텍스트를 입력하는 등의 대체 방법을 사용하는 경우에는 키보드 이벤트가 실행되지 않을 수 있습니다.

Event

UIEvent

KeyboardEvent생성자
---

`KeyboardEvent()` (en-US)

새로운 `KeyboardEvent` 객체를 생성합니다.

상수
--

`KeyboardEvent` 인터페이스는 다음 상수를 정의합니다.

### Keyboard locations

다음의 상수들은 키보드에서 이벤트가 일어난 키의 위치가 어디인지를 식별합니다. 이 상수들은 `KeyboardEvent.DOM_KEY_LOCATION_STANDARD` 등으로 접근할 수 있습니다.

Keyboard location 식별자| 상수 | 값 | 설명 |
| --- | --- | --- |
| `DOM_KEY_LOCATION_STANDARD` | 0x00 | 이벤트가 발생한 키가 키보드의 특정한 영역에 있지 않다고 판단됩니다. 숫자 키패드에 있지 않은 키거나(NumLock 키는 숫자 키패드에 있지만 여기에 포함됨), 키보드의 왼쪽과 오른쪽 중 어느 한 쪽으로 구분되지 않는 키가 이에 해당됩니다.
표준 PC 101 US 키보드의 알파벳 키, NumLock 키, 스페이스 바 키를 예로 들 수 있습니다. |
| `DOM_KEY_LOCATION_LEFT` | 0x01 | 키보드의 여러 위치에 존재할 수 있지만, 그 중에서 왼쪽에 존재하는 키입니다.
왼쪽 Control 키, Macintosh 키보드의 왼쪽 Command 키, 또는 왼쪽 Shift 키를 예로 들 수 있습니다. |
| `DOM_KEY_LOCATION_RIGHT` | 0x02 | 키보드의 여러 위치에 존재할 수 있지만, 그 중에서 오른쪽에 존재하는 키입니다.
오른쪽 Shift 키와 오른쪽 Alt 키(Mac 키보드의 Option 키)를 예로 들 수 있습니다. |
| `DOM_KEY_LOCATION_NUMPAD` | 0x03 | 키가 두 개 이상의 위치에서 시작될 수 있는 경우, 숫자 키패드에 위치한 키 또는 숫자 키패드와 연관된 가상 키입니다. NumLock 키는 이 그룹에 포함되지 않고 언제나 `DOM_KEY_LOCATION_STANDARD`로 인코딩됩니다.
숫자 키패드의 숫자 키, 숫자 키패드의 Enter 키, 숫자 키패드의 소수점(.) 키를 예로 들 수 있습니다. |

속성
--

*이 인터페이스는 부모인 `UIEvent` 와 `Event`의 속성을 상속받습니다.*

`KeyboardEvent.altKey` (en-US) 읽기 전용

키 이벤트가 일어났을 때 `Alt` (macOS의 `Option` 또는 `⌥`) 키가 활성화되어 있다면 `true` 를 반환합니다.

`KeyboardEvent.code` (en-US) 읽기 전용

이벤트가 일어난 키의 물리적인 코드 값을 문자열로 반환합니다.

**경고:** 이는 사용자의 키보드 레이아웃을 무시하므로, 사용자가 QWERTY 키보드의 "Y" 위치의 키를 누르면, 사용자가 QWERTZ 키보드(사용자는 "Y" 대신 "Z"값을 기대함) 또는 Dvorak 키보드(사용자는 "Y" 대신 "F"값을 기대함)를 사용하더라도 항상 "KeyY" 값을 리턴합니다. 만약 사용자에게 맞는 키 값을 보여주길 원한다면, `Keyboard.getLayoutMap()` (en-US)를 사용하세요.

`KeyboardEvent.ctrlKey` (en-US) 읽기 전용

키 이벤트가 일어났을 때 `Ctrl` 키가 활성화되어 있다면 `true` 를 반환합니다.

`KeyboardEvent.isComposing` (en-US) 읽기 전용

키 이벤트가 `compositionstart`이후에 그리고 `compositionend` 이전에 발생했다면 `true` 를 반환합니다.

`KeyboardEvent.key` 읽기 전용

이벤트가 일어난 키의 키 값을 나타내는 문자열을 반환합니다.

`KeyboardEvent.locale` 읽기 전용

키보드가 구성된 로케일을 나타내는 로케일 문자열을 반환합니다. 브라우저나 기기가 키보드의 로케일을 알 수 없는 경우에는 빈 문자열일 수도 있습니다.

**참고:** 이 속성은 입력되는 데이터의 로케일을 설명하지 않습니다. 사용자는 다른 언어로 텍스트를 적으면서도 하나의 키보드 레이아웃을 사용할 수 있습니다.

`KeyboardEvent.location` (en-US) 읽기 전용

키보드 또는 기타 입력 장치의 키의 위치를 나타내는 `Number`를 반환합니다. 위치를 식별하는 상수 값 목록은 Keyboard locations 에서 확인할 수 있습니다.

`KeyboardEvent.metaKey` (en-US) 읽기 전용

키 이벤트가 일어났을 때 `Meta`키 (Mac 키보드의 `⌘ Command` 키, Windows 키보드의 Windows 키 (`⊞`))가 활성화되어 있다면 `true`를 반환합니다.

`KeyboardEvent.repeat` (en-US) 읽기 전용

키를 자동으로 반복되도록 누르고 있다면 `true`를 반환합니다.

`KeyboardEvent.shiftKey` (en-US) 읽기 전용

키 이벤트가 일어났을 때 `Shift`키가 활성화되어 있다면 `true`를 반환합니다.

메서드
---

*이 인터페이스는 부모인 `UIEvent` 와 `Event`의 메서드를 상속받습니다.*

`KeyboardEvent.getModifierState()` (en-US)

이벤트가 발생했을 때 `Alt`, `Shift`, `Ctrl`, 또는 `Meta` 등의 보조 키가 눌렸는지를 나타내는 부울 값을 반환합니다.

더 이상 사용하지 않는 메서드
----------------

`KeyboardEvent.initKeyEvent()` (en-US)
지원이 중단되었습니다

`KeyboardEvent` 객체를 초기화합니다. 이 메서드는 Firefox에서만 구현되었고, 이제는 Firefox에서도 더 이상 지원되지 않습니다. 대신 `KeyboardEvent()` (en-US) 생성자를 사용해야 합니다.

`KeyboardEvent.initKeyboardEvent()` (en-US)
지원이 중단되었습니다

`KeyboardEvent` 객체를 초기화합니다. 이 메서드는 이제 더 이상 사용되지 않습니다. 대신 `KeyboardEvent()` (en-US) 생성자를 사용해야 합니다.

더 이상 사용하지 않는 속성
---------------

`KeyboardEvent.char`
비표준

지원이 중단되었습니다
읽기 전용

키의 문자 값을 나타내는 문자열을 반환합니다. 키가 인쇄 가능한 문자일 경우, 이 값은 해당 문자를 포함하는 비어 있지 않은 유니코드 값입니다. 키가 인쇄 불가능한 문자일 경우, 이 값은 빈 문자열입니다.

**참고:** 키를 여러 문자를 삽입하는 매크로로 사용하는 경우, 이 특성의 값은 첫 번째 문자가 아니라 전체 문자열입니다.

`KeyboardEvent.charCode` (en-US)
지원이 중단되었습니다
읽기 전용

키의 유니코드 숫자를 나타내는 `Number`를 리턴합니다. 이 속성은 `keypress` 이벤트에서만 사용됩니다. `char` 특성이 여러 개의 문자를 포함하고 있는 키의 경우, 이 값은 첫 번째 문자의 유니코드 값입니다. Firefox 26에서는 인쇄 가능한 문자의 코드를 반환합니다.

**경고:** 이 특성은 더 이상 사용되지 않습니다. 가능하다면, 대신 `KeyboardEvent.key` 특성을 사용하세요.

`KeyboardEvent.keyCode` (en-US)
지원이 중단되었습니다
읽기 전용

누른 키의 수정되지 않은 값을 식별하는 시스템 및 구현 종속 숫자 코드를 나타내는 `Number`를 반환합니다.

**경고:** 이 특성은 더 이상 사용되지 않습니다. 가능하다면, 대신 `KeyboardEvent.key` 특성을 사용하세요.

`KeyboardEvent.keyIdentifier` (en-US)
비표준

지원이 중단되었습니다
읽기 전용

이 속성은 비표준이고 더 이상 `KeyboardEvent.key`를 위해 사용되지 않습니다. 이 속성은 이전 버전의 DOM Level 3 이벤트의 일부였습니다.

`KeyboardEvent.keyLocation`
비표준

지원이 중단되었습니다
읽기 전용

이 속성은 `KeyboardEvent.location` (en-US)의 비표준이고 사용되지 않는 별칭입니다. 이 속성은 이전 버전의 DOM Level 3 이벤트의 일부였습니다.

`KeyboardEvent.which` (en-US)
지원이 중단되었습니다
 읽기 전용

누른 키의 수정되지 않은 값을 식별하는 시스템 및 구현 종속 숫자 코드를 나타내는 `Number`를 반환합니다. 보통은 `keyCode`와 같습니다.

**경고:** 이 특성은 더 이상 사용되지 않습니다. 가능하다면, 대신 `KeyboardEvent.key` 특성을 사용하세요.

이벤트
---

다음의 이벤트들은 `KeyboardEvent` 타입을 기반으로 합니다. 이 이벤트들은 `Element` (en-US), `Document`, 그리고 `Window`를 포함해서 `GlobalEventHandlers`를 구현하는 모든 개체로 전달될 수 있습니다. 아래의 리스트에서, 각 이벤트는 일반적으로 모든 수신자에게 적용되는 이벤트 처리기에 대한 `Document`로 연결됩니다.

`keydown` (en-US)

키가 눌렸을 때 발생합니다.

`keyup`

키를 떼었을 때 발생합니다.

### 더 이상 사용하지 않는 이벤트

`keypress` (en-US)
지원이 중단되었습니다

일반적으로 문자 값을 생성하는 키가 눌렸을 때 발생합니다. 이 이벤트는 매우 장치 의존적이며 더 이상 사용되지 않습니다. 사용해서는 안 됩니다.

사용 일람
-----

키보드 이벤트의 타입은 `keydown (en-US)`, `keypress (en-US)`, 그리고 `keyup (en-US)`의 3가지 타입이 있습니다. 대부분의 키에서, Gecko는 다음과 같은 키 이벤트를 전송합니다.

1. 키가 처음 눌렸을 때는, `keydown` 이벤트가 전송됩니다.
2. 그 키가 보조 키가 아니라면, `keypress` 이벤트가 전송됩니다.
3. 사용자가 키를 떼면, `keyup` 이벤트가 전송됩니다.
### 특수한 경우

일부 키는 키보드의 표시등 상태를 전환시키는 기능을 합니다. Caps Lock, Num Lock, 그리고 Scroll Lock 같은 키가 이에 해당됩니다. 윈도우와 리눅스에서는, 이 키들은 `keydown` 와 `keyup` 이벤트만을 전송합니다.

**참고:** 리눅스에서는, Firefox 12와 그 이전 버전에서는 이 키들의 `keypress` 이벤트도 전송했습니다.

그러나, macOS의 이벤트 모델의 제한으로 인해 Caps Lock은 `keydown` 이벤트만 전송합니다. Num Lock은 일부 오래된(2007년 이전의) 노트북 모델에서는 지원되었지만, 그 이후로는 macOS에선 외부 키보드에서도 Num Lock을 지원하지 않습니다. Num Lock 키가 있는 옛 맥북에서는 Num Lock은 어떤 이벤트도 생성하지 않습니다. Gecko는 F14 키가 있는 외부 키보드가 연결되어 있다면 Scroll Lock 키를 지원합니다. Firefox의 일부 이전 버전에서는 Scroll Lock 키도 `keypress` 이벤트를 발생시켰습니다. 이 일관성 없는 동작은 Firefox bug 602812였습니다.

### 자동 반복 처리

키를 누르고 있는 동안에는 자동으로 반복하기 시작합니다. 그 결과 다음과 같은 이벤트가 전송됩니다.

1. `keydown`
2. `keypress`
3. `keydown`
4. `keypress`
5. <<사용자가 키를 뗄 때까지 반복>>
6. `keyup`

이 동작은 DOM Level 3 명세에서 발생해야 합니다. 그러나 아래에 명시된 것처럼 몇 가지 주의 사항이 있습니다.

#### Ubuntu 9.4 등의 일부 GTK 환경에서의 자동 반복

일부 GTK 기반 환경에서는 자동 반복 중에 고유 `keyup` 이벤트를 자동으로 전송하므로, Gecko는 키를 반복해서 누르는 것과 자동 반복의 차이를 알 수 없습니다. 그래서 이런 플랫폼에서는 다음의 이벤트가 생성됩니다.

1. `keydown`
2. `keypress`
3. `keyup`
4. `keydown`
5. `keypress`
6. `keyup`
7. <<사용자가 키를 뗄 때까지 반복>>
8. `keyup`

불행하게도 이러한 환경에서는 웹 컨텐츠가 이 키가 자동 반복되고 있는 키인지, 아니면 반복해서 눌리고 있는 키인지를 구별할 수 있는 방법이 없습니다.

예제
--

```js
<!DOCTYPE html>
<html>
<head>
<script>
'use strict';

document.addEventListener('keydown', (event) => {
  const keyName = event.key;

  if (keyName === 'Control') {
    // do not alert when only Control key is pressed.
    return;
  }

  if (event.ctrlKey) {
    // Even though event.key is not 'Control' (e.g., 'a' is pressed),
    // event.ctrlKey may be true if Ctrl key is pressed at the same time.
    alert(`Combination of ctrlKey + ${keyName}`);
  } else {
    alert(`Key pressed ${keyName}`);
  }
}, false);

document.addEventListener('keyup', (event) => {
  const keyName = event.key;

  // As the user releases the Ctrl key, the key is no longer active,
  // so event.ctrlKey is false.
  if (keyName === 'Control') {
    alert('Control key was released');
  }
}, false);

</script>
</head>

<body>
</body>
</html>
```

명세
--

| Specification |
| --- |
| UI Events # interface-keyboardevent |

`KeyboardEvent` 인터페이스 명세는 처음에는 합의가 이루어지지 않아서 DOM Level 2 이벤트에서 폐기되었다가, DOM Level 3 이벤트에서 수많은 초안 버전을 거치게 되었습니다. 이는 초기 DOM Level 2 버전의 이벤트인 Gecko 브라우저의 `KeyboardEvent.initKeyEvent()` (en-US)와 초기 DOM Events Level 3 버전의 이벤트인 다른 브라우저들의 `KeyboardEvent.initKeyboardEvent()` (en-US)의 비표준적인 초기화 메서드의 구현으로 이어졌습니다. 둘 다 현대적인 `KeyboardEvent()` (en-US) 생성자로 대체되었습니다.

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

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

### 호환성 참고 사항

* Firefox 65부터는 `Enter`
 키, 그리고
 `Shift`
 +
 `Enter`
 와
 `Ctrl`
 +
 `Enter`
 키의 조합(상호 호환성을 위해 유지됨)을 제외한 non-printable keys (en-US)에 대해서는 `keypress` 이벤트가 발생하지 않습니다 (Firefox bug 968056).
같이 보기
-----

* `KeyboardEvent.code` (en-US).
* `KeyboardEvent.key`.
* `KeyboardEvent.getModifierState()` (en-US)


CSSMediaRule - Web API

CSSMediaRule
============

**`CSSMediaRule`** 인터페이스는 하나의 CSS `@media` 규칙을 나타냅니다. `CSSConditionRule` (en-US) 인터페이스를 구현하므로, `CSSGroupingRule` (en-US)과 `CSSRule` (en-US) 인터페이스도 유형값 `4` (`CSSRule.MEDIA_RULE`)로 구현합니다.

구문
--

WebIDL 형식을 사용해 서술합니다.
```

interface CSSMediaRule : CSSConditionRule {
    readonly attribute MediaList media;
}
```

속성
--

`CSSMediaRule`은 `CSSConditionRule` (en-US), 그리고 `CSSGroupingRule` (en-US)와 `CSSRule` (en-US)로서 해당 인터페이스의 속성을 구현합니다. 다음과 같은 자체 속성을 가집니다.

`CSSMediaRule.media` (en-US) 읽기 전용

스타일 정보를 적용할 매체 정보를 나타내는 `MediaList` (en-US)입니다.

메서드
---

`CSSMediaRule`은 `CSSConditionRule` (en-US), 그리고 `CSSGroupingRule` (en-US)와 `CSSRule` (en-US)로서 해당 인터페이스의 메서드를 구현합니다. 자체 메서드는 가지지 않습니다.

명세서
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # the-cssmediarule-interface |

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

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


AudioNode - Web API

AudioNode
=========

**`AudioNode`** 인터페이스는 오디오 프로세싱 모듈을 나타내기 위한 포괄적인 인터페이스입니다.

그 예시로는,

* 오디오 소스 (예: HTML `<audio>` (en-US) 또는 `<video>` 요소, `OscillatorNode` (en-US) 등)
* 오디오 목적지(destination)
* 중간 프로세싱 모듈 (예: `BiquadFilterNode` 또는 `ConvolverNode` (en-US) 같은 필터)
* 볼륨 제어 (예: `GainNode` (en-US))

EventTarget

AudioNode

**참고:**

`AudioNode` 는 이벤트의 대상이 될 수 있으므로, `AudioNode`는 `EventTarget` 인터페이스를 구현합니다.

설명
--

### 오디오 라우팅 그래프

![AudioContext에 관여하는 AudioNode들이 오디오 라우팅 그래프를 형성하고 있다.](/ko/docs/Web/API/AudioNode/webaudiobasics.png)

각각의 `AudioNode` 는 입력과 출력을 가지며, 오디오 노드들은 연결되어 **프로세싱 그래프**를 형성합니다. 이 그래프는 `AudioContext`내에 포함되어 있고, 각 오디오 노드는 오직 하나의 오디오 컨텍스트에만 속할 수 있습니다.

**소스 노드**는 0개의 입력을 가지나 하나 혹은 다수의 출력을 가지고, 사운드를 생성하기 위해 사용될 수 있습니다. 반면에, **목적지 노드**는 출력을 가지고 있지 않습니다. 대신, 이 노드의 모든 출력은 바로 스피커 (또는 오디오 컨텍스트가 사용하는 모든 오디오 출력 장치) 에서 재생됩니다. 추가적으로, 입력과 출력을 가지고 있는 **프로세싱 노드**가 있습니다. 이루어지는 정확한 프로세싱은 하나의 `AudioNode` 에서 다른 것까지 다양하나, 일반적으로, 노드는 자신의 입력을 읽고, 오디오에 관계된 프로세싱을 수행하고, 출력으로 새로운 값을 생성하거나, 오디오가 지나가도록 합니다 (그 예로 `AnalyserNode`를 들 수 있는데, 이 노드에서는 프로세싱의 결과가 별도로 이용됩니다).

그래프에 노드가 많아질수록, 지연 시간은 길어질 것입니다. 예를 들어, 만약 오디오 그래프가 500ms 만큼 지연된다면, 소스 노드가 사운드를 재생할 때, 이 노드는 사운드가 스피커에서 들릴 때까지 0.5초를 소요할 것입니다 (혹은 근본적인 오디오 장치의 지연 때문에 더 길 수도 있습니다). 그러므로, 상호작용을 하는 오디오가 필요하다면, 가능한 한 작게 그래프를 유지하고, 그래프의 끝에 사용자에 의해 제어되는 오디오 노드를 배치하십시오. 예를 들자면, 볼륨 변화가 즉각적인 효과를 가지도록 볼륨 제어(`GainNode`)는 마지막 노드여야 합니다.

각각의 입력과 출력은 주어진 양의 **채널**을 가지고 있습니다. 예를 들자면, 모노 오디오는 하나의 채널을 가지고 있는 반면, 스테레오 오디오는 두 개의 채널을 가지고 있습니다. Web Audio API는 요구될 때 업믹스나 다운믹스를 수행할 것입니다. 자세한 사항은 Web Audio 명세서를 확인해 보세요.

모든 오디오 노드의 목록은 Web Audio API 홈페이지에서 찾아볼 수 있습니다.

### `AudioNode` 생성하기

`AudioNode` 를 생성하는 데는 **생성자**를 통해서 생성하는 것과 **팩토리 메서드**를 통해 생성하는 두 가지 방법이 있습니다.

```js
// 생성자
const analyserNode = new AnalyserNode(audioCtx, {
  fftSize: 2048,
  maxDecibels: -25,
  minDecibels: -60,
  smoothingTimeConstant: 0.5,
});

// 팩토리 메서드
const analyserNode = audioCtx.createAnalyser();
analyserNode.fftSize = 2048;
analyserNode.maxDecibels = -25;
analyserNode.minDecibels = -60;
analyserNode.smoothingTimeConstant = 0.5;
```

생성자와 팩토리 메서드 중 어느 쪽이든 사용할 수 있고, 혹은 섞어서 사용할 수도 있지만, 생성자를 사용하는 방법에 이점이 있습니다.

* 생성 도중에 모든 매개변수들이 설정될 수 있고 개별적으로 설정될 필요가 없습니다.
* 오디오 노드의 하위 클래스를 파생시킬 수 있습니다. 실제 프로세싱은 브라우저에 의해 내부적으로 처리되고 변경될 수 없는 반면, 오디오 노드에 래퍼를 작성하여 사용자 정의 속성과 메서드를 제공할 수 있습니다.
* 조금 더 나은 성능을 보입니다. Chrome과 Firefox 모두에서, 팩토리 메서드는 생성자를 내부적으로 호출합니다.

**간략한 역사:** Web Audio 명세서의 첫번째 버전은 오직 팩토리 메서드만을 정의했습니다. 2013년 10월의 디자인 리뷰 이후에, 생성자가 팩토리 메서드에 비해 수많은 이점들을 가지고 있었기 때문에 생성자를 추가하기로 결정되었습니다. 생성자는 2016년 8월에서부터 10월까지 명세서에 추가되었습니다. 팩토리 메서드는 명세서에 계속 포함되고 폐기(deprecated)되지 않았습니다.

속성
--

`AudioNode.context` 읽기 전용

연관된 `BaseAudioContext`를 반환하는데, `BaseAudioContext`란 이 노드가 관여하고 있는 프로세싱 그래프를 나타내는 객체입니다.

`AudioNode.numberOfInputs` 읽기 전용

노드에 공급되는 입력의 수를 반환합니다. 소스 노드는 `0` 의 값의 `numberOfInputs` 을 가진 노드로 정의됩니다.

`AudioNode.numberOfOutputs` 읽기 전용

노드에서 나오는 출력의 수를 반환합니다. `AudioDestinationNode`같은 목적지 노드는 이 특성에 대해 `0` 의 값을 가지고 있습니다.

`AudioNode.channelCount`

노드의 모든 입력에 대한 연결을 업믹싱 그리고 다운믹싱할 때 얼마나 많은 채널을 사용할 지 결정하기 위해 쓰이는 integer를 반환합니다. 이 속성의 사용법과 정밀한 정의는 `AudioNode.channelCountMode`의 값에 달려 있습니다.

`AudioNode.channelCountMode`

채널들이 노드의 입력과 출력 사이에서 반드시 일치되어야만 하는 방법을 기술하는 열거형 값을 나타냅니다.

`AudioNode.channelInterpretation`

채널의 의미를 기술하는 열거형 값을 나타냅니다. 이 설명은 어떻게 오디오 업믹싱과 다운믹싱이 일어날 것인지를 정의합니다. 가능한 값은 `"speakers"` 또는 `"discrete"` 입니다.

메서드
---

또한 `EventTarget` 인터페이스로부터 메서드를 구현합니다.

`AudioNode.connect()`

이 메서드를 사용해 노드의 출력이 다른 노드에 오디오 데이터로써 혹은 `AudioParam`의 값으로써 입력되도록 연결할 수 있습니다.

`AudioNode.disconnect()`

이 메서드를 사용해 이미 연결되어 있는 노드로부터 현재 노드의 연결을 끊을 수 있습니다.

예제
--

이 간단한 코드는 몇몇 오디오 노드의 생성과, 어떻게 `AudioNode` 속성과 메서드가 사용되는지를 보여줍니다. Web Audio API 랜딩 페이지에 연결된 모든 예제에서 이러한 사용법의 예시를 찾을 수 있습니다 (예: Violent Theremin).

```js
const audioCtx = new AudioContext();

const oscillator = new OscillatorNode(audioCtx);
const gainNode = new GainNode(audioCtx);

oscillator.connect(gainNode).connect(audioCtx.destination);

oscillator.context;
oscillator.numberOfInputs;
oscillator.numberOfOutputs;
oscillator.channelCount;
```

명세서
---

| Specification |
| --- |
| Web Audio API # AudioNode |

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

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

같이 보기
-----

* Web Audio API 사용하기


WebGL - Web API

WebGL
=====

**WebGL**(Web Graphics Library)은 플러그인을 사용하지 않고 웹 브라우저에서 상호작용 가능한 3D와 2D 그래픽을 표현하기 위한 JavaScript API입니다. WebGL은 HTML5 `<canvas>` 요소에서 사용할 수 있는, OpenGL ES 2.0을 대부분 충족하는 API를 제공합니다.

WebGL은 Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+, Microsoft Edge build 10240+에서 사용할 수 있습니다. 그러나 사용자 장치의 하드웨어도 WebGL 기능을 지원해야 합니다.

`<canvas>` 요소는 캔버스 API를 사용해 웹 페이지에서 2D 그래픽을 그릴 때도 사용됩니다.

참고서
---

### 표준 인터페이스

* `WebGLRenderingContext` (en-US)
* `WebGL2RenderingContext` (en-US)
* `WebGLActiveInfo` (en-US)
* `WebGLBuffer` (en-US)
* `WebGLContextEvent` (en-US)
* `WebGLFramebuffer` (en-US)
* `WebGLProgram` (en-US)
* `WebGLQuery` (en-US)
* `WebGLRenderbuffer`
* `WebGLSampler` (en-US)
* `WebGLShader`
* `WebGLShaderPrecisionFormat` (en-US)
* `WebGLSync` (en-US)
* `WebGLTexture` (en-US)
* `WebGLTransformFeedback` (en-US)
* `WebGLUniformLocation` (en-US)
* `WebGLVertexArrayObject` (en-US)

### 확장

* `ANGLE_instanced_arrays`
* `EXT_blend_minmax` (en-US)
* `EXT_color_buffer_float` (en-US)
* `EXT_color_buffer_half_float` (en-US)
* `EXT_disjoint_timer_query` (en-US)
* `EXT_float_blend` (en-US)
Experimental
* `EXT_frag_depth` (en-US)
* `EXT_sRGB` (en-US)
* `EXT_shader_texture_lod` (en-US)
* `EXT_texture_compression_bptc` (en-US)
* `EXT_texture_compression_rgtc` (en-US)
* `EXT_texture_filter_anisotropic` (en-US)
* `OES_element_index_uint` (en-US)
* `OES_fbo_render_mipmap` (en-US)
Experimental
* `OES_standard_derivatives` (en-US)
* `OES_texture_float` (en-US)
* `OES_texture_float_linear` (en-US)
* `OES_texture_half_float` (en-US)
* `OES_texture_half_float_linear` (en-US)
* `OES_vertex_array_object` (en-US)
* `WEBGL_color_buffer_float` (en-US)
* `WEBGL_compressed_texture_astc` (en-US)
* `WEBGL_compressed_texture_atc`
* `WEBGL_compressed_texture_etc` (en-US)
* `WEBGL_compressed_texture_etc1` (en-US)
* `WEBGL_compressed_texture_pvrtc` (en-US)
* `WEBGL_compressed_texture_s3tc` (en-US)
* `WEBGL_compressed_texture_s3tc_srgb` (en-US)
* `WEBGL_debug_renderer_info` (en-US)
* `WEBGL_debug_shaders` (en-US)
* `WEBGL_depth_texture` (en-US)
* `WEBGL_draw_buffers` (en-US)
* `WEBGL_lose_context` (en-US)

### 이벤트

* `webglcontextlost` (en-US)
* `webglcontextrestored` (en-US)
* `webglcontextcreationerror` (en-US)
### 상수와 자료형

* WebGL 상수 (en-US)
* WebGL 자료형 (en-US)
### WebGL 2

WebGL 2는 `WebGL2RenderingContext` (en-US) 인터페이스를 통해 제공되는 WebGL 메이저 업데이트다. OpenGL ES 3.0 을 기반으로 하며 다음과 같은 특징을 포함한다:

* 3D textures (en-US),
* Sampler objects (en-US),
* Uniform Buffer objects (en-US),
* Sync objects (en-US),
* Query objects (en-US),
* Transform Feedback objects (en-US),
* WebGL 2의 핵심이 된 확장 기능: Vertex Array objects (en-US), instancing (en-US), multiple render targets (en-US), fragment depth (en-US).

"WebGL 2 lands in Firefox" 블로그 포스트와와 and webglsamples.org/WebGL2Samples 데모도 참고.

안내서와 자습서
--------

### 안내서

WebGL의 데이터 (en-US)

WebGL 코드를 작성할 때 사용하는 변수, 버퍼와 그 외 다른 형태의 데이터를 알아봅니다.

WebGL 우수 사례 (en-US)

WebGL 콘텐츠의 품질, 성능, 안정성을 높일 수 있는 팁과 제안입니다.

확장 사용 (en-US)

WebGL 확장을 사용하는 법을 알아봅니다.

### 자습서

WebGL 자습서

초심자를 위한 WebGL 핵심 개념입니다. WebGL을 접해보지 않았다면 여기서 시작해보세요.

### 예제

기초 WebGL 2D 애니메이션 예제 (en-US)

This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.

예제로 알아보는 WebGL (en-US)

A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.

### 고급 자습서

WebGL 모델 뷰 프로젝션 (en-US)

A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.

웹을 위한 행렬 계산 (en-US)

A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.

참고자료
----

* Raw WebGL: An introduction to WebGL A talk by Nick Desaulniers that introduces the basics of WebGL. This is a great place to start if you've never done low-level graphics programming.
* Khronos WebGL site The main web site for WebGL at the Khronos Group.
* Learning WebGL A site with tutorials on how to use WebGL.
* WebGL Fundamentals A basic tutorial with fundamentals of WebGL.
* WebGL playground An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.
* WebGL Academy An HTML/JavaScript editor with tutorials to learn basics of webgl programming.
* WebGL Stats A site with statistics about WebGL capabilities in browsers on different platforms.
### Libraries

* glMatrix is a JavaScript matrix and vector library for high-performance WebGL apps.
* PhiloGL is a WebGL framework for data visualization, creative coding, and game development.
* Pixi.js is a fast, open-source 2D WebGL renderer.
* PlayCanvas is an open-source game engine.
* Sylvester is an open-source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.
* three.js is an open-source, fully featured 3D WebGL library.
* Phaser is a fast, free and fun open source framework for Canvas and WebGL powered browser games
명세
--

| Specification |
| --- |
| WebGL Specification # 5.14 |
| WebGL 2.0 Specification # 3.7 |

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

### api.WebGLRenderingContext

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

### api.WebGL2RenderingContext

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

같이 보기
-----

* Canvas API
* Compatibility info about WebGL extensions (en-US)


XMLHttpRequest - Web API

XMLHttpRequest
==============

`XMLHttpRequest` (XHR) 객체는 서버와 상호작용할 때 사용합니다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있습니다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있습니다.

`XMLHttpRequest`는 AJAX (en-US) 프로그래밍에 많이 사용됩니다.

EventTarget

XMLHttpRequestEventTarget

(en-US)

XMLHttpRequest
이름에 `XML`이 들어가긴 하지만, `XMLHttpRequest`은 XML 뿐만 아니라 모든 종류의 데이터를 가져올 수 있습니다.

이벤트 데이터나 메시지 데이터를 서버에서 가져와야 하는 통신의 경우, `EventSource` (en-US) 인터페이스를 통한 서버발 이벤트(Server-sent events)의 사용을 고려하세요. 완전한 양방향 통신의 경우에는 WebSocket이 더 좋은 선택일 수 있습니다.

**참고:** This feature is available in Web Workers, except for Service Workers

생성자
---

`XMLHttpRequest()` (en-US)

`XMLHttpRequest`를 초기화합니다. 다른 메서드가 호출되기 전에 호출되어야 합니다.

속성
--

`XMLHttpRequestEventTarget` (en-US)과 `EventTarget`의 속성을 상속합니다.

`XMLHttpRequest.readyState` (en-US) 읽기 전용

요청의 상태를 나타내는 숫자를 반환합니다.

`XMLHttpRequest.response` (en-US) 읽기 전용

`XMLHttpRequest.responseType` (en-US)의 값에 따라, 응답 개체 본문을 포함하는 `ArrayBuffer`, `Blob`, `Document`, JavaScript 객체, 또는 `DOMString`을 반환합니다.

`XMLHttpRequest.responseText` (en-US) 읽기 전용

요청에 대한 응답을 텍스트로 나타내는 `string`을 반환합니다. 요청이 실패했거나, 아직 전송하지않은 경우에는 `null`을 반환합니다.

`XMLHttpRequest.responseType` (en-US)

응답의 유형을 지정합니다.

`XMLHttpRequest.responseURL` (en-US) 읽기 전용

응답의 URL을 직렬화한 값을 반환합니다. URL이 `null`이면 빈 문자열을 반환합니다.

`XMLHttpRequest.responseXML` (en-US) 읽기 전용

요청에 대한 응답을 포함한 `Document`를 반환합니다. 요청이 실패했거나, 아직 전송하지 않았거나, 응답을 XML/HTML로 파싱할 수 없는 경우 `null`을 반환합니다. Web Worker에서 사용할 수 없습니다.

`XMLHttpRequest.status` (en-US) 읽기 전용

응답의 HTTP 상태 코드를 반환합니다.

`XMLHttpRequest.statusText` (en-US) 읽기 전용

HTTP 서버가 반환한 응답 문자열을 담은 `string`을 반환합니다. `XMLHttpRequest.status` (en-US)와 달리, `statusText`는 "`OK`"와 같은 응답 상태 메시지의 전문을 반환합니다

**참고:** HTTP/1.1의 상태 텍스트와 같이 프로토콜 버전과 응답의 이유를 알릴 방법이 HTTP/2 명세에는 없습니다. (RFC 7540, 섹션 8.1.2.4: Response Pseudo-Header Fields)

`XMLHttpRequest.timeout`

요청을 자동으로 종료하기 전에 대기할 시간을 나타내는 밀리초 단위 값입니다.

`XMLHttpRequest.upload` 읽기 전용

업로드 과정을 나타내는 `XMLHttpRequestUpload` (en-US)입니다.

`XMLHttpRequest.withCredentials` (en-US)

쿠키 또는 권한 부여 헤더와 같은 자격 증명을 사용하여 사이트 간 `Access-Control` 요청을 만들어야 하는 경우 `true`를 반환합니다. 그렇지 않으면 `false`를 반환합니다.

비표준 속성들
-------

`XMLHttpRequest.channel` (en-US)읽기 전용

요청을 수행할 때 객체에서 사용하는 채널입니다.

`XMLHttpRequest.mozAnon` (en-US)읽기 전용

'boolean'입니다. `true`인 경우 쿠키 및 인증 헤더 없이 요청이 전송됩니다.

`XMLHttpRequest.mozSystem` (en-US)읽기 전용

'boolean'입니다. `true`인 경우 `same origin policy`가 요청에 적용되지 않습니다.

`XMLHttpRequest.mozBackgroundRequest` (en-US)

'boolean'입니다. 객체가 백그라운드에서 서비스 요청을 나타내는지 여부를 나타냅니다.

메서드
---

`XMLHttpRequest.abort()` (en-US)

이미 요청을 전송한 경우, 그 요청을 중단합니다.

`XMLHttpRequest.getAllResponseHeaders()` (en-US)

모든 응답 헤더를 CRLF로 구분해서 하나의 문자열로 반환합니다. 응답을 받지 못한 경우 `null`을 반환합니다.

`XMLHttpRequest.getResponseHeader()` (en-US)

지정한 헤더의 텍스트를 담은 문자열을 반환합니다. 응답을 받지 못했거나, 지정한 헤더가 응답에 존재하지 않으면 `null`을 반환합니다.

`XMLHttpRequest.open()` (en-US)

요청을 초기화합니다.

`XMLHttpRequest.overrideMimeType()` (en-US)

서버가 반환한 MIME 유형을 재정의합니다.

`XMLHttpRequest.send()` (en-US)

요청을 전송합니다. 비동기 요청(기본 동작)인 경우, `send()`는 요청을 전송하는 즉시 반환합니다.

`XMLHttpRequest.setRequestHeader()`

HTTP 요청 헤더의 값을 설정합니다. 반드시 `send()` (en-US)보다 먼저, 그러나 `open()` (en-US)보다 뒤에 호출해야 합니다.

이벤트
---

`abort` (en-US)

`XMLHttpRequest.abort()` (en-US)를 호출하는 등, 요청이 중단되면 발생합니다. `onabort` 속성으로도 수신할 수 있습니다.

`error` (en-US)

요청이 오류를 마주치면 발생합니다. `onerror` 속성으로도 수신할 수 있습니다.

`load` (en-US)

`XMLHttpRequest` 트랜잭션이 성공적으로 끝나면 발생합니다. `onload` 속성으로도 수신할 수 있습니다.

`loadend` (en-US)

요청이 성공적(`load` (en-US) 이벤트)으로 끝나거나, 실패(`abort` (en-US) 또는 `error` (en-US) 이벤트)한 후 발생합니다. `onloadend` 속성으로도 수신할 수 있습니다.

`loadstart` (en-US)

응답 데이터 로딩을 시작했을 때 발생합니다. `onloadstart` 속성으로도 수신할 수 있습니다.

`progress` (en-US)

요청이 데이터를 수신하는 동안 주기적으로 발생합니다. `onprogress` 속성으로도 수신할 수 있습니다.

`readystatechange` (en-US)

`readyState` (en-US) 속성이 바뀔 때마다 발생합니다. `onreadystatechange` 속성으로도 수신할 수 있습니다.

`timeout`

응답에 소요된 시간이 사전에 지정한 값을 초과해서 요청이 취소될 때 발생합니다. `ontimeout` 속성으로도 수신할 수 있습니다.

명세
--

| Specification |
| --- |
| XMLHttpRequest Standard # interface-xmlhttprequest |

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

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

같이 보기
-----

* `XMLSerializer` (en-US): DOM 트리를 XML로 직렬화
* `XMLHttpRequest`를 다루는 MDN 자습서:
    + Ajax 시작하기
    + XMLHttpRequest 사용하기 (en-US)
    + XMLHttpRequest에서의 HTML (en-US)
    + Fetch API
* HTML5 Rocks — New Tricks in XMLHttpRequest2
* Feature-Policy 지시자 `sync-xhr` (en-US)


History API - Web API

History API
===========

**History API**는 `history` 전역 객체를 통해 브라우저 세션 히스토리(웹 익스텐션 히스토리 (en-US)와 혼동해서는 안 됩니다.)에 대한 접근을 제공합니다. 사용자의 방문 기록을 앞뒤로 탐색하고, 방문 기록 스택의 내용을 조작할 수 있는 유용한 메서드와 속성을 노출합니다.

**참고:** 이 API는 메인 스레드(`Window`)에서만 사용할 수 있습니다. `Worker` 또는 `Worklet` (en-US) 맥락에서는 접근할 수 없습니다.

개념 및 사용법
--------

사용자의 방문 기록을 앞뒤로 이동하는 것은 `back()`, `forward()` 그리고 `go()` 메서드를 사용하여 수행됩니다.

### 앞으로 가기와 뒤로 가기

방문 기록의 뒤로 이동하려면 다음과 같이 사용합니다.

```js
history.back();
```

이는 사용자가 브라우저 도구 모음에서 `**뒤로 가기**` 버튼을 클릭한 것과 똑같이 작동합니다.

마찬가지로 다음과 같이 사용자가 `**앞으로 가기**` 버튼을 클릭한 것처럼 앞으로 이동할 수도 있습니다.

```js
history.forward();
```

### 방문 기록의 특정 지점으로 이동

`go()` 메서드를 사용하여 세션 기록에서 현재 페이지에 대한 상대 위치로 식별되는 특정 페이지를 로드할 수 있습니다. (현재 페이지의 상대 위치는 `0`입니다.)

한 페이지를 뒤로 이동하려면 아래와 같이 사용합니다. (`back()`을 호출하는 것과 동일합니다.)

```js
history.go(-1);
```

`forward()`를 호출하는 것과 마찬가지로 페이지를 앞으로 이동할 때는 아래와 같이 사용합니다.

```js
history.go(1);
```

마찬가지로 `2`를 넘기면 2 페이지 앞으로 이동할 수 있습니다.

`go()` 메서드의 또 다른 용도는 `0`을 전달하거나 인수 없이 호출하여 현재 페이지를 새로고침하는 것입니다.

```js
// 아래 두 줄의 코드는
// 모두 페이지를
// 새로고침 합니다.
history.go(0);
history.go();
```

`length` 속성 값을 확인하여 방문 기록 스택의 페이지 수를 확인할 수 있습니다.

```js
const numberOfEntries = history.length;
```

인터페이스
-----

`History`

브라우저 세션 기록(즉, 현재 페이지가 로드된 탭 또는 프레임에서 방문한 페이지)을 조작할 수 있습니다.

`PopStateEvent` (en-US)

`popstate` 이벤트의 인터페이스입니다.

예제
--

다음 예제에서는 `popstate` 이벤트에 대한 수신기를 할당합니다. 그런 다음 현재 탭의 브라우저 기록 내에서 추가, 바꾸기 및 이동하는 history 객체의 몇 가지 메서드를 보여줍니다.

```js
window.addEventListener("popstate", (event) => {
  alert(
    `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
  );
});

history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // "location: http://example.com/example.html?page=1, state: {"page":1}"라는 알림이 발생합니다.
history.back(); // "location: http://example.com/example.html, state: null"라는 알림이 발생합니다.
history.go(2); // "location: http://example.com/example.html?page=3, state: {"page":3}"라는 알림이 발생합니다.
```

명세서
---

| Specification |
| --- |
| HTML Standard # the-history-interface |

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

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

같이 보기
-----

* `history` 전역 객체
* `popstate` 이벤트


AbortController - Web API

AbortController
===============

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`AbortController`** 인터페이스는 하나 이상의 웹 요청을 취소할 수 있게 해준다.

`AbortController.AbortController()` 생성자를 사용해 새로운 `AbortController` 를 생성한다. `AbortSignal` 객체를 사용해 DOM 요청과의 통신이 완료된다.

생성자
---

`AbortController()`

새로운 `AbortController` 객체 인터페이스를 생성한다.

프로퍼티
----

`AbortController.signal` 읽기 전용

DOM 요청과 통신하거나 취소하는데 사용되는 `AbortSignal` 객체 인터페이스를 반환한다.

메소드
---

`AbortController.abort()`

DOM 요청이 완료되기 전에 취소한다. 이를 통해 fetch 요청, 모든 응답 `Body` 소비, 스트림을 취소할 수 있다.

예제
--

다음 스니펫에서는 Fetch API를 사용해 비디오를 다운로드하는 것을 목표로 한다.

먼저 `AbortController()` 생성자를 사용해 컨트롤러를 `AbortController.signal` 프로퍼티를 사용해 `AbortSignal` 객체와 관계된 참조를 얻는다.

Fetch 요청을 시작할 때, 요청의 옵션 객체 내부에 `AbortSignal` 옵션을 전달한다(아래의 `{signal}` 참고). 이것은 신호와 컨트롤러를 fetch 요청과 관계짓고, 아래의 두 번째 이벤트 리스너에서 보여주듯이 `AbortController.abort()`를 호출하여 이를 취소할 수 있게한다.

```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}
```

**참고:** `abort()`가 호출되면, `fetch()` promise는 `AbortError`으로 명명된 `DOMException`과 함께 reject된다.

동작하는 완전한 예제는 GitHub에서 확인 할 수 있다 — abort-api 참고(라이브 실행도 확인할 수 있다).

명세
--

| Specification |
| --- |
| DOM Standard # interface-abortcontroller |

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

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

함께 보기
-----

* Fetch API
* Abortable Fetch by Jake Archibald


문서 객체 모델(DOM) - Web API

문서 객체 모델(DOM)
=============

**문서 객체 모델**(**DOM**)은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다. 이때 스크립트는 주로 JavaScript를 의미하나 HTML, SVG, XML 객체를 문서로 모델링 하는 것은 JavaScript 언어의 일부가 아닙니다.

DOM은 문서를 논리 트리로 표현합니다. 트리의 각 브랜치는 노드에서 끝나며, 각 노드는 객체를 갖습니다. DOM 메서드를 사용하면 프로그래밍적으로 트리에 접근할 수 있습니다. 이를 통해 문서의 구조, 스타일, 콘텐츠를 변경할 수 있습니다.

노드는 이벤트 처리기도 포함할 수 있습니다. 이벤트가 발생한 순간, 해당 이벤트와 연결한 처리기가 발동합니다.

**참고:** **더 알아보려면:** DOM 소개 문서를 방문해보세요.

DOM 인터페이스
---------

* `Attr`
* `CDATASection` (en-US)
* `CharacterData`
* `Comment`
* `CustomEvent`
* `Document`
* `DocumentFragment`
* `DocumentType`
* `DOMError` (en-US)
지원이 중단되었습니다
* `DOMException` (en-US)
* `DOMImplementation` (en-US)
* `DOMTimeStamp` (en-US)
* `DOMStringList` (en-US)
* `DOMTokenList` (en-US)
* `Element` (en-US)
* `Event`
* `EventTarget`
* `HTMLCollection`
* `MutationObserver`
* `MutationRecord`
* `NamedNodeMap` (en-US)
* `Node` (en-US)
* `NodeFilter` (en-US)
* `NodeIterator` (en-US)
* `NodeList`
* `ProcessingInstruction` (en-US)
* `Range`
* `Text`
* `TextDecoder` (en-US)
Experimental
* `TextEncoder` (en-US)
Experimental
* `TimeRanges` (en-US)
* `TreeWalker`
* `URL`
* `Window`
* `Worker`
* `XMLDocument` (en-US)
Experimental
### 더 이상 사용하지 않는 DOM 인터페이스

문서객체모델 매우 단순하게 변하고 있습니다. 이를 위해 다른 DOM 레벨 3 혹은 이전 사양에 있었던 아래의 인터페이스들을 제거했습니다. 향후에 이 중 일부가 다시 도입될 지는 확실하지 않지만 당분간은 모두 폐기된 것으로 간주하고 사용을 피해야 합니다.

* `DOMConfiguration`
* `DOMErrorHandler`
* `DOMImplementationList`
* `DOMImplementationRegistry`
* `DOMImplementationSource`
* `DOMLocator`
* `DOMObject`
* `DOMSettableTokenList`
* `DOMUserData`
* `ElementTraversal`
* `Entity`
* `EntityReference`
* `NameList`
* `Notation`
* `TypeInfo`
* `UserDataHandler`
HTML DOM
--------

문서는 다양한 HTML 관련 기능들을 포함하는 HTML 명세에 의해 확장된 `Document` 을 사용해 설명된 HTML 을 포함합니다.

HTML 객체는 또한 `Window` 인터페이스, 이에 관련된 `Style`(보통 CSS), 컨텍스트에 관련된 브라우저의 히스토리인 `History` 를 사용해 페이지가 그려지는 탭이나 창과 같은 브라우저의 다양한 기능들에 접근할 수 있게 해줍니다. 마지막에는, 문서의 `Selection` (en-US) 이 완료됩니다.

자세한 내용은 HTML DOM API (en-US) 문서를 참고하세요.

SVG 인터페이스
---------

### SVG 요소 인터페이스

* `SVGAElement` (en-US)
* `SVGAltGlyphElement`
지원이 중단되었습니다
* `SVGAltGlyphDefElement`
지원이 중단되었습니다
* `SVGAltGlyphItemElement`
지원이 중단되었습니다
* `SVGAnimationElement` (en-US)
* `SVGAnimateElement` (en-US)
* `SVGAnimateColorElement` (en-US)
지원이 중단되었습니다
* `SVGAnimateMotionElement` (en-US)
* `SVGAnimateTransformElement` (en-US)
* `SVGCircleElement` (en-US)
* `SVGClipPathElement` (en-US)
* `SVGComponentTransferFunctionElement` (en-US)
* `SVGCursorElement` (en-US)
* `SVGDefsElement` (en-US)
* `SVGDescElement` (en-US)
* `SVGElement` (en-US)
* `SVGEllipseElement` (en-US)
* `SVGFEBlendElement` (en-US)
* `SVGFEColorMatrixElement` (en-US)
* `SVGFEComponentTransferElement` (en-US)
* `SVGFECompositeElement` (en-US)
* `SVGFEConvolveMatrixElement` (en-US)
* `SVGFEDiffuseLightingElement` (en-US)
* `SVGFEDisplacementMapElement` (en-US)
* `SVGFEDistantLightElement` (en-US)
* `SVGFEDropShadowElement` (en-US)
* `SVGFEFloodElement` (en-US)
* `SVGFEFuncAElement` (en-US)
* `SVGFEFuncBElement` (en-US)
* `SVGFEFuncGElement` (en-US)
* `SVGFEFuncRElement` (en-US)
* `SVGFEGaussianBlurElement` (en-US)
* `SVGFEImageElement` (en-US)
* `SVGFEMergeElement` (en-US)
* `SVGFEMergeNodeElement` (en-US)
* `SVGFEMorphologyElement` (en-US)
* `SVGFEOffsetElement` (en-US)
* `SVGFEPointLightElement` (en-US)
* `SVGFESpecularLightingElement` (en-US)
* `SVGFESpotLightElement` (en-US)
* `SVGFETileElement` (en-US)
* `SVGFETurbulenceElement` (en-US)
* `SVGFilterElement` (en-US)
* `SVGFilterPrimitiveStandardAttributes`
* `SVGFontElement` (en-US)
지원이 중단되었습니다
* `SVGFontFaceElement` (en-US)
지원이 중단되었습니다
* `SVGFontFaceFormatElement` (en-US)
지원이 중단되었습니다
* `SVGFontFaceNameElement` (en-US)
지원이 중단되었습니다
* `SVGFontFaceSrcElement` (en-US)
지원이 중단되었습니다
* `SVGFontFaceUriElement` (en-US)
지원이 중단되었습니다
* `SVGForeignObjectElement` (en-US)
* `SVGGElement` (en-US)
* `SVGGeometryElement` (en-US)
* `SVGGlyphElement` (en-US)
지원이 중단되었습니다
* `SVGGlyphRefElement` (en-US)
지원이 중단되었습니다
* `SVGGradientElement` (en-US)
* `SVGGraphicsElement` (en-US)
* `SVGHatchElement`
Experimental
* `SVGHatchpathElement`
Experimental
* `SVGHKernElement` (en-US)
지원이 중단되었습니다
* `SVGImageElement` (en-US)
* `SVGLinearGradientElement` (en-US)
* `SVGLineElement` (en-US)
* `SVGMarkerElement` (en-US)
Experimental
* `SVGMaskElement` (en-US)
* `SVGMetadataElement` (en-US)
* `SVGMissingGlyphElement` (en-US)
지원이 중단되었습니다
* `SVGMPathElement` (en-US)
* `SVGPathElement` (en-US)
* `SVGPatternElement` (en-US)
* `SVGPolylineElement` (en-US)
* `SVGPolygonElement` (en-US)
* `SVGRadialGradientElement` (en-US)
* `SVGRectElement` (en-US)
* `SVGScriptElement` (en-US)
* `SVGSetElement` (en-US)
* `SVGStopElement` (en-US)
* `SVGStyleElement` (en-US)
* `SVGSVGElement` (en-US)
* `SVGSwitchElement` (en-US)
* `SVGSymbolElement` (en-US)
* `SVGTextContentElement` (en-US)
* `SVGTextElement` (en-US)
* `SVGTextPathElement` (en-US)
* `SVGTextPositioningElement` (en-US)
* `SVGTitleElement` (en-US)
* `SVGTRefElement` (en-US)
지원이 중단되었습니다
* `SVGTSpanElement` (en-US)
* `SVGUseElement` (en-US)
* `SVGViewElement` (en-US)
* `SVGVKernElement` (en-US)
지원이 중단되었습니다
### SVG 데이터 타입 인터페이스

다음은 SVG 프로퍼티와 어트리뷰트 정의에 쓰이는 데이터 타입을 위한 DOM API입니다.

#### 정적 타입

* `SVGAngle` (en-US)
* `SVGColor`
지원이 중단되었습니다
* `SVGICCColor`
지원이 중단되었습니다
* `SVGElementInstance`
* `SVGElementInstanceList`
* `SVGLength` (en-US)
* `SVGLengthList` (en-US)
* `SVGMatrix` (en-US)
지원이 중단되었습니다
* `SVGNameList`
* `SVGNumber` (en-US)
* `SVGNumberList` (en-US)
* `SVGPaint`
* `SVGPathSeg`
지원이 중단되었습니다
* `SVGPathSegClosePath`
지원이 중단되었습니다
* `SVGPathSegMovetoAbs`
지원이 중단되었습니다
* `SVGPathSegMovetoRel`
지원이 중단되었습니다
* `SVGPathSegLinetoAbs`
지원이 중단되었습니다
* `SVGPathSegLinetoRel`
지원이 중단되었습니다
* `SVGPathSegCurvetoCubicAbs`
지원이 중단되었습니다
* `SVGPathSegCurvetoCubicRel`
지원이 중단되었습니다
* `SVGPathSegCurvetoQuadraticAbs`
지원이 중단되었습니다
* `SVGPathSegCurvetoQuadraticRel`
지원이 중단되었습니다
* `SVGPathSegArcAbs`
지원이 중단되었습니다
* `SVGPathSegArcRel`
지원이 중단되었습니다
* `SVGPathSegLinetoHorizontalAbs`
지원이 중단되었습니다
* `SVGPathSegLinetoHorizontalRel`
지원이 중단되었습니다
* `SVGPathSegLinetoVerticalAbs`
지원이 중단되었습니다
* `SVGPathSegLinetoVerticalRel`
지원이 중단되었습니다
* `SVGPathSegCurvetoCubicSmoothAbs`
지원이 중단되었습니다
* `SVGPathSegCurvetoCubicSmoothRel`
지원이 중단되었습니다
* `SVGPathSegCurvetoQuadraticSmoothAbs`
지원이 중단되었습니다
* `SVGPathSegCurvetoQuadraticSmoothRel`
지원이 중단되었습니다
* `SVGPathSegList`
지원이 중단되었습니다
* `SVGPoint` (en-US)
지원이 중단되었습니다
* `SVGPointList` (en-US)
지원이 중단되었습니다
* `SVGPreserveAspectRatio` (en-US)
* `SVGRect`
지원이 중단되었습니다
* `SVGStringList` (en-US)
* `SVGTransform` (en-US)
* `SVGTransformList` (en-US)

#### 움직이는(animated) 형

* `SVGAnimatedAngle` (en-US)
* `SVGAnimatedBoolean` (en-US)
* `SVGAnimatedEnumeration` (en-US)
* `SVGAnimatedInteger` (en-US)
* `SVGAnimatedLength` (en-US)
* `SVGAnimatedLengthList` (en-US)
* `SVGAnimatedNumber` (en-US)
* `SVGAnimatedNumberList` (en-US)
* `SVGAnimatedPathData`
지원이 중단되었습니다
* `SVGAnimatedPoints` (en-US)
* `SVGAnimatedPreserveAspectRatio` (en-US)
* `SVGAnimatedRect` (en-US)
* `SVGAnimatedString` (en-US)
* `SVGAnimatedTransformList` (en-US)
### SMIL 관련 인터페이스

* `ElementTimeControl`
* `TimeEvent` (en-US)
### 기타 SVG 인터페이스

* `GetSVGDocument`
* `ShadowAnimation`
* `SVGColorProfileRule`
지원이 중단되었습니다
* `SVGCSSRule`
지원이 중단되었습니다
* `SVGDocument`
* `SVGException`
지원이 중단되었습니다
* `SVGFitToViewBox`
* `SVGLocatable`
지원이 중단되었습니다
* `SVGRenderingIntent` (en-US)
지원이 중단되었습니다
* `SVGUnitTypes` (en-US)
* `SVGUseElementShadowRoot`
* `SVGViewSpec`
지원이 중단되었습니다
* `SVGZoomEvent`
지원이 중단되었습니다
명세
--

| Specification |
| --- |
| DOM Standard  |

같이 보기
-----

* DOM 예제
* CSS 객체 모델 (CSSOM)


CharacterData - Web API

CharacterData
=============

**`CharacterData`** 추상 인터페이스는 문자를 포함하는 `Node` (en-US) 객체를 나타냅니다. 이는 추상 인터페이스로 `CharacterData` 타입의 객체로는 존재하지 않음을 의미합니다. `Text`, `Comment`, `ProcessingInstruction` (en-US) 와 같은 추상 인터페이스가 아닌 다른 인터페이스에의해 구현되었습니다.

EventTarget

Node

(en-US)

CharacterData프로퍼티
----

*부모 `Node` (en-US) 로부터 프로퍼티를 상속받고 `ChildNode` 와 `NonDocumentTypeChildNode` (en-US) 인터페이스를 구현합니다.*

`CharacterData.data` (en-US)

이 객체를 포함하는 문자형 데이터를 나타내는 `DOMString` 입니다.

`CharacterData.length` (en-US) 읽기 전용

`CharacterData.data` 에 포함된 문자열의 크기를 나타내는 `unsigned long` 을 반환합니다.

`NonDocumentTypeChildNode.nextElementSibling` (en-US) 읽기 전용

부모의 자식 리스트 중 특정 `Element` (en-US) 의 바로 다음 `Element` (en-US) 를 반환합니다. 특정 엘리먼트가 리스트의 마지막 것일 경우 `null` 을 반환합니다.

`NonDocumentTypeChildNode.previousElementSibling` (en-US) 읽기 전용

부모의 자식 리스트 중 특정 `Element` (en-US) 의 바로 이전 `Element` (en-US) 를 반환합니다. 특정 엘리먼트가 리스트의 처음 것일 경우 `null` 을 반환합니다.

메소드
---

*부모 `Node` (en-US) 로부터 메소드를 상속받고 `ChildNode` 와 *`NonDocumentTypeChildNode` (en-US)* 인터페이스를 구현합니다.*

`CharacterData.appendData()` (en-US)

주어진 `DOMString` 을 `CharacterData.data` 문자열에 붙입니다. 이 메소드가 반환할 때 `data` 는 이어 붙여진 `DOMString` 을 갖게됩니다.

`CharacterData.deleteData()` (en-US)

`CharacterData.data` 문자열의 특정 오프셋으로부터 지정한 양만큼의 문자열을 제거합니다. 이 메소드가 반환할 때 `data` 는 짧아진 `DOMString` 을 갖게됩니다.

`CharacterData.insertData()` (en-US)

`CharacterData.data` 문자열의 특정 오프셋에 특정 문자열을 삽입합니다. 이 메소드가 반환할 때 `data` 는 수정된 `DOMString` 을 갖게됩니다.

`ChildNode.remove()` (en-US)
Experimental

부모의 자식 리스트로부터 객체를 제거합니다.

`CharacterData.replaceData()` (en-US)

특정 오프셋으로부터 지정한 양만큼의 문자열을 지정된 `DOMString` 으로 대체합니다. 이 메소드가 반환할 때 `data` 는 수정된 `DOMString` 을 갖게됩니다.

`CharacterData.substringData()` (en-US)

`CharacterData.data` 의 특정 오프셋으로부터 지정된 길이만큼의 `DOMString` 을 반환합니다.

명세
--

| Specification |
| --- |
| DOM Standard # interface-characterdata |

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

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

함께 보기
-----

* DOM 인터페이스 목차 (en-US).


FileReader - Web API

FileReader
==========

**`FileReader`** 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는`File` 혹은 `Blob` 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다.

File 객체는 `<input>` (en-US) 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 `FileList` 객체, 드래그 앤 드랍으로 반환된 `DataTransfer` (en-US) 객체 혹은 `HTMLCanvasElement`의 `mozGetAsFile()` API로 부터 얻습니다.

생성자
---

`FileReader()` (en-US)

Returns a newly constructed `FileReader`.

See Using files from web applications (en-US) for details and examples.

속성
--

`FileReader.error` (en-US) 읽기 전용

`DOMError` (en-US) 파일을 읽는 도중에 발생한 에러를 나타냅니다.

`FileReader.readyState` (en-US) 읽기 전용

FileReader의 상태를 나타내는 숫자입니다.

* `EMPTY` : `0` : 아직 데이터가 로드 되지 않았음.
* `LOADING` : `1` : 데이터가 로딩 중.
* `DONE` : `2` : 모든 읽기 요청이 완료됨.

`FileReader.result` 읽기 전용

파일의 컨텐츠입니다. 이 속성은 읽기 작업이 완료되고 읽기 작업의 초기화에 사용한 방식으로 결정된 데이터의 포맷이 정해진 후에 유효합니다.

### 이벤트 핸들러

`FileReader.onabort` (en-US)

`abort (en-US)` 이벤트의 핸들러. 이 이벤트는 읽기 동작이 중단 될 때마다 발생합니다.

`FileReader.onerror` (en-US)

`error (en-US)` 이벤트의 핸들러. 이 이벤트는 읽기 동작에 에러가 생길 때마다 발생합니다.

`FileReader.onload` (en-US)

`load` 이벤트의 핸들러. 이 이벤트는 읽기 동작이 성공적으로 완료 되었을 때마다 발생합니다.

`FileReader.onloadstart`

`loadstart (en-US)` 이벤트 핸들러. 이 이벤트는 읽기 동작이 실행 될 때마다 발생합니다.

`FileReader.onloadend`

`loadend (en-US)` 이벤트 핸들러. 이 이벤트는 읽기 동작이 끝났을 때마다 발생합니다. (읽기의 성공이나 실패 여부는 상관 않습니다.)

`FileReader.onprogress`

`progress (en-US)` 이벤트 핸들러. 이 이벤트는 `Blob` 컨텐트를 읽는 동안 호출됩니다.

**참고:** `FileReader`는 `EventTarget` 으로 부터 상속 받았습니다, 언급된 모든 이벤트들은 `addEventListener` 메소드를 사용하여 listen 하게 할 수 있습니다.

메서드
---

`FileReader.abort()` (en-US)

읽기 요청을 중단시킵니다. 리턴이 되면 readyState 는 DONE이 됩니다.

`FileReader.readAsArrayBuffer()` (en-US)

Starts reading the contents of the specified `Blob`, once finished, the `result` attribute contains an `ArrayBuffer` representing the file's data.

`FileReader.readAsBinaryString()` (en-US)

Starts reading the contents of the specified `Blob`, once finished, the `result` attribute contains the raw binary data from the file as a string.

`FileReader.readAsDataURL()`

Starts reading the contents of the specified `Blob`, once finished, the `result` attribute contains a `data:` URL representing the file's data.

`FileReader.readAsText()`

Starts reading the contents of the specified `Blob`, once finished, the `result` attribute contains the contents of the file as a text string.

명세
--

| Specification |
| --- |
| File API # APIASynch |

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

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

같이 보기
-----

* Using files from web applications
* `File`
* `Blob`
* nsIDOMFileReader [en-US] - For addons/privelaged scope


AudioWorkletGlobalScope - Web API

AudioWorkletGlobalScope
=======================

Web Audio API의 **`AudioWorkletGlobalScope`** 인터페이스는 커스텀 `AudioWorkletProcessor`에서 파생된 클래스를 정의하는 코드에 대한 전역 실행 컨텍스트를 나타냅니다.

각각의 `BaseAudioContext`는 하나의 `AudioWorkletGlobalScope` 내에서 코드를 실행하는 `audioWorklet` (en-US) 속성 아래에서 하나의 이용 가능한 `AudioWorklet`을 가집니다.

전역 실행 컨텍스트가 현재의 `BaseAudioContext` 전체에 걸쳐 공유되므로, worklet 내에서 허용되는 행동을 수행하는 것과 다른 변수를 정의하는 것은 가능합니다 — `AudioWorkletProcessor`에서 파생된 클래스를 정의하는 것을 제외하고요.

속성
--

`currentFrame` (en-US) 읽기 전용

처리되고 있는 오디오 블럭의 계속 증가하는 현재의 샘플 프레임을 나타내는 정수를 반환합니다. 이것은 각 오디오 블럭의 처리 후에 128씩 (렌더 quantum의 크기) 증가됩니다.

`currentTime` (en-US) 읽기 전용

처리되고 있는 오디오 블럭의 계속 증가하는 컨텍스트 시간을 나타내는 double 값을 반환합니다. 이것은 worklet이 속한 `BaseAudioContext`의 `currentTime` (en-US) 속성과 같습니다.

`sampleRate` (en-US) 읽기 전용

연관된 `BaseAudioContext`의 샘플 레이트를 나타내는 float 값을 반환합니다.

메서드
---

`registerProcessor()`

`AudioWorkletProcessor` 인터페이스에서 파생된 클래스를 등록합니다. 그리고 나서 이 클래스는 이것의 등록된 이름을 제공하는 `AudioWorkletNode`를 생성함으로써 사용될 수 있습니다.

예제
--

이 예제에서 우리는 콘솔에 사용자 정의 `AudioWorkletProcessor`의 생성자에 있는 모든 전역 속성을 출력합니다.

우선 우리는 프로세서를 정의하고, 등록할 필요가 있습니다. 이 작업은 별도의 파일에서 이루어져야 함을 기억하세요.

```js
// test-processor.js
class TestProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
    // 초기화 순간의 현재 샘플 프레임과 시간
    // 값이 변하는 것을 보기 위해서, 여러분은 이 두 줄을 process 메서드에 넣을 수 있습니다
    console.log(currentFrame);
    console.log(currentTime);
  }
  // process 메서드는 필수적입니다 - 아무 소리도 나지 않는데,
  // outputs에 값을 넣지 않았기 때문입니다
  process(inputs, outputs, parameters) {
    return true;
  }
}

// 샘플 레이트는 절대 변하지 않을 것인데,
// 왜냐하면 이것은 BaseAudioContext의 읽기 전용 속성이고
// 오직 이것의 초기화 동안에만 설정되기 때문입니다
console.log(sampleRate);

// 여러분은 어떠한 변수든 선언하고 프로세서에서 사용할 수 있습니다
// 예를 들어 변수는 웨이브 테이블을 가진 ArrayBuffer일 수 있습니다
const usefulVariable = 42;
console.log(usefulVariable);

registerProcessor("test-processor", TestProcessor);
```

다음으로, 메인 스크립트 파일에서 우리는 프로세서를 로드하고, `AudioWorkletNode`에 프로세서의 이름을 전달하며 `AudioWorkletNode`의 인스턴스를 생성하고, 노드를 오디오 그래프에 연결할 것입니다. 우리는 콘솔에서 `console.log` 호출의 출력을 볼 수 있을 것입니다.

```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const testNode = new AudioWorkletNode(audioContext, "test-processor");
testNode.connect(audioContext.destination);
```

명세
--

| Specification |
| --- |
| Web Audio API # AudioWorkletGlobalScope |

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

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

같이 보기
-----

* Web Audio API
* Web Audio API 사용하기