recursal/MDN huggingface dataset:
PeriodicWave
============

**`PeriodicWave`** 인터페이스는 `OscillatorNode` (en-US)의 출력을 형성하는데 사용될 수 있는 주기적인 파형을 정의합니다.

`PeriodicWave`에는 입력도 출력도 없습니다; 이것은 `OscillatorNode.setPeriodicWave()` (en-US)를 호출할 때 사용자 정의 oscillator를 정의하기 위해 쓰입니다. `PeriodicWave` 그 자체는 `BaseAudioContext.createPeriodicWave`에 의해 생성/반환됩니다.

생성자
---

`PeriodicWave.PeriodicWave()`

모든 속성에 기본값을 사용하여 새로운 `PeriodicWave` 객체 인스턴스를 생성합니다. 만약 처음에 사용자 정의 속성 값을 설정하기를 원한다면, `BaseAudioContext.createPeriodicWave` 팩토리 메서드를 대신 사용하세요.

속성
--

*없습니다; 또한, `PeriodicWave`는 어떠한 속성도 상속받지 않습니다.*

메서드
---

*없습니다; 또한, `PeriodicWave`는 어떠한 메서드도 상속받지 않습니다.*

예제
--

간단한 사인파를 포함하는 `PeriodicWave` 객체를 어떻게 생성하는지 보여주는 간단한 예제 코드를 `BaseAudioContext.createPeriodicWave`에서 확인해 보세요.

명세
--

| Specification |
| --- |
| Web Audio API # PeriodicWave |

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

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

같이 보기
-----

* Web Audio API 사용하기
Push API
========

**Push API**는 웹 애플리케이션이 사용자 에이전트에서 웹 앱이 활성 상태에 있는지 또는 현재 로드 중인지 여부와 관계없이 서버로부터 푸시 메시지를 수신할 수 있는 기능을 제공합니다. 이를 통해 개발자는 미리 동의한 사용자에게 비동기식 알림 및 업데이트를 전달할 수 있으므로 적시에 새로운 콘텐츠에 대한 참여도를 높일 수 있습니다.

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

**경고:** PushManager 구독을 구현할 때는 앱에서 CSRF/XSRF 문제를 방지하는 것이 매우 중요합니다. 자세한 내용은 다음 문서를 참조하세요.

* Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet
* Preventing CSRF and XSRF Attacks

앱이 푸시 메시지를 수신하려면 활성 서비스 워커가 있어야 합니다. 서비스 워커가 활성화되면 `PushManager.subscribe()` (en-US)를 사용하여 푸시 알림을 구독할 수 있습니다.

결과 `PushSubscription` (en-US)에는 애플리케이션이 푸시 메시지를 보내는 데 필요한 모든 정보(엔드포인트 및 데이터 전송에 필요한 암호화 키)가 포함됩니다.

서비스 워커는 수신 푸시 메시지를 처리하기 위해 필요에 따라 시작되어 `onpush` (en-US) 이벤트 핸들러로 전달됩니다. 이를 통해 앱은 알림을 표시하는 등의 방식으로 수신되는 푸시 메시지에 반응할 수 있습니다(예: `ServiceWorkerRegistration.showNotification()` (en-US) 사용).

각 구독은 서비스 워커마다 고유합니다. 구독의 엔드포인트는 고유한 기능(capability) URL입니다. 엔드포인트에 대한 지식만 있으면 애플리케이션에 메시지를 보낼 수 있습니다. 따라서 엔드포인트 URL은 비밀로 유지해야 하며, 그렇지 않으면 다른 애플리케이션이 애플리케이션에 푸시 메시지를 보낼 수 있습니다.

푸시 메시지를 전달하기 위해 서비스 워커를 활성화하면 리소스 사용량, 특히 배터리 사용량이 증가할 수 있습니다. 브라우저마다 이를 처리하는 방식이 다르며, 현재 표준 메커니즘은 없습니다. Firefox에서는 애플리케이션에 전송할 수 있는 푸시 메시지의 개수(할당량)가 제한되어 있지만 알림을 생성하는 푸시 메시지는 이 제한에서 제외됩니다. 이 제한은 사이트를 방문할 때마다 새로 고쳐집니다. Chrome에서는 제한이 없습니다.

인터페이스
-----

`PushEvent` (en-US)

`ServiceWorker`의 전역 범위(global scope) (en-US)로 전송되는 푸시 작업을 나타냅니다. 여기에는 애플리케이션에서 `PushSubscription` (en-US)으로 전송된 정보가 포함됩니다.

