recursal/MDN huggingface dataset:
btoa()
======

**`btoa()`** 함수는 이진 문자열(`String` 객체 내 모든 문자가 이진 데이터의 바이트 한 개)로부터 Base64 인코딩된 ASCII 문자열을 생성해 반환합니다.

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

구문
--


```js
btoa(stringToEncode);
```

### 매개변수

`stringToEncode`

인코딩할 이진 문자열입니다.

### 반환 값

`stringToEncode`를 Base64로 표현한 ASCII 문자열.

### 예외

`InvalidCharacterError` `DOMException` (en-US)

문자열이 바이트 한 개로 표현할 수 없는 문자를 포함하고 있으면 발생합니다. 자세한 정보는 아래의 "유니코드 문자열"을 참고하세요.

예제
--


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

유니코드 문자열
--------

`btoa()` 함수는 매개변수로 JavaScript 문자열을 받습니다. JavaScript에서는 문자열을 UTF-16 인코딩으로 표현하는데, UTF-16은 문자열을 16비트 (2바이트) 단위의 시퀀스로 나타냅니다. 모든 ASCII 문자는 단위 하나의 앞쪽 바이트만으로 표현할 수 있지만, 많은 수의 다른 문자들은 두 바이트를 모두 사용해야 합니다.

Base64는 이진 데이터를 입력으로 받도록 설계됐습니다. JavaScript 문자열로 얘기하자면 모든 문자가 바이트를 하나씩만 차지하는 경우를 의미합니다. 따라서 `btoa()`에 2바이트 문자를 포함한 문자열을 제공하면 오류가 발생합니다. 그런 문자열은 이진 데이터라고 하지 않기 때문입니다.


```js
const ok = "a";
console.log(ok.codePointAt(0).toString(16)); // 61: 1바이트 미만

const notOK = "✓";
console.log(notOK.codePointAt(0).toString(16)); // 2713: 1바이트 초과

console.log(btoa(ok)); // YQ==
console.log(btoa(notOK)); // 오류
```


`btoa()`를 사용해서 유니코드 텍스트를 ASCII로 인코딩해야 할 때 사용할 수 있는 방법 한 가지는, 문자열의 각 16비트 단위가 한 바이트씩 차지하도록 먼저 변환하는 것입니다.


```js
// Unicode 문자열의 16비트 단위가 한 바이트씩 차지하도록 변환
function toBinary(string) {
  const codeUnits = new Uint16Array(string.length);
  for (let i = 0; i < codeUnits.length; i++) {
    codeUnits[i] = string.charCodeAt(i);
  }
  const charCodes = new Uint8Array(codeUnits.buffer);
  let result = "";
  for (let i = 0; i < charCodes.byteLength; i++) {
    result += String.fromCharCode(charCodes[i]);
  }
  return result;
}

// 1바이트를 초과하는 문자를 포함하는 문자열
const myString = "☸☹☺☻☼☾☿";

const converted = toBinary(myString);
const encoded = btoa(converted);
console.log(encoded); // OCY5JjomOyY8Jj4mPyY=
```


물론 이렇게 되면 디코딩한 문자열에 역변환까지 해야 원래의 문자열을 구할 수 있습니다.


```js
function fromBinary(binary) {
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < bytes.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  const charCodes = new Uint16Array(bytes.buffer);
  let result = "";
  for (let i = 0; i < charCodes.length; i++) {
    result += String.fromCharCode(charCodes[i]);
  }
  return result;
}

const decoded = atob(encoded);
const original = fromBinary(decoded);
console.log(original); // ☸☹☺☻☼☾☿
```


용어집 Base64 항목, 해결책 #1 – 인코딩 전에 문자열 이스케이핑의 예제 코드 `utf8_to_b64`와 `b64_to_utf8` 함수도 참고하세요.

명세
--

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

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

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

같이 보기
-----

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

`MutationObserver` 인터페이스의 **`MutationObserver()`** 생성자는 DOM에 변경이 발생할 때 지정한 콜백을 호출하는 감지기 인스턴스를 새로 생성하고 반환합니다.

