recursal/MDN huggingface dataset:
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 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
============

**`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)
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
=======

**`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` 속성.
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.
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
===============

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

**`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
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
==========

**`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 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 사용하기