`PushManager` (en-US)

타사 서버로부터 알림을 수신하고 푸시 알림을 위한 URL을 요청하는 방법을 제공합니다.

`PushMessageData` (en-US)

서버에서 전송한 푸시 데이터에 대한 접근을 제공하고 수신된 데이터를 조작하는 메서드를 포함합니다.

`PushSubscription` (en-US)

구독의 URL 엔드포인트를 제공하고 푸시 서비스에서 구독을 취소할 수 있습니다.

`PushSubscriptionOptions` (en-US)

푸시 구독과 관련된 옵션을 나타냅니다.

서비스 워커 추가 기능
------------

푸시 API 사양에는 푸시 메시지를 사용하는 진입점을 제공하고, 푸시 및 구독 변경 이벤트를 모니터하고 응답하기 위해 Service Worker API에 대한 다음과 같은 추가 사항들이 명시되어 있습니다.

`ServiceWorkerRegistration.pushManager` (en-US) 읽기 전용

구독, 활성 구독 가져오기, 푸시 권한 상태 접근 등 푸시 구독을 관리하기 위한 `PushManager` (en-US) 인터페이스에 대한 참조를 반환합니다. 푸시 메시징을 사용하기 위한 진입점입니다.

`onpush` (en-US)

`push` (en-US) 이벤트가 발생할 때마다, 즉 서버 푸시 메시지가 수신될 때마다 이벤트 핸들러가 실행됩니다.

`onpushsubscriptionchange` (en-US)

푸시 구독이 무효화되었거나 곧 무효화될 때(예: 푸시 서비스가 만료 시간을 설정한 경우) 등 `pushsubscriptionchange` (en-US) 이벤트가 발생할 때마다 이벤트 핸들러가 실행됩니다.

예제
--

Mozilla의 서비스 워커 쿡북에는 유용한 푸시 예제가 많이 포함되어 있습니다.

명세서
---

| Specification |
| --- |
| Push API # pushevent-interface |
| Push API # pushmessagedata-interface |

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

### api.PushEvent

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

### api.PushMessageData

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

같이 보기
-----

* Mozilla의 푸시 서비스를 통해 VAPID 식별 웹푸시 알림 보내기
* 푸시 알림 개요
* 서비스 워커 API
AudioParamDescriptor
====================

Web Audio API의 **`AudioParamDescriptor`** dictionary는 `AudioParam` 객체에 대한 속성들을 명시합니다.

이 dictionary는 `AudioWorkletNode`에서 사용자 정의 `AudioParam` 을 생성하기 위해 사용됩니다. 만약 근본적인 `AudioWorkletProcessor`가 `parameterDescriptors` static getter를 가지고 있다면, 이 dictionary에 기반한 반환된 객체들의 배열이 `AudioWorkletNode` 생성자에 의해 내부적으로 사용되어 이에 맞춰 AudioWorkletNode의 `parameters` 속성을 채웁니다.

속성
--

`name`

`AudioParam` 의 이름을 나타내는 `DOMString`. 이 이름 아래에서 `AudioParam` 은 AudioWorkletNode의 `parameters` 속성에서 사용 가능하게 될 것이고, 이 이름 아래에서 `AudioWorkletProcessor.process` 메서드가 이 `AudioParam` 의 계산된 값을 획득할 것입니다.

`automationRate` Optional

이 `AudioParam` 의 자동화율(automation rate)을 나타내는 string인데, `"a-rate"` 또는 `"k-rate"`입니다. 기본값은 `"a-rate"` 입니다.

`minValue` Optional

`AudioParam` 의 최소 값을 나타내는 `float`. 기본값은 `-3.4028235e38` 입니다.

`maxValue` Optional

`AudioParam` 의 최대 값을 나타내는 `float`. 기본값은 `3.4028235e38` 입니다.

`defaultValue` Optional

`AudioParam` 의 초기 값을 나타내는 `float`. 기본값은 `0` 입니다.

예제
--

아래의 코드는 사용자 정의 `AudioWorkletProcessor` 에서 정의된 static `parameterDescriptors` 메서드에 의해 반환되는 이 유형의 descriptor를 보여줍니다 (이 코드는 AudioWorkletNode.parameters 예제의 일부입니다).


```js
// white-noise-processor.js
class WhiteNoiseProcessor extends AudioWorkletProcessor {
  static get parameterDescriptors () {
    return [{
      name: 'customGain',
      defaultValue: 1,
      minValue: 0,
      maxValue: 1,
      automationRate: 'a-rate'
    }]
  }

...
}
```