생성 시점에는 DOM 변경 감지가 시작하지 않습니다. 감지를 시작하려면 `observe()` 메서드를 호출해 DOM의 어느 부분을 주시할 것인지와 어떤 변경을 감지할 것인지 설정해야 합니다.

구문
--


```js
new MutationObserver(callback)
```

### 매개변수

`callback`

주어진 노드 또는 하위 트리와 옵션을 만족하는 DOM 변경을 감지하면 호출할 콜백입니다.

`callback` 함수는 두 개의 매개변수를 받습니다.

1. 일어난 변경 각각을 나타내는 `MutationRecord` 객체들의 배열
2. 콜백을 호출한 `MutationObserver`

아래의 예제에서 더 자세히 확인하세요.

### 반환 값

DOM 변경이 발생하면 지정한 `callback`을 호출하는 `MutationObserver` 객체입니다.

예제
--

이 예제는 노드와 그 자식들을 주시하여 요소가 트리에 추가되거나 트리에서 제거되는 경우, 그리고 요소의 특성이 변경되는 경우를 감지하는 새로운 `MutationObserver`를 생성합니다.

### 콜백 함수


```js
function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    switch (mutation.type) {
      case "childList":
        /\* 트리에 한 개 이상의 자식이 추가됐거나 제거된 경우.
 mutation.addedNodes와 mutation.removedNodes를 참고하세요. \*/
        break;
      case "attributes":
        /\* mutation.target이 가리키는 요소의 특성이 바뀐 경우.
 특성의 이름은 mutation.attributeName으로 알 수 있고,
 이전 값은 mutation.oldValue로 알 수 있습니다. \*/
        break;
    }
  });
}
```


`callback()` 함수는 감지기의 `observe()`를 호출했을 때 지정한 설정을 만족하는 변경을 감지하면 호출됩니다.

일어난 변경의 종류(자식 목록의 변경, 특성의 변경)는 `mutation.type` (en-US) 속성을 통해 알 수 있습니다.

### 감지기 생성과 시작

실제로 감지 절차를 시작하는 코드는 다음과 같습니다.


```js
const targetNode = document.querySelector("#someElement");
const observerOptions = {
  childList: true,
  attributes: true,

  // false를 지정하거나 아예 생략하여 부모 노드의 변경만 감지
  subtree: true,
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);
```


주시하고자 하는 하위 트리는 `someElement`라는 ID를 가진 요소를 통해 탐색합니다. `observerOptions` 레코드에는 감지기의 옵션을 설정합니다. 자식의 변경과 특성의 변경을 모두 감지하고자 하므로 `childList`와 `attributes`를 모두 `true`로 지정합니다.

그 다음에는 감지기 인스턴스를 생성하면서 `callback()` 함수를 지정하고, `target` 노드와 `options` 객체를 제공하여 `observe()`를 호출, 하위 트리의 변경 감지를 시작합니다.

이후 `disconnect()`를 호출하기 전까지는 DOM 트리의 `targetNode` 아래에서 새로운 요소가 추가되거나 제거되는 경우, 또는 `targetNode`까지 포함하여 요소 중 하나의 특성이 바뀌는 경우 `callback()`이 호출됩니다.

명세서
---

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

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

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

`MutationObserver`의 **`disconnect()`** 메서드는 감지기의 주시를 중단합니다.

감지기의 `observe()` 메서드를 다시 호출해서 인스턴스를 재사용할 수 있습니다.

구문
--


```js
disconnect()
```

### 매개변수

없음.

### 반환 값

없음 (`undefined`).

**참고:** 감지기가 '감지'했으나 아직 콜백으로 '보고'하지 못한 알림들은 모두 버려집니다. 이런 알림들도 처리하려면 `takeRecords()` (en-US) 메서드를 사용해 저장하세요.

사용 일람
-----

주시 중인 요소가 DOM에서 제거되어 브라우저의 가비지 컬렉션에 의해 해제된 경우, `MutationObserver`는 자동으로 해당 요소의 주시를 중단합니다. `MutationObserver` 인스턴스 자체는 계속 존재하므로 다른 요소의 주시에 사용할 수 있습니다.