명세서
---

#### No specification found

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

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

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

같이 보기
-----

* Web Audio API
* Web Audio API 사용하기
Crypto
======

**`Crypto`** 인터페이스는 현재 환경에서 사용 가능한 기본적인 암호화 기법을 제공합니다. 이 인터페이스를 통해 암호학적으로 강력한 무작위 숫자 생성기나 암호화에 필요한 기본 요소에 접근할 수 있습니다.

이 인터페이스 객체는 `Window.crypto` 속성을 통해 웹에서 사용 가능합니다.

속성
--

*이 인터페이스는 `RandomSource`에 정의된 속성을 구현하고 있습니다.*

`Crypto.subtle` 
Experimental
읽기 전용

해싱, 서명, 암호화, 복호화같은 암호화 기법에 필요한 공통 요소들에 접근할 수 있는 객체를 반환.

메소드
---

*이 인터페이스는 `RandomSource`에 정의된 속성을 구현하고 있습니다.*

`RandomSource.getRandomValues()`

넘겨받은 `TypedArray`를 암호학적으로 무작위인 값으로 채움.

더보기
---

* Components.utils.importGlobalProperties
Response
========

Fetch API의 **`Response`** 인터페이스는 요청에 대한 응답을 나타냅니다.

새로운 `Response` 객체는 `Response()` (en-US) 생성자로도 생성할 수 있지만, 보통은 서비스 워커의 `FetchEvent.respondWith` (en-US)이나 단순히 `fetch()` 호출 등, 다른 API 작업의 결과로서 만나게 됩니다.

생성자
---

`Response()` (en-US)

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

인스턴스 속성
-------

`Response.body` (en-US) 읽기 전용

본문 내용의 `ReadableStream`입니다.

`Response.bodyUsed` (en-US) 읽기 전용

응답의 본문이 사용됐는지 아닌지 나타내는 불리언입니다.

`Response.headers` (en-US) 읽기 전용

응답에 연관된 `Headers` (en-US) 객체입니다.

`Response.ok` (en-US) 읽기 전용

응답의 성공 (코드가 `200`-`299` 범위 내) 여부를 나타내는 불리언입니다.

`Response.redirected` (en-US) 읽기 전용

응답이 리디렉션의 결과인지 (즉, URL 목록이 두 개 이상의 항목을 지녔는지) 나타냅니다.

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

응답의 상태 코드입니다. 성공 시 `200`입니다.

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

상태 코드에 해당하는 상태 메시지입니다. (예시: `200`이면 `OK`)

`Response.type` (en-US) 읽기 전용

응답 유형입니다. (예시: `basic`, `cros`)

`Response.url` (en-US) 읽기 전용

응답 URL입니다.

정적 메서드
------

`Response.error()` (en-US)

네트워크 오류와 연관된 새로운 `Response` 객체를 반환합니다.

`Response.redirect()` (en-US)

다른 URL을 가리키는 새로운 응답을 생성합니다.

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

`Request.arrayBuffer()` (en-US)

응답 본문의 `ArrayBuffer` 표현으로 이행하는 프로미스를 반환합니다.

`Request.blob()` (en-US)

응답 본문의 `Blob` 표현으로 이행하는 프로미스를 반환합니다.

`Request.clone()` (en-US)

`Response` 객체의 복사본을 생성합니다.

`Request.formData()` (en-US)

응답 본문의 `FormData` 표현으로 이행하는 프로미스를 반환합니다.

`Request.json()` (en-US)

응답 본문을 `JSON`으로 파싱한 결과로 이행하는 프로미스를 반환합니다.

`Request.text()` (en-US)

응답 본문의 text 표현으로 이행하는 프로미스를 반환합니다.

예제
--

### 이미지 취득하기

저희의 기본 `fetch()` 예제(미리보기)에서는 간단한 `fetch()` 호출을 통해 이미지를 취득해서 `<img>` 요소에 표시합니다. `fetch()` 호출은 취득 연산과 연관된 `Response`로 이행하는 프로미스를 반환합니다.

우리는 이미지를 요청하고 있기 때문에, `Response.blob()`을 실행하여 응답에 올바른 MIME 타입을 부여해야 한다는 걸 보실 겁니다.


```js
const image = document.querySelector(".my-image");
fetch("flowers.jpg")
  .then((response) => response.blob())
  .then((blob) => {
    const objectURL = URL.createObjectURL(blob);
    image.src = objectURL;
  });
```


`Response()` (en-US) 생성자로 자신만의 `Response` 객체를 생성할 수도 있습니다.


```js
const response = new Response();
```

### AJAX 호출

여기서는 JSON 문자열을 생성하는 PHP 프로그램 파일을 호출하고, 간단한 오류 처리와 함께 결과를 JSON 값으로서 출력합니다.


```js
// AJAX 호출을 위한 함수
const doAjax = async () => {
  const response = await fetch("Ajax.php"); // Response 객체 생성
  if (response.ok) {
    const jsonValue = await response.json(); // 응답 봄문에서 JSON 값 가져오기
    return Promise.resolve(jsonValue);
  } else {
    return Promise.reject("\*\*\* PHP file not found");
  }
};

// 위 함수 호출 후 결과 값 또는 오류 메시지를 콘솔에 기록
doAjax().then(console.log).catch(console.log);
```

명세서
---

| Specification |
| --- |
| Fetch Standard # response-class |

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

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

같이 보기
-----

* Service Worker API
* HTTP 접근 제어 (CORS)
* HTTP
Vibration API
=============

대부분의 최신 모바일 디바이스에는 바이브레이션 하드웨어를 포함하고 있습니다. 이를 통해 소프트웨어 코드를 이용해 바이브레이션 하드웨어를 제어하여, 모바일 디바이스를 흔들어 사용자에게 물리적인 피드백을 제공할 수 있습니다. **Vibration API**는 웹 앱이 이러한 하드웨어에 접근할 수 있도록 합니다. 하지만 대응하는 바이브레이션 장치가 없는 기기일 경우 아무 일도 일어나지 않습니다.

바이브레이션 설명하기
-----------

바이브레이션은 다양한 길이의 온·오프 펄스의 패턴이라고 할 수 있습니다. 패턴은 진동 시간(밀리초)을 나타내는 단일 정수로 구성되거나 진동 및 일시 정지 패턴을 나타내는 정수의 배열로 구성될 수 있습니다. 진동은 `Navigator.vibrate()` (en-US) 라는 단일 메서드로 제어됩니다.

### 단일 바이브레이션

하나의 값 또는 하나의 값으로 구성된 배열을 지정하여 바이브레이션 하드웨어를 1회 진동시킬 수 있습니다.


```js
window.navigator.vibrate(200);
window.navigator.vibrate([200]);
```


위 두 가지 예제는 모두 디바이스를 200ms 동안 진동시킵니다.

### 바이브레이션 패턴

값 배열은 장치가 진동하는 주기와 진동하지 않는 주기를 번갈아 가며 나타냅니다. 배열의 각 값은 하나의 정수로 변환된 후 차례대로 장치가 진동해야 하는 시간, 장치가 진동하지 않아야 하는 시간으로 해석됩니다. 아래 예시를 살펴봅시다.


```js
window.navigator.vibrate([200, 100, 200]);
```


이 예제는 장치를 200ms 동안 진동시킨 후, 100ms 동안 멈추게 하고 그 후 다시 200ms 동안 장치를 진동시킵니다.

진동/정지 쌍을 원하는 만큼 지정할 수 있습니다. 그리고 배열 내에 홀수 개 또는 짝수 개로 입력할 수 있습니다. 각 진동 주기가 끝날 때마다 진동이 자동으로 중지되므로 마지막 항목으로 일시 정지를 제공할 필요가 없습니다.

### 이미 실행 중인 바이브레이션 취소

`Navigator.vibrate()` (en-US) 메서드를 0 값을 호출하거나, 빈 배열, 0 값으로 구성된 배열로 호출하면 현재 진행 중인 진동 패턴은 모두 취소됩니다.

### 지속적인 바이브레이션

몇 가지 기본 `setInterval` 및 `clearInterval` 동작을 통해 지속적인 바이브레이션을 만들 수 있습니다.


```js
var vibrateInterval;

// 전달된 매개변수 수준으로 바이브레이션을 시작함
function startVibrate(duration) {
  navigator.vibrate(duration);
}

// 바이브레이션을 멈춤
function stopVibrate() {
  // 주기 및 지속적인 진동 중지
  if (vibrateInterval) clearInterval(vibrateInterval);
  navigator.vibrate(0);
}

// 주어진 지속시간과 간격대로 지속적인 바이브레이션을 시작함
// 숫자 값이 주어졌다고 가정함
function startPersistentVibrate(duration, interval) {
  vibrateInterval = setInterval(() => {
    startVibrate(duration);
  }, interval);
}
```