예제
--

이 예제는 감지기를 생성하고 주시를 시작했다가, 나중에 다시 사용하기 위해 주시를 중단하는 모습을 보입니다.


```js
const targetNode = document.querySelector("#someElement");
const observerOptions = {
  childList: true,
  attributes: true,
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

/\* 이후... \*/

observer.disconnect();
```

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-mutationobserver-disconnect① |

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

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

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

Web Animations API의 AnimationTimeline 인터페이스의 currentTime 읽기 전용 속성은 타임 라인의 현재 시간을 밀리 초 단위로 반환하거나 타임 라인이 비활성 상태이면 null을 반환합니다.출력 값이 생성되는 시간 세그먼트를 정의합니다. 이러한 값은 대상 속성에 애니메이션 효과를 적용하는 데 사용됩니다.


```js
var currentTime = AnimationTimeline.currentTime;
```

### Value

타임 라인의 현재 시간을 밀리 초 단위로 나타내는 숫자 또는 타임 라인이 비활성 상태 인 경우 null입니다.

명세서
---

| Specification |
| --- |
| Web Animations # dom-animationtimeline-currenttime |

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

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

See also
--------

* Web Animations API
* `AnimationTimeline` (en-US)
* `DocumentTimeline` (en-US) inherits this property
* `Document.timeline` returns a timeline object which inherits this property
File()
======

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

구문
--


```js
new File(bits, name);
new File(bits, name, options);
```

### 매개변수

`bits`

`File` 객체 내에 저장할 데이터를 나타내는 `Array`입니다. `ArrayBuffer`, `ArrayBufferView` (en-US), `Blob`, 문자열을 요소로 제공할 수 있습니다. `USVString` 객체는 UTF-8로 인코딩해 사용합니다.

`name`

파일의 이름이나 경로를 나타내는 문자열입니다.

`options` Optional

파일 특성을 추가로 지정할 수 있는 옵션 객체입니다. 가능한 옵션은 다음과 같습니다.

* `type`: 파일 내용의 MIME 유형을 나타내는 문자열입니다. 기본값은 빈 문자열(`""`)입니다.
* `lastModified`: 파일이 마지막으로 변경된 시간입니다. Unix 시간에서부터 경과한 밀리초 정수로 지정해야 합니다. 기본값은 `Date.now()`와 같습니다.

예제
--


```js
const file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});
```

명세
--

| Specification |
| --- |
| File API # file-constructor |

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

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

같이 보기
-----

* `FileReader`
* `Blob`
File.name
=========

**`name`** 속성은 `File` 객체가 나타내는 파일의 이름을 반환합니다. 보안상의 이유로 경로는 이름에서 제외됩니다.

값
-

`"My Resume.rtf"`와 같이, 경로 없는 파일 이름을 포함하는 문자열입니다.

예제
--

### HTML


```html
<input type="file" id="filepicker" multiple />
<div>
  <p>선택한 파일 목록:</p>
  <ul id="output"></ul>
</div>
```

### JavaScript


```js
const output = document.getElementById("output");
const filepicker = document.getElementById("filepicker");

filepicker.addEventListener("change", (event) => {
  const files = event.target.files;
  output.textContent = "";

  for (const file of files) {
    const li = document.createElement("li");
    li.textContent = file.name;
    output.appendChild(li);
  }
});
```

### 결과

명세
--

| Specification |
| --- |
| File API # dfn-name |

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

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

같이 보기
-----

* 웹 어플리케이션에서 파일 사용하기
XMLHttpRequest.upload
=====================

`XMLHttpRequest` `upload` 프로퍼티는 업로드 진행 상황을 모니터링 할 수 있는 `XMLHttpRequestUpload` (en-US) 객체를 반환합니다. 불투명한 객체(opaque object)이지만 `XMLHttpRequestEventTarget` (en-US) 이기도 하기 때문에 이벤트 리스너를 연결하여 프로세스를 추적할 수 있습니다.

upload 이벤트에서 다음 이벤트가 트리거되어 업로드를 모니터링하는데 사용할 수 있습니다.

| Event | Event listener | Description |
| --- | --- | --- |
| `loadstart (en-US)` | `onloadstart` | 업로드가 시작되었습니다. |
| `progress (en-US)` | `onprogress` | 지금까지 진행된 상태를 정기적으로 제공합니다. |
| `abort (en-US)` | `onabort` | 업로드가 중단되었습니다. |
| `error (en-US)` | `onerror` | 에러로 인해 업로드에 실패했습니다. |
| `load` | `onload` | 업로드가 성공적으로 완료되었습니다. |
| `timeout` | `ontimeout` | `XMLHttpRequest.timeout`에 명시되어 있는 시간 간격 내에 응답이 도착하지 않아, 업로드 시간이 초과되었습니다. |
| `loadend (en-US)` | `onloadend` | 업로드가 완료되었습니다. 이 이벤트는 성공과 실패를 구분하지 않고 결과에 관계없이 업로드가 끝나면 전송됩니다. 이 이벤트 발생 이전에는 전송이 종료된 이유를 나타내기 위해 `load`, `error`, `abort`, `timeout` 중 하나를 전달합니다. |

명세서
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-upload-attribute |

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

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

See also
--------

* Using XMLHttpRequest (en-US)
* FileHandle API (en-US)
* File and Directory Entries API
XMLHttpRequest.setRequestHeader()
=================================

**XMLHttpRequest.setRequestHeader()** 메소드는 HTTP요청 헤더의 값을 설정합니다. 반드시 `setRequestHeader()`를 `open()`뒤에 호출하여야 하며, 또한 `send()`가 호출되기 전에 호출해야 합니다. 만약 이 메소드가 같은 헤더에 대하여 여러번 호출이 되면, 그 값은 단일 요청 헤더에 병합됩니다.

만약 이것을 이용해 `Accept` 헤더를 설정하지 않으면, `send()` (en-US)가 호출될 때 `Accept` 헤더가 `*/*`와 함께 전송됩니다.

보안상의 이유로, 어떤 헤더는 오직 사용자 에이전트에 의해서만 관리될 수 있습니다. 이 헤더는 forbidden header names와 forbidden response header names를 포함합니다.

**참고:** 여러분의 필드에 대해서, 상호교차(cross-domain) 요청시 "**not allowed by Access-Control-Allow-Headers in preflight response**" Exception이 나타날 수 있습니다. 이런 경우, "Access-Control-Allow-Headers"를 서버 측 응답 헤더에 설정하면 됩니다.

구문
--


```js
myReq.setRequestHeader(header, value);
```

### 매개변수

`header`

설정 될 값을 가진 헤더의 이름

`value`

헤더의 본문(body)에 설정될 값

명세
--

| Specification |
| --- |
| XMLHttpRequest Standard # the-setrequestheader()-method |

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

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

더 보기
----

Using XMLHttpRequest (en-US)
timeout
=======

**`timeout`** 이벤트는 미리 설정한 시간이 만료되어 진행이 종료되면 시작합니다.

| Bubbles | No |
| --- | --- |
| Cancelable | No |
| Target objects | `XMLHttpRequest` |
| Interface | `ProgressEvent` (en-US) |

Examples
--------


```js
var client = new XMLHttpRequest();
client.open("GET", "http://www.example.org/example.txt");
client.ontimeout = function (e) {
  console.error("Timeout!!");
};
client.send();
```

Inheritance
-----------

`timeout` 이벤트는 `Event`에서 상속받은 `ProgressEvent` (en-US) 인터페이스를 구현합니다. 이 인터페이스에 선언된 속성(property)과 메서드를 사용할 수 있습니다.

명세서
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-timeout |
| XMLHttpRequest Standard # handler-xhr-ontimeout |

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

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

See also
--------

* `XMLHttpRequest`
Fetch 기본 개념
===========

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. `XMLHttpRequest`와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능합니다. 이 글에서는 Fetch API의 기본 개념을 설명합니다.

**참고:** 이 문서는 수시로 갱신됩니다. 더 자세한 설명이 필요하다고 생각하시는 Fetch 개념이 있으시면 MDN Web Docs 채팅에서 문의해 주세요.