물론 위의 스니펫은 배열 기반 바이브레이션 방식을 고려하지 않았으며, 배열 기반 바이브레이션을 지속하려면 배열 항목의 합계를 계산하고, 그 수에 따라 간격을 만들어야 합니다. (아마도 추가적인 지연이 있을 것입니다)

명세서
---

| Specification |
| --- |
| Vibration API (Second Edition) # dom-navigator-vibrate |

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

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

같이 보기
-----

* `window.navigator.vibrate()`
atob()
======

**`atob()`** 함수는 Base64 인코딩된 문자열 데이터를 디코딩합니다. ASCII 값 0부터 31까지의 제어 문자처럼 통신에 사용하면 문제가 발생할 수 있는 데이터를 `btoa()`로 인코딩해 전송하고, 받는 쪽에서는 `atob()`로 디코딩하면 문제 없이 원래 데이터를 가져올 수 있습니다.

유니코드 또는 UTF-8 문자열의 인코딩/디코딩에 대해서는 `btoa()` 문서의 "유니코드 문자열" 부분을 참고하세요.

구문
--


```js
atob(encodedData);
```

### 매개변수

`encodedData`

base64 인코딩된 데이터를 담은 이진 문자열입니다.

### 반환 값

`encodedData`를 디코딩한 ASCII 문자열.

### 예외

`InvalidCharacterError` `DOMException` (en-US)

`encodedData`가 유효한 base64 데이터가 아니면 발생합니다.

예제
--


```js
const encodedData = btoa("Hello, world"); // 문자열 인코딩
const decodedData = atob(encodedData); // 문자열 디코딩
```

명세
--

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

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

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

같이 보기
-----

* `core-js`의 `atob` 폴리필
* `data` URL
* `btoa()`
Geolocation API
===============

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

**Geolocation API**는 사용자의 동의 하에 웹 애플리케이션에서 위치 정보에 접근할 수 있는 API입니다. 개인정보 보호를 위해, 브라우저는 위치 정보를 제공하기 전에 사용자에게 위치 정보 권한에 대한 확인을 받습니다.

`Geolocation` 객체를 사용하려는 WebExtension은 매니페스트에 `"geolocation"` 권한을 추가해야 합니다. 사용자의 운영 체제는 WebExtension이 처음으로 위치 정보를 요청하는 순간 사용자에게 정보 제공 여부를 물어봅니다.

개념과 사용법
-------

사용자의 위치를 지도에 표시하거나 위치 기반 개인화 정보를 제공하는 등, 웹 앱에서 위치 정보를 가져와야 하는 이유는 다양합니다.

Geolocation API는 `navigator.geolocation`을 통해 접근할 수 있습니다. 이때, 브라우저는 사용자에게 위치 정보 접근 권한을 요청하게 되고, 사용자가 동의하는 경우 현재 장치에서 사용 가능한 최선의 방법(GPS 등)을 통해 위치 정보를 가져옵니다.

개발자는 이 위치 정보를 몇 가지 방법으로 가져올 수 있습니다.

* `Geolocation.getCurrentPosition()`: 장치의 현재 위치를 가져옵니다.
* `Geolocation.watchPosition()`: 장치의 위치가 바뀔 때마다, 자동으로 새로운 위치를 사용해 호출할 처리기 함수를 등록합니다.

두 메서드 모두 최대 세 개의 매개변수를 받습니다.

* 필수로 제공하는 성공 콜백: 위치 정보를 성공적으로 가져온 경우, 위치 데이터를 담은 `GeolocationPosition` 객체를 유일한 매개변수로 하여 콜백을 호출합니다.
* 선택적으로 제공하는 실패 콜백: 위치 정보를 가져오지 못한 경우, 실패 원인을 담은 `GeolocationPositionError` (en-US) 객체를 유일한 매개변수로 하여 콜백을 호출합니다.
* 선택적으로 제공하는 객체: 위치 정보 회수에 사용할 옵션을 지정합니다.

`Geolocation` 사용법에 대한 추가 정보는 Geolocation API 사용하기 문서를 참고하세요.

인터페이스
-----

`Geolocation`

Geolocation API의 주요 클래스로서 사용자의 현재 위치를 가져오고, 위치 변경을 감지하고, 이전에 등록했던 감지기를 제거하는 메서드를 담고 있습니다.

`GeolocationPosition`

사용자의 위치를 나타냅니다. `GeolocationPosition` 인스턴스는 `Geolocation` 객체 메서드의 성공 콜백에 제공되며, 타임스탬프와 함께 `GeolocationCoordinates` 객체 인스턴스를 포함합니다.

`GeolocationCoordinates`