훑어보기
----

Fetch의 핵심은 HTTP `Request`, `Response`, `Headers` (en-US)를 추상화하는 인터페이스와, 비동기적 리소스 요청을 시작하기 위한 `fetch()` 메서드입니다. HTTP의 주요 구성요소들이 JavaScript 객체로 추상화됐기 때문에, 다른 API들에서도 이 기능들을 활용하기 용이합니다.

서비스 워커 (en-US)가 Fetch를 적극 활용하는 API의 일례입니다.

Fetch는 이러한 HTTP 요청의 비동기적인 특성을 한 단계 더 발전시켜, 모든 API가 `Promise`에 기반합니다.

가드
--

가드는 `Headers` (en-US) 객체의 기능으로, 헤더가 사용하고 있는 장소에 따라 `immutable`, `request`, `request-no-cors`, `response`, `none`의 값을 사용할 수 있습니다.

새로운 `Headers` (en-US) 객체는 `Headers()` (en-US) 생성자로 생성되면 그 가드는 `none`(기본 값)으로 설정됩니다. `Request` 또는 `Response` 객체가 생성되면 관계된 `Headers` (en-US) 객체를 가지는데, 그 가드는 다음과 같습니다.

| 새로운 객체의 타입 | 생성자 | 관계된 `Headers` (en-US) 객체의 가드 설정 |
| --- | --- | --- |
| `Request` | `Request()` | `request` |
| `no-cors의` `mode` (en-US)를
 설정한 `Request()` | `request-no-cors` |
| `Response` | `Response()` (en-US) | `response` |
| `error()` (en-US)메서드나
 `redirect()` (en-US) 메서드
  | `immutable` |

헤더 가드는 헤더의 콘텐츠를 변경하는 `set()` (en-US), `delete()` (en-US), `append()` (en-US) 메서드에 영향을 끼칩니다. 가드는 `immutable`의 `Headers` (en-US)를 수정하려고 한 경우, `TypeError` 를 반환합니다. 예외의 경우도 있는데 다음과 같은 상황에서는 동작합니다.

* 가드가 `request` 에서 헤더의 이름이 forbidden header name 가 아닌 경우
* 가드가 `request-no-cors` 에서 헤더의 `name` 또는 `value` 값이 simple header 인 경우
* 가드가 `response` 며 헤더의 이름이 forbidden response header name 가 아닌 경우
HTMLHyperlinkElementUtils.href
==============================

**`HTMLHyperlinkElementUtils.href`** 속성은 온전한 URL을 값으로 가지는 `USVString`입니다.

예제
--


```js
// Lets imagine an <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href"> element is in the document
var anchor = document.getElementById("myAnchor");
var result = anchor.href; // Returns: 'https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href'
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-hyperlink-href-dev |

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

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

같이 보기
-----

* `HTMLHyperlinkElementUtils`
Notification.permission
=======================

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

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

`permission` 속성은 웹 알림에 있어서 사용자에 의해 현재 앱에 허가된 현재 권한을 가리킵니다.

구문
--


```js
var permission = Notification.permission;
```

### 값

다음은 현재 권한을 표현하는 문자열입니다.

* `granted`: 사용자가 의도하여 어플리케이션이 알림을 보낼 수 있도록 허가.
* `denied`: 사용자가 의도하여 어플리케이션이 알림을 보내는 것을 거부.
* `default`: 사용자의 결정은 알 수 없으나, 어플리케이션 기본적으로 denied 와 같이 동작할 것 입니다.
명세
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-permission |

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

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

같이 보기
-----

* `Notification`
* Using Web Notifications
RTCSessionDescription.type
==========================

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

읽기 전용 값인 \*\*`RTCSessionDescription.type`\*\*은 세션 설명의 타입을 알려주는 `RTCSdpType`타입의 값입니다.

Syntax
------


```js
var value = sessionDescription.type;
sessionDescription.type = value;
```

### 값

`RTCSdpType` 타입의 열거체에 사용 가능한 값들이 정의되어 있습니다.

아래는 사용 가능한 값들입니다:

* `"offer"`, offer 혹은 answer 교환 과정에서 처음으로 제안된 세션 설명입니다.
* `"answer"`, offer 혹은 answer 교환 과정에서 채택한 세션 설명입니다.
* `"pranswer"`, 임시로 지정한 answer 입니다. 이 세션 설명 값은 채택한 값이 존재하면 변할 수도 있습니다.
* "`rollback`", 가장 최근의 안정적인 상태의 offer 혹은 answer 상태로 되돌아가라는 세션 설명입니다.
Example
-------


```js
// The remote description has been set previously on pc, a RTCPeerconnection