사용자 위치의 좌표를 나타냅니다. `GeolocationCoordinates` 인스턴스는 위도, 경도 외에도 기타 중요한 관련 정보를 포함합니다.

`GeolocationPositionError` (en-US)

`GeolocationPositionError`는 `Geolocation` 객체 메서드의 오류 콜백에 제공되며, 오류 코드와 오류 메시지를 담고 있습니다.

`Navigator.geolocation`

API 진입점입니다. Geolocation API의 모든 기능을 제공하는 `Geolocation` 객체 인스턴스를 반환합니다.

예제
--

Geolocation API 사용하기에서 예제를 확인하세요.

명세
--

| Specification |
| --- |
| Geolocation API # geolocation\_interface |

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

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

### 가용성

Wi-Fi 기반의 위치 정보는 보통 Google이 제공하므로, 기본 Geolocation API로는 중국에서 사용하지 못할 수도 있습니다. 대신 Baidu, Autonavi, Tencent 등 지역 서드파티 제공자가 지원하는 라이브러리를 사용할 수 있습니다. 이 서비스들은 Wi-Fi 대신 IP 주소와 지역 앱을 사용해 개선된 위치 정보를 제공합니다.

같이 보기
-----

* Geolocation API 사용하기
* w3.org의 Geolocation API
* Who moved my geolocation? (Hacks 블로그)
CustomElementRegistry
=====================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**`CustomElementRegistry`** 인터페이스는 사용자 지정 요소를 등록하고, 기존에 등록한 요소를 가져올 수 있는 메서드를 제공합니다. `CustomElementRegistry`의 인스턴스를 가져오려면 `window.customElements` 속성을 사용하세요.

메서드
---

`CustomElementRegistry.define()` (en-US)

새로운 사용자 정의 요소를 정의합니다.

`CustomElementRegistry.get()` (en-US)

주어진 이름을 붙인 사용자 정의 요소의 생성자를 반환합니다. 해당하는 이름에 정의된 요소가 존재하지 않으면 `undefined`를 대신 반환합니다.

`CustomElementRegistry.upgrade()` (en-US)

사용자 정의 요소를 직접 업그레이드합니다. 요소가 자신의 섀도 루트(shadow root)와 연결되지 않아도 업그레이드할 수 있습니다.

`CustomElementRegistry.whenDefined()` (en-US)

주어진 이름의 사용자 정의 요소가 등록되는 순간 이행하는 빈 `Promise`를 반환합니다. 만약 해당하는 이름의 요소가 이미 정의된 경우, 반환하는 프로미스는 즉시 이행합니다.

예제
--

다음 코드는 word-count-web-component 예제에서 가져와 주석을 번역한 것입니다(실행 결과 미리보기). 사용자 지정 요소 클래스를 생성한 후, `CustomElementRegistry.define()` (en-US) 메서드로 등록하는 과정을 살펴보세요.


```js
// 요소의 클래스 생성
class WordCount extends HTMLParagraphElement {
  constructor() {
    // 생성자에선 항상 제일 먼저 super 호출
    super();

    // 요소 부모의 단어 수 세기
    const wcParent = this.parentNode;

    function countWords(node) {
      const text = node.innerText || node.textContent;
      return text
        .trim()
        .split(/\s+/g)
        .filter((a) => a.trim().length > 0).length;
    }

    const count = `Words: ${countWords(wcParent)}`;

    // 섀도 루트 생성
    const shadow = this.attachShadow({ mode: "open" });

    // 텍스트 노드 생성 후 단어 수로 채우기
    const text = document.createElement("span");
    text.textContent = count;

    // 텍스트 노드를 섀도 루트에 추가
    shadow.appendChild(text);

    // 요소 콘텐츠가 바뀌면 단어 수 업데이트
    setInterval(function () {
      const count = `Words: ${countWords(wcParent)}`;
      text.textContent = count;
    }, 200);
  }
}

// 새로운 요소 정의
customElements.define("word-count", WordCount, { extends: "p" });
```


**참고:** `CustomElementRegistry`는 `Window.customElements` 속성으로 접근할 수 있습니다.

명세서
---

| Specification |
| --- |
| HTML Standard # custom-elements-api |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Compression Streams API
=======================

**Compression Streams API**는 gzip 또는 deflate 형식을 사용하여 데이터 스트림을 압축 및 압축 해제 할 수 있는 JavaScript API를 제공합니다.

압축 기능이 내장되어 있기 때문에 JavaScript 애플리케이션에 압축 라이브러리를 포함할 필요가 없으므로 애플리케이션의 다운로드 크기가 더 작아집니다.

인터페이스
-----

`CompressionStream` (en-US)

데이터 스트림을 압축합니다.

`DecompressionStream` (en-US)

데이터 스트림의 압축을 해제합니다.

예제
--

이 예제에서는 스트림이 gzip 압축을 사용하여 압축됩니다.


```js
const compressedReadableStream = inputReadableStream.pipeThrough(
  new CompressionStream("gzip"),
);
```


다음 예제에서는 gzip을 사용하여 blob의 압축을 해제하는 함수입니다.


```js
async function DecompressBlob(blob) {
  const ds = new DecompressionStream("gzip");
  const decompressedStream = blob.stream().pipeThrough(ds);
  return await new Response(decompressedStream).blob();
}
```

명세서
---

| Specification |
| --- |
| Compression Streams # compression-stream |

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

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

**Canvas API**는 JavaScript와 HTML `<canvas>` 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.

Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 `<canvas>` 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다.

기본 예시
-----

canvas에 초록색 사각형을 그리는 간단한 예시입니다.

### HTML


```html
<canvas id="canvas"></canvas>
```

### JavaScript

`Document.getElementById()` 메소드는 HTML `<canvas>` 엘리먼트에 대한 참조를 얻습니다. 그 다음, `HTMLCanvasElement.getContext()` 메소드는 엘리먼트의 컨텍스트(렌더링될 그리기의 대상)를 얻습니다.