alert(pc.remoteDescription.type);
```

사양서
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcsessiondescription-type |

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

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

참조
--

* WebRTC (en-US)
RTCSessionDescription.sdp
=========================

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

읽기 속성인 **`RTCSessionDescription.sdp`** 는 세션에 대해 설명해주는 SDP를 가지고 있는 `DOMString`입니다.

Syntax
------


```js
var value = sessionDescription.sdp;
sessionDescription.sdp = value;
```

### 값

아래와 같이 SDP 메세지를 포함하고 있는 `DOMString`값 입니다.
```

v=0
o=alice 2890844526 2890844526 IN IP4 host.anywhere.com
s=
c=IN IP4 host.anywhere.com
t=0 0
m=audio 49170 RTP/AVP 0
a=rtpmap:0 PCMU/8000
m=video 51372 RTP/AVP 31
a=rtpmap:31 H261/90000
m=video 53000 RTP/AVP 32
a=rtpmap:32 MPV/90000
```

예시
--


```js
// The remote description has been set previously on pc, an RTCPeerConnection

alert(pc.remoteDescription.sdp);
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcsessiondescription-sdp |

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

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

참조
--

* WebRTC (en-US)
* The standard for using SDP in an offer/answer protocol RFC 3264.
MediaStreamTrack.applyConstraints()
===================================

`MediaStreamTrack` 인터페이스의 **`applyConstraints()`** 메서드는 트랙에 제약을 적용합니다. 제약을 통해 웹 사이트와 앱은 프레임 레이트, 해상도, 플래시 여부 등, 제약 가능한 속성을 자신이 바라는 이상적인 값과 허용 가능한 범위로 제한할 수 있습니다.

제약을 통해 미디어를 여러분의 선호 가이드라인에 맞출 수 있습니다. 예를 들면 고해상도 비디오를 선호하되 네트워크 사용량 폭증을 막기 위해 다소 낮은 프레임 레이트를 요구할 수 있습니다. 또한 이상적인 크기나, 허용 가능한 크기의 범위를 지정할 수도 있습니다. 기능, 제약, 설정 (en-US) 문서의 제약 적용 (en-US) 항목에서 원하는 제약을 적용하는 방법에 대해 더 알아보세요.

구문
--


```js
const appliedPromise = track.applyConstraints([constraints]);
```

### 매개변수

`constraints` Optional

트랙에 적용할 제약 속성을 나열하는 `MediaTrackConstraints` (en-US) 객체. 기존에 존재하는 제약은 모두 새로운 값으로 대체하고, `constraints` 매개변수에 포함하지 않은 제약의 경우 기본값으로 돌아갑니다. 매개변수를 생략한 경우, 모든 사용자 지정 제약을 기본값으로 초기화합니다. `constraints` 객체는 `Promise`가 이행하기 전에 반드시 적용해야 하는 기본 제약 설정을 나타냅니다. 추가로, 반드시 동일한 조건이어야 함을 나타내는 고급 제약도 `MediaTrackConstrants` 객체 배열로 포함할 수 있습니다.

### 반환 값

제약을 성공적으로 적용한 경우 이행하는 `Promise`. 제약 적용에 실패한 경우, 이름이 `OverconstrainedError`인 `MediaStreamError`로 거부합니다. 제약이 너무 엄격해서 일치하는 조건을 찾지 못한 경우 발생할 수 있습니다.

예제
--