실제 그리기는 `CanvasRenderingContext2D` (en-US) 인터페이스를 사용해 수행됩니다. `fillStyle` (en-US) 프로퍼티는 사각형을 초록색으로 만듭니다. `fillRect()` (en-US) 메소드는 좌측 상단 코너를 (10, 10) 위치에 놓으며, 너비를 150, 높이를 100으로 지정합니다.


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
```

### 결과

레퍼런스
----

* `HTMLCanvasElement`
* `CanvasRenderingContext2D` (en-US)
* `CanvasGradient` (en-US)
* `CanvasImageSource` (en-US)
* `CanvasPattern` (en-US)
* `ImageBitmap` (en-US)
* `ImageData`
* `RenderingContext`
* `TextMetrics` (en-US)
* `OffscreenCanvas` 
Experimental
* `Path2D` (en-US) 
Experimental
* `ImageBitmapRenderingContext` (en-US) 
Experimental

**참고:** **노트:** `WebGLRenderingContext`에 관련된 인터페이스는 WebGL 하위에 참조되어있습니다.

`CanvasCaptureMediaStream` (en-US)은 관련된 인터페이스입니다.

가이드 및 튜토리얼
----------

Canvas 튜토리얼

Canvas API의 기본적인 사용과 고급 기능 모두를 다루는 이해하기 쉬운 튜토리얼.

HTML5 Canvas 깊이 살펴보기

Canvas API 및 WebGL의 실습, 자세한 소개.

Canvas 핸드북

Canvas API에 대한 유용한 레퍼런스.

데모: A basic ray-caster

Canvas를 사용한 ray-tracing 애니메이션 데모.

Canvas를 사용하여 비디오 조작

`<video>`와 `<canvas>`를 조합하여 실시간으로 비디오 데이터를 조작.

라이브러리
-----

Canvas API는 굉장히 강력하지만, 사용하는 것이 항상 간단하지 않습니다. 아래에 나열된 라이브러리들은 캔버스 기반 프로젝트를 더 빠르고 더 쉽게 생성할 수 있게 해줍니다.

* EaselJS는 게임, 생성 예술 및 기타 고도의 그래픽 경험을 쉽게 생성할 수 있게 해주는 오픈소스 캔버스 라이브러리입니다.
* Fabric.js는 SVG 파싱 기능을 갖춘 오픈소스 캔버스 라이브러리입니다.
* heatmap.js는 캔버스 기반 데이터 열지도를 생성하기위한 오픈소스 라이브러리입니다.
* JavaScript InfoVis Toolkit은 인터렉티브한 데이터 시각화를 생성합니다.
* Konva.js는 데스크탑 및 모바일 애플리케이션을 위한 2D 캔버스 라이브러리입니다.
* p5.js는 예술가, 디자이너, 교육자 및 입문자를 위한 캔버스 그리기 기능의 모든 세트를 포함하고 있습니다.
* Paper.js는 HTML5 Canvas 위에서 실행되는 오픈소스 벡터 그래픽 스크립팅 프레임워크입니다.
* Phaser는 Canvas 및 WebGL 기반의 브라우저 게임을 위한 빠르고, 자유롭고, 재미있는 오픈소스 프레임워크입니다.
* Processing.js는 Processing 시각화 언어의 포트입니다.
* Pts.js는 canvas 및 SVG를 사용한 창의적인 코딩 및 시각화를 위한 라이브러리입니다.
* Rekapi는 Canvas를 위한 애니메이션 키 프레임 API입니다.
* Scrawl-canvas는 2D 캔버스 엘리먼트를 생성하고 조작하기위한 오픈소스 JavaScript 라이브러리입니다.
* ZIM 프레임워크는 canvas에서의 창의적인 코딩을 위한 편의성, 컴포넌트 및 컨트롤을 제공하는 프레임워크입니다. 접근성 및 다채로운 튜토리얼을 포함합니다.

**참고:** **노트:** WebGL을 사용하는 2D 및 3D를 위한 WebGL API를 확인하세요.

명세
--

| Specification |
| --- |
| HTML Standard # the-canvas-element |

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

Mozilla 애플리케이션은 Gecko 1.8(Firefox 1.5 (en-US))을 시작으로 `<canvas>`에 대한 지원을 받았습니다. OS X Dashboard 및 Safari를 위해 Apple이 소개한 것이 캔버스 엘리먼트의 기원입니다. Internet Explorer는 9버전부터 `<canvas>`를 지원하며, 이전 버전의 IE에서는 Google의 Explorer Canvas 프로젝트의 스크립트를 추가하여 `<canvas>`에 대한 지원을 효과적으로 추가할 수 있습니다. Google Chrome 및 Opera 9 또한 `<canvas>`를 지원합니다.

함께 보기
-----

* WebGL
ReadableStream
==============

Streams API의 `ReadableStream` 인터페이스는 바이트 데이터를 읽을수 있는 스트림을 제공합니다. Fetch API는 Response 객체의 body 속성을 통하여 `ReadableStream`의 구체적인 인스턴스를 제공합니다.

Constructor
-----------

`ReadableStream()` (en-US)

읽을수 있는 스트림 객체를 생성하고 리턴합니다.

Properties
----------

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

`locked`는 Readable stream이 reader에 고정되어 있는지(locaked to a reader) 확인하는 getter 입니다.

Methods
-------

`ReadableStream.cancel()` (en-US)

스트림을 취소하여, 소비자가 스트림에 대해 관심이 없음을 알립니다. The supplied reason argument will be given to the underlying source, which may or may not use it.

`ReadableStream.getReader()` (en-US)

Reader를 만들고 스트림을 그 Reader에 고정 시킵니다. 스트림이 고정되어 있는 동안에는 다른 Reader를 얻을수 없습니다.

`ReadableStream.pipeThrough()` (en-US)

Provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair.

`ReadableStream.pipeTo()` (en-US)

인자로 넘기는 `WritableStream`과 현재의 ReadableStream을 연결하고 프로미스를 리턴합니다. 이 프로미스는 파이핑 프로세스가 성공적으로 완료될때 fulfil되며 애러가 발생했을때 reject됩니다.

`ReadableStream.tee()` (en-US)

The `tee` method tees this readable stream, returning a two-element array containing the two resulting branches as new `ReadableStream` instances. Each of those streams receives the same incoming data.

Examples
--------

아래 예시에서, 다른 리소스에서 fetch된 HTML 조각들을 스트림 하기위해 가공의 `Response`를 만듭니다. 이것은`Uint8Array` (en-US)로 구성된 `ReadableStream` 의 사용법을 보여줍니다.


```js
fetch("https://www.example.org/").then((response) => {
  const reader = response.body.getReader();
  const stream = new ReadableStream({
    start(controller) {
      // 아래 함수는 각 data chunck를 다룬다.
      function push() {
        // "done"은 Boolean 이며 value는 "Uint8Array 이다."
        reader.read().then(({ done, value }) => {
          // 더이상 읽은 데이터가 없는가?
          if (done) {
            // 브라우저에게 데이터 전달이 끝났다고 알린다.
            controller.close();
            return;
          }

          // 데이터를 얻고 컨트롤러를 통하여 그 데이터를 브라우저에 넘긴다.
          controller.enqueue(value);
          push();
        });
      }

      push();
    },
  });

  return new Response(stream, { headers: { "Content-Type": "text/html" } });
});
```

명세서
---

| Specification |
| --- |
| Streams Standard # rs-class |

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

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

See Also
--------

* WHATWG Stream Visualiser, for a basic visualisation of readable, writable, and transform streams.