다음 코드는 기본과 고급 제약을 지정하는 법을 보입니다. 우선 페이지와 앱이 640에서 1280의 너비, 480에서 720의 높이가 필요하다고 지정합니다. 이때 뒤쪽의 큰 수를 선호하는 값으로 나타냅니다. 고급 제약은 더 나아가 1920\*1280의 이미지를 선호하며, 이 크기를 제공할 수 없는 경우 가로세로비 1.333을 요구합니다. 이렇게 여러 개의 제약을 두는 것을 명세는 "백오프 전략"이라고 말합니다.


```js
const constraints = {
  width: { min: 640, ideal: 1280 },
  height: { min: 480, ideal: 720 },
  advanced: [{ width: 1920, height: 1280 }, { aspectRatio: 1.333 }],
};

navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  const track = mediaStream.getVideoTracks()[0];
  track
    .applyConstraints(constraints)
    .then(() => {
      // Do something with the track such as using the Image Capture API.
    })
    .catch((e) => {
      // The constraints could not be satisfied by the available devices.
    });
});
```

명세
--

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

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

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

같이 보기
-----

* MediaStream Image Capture API
MediaStreamTrack.getConstraints()
=================================

`MediaStreamTrack` 인터페이스의 **`getConstraints()`** 메서드는 현재 트랙에서 마지막으로 호출한 `applyConstraints()` 메서드로 설정한 제약을 포함한 객체를 반환합니다. 반환한 제약 값은 웹 사이트나 애플리케이션이 제약 속성에 지정한 특정 값 또는 값의 범위 조건을 나타냅니다.

제약을 통해 미디어를 여러분의 선호 가이드라인에 맞출 수 있습니다. 예를 들면 고해상도 비디오를 선호하되 네트워크 사용량 폭증을 막기 위해 다소 낮은 프레임 레이트를 요구할 수 있습니다. 또한 이상적인 크기나, 허용 가능한 크기의 범위를 지정할 수도 있습니다. 기능, 제약, 설정 (en-US) 문서의 제약 적용 (en-US) 항목에서 원하는 제약을 적용하는 방법에 대해 더 알아보세요.

구문
--


```js
const constraints = track.getConstraints();
```

### 반환 값

가장 최근에 웹 사이트 또는 애플리케이션에서 `applyConstraints()` 호출로 지정한 제약 속성을 나타내는 `MediaTrackConstraints` (en-US) 객체. 지정할 때 사용한 속성 순서를 동일하게 반환하며, 웹 사이트 또는 애플리케이션에서 지정하지 않은 속성은 포함하지 않습니다.

**참고:** 반환한 제약 집합이 반드시 미디어의 실제 상태를 나타내는 것은 아닙니다. 사이트 코드에서 지정한 어떤 제약 조건을 만족할 수 없는 상황에서도, 해당 속성을 반환 값에 포함합니다. 따라서 반환 값이 반드시 미디어의 실제 상태를 나타내는 것은 아닙니다. 모든 제약 속성에 현재 활성화된 값이 필요한 경우 `getSettings()` 메서드를 사용하세요.

예제
--

다음 예제는 트랙의 현재 제약을 가져와서 `facingMode` (en-US)를 설정한 후, 새로운 제약을 트랙에 적용합니다.


```js
function switchCameras(track, camera) {
  const constraints = track.getConstraints();
  constraints.facingMode = camera;
  track.applyConstraints(constraints);
}
```

명세
--

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

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

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

`MediaStreamTrack` 인터페이스의 **`enabled`** 속성은 트랙이 소스 스트림을 렌더링 할 수 있으면 `true`, 아니면 `false`를 반환합니다. `enabled` 속성을 사용해 음소거 기능을 구현할 수 있습니다. 활성화된 경우 트랙의 데이터는 입력에서 목적지로 출력됩니다. 비활성 상태에서는 빈 프레임만 출력합니다.

오디오 트랙의 경우 비활성화 트랙이 생성하는 빈 프레임은 아무 소리도 없는 것, 즉 모든 샘플의 값이 0인 프레임이며, 비디오의 경우 모든 픽셀이 검은 프레임입니다.

사실, `enabled`의 값은 사용자가 트랙의 "음소거" 상태로 취급할 상태를 나타내며, `muted` 속성은 전송 중 프레임 유실 등으로 인해 데이터를 출력할 수 없는 상태를 뜻합니다.

**참고:** 트랙의 연결이 끊긴 후에도 `enabled` 값을 바꿀 수는 있지만 아무런 효과도 없습니다.

구문
--


```js
const enabledFlag = track.enabled;
track.enabled = [true | false];
```

### 값

`true`는 실제 미디어의 렌더링이 허용됨을 나타냅니다. `false`로 설정한 경우 빈 프레임만 생성합니다.

빈 오디오 프레임의 모든 샘플 값은 0입니다. 빈 비디오 프레임의 모든 픽셀은 완전한 검정입니다.

사용 일람
-----

`MediaStreamTrack`이 카메라의 비디오 입력을 나타내는 경우, 트랙의 `enabled`를`false`로 설정해 비활성화하면 카메라의 녹화 표시도 꺼집니다. 예를 들어, iMac과 MacBook의 카메라 옆에 존재하는 초록색 "사용 중" LED도 꺼집니다.

예제
--

다음 코드는 `click` 이벤트 처리기를 사용해 일시정지를 구현합니다.


```js
pauseButton.onclick = function (evt) {
  const newState = !myAudioTrack.enabled;

  pauseButton.innerHTML = newState ? "&#x25B6;&#xFE0F;" : "&#x23F8;&#xFE0F;";
  myAudioTrack.enabled = newState;
};
```

명세
--

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

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

같이 보기
-----

* MediaStream API
* `MediaStream` (en-US)
* `MediaStreamTrack`
* WebRTC
MediaStreamTrack.id
===================

**`MediaStreamTrack.id`** 읽기 전용 속성은 사용자 에이전트가 생성하는, 트랙의 전역 고유 식별자(GUID)를 담은 `DOMString`을 반환합니다.

구문
--


```js
const id = track.id;
```

명세
--

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

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

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

같이 보기
-----

* WebRTC
MediaStreamTrack.label
======================

**`MediaStreamTrack.label`** 읽기 전용 속성은 사용자 에이전트가 트랙 소스를 식별하기 위해 지정한 레이블을 담은 `DOMString`을 반환합니다. 소스가 연결되지 않은 경우 빈 문자열이며, 연결됐던 트랙이 소스에서 분리되더라도 레이블은 바뀌지 않습니다.

구문
--


```js
const label = track.label;
```

### 값

사용자 에이전트가 지정한 식별 레이블. `"internal microphone"` 등의 형태입니다.

명세
--

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

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

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

같이 보기
-----

* WebRTC (en-US)
MediaStreamTrack.getCapabilities()
==================================

`MediaStreamTrack` 인터페이스의 **`getCapabilities()`** 메서드는 사용자 에이전트가 지원하는 각각의 제약 조건에 적용할 수 있는 값이나 값의 범위를 나타내는 `MediaTrackCapabilities` 객체를 반환합니다.

브라우저의 기능 범위를 알아낸 후에는 스크립트에서 `applyConstraints()`를 사용해 트랙의 설정을 이상적인 값으로, 또는 적어도 원하는 범위 안으로 설정할 수 있습니다. 기능, 제약, 설정 (en-US) 문서에서 제약 속성 사용법에 대해 자세히 알아보세요.

구문
--


```js
const capabilities = track.getCapabilities();
```

### 반환 값

사용자 에이전트가 지원하는 제약 속성 각각의 가능한 값 또는 값의 범위를 나타내는 `MediaTrackCapabilities` 객체.

명세
--

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

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

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

**`MediaStreamTrack.kind`** 읽기 전용 속성은 트랙이 오디오인 경우 `"audio"`, 비디오인 경우 `"video"`인 `DOMString`을 반환합니다. 트랙이 소스에서 분리된 경우엔 바뀌지 않습니다.

구문
--


```js
const type = track.kind;
```

### 값

`DOMString`. 가능한 값은 다음과 같습니다.

* `"audio"`: 트랙이 오디오 트랙입니다.
* `"video"`: 트랙이 비디오 트랙입니다.
명세
--

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

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

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

같이 보기
-----

* WebRTC