recursal/MDN huggingface dataset:
URL.port
========

`URL` 인터페이스의 **`port`** 속성은 URL의 포트 숫자를 담은 `USVString`입니다. URL이 명시적인 포트 번호를 포함하고 있지 않으면 빈 문자열(`''`)입니다.

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

구문
--


```js
const portNumber = url.port;
url.port = newPortNumber;
```

### 값

A `USVString`.

예제
--


```js
const url = new URL("https://mydomain.com:80/svn/Repos/");
console.log(url.port); // Logs '80'
```

명세
--

| Specification |
| --- |
| URL Standard # dom-url-port |

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

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

같이 보기
-----

* 속성이 속한 `URL` 인터페이스.
URL()
=====

**`URL()`** 생성자는 매개변수로 제공한 URL을 나타내는 새로운 `URL` 객체를 반환합니다.

주어진 기준 URL이나 결과 URL이 유효하지 않은 URL일 경우, JavaScript `TypeError` 예외가 발생합니다.

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

구문
--


```js
const url = new URL(url [, base])
```

### 매개변수

`url`

절대 또는 상대 URL을 나타내는 `USVString`. `url`이 상대 URL인 경우 `base` 매개변수를 기준 URL로 사용하므로 `base`도 필수로 지정해야 합니다. 절대 URL인 경우 `base`는 무시합니다.

`base` Optional

`url` 매개변수가 상대 URL인 경우 사용할 기준 URL을 나타내는 `USVString`. 기본값은 `''`입니다.


**참고:** `base`에는 기존에 존재하는 `URL` 객체도 사용할 수 있습니다. 그러면 `href` 속성을 사용해 스스로 문자열화합니다.

### 예외

| 예외 | 설명 |
| --- | --- |
| `TypeError` | 절대 URL인 경우 `url`, 상대 URL인 경우 `base` + `url`이 유효하지 않은 URL인 경우. |

예제
--


```js
// Base urls
let m = "https://developer.mozilla.org";
let a = new URL("/", m); // => 'https://developer.mozilla.org/'
let b = new URL(m); // => 'https://developer.mozilla.org/'

new URL("en-US/docs", b); // => 'https://developer.mozilla.org/en-US/docs'
let d = new URL("/en-US/docs", b); // => 'https://developer.mozilla.org/en-US/docs'
new URL("/en-US/docs", d); // => 'https://developer.mozilla.org/en-US/docs'
new URL("/en-US/docs", a); // => 'https://developer.mozilla.org/en-US/docs'

new URL("/en-US/docs", "https://developer.mozilla.org/fr-FR/toto");
// => 'https://developer.mozilla.org/en-US/docs'

new URL("/en-US/docs", ""); // Raises a TypeError exception as '' is not a valid URL
new URL("/en-US/docs"); // Raises a TypeError exception as '/en-US/docs' is not a valid URL
new URL("http://www.example.com"); // => 'http://www.example.com/'
new URL("http://www.example.com", b); // => 'http://www.example.com/'

new URL("//foo.com", "https://example.com"); // => 'https://foo.com' (see relative URLs)
```

명세
--

| Specification |
| --- |
| URL Standard # dom-url-url |

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

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

같이 보기
-----

* 생성자가 속한 `URL` 인터페이스.
URL.origin
==========

`URL` 인터페이스의 **`origin`** 읽기 전용 속성은 표현 중인 URL의 출처를 유니코드로 직렬화한 `USVString`을 반환합니다. 정확한 구조는 URL의 유형에 따라 다릅니다.

* `http` 또는 `https` URL은 스킴 뒤 `'://'`, 도메인, `':'`, 마지막으로 포트(명시적으로 지정한 경우)로 구성됩니다.
* `file:` URL은 브라우저마다 다릅니다.
* `blob:` URL은 `blob:` 뒤의 URL 출처를 반환합니다. 예를 들어, `"blob:https://mozilla.org"`인 경우 `"https://mozilla.org"`를 반환합니다.

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

구문
--


```js
const originString = url.origin;
```

### 값

A `USVString`.

예제
--


```js
const url = new URL("blob:https://mozilla.org:443/");
console.log(url.origin); // Logs 'https://mozilla.org'
```

명세
--

| Specification |
| --- |
| URL Standard # dom-url-origin |

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

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

`URL` 인터페이스의 **`hostname`** 속성은 URL의 도메인 이름을 담은 `USVString`을 반환합니다.

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

구문
--


```js
const domain = url.hostname;
url.hostname = domain;
```

### 값

`USVString`,

예제
--


```js
const url = new URL(
  "https://developer.mozilla.org/ko/docs/Web/API/URL/hostname",
);
console.log(url.hostname); // Logs: 'developer.mozilla.org'
```

명세
--

| Specification |
| --- |
| URL Standard # dom-url-hostname |

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

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

같이 보기
-----

* 속성이 속한 `URL` 인터페이스.
URL.createObjectURL()
=====================

**`URL.createObjectURL()`** 정적 메서드는 주어진 객체를 가리키는 URL을 `DOMString`으로 반환합니다. 해당 URL은 자신을 생성한 창의 `document`가 사라지면 함께 무효화됩니다.

객체 URL을 해제하려면 `revokeObjectURL()`을 호출하세요.

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

**참고:** 이 기능은 메모리 누수의 가능성으로 인해 Service Worker에서 사용할 수 없습니다.

구문
--


```js
const objectURL = URL.createObjectURL(object);
```

### 매개변수

`object`

객체 URL을 생성할 `File`, `Blob`, `MediaSource` (en-US) 객체.

### 반환 값

지정한 `object`의 참조 URL을 담은 `DOMString`

예제
--

객체 URL을 사용하여 이미지 표시하기를 보세요.

사용 일람
-----

### 메모리 관리

같은 객체를 사용하더라도, `createObjectURL()`을 매번 호출할 때마다 새로운 객체 URL을 생성합니다. 각각의 URL을 더는 쓰지 않을 땐 `URL.revokeObjectURL()`을 사용해 하나씩 해제해줘야 합니다.

브라우저는 불러온 문서를 해제할 때 객체 URL도 자동으로 해제합니다. 그러나 최적의 성능과 메모리 사용량을 위해서, 객체 URL을 해제해도 안전하다면 그렇게 해야 합니다.

### 미디어 스트림 객체 URL

구 Media Source 명세에서는 `<video>` 요소에 스트림을 부착하려면 `MediaStream` (en-US)의 객체 URL을 생성했어야 했습니다. 이제 이런 과정은 필수가 아니며, 브라우저도 지원을 중단하고 있습니다.

**경고:** **중요:** 아직 미디어 요소에 `createObjectURL()`을 사용해 스트림을 부착하고 있다면, `srcObject`에 `MediaStream`을 직접 설정하도록 코드를 수정해야 합니다.

명세
--

| Specification |
| --- |
| File API # dfn-createObjectURL |

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

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

같이 보기
-----

* 웹 애플리케이션에서 파일 사용하기
* `URL.revokeObjectURL()`
* `HTMLMediaElement.srcObject`
* `FileReader.readAsDataURL()`
URL.password
============

`URL` 인터페이스의 **`password`** 속성은 도메인 이름 이전의 비밀번호를 포함한 `USVString`을 반환합니다.

`username` 설정 전에 `password`를 먼저 지정하려 시도하면 조용히 실패합니다.

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

구문
--


```js
const passwordString = url.password;
url.password = newPassword;
```

### 값

`USVString`.

예제
--


```js
const url = new URL(
  "https://anonymous:flabada@developer.mozilla.org/ko/docs/Web/API/URL/password",
);
console.log(url.password); // Logs "flabada"
```

명세서
---

| Specification |
| --- |
| URL Standard # dom-url-password |

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

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

같이 보기
-----

* 속성이 속한 `URL` 인터페이스.
URL.href
========

`URL` 인터페이스의 **`href`** 속성은 전체 URL을 담은 `USVString`입니다.

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

구문
--


```js
const urlString = url.href;
url.href = newUrlString;
```

### 값

`USVString`.

예제
--


```js
const url = new URL("https://developer.mozilla.org/ko/docs/Web/API/URL/href");
console.log(url.href); // Logs: 'https://developer.mozilla.org/ko/docs/Web/API/URL/href'
```

명세
--

| Specification |
| --- |
| URL Standard # dom-url-href |

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

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

같이 보기
-----

* 속성이 속한 `URL` 인터페이스.
URL.hash
========

`URL` 인터페이스의 **`hash`** 속성은 맨 앞의 `'#'`과 함께 URL의 프래그먼트 식별자를 담고 있는 `USVString`입니다.

프래그먼트에는 퍼센트 디코딩을 적용하지 않습니다. URL이 프래그먼트 식별자를 포함하지 않은 경우 빈 문자열을 반환합니다.

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

구문
--


```js
const string = url.hash;
url.hash = newHash;
```

### 값

`USVString`.

예제
--


```js
const url = new URL(
  "https://developer.mozilla.org/ko/docs/Web/API/URL/href#예제",
);
console.log(url.hash); // Logs: '#예제'
```

명세
--

| Specification |
| --- |
| URL Standard # dom-url-hash |

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

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

같이 보기
-----

* 속성이 속한 `URL` 인터페이스.
URL.protocol
============

`URL` 인터페이스의 **`protocol`** 속성은 URL의 프로토콜 스킴과 마지막 `':'`을 포함한 `USVString`입니다.

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

구문
--


```js
const protocol = url.protocol;
url.protocol = newProtocol;
```

### 값

`USVString`.

예제
--


```js
const url = new URL(
  "https://developer.mozilla.org/ko/docs/Web/API/URL/protocol",
);
console.log(url.protocol); // Logs "https:"
```

명세
--

| Specification |
| --- |
| URL Standard # dom-url-protocol |

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

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

같이 보기
-----

* 속성이 속한 `URL` 인터페이스.
URL.username
============

`URL` 인터페이스의 **`username`** 속성은 도메인 이전의 사용자 이름을 담은 `USVString`을 반환합니다.

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

구문
--


```js
const usernameString = url.username;
url.username = newUsername;
```

### 값

`USVString`.

예제
--


```js
const url = new URL(
  "https://anonymous:flabada@developer.mozilla.org/ko/docs/Web/API/URL/username",
);
console.log(url.username); // Logs "anonymous"
=======
```

명세
--

| Specification |
| --- |
| URL Standard # dom-url-username |

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

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

같이 보기
-----

* 속성이 속한 `URL` 인터페이스.
URL.pathname
============

`URL` 인터페이스의 **`pathname`** 속성은 URL의 경로와 그 앞의 `/`로 이루어진 `USVString`을 반환합니다. 경로가 없는 경우 빈 문자열을 반환합니다.

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

구문
--


```js
const path = url.pathname;
url.pathname = newPath;
```

### 값

`USVString`.

예제
--


```js
var url = new URL(
  "https://developer.mozilla.org/ko/docs/Web/API/URL/pathname?q=value",
);
var result = url.pathname; // Returns:"/ko/docs/Web/API/URL/pathname"
```

명세
--

| Specification |
| --- |
| URL Standard # dom-url-pathname |

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

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

같이 보기
-----

* 속성이 속한 `URL` 인터페이스.
URL.searchParams
================

`URL` 인터페이스의 **`searchParams`** 읽기 전용 속성은 URL 내의 `GET` 디코딩 된 쿼리 매개변수에 접근할 수 있는 `URLSearchParams` 객체를 반환합니다.

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

구문
--


```js
const urlSearchParams = url.searchParams;
```

### 값

`URLSearchParams` 객체.

예제
--

페이지의 URL을 `https://example.com/?name=Jonathan%20Smith&age=18`로 가정했을 때, `name`과 `age` 매개변수는 다음과 같이 가져올 수 있습니다.


```js
let params = new URL(document.location).searchParams;
let name = params.get("name"); // is the string "Jonathan Smith".
let age = parseInt(params.get("age")); // is the number 18
```

명세
--

| Specification |
| --- |
| URL Standard # dom-url-searchparams |

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

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

**`URL.toString()`** 문자열화 메서드는 전체 URL을 담은 `USVString`을 반환합니다. 사실상 읽기 전용 `URL.href`인 셈입니다.

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

구문
--


```js
href = url.toString();
```

### 반환 값

`USVString`.

예제
--


```js
const url = new URL(
  "https://developer.mozilla.org/ko/docs/Web/API/URL/toString",
);
url.toString(); // should return the URL as a string
```

명세
--

| Specification |
| --- |
| URL Standard # URL-stringification-behavior |

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

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

같이 보기
-----

* 메서드가 속한 `URL` 인터페이스.
URL.search
==========

`URL` 인터페이스의 **`search`** 속성은 맨 앞의 `'?'`와 함께 URL의 쿼리 문자열, 즉 검색 매개변수를 나타내는 `USVString`입니다.

신형 브라우저에서는 `URL.searchParams` 속성을 통해 간편한 쿼리 문자열 분석을 지원합니다.

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

구문
--


```js
const searchParams = object.search;
url.search = newSearchParams;
```

### 값

`USVString`.

Examples
--------


```js
const url = new URL(
  "https://developer.mozilla.org/ko/docs/Web/API/URL/search?q=123",
);
console.log(url.search); // Logs "?q=123"
```

명세서
---

| Specification |
| --- |
| URL Standard # dom-url-search |

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

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

See also
--------

* 속성이 속한 `URL` 인터페이스.
URL.revokeObjectURL()
=====================

**`URL.revokeObjectURL()`** 정적 메서드는 이전에 `URL.createObjectURL()`을 통해 생성한 객체 URL을 해제합니다. 객체 URL을 더는 쓸 일이 없을 때 사용해서, 브라우저가 이제 해당 객체를 메모리에 들고 있지 않아도 된다고 알려주세요.

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

**참고:** 이 기능은 `Blob` 인터페이스의 생명 주기 문제와 잠재적인 메모리 누수 가능성으로 인해 Service Worker에서 사용할 수 없습니다.

구문
--


```js
URL.revokeObjectURL(objectURL);
```

### 매개변수

`objectURL`

`createObjectURL()`을 통해 생성한 객체 URL을 나타내는 `DOMString`.

예제
--

객체 URL을 사용하여 이미지 표시하기를 보세요.

명세
--

| Specification |
| --- |
| File API # dfn-revokeObjectURL |

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

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

같이 보기
-----

* 웹 애플리케이션에서 파일 사용하기
* `URL.createObjectURL()`
The structured clone algorithm
==============================

The structured clone 알고리즘은 복잡한 JavaScript 객체의 직렬화을 위해서 HTML5 specification에 의해서 정의된 새로운 알고리즘 입니다. 이것은 순환그래프를 포함하는 객체의 직렬화를 지원하기 때문에 JSON보다 더 유용합니다. — 객체는 같은 그래프에서 다른객체를 참조하는 객체를 참조할 수 있습니다. 이러한 케이스들에서는 structured clone알고리즘이 아마도 JSON보다 더 효율적일 것입니다.

알고리즘은 본질적으로 원본 객체의 모든 필드를 거치고 각 필드의 값들을 새로운 객체로 복제합니다. 만약 필드가 객체를 가졌다면 모든 필드와 그 서브필드가 새로운 객체로 복제될 때 까지 재귀적으로 동작합니다.

JSON을 넘는 이득
-----------

JSON을 뛰어넘는 structured clone알고리즘의 여러가지 핵심 이득이 있습니다.

* Structured clones은 `RegExp` 객체들도 복사할 수 있습니다..
* Structured clones은 `Blob`, `File`와 `FileList` 객체들도 복사할 수 있습니다..
* Structured clones은 `ImageData` 객체들도 복사할 수 있습니다. 클론된`CanvasPixelArray` (en-US)크기(dimensions)는 원본과 match될 것이고 같은 픽셀 데이터의 복제를 가집니다.
* Structured clones은 참조들의 순환 그래프들을 포함한 객체들을 올바르게 복제할 수 있습니다.
structured clones과 함께 동작하지 않는 것들
--------------------------------

* `Error와` `Function` 객체들은 structured clone 알고리즘에 의해서 복제될 수 없습니다; 이것을 시도하면 `DATA_CLONE_ERR` exception을 던질 것 입니다.
* DOM node들을 클론하려고 시도하는것도 동일하게 `DATA_CLONE_ERR` exception을 던질 것 입니다.
* 객체들의 몇몇 파라미터들은 보존되지 않습니다:
    + `RegExp객체들의 liastIndex필드는 보존되지 않습니다.`
    + Property descriptors, setters, 그리고 getters (이것들과 비슷한 메타데이터같은 기능들)은 복제되지 않습니다. 예를들어서 한 객체가 프로퍼티 디스크립터를 사용하여 읽기전용으로 마크되어져 있다면 이것은 읽기-쓰기가 가능하도록 복제 될 것입니다. 이것이 디폴트 조건이기 때문입니다.
    + 프로토타입 체인은 거치지않고 복제되지 않습니다.
Supported types
---------------

| Object type | Notes |
| --- | --- |
| All primitive types | 하지만 심볼들은 포함하지 않습니다. |
| Boolean object |  |
| String object |  |
| Date |  |
| RegExp | lastIndex필드는 보존되지 않습니다. |
| `Blob` |  |
| `File` |  |
| `FileList` |  |
| ArrayBuffer |  |
| ArrayBufferView (en-US) | 이것은 기본적으로 int32Array나 기타같은 typed arrays의 모든것을 의미합니다. |
| `ImageData` |  |
| Array |  |
| Object | 이것은 그냥 plain객체들을 포함합니다.(e.g. 객체 리터럴) |
| Map |  |
| Set (en-US) |  |

또 다른 방법 : 깊은 복사(deep copy‎)
---------------------------

객체의 깊은 복사(deep copy)를 원한다면(모든 프로토타입 체인과 내포된 속성들 까지도), 또다른 접근방식을 사용해야만 합니다. 아래의 예제를 확인하세요.


```js
function clone(objectToBeCloned) {
  // Basis.
  if (!(objectToBeCloned instanceof Object)) {
    return objectToBeCloned;
  }

  var objectClone;

  // Filter out special objects.
  var Constructor = objectToBeCloned.constructor;
  switch (Constructor) {
    // Implement other special objects here.
    case RegExp:
      objectClone = new Constructor(objectToBeCloned);
      break;
    case Date:
      objectClone = new Constructor(objectToBeCloned.getTime());
      break;
    default:
      objectClone = new Constructor();
  }

  // Clone each property.
  for (var prop in objectToBeCloned) {
    objectClone[prop] = clone(objectToBeCloned[prop]);
  }

  return objectClone;
}
```


**참고:** 이 알고리즘은 실제로 `RegExp`, `Array`, 와 `Date`스페셜 객체들을 구현했습니다. 필요에 따라서 다른 특수한 케이스들을 구현할 수 있습니다.

See also
--------

* HTML5 Specification: Safe passing of structured data
* `window.history`
* `window.postMessage()`
* Web Workers
* Components.utils.cloneInto
Window: requestAnimationFrame() method
======================================


**`window.requestAnimationFrame()`** 메서드는 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트 바로 전에 브라우저가 애니메이션을 업데이트할 지정된 함수를 호출하도록 요청합니다. 이 메서드는 리페인트 이전에 호출할 인수로 콜백을 받습니다.

**참고:** 다음 리페인트에서 다른 프레임을 애니메이션 적용할려면 콜백 루틴이 반드시 스스로 `requestAnimationFrame()`을 호출해야 합니다. `requestAnimationFrame()`은 하나의 장면입니다.

화면에 애니메이션을 업데이트할 준비가 될 때마다 이 메서드를 호출해야 합니다. 이는 브라우저가 다음 리페인트를 수행하기 전에 애니메이션 함수를 호출하도록 요청합니다. 콜백의 수는 보통 1초에 60회지만, 일반적으로 대부분의 웹 브라우저에서는 W3C 권장사항에 따라 디스플레이 주사율과 일치됩니다. `requestAnimationFrame()`은 배터리 수명과 성능 향상을 위해 대부분의 브라우저에서 백그라운드 탭들이나 숨겨진 `<iframe>` (en-US)들이 실행될 때 중단됩니다.

콜백 메서드에는 단일 인수 `DOMHighResTimeStamp` (en-US)가 전달되어 현재 시간(시간 발생 (en-US)이후의 밀리초 수에 기반된)을 나타냅니다. `requestAnimationFrame()`에 의해 대기 중인 다수의 콜백이 한 프레임에서 실행되기 시작할 때, 각각의 콜백은 모든 이전 콜백의 작업량을 계산하는 동안 시간이 지나갔음에도 불구하고 동일한 타임스탬프를 받습니다(아래의 코드 예제에서는 오직 타임스태프가 변할 때에만 프레임에 애니메이션을 적용합니다. 즉, 첫번째 콜백에서만 적용됩니다). 이 타임스탬프는 밀리초 단위의 십진수이지만, 최소 정밀도는 1ms(1000 µs)입니다.

**경고:** 항상 프레임에서 얼마나 많은 애니메이션이 진행될 것인지 계산하기 위해 첫 번째 인수(혹은 현재 시간을 가질 수 있는 몇몇 다른 메서드)를 사용해야 합니다. **그렇지 않으면 높은 주사율에서 애니메이션이 빠르게 실행될 것입니다**.
 이를 수행하는 방법에 대해서는 아래 예제를 참고해주세요.


구문
--


```js
requestAnimationFrame(callback);
```

### 파라미터

`callback`

다음 리페인트를 위한 애니메이션을 업데이트할 때 호출할 함수. 콜백 함수에는 `requestAnimationFrame()`이 콜백 함수들의 실행을 시작할 시점을 나타내는 `performance.now()` (en-US) 에 의해 반환되는 것과 유사한 `DOMHighResTimeStamp` (en-US) 단일 인수가 전달됩니다.

### 반환 값

콜백 목록의 항목을 고유하게 식별하는 요청 id인 `long` 정수 값. 이것은 0이 아닌 값이지만, 그 값에 대해 어떠한 다른 추측을 할 수 없습니다. 이 값을 `window.cancelAnimationFrame()` 에 전달해 콜백 요청을 취소할 수 있습니다.

예시
--

 이 예제에서, 요소는 2초(2000 밀리초) 동안 애니메이션이 적용됩니다. 요소는 0.1px/ms 속도로 오른쪽으로 이동해서,
 그것의 상대적 위치(CSS 픽셀)는 `0.1 * elapsed`로 애니메이션의 시작 이후 경과된 시간(밀리초) 함수에서 계산될 수 있습니다. 요소의 최종 위치는 처음 위치에서 오른쪽으로 200px(`0.1 * 2000`) 이동한 위치입니다.


```js
const element = document.getElementById("some-element-you-want-to-animate");
let start, previousTimeStamp;
let done = false;

function step(timestamp) {
  if (start === undefined) {
    start = timestamp;
  }
  const elapsed = timestamp - start;

  if (previousTimeStamp !== timestamp) {
    // Math.min()은 여기서 요소가 정확히 200px에 멈추는지 확인하기 위해 사용됩니다
    const count = Math.min(0.1 \* elapsed, 200);
    element.style.transform = `translateX(${count}px)`;
    if (count === 200) done = true;
  }

  if (elapsed < 2000) {
    // 2초 이후에 애니메이션 종료
    previousTimeStamp = timestamp;
    if (!done) {
      window.requestAnimationFrame(step);
    }
  }
}

window.requestAnimationFrame(step);
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-animationframeprovider-requestanimationframe |

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

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

함께 보기
-----

* `Window.cancelAnimationFrame()`
* mozRequestAnimationFrame – 블로그 포스트
* requestAnimationFrame for smart animating - 블로그 포스트
* Animating with JavaScript: from setInterval to requestAnimationFrame - 블로그 포스트
* TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations
* Paul Irish: requestAnimationFrame API: now with sub-millisecond precision
* A polyfill
ServiceWorkerGlobalScope.skipWaiting()
======================================

`ServiceWorkerGlobalScope` (en-US) 의 **`ServiceWorkerGlobalScope.skipWaiting()`** 메소드는 waiting 상태의 서비스 워커를 active 상태의 서비스 워커로 변경하도록 강제한다.

근본적인 서비스 워커에 대한 업데이트들이 현재의 클라이언트와 다른 모든 active 클라이언트들에게 즉시 적용되도록 하기 위해 `Clients.claim()` 과 이 메소드를 사용한다.

Syntax
------


```js
ServiceWorkerGlobalScope.skipWaiting().then(function () {
  //Do something
});
```

### Returns

`undefined` 로 즉시 resolve 되는 `Promise`

Example
-------

서비스 워커가 실행되는 동안 언제라도 `self.skipWaiting()` 는 호출될 수 있지만, 이것은 `waiting` 상태로 남아 있을 수도 있는 새롭게 설치된 서비스 워커가 있는 경우에만 영향을 줄 수 있다. 따라서, `InstallEvent` (en-US) 핸들러 내부에서 `self.skipWaiting()` 을 호출하는 것이 일반적이다.

다음 예시는 active 상태의 서비스 워커가 이미 존재하는지의 여부에 관계없이, 새로 설치된 서비스 워커가 `activating` 상태로 진행되도록 한다.


```js
self.addEventListener("install", function (event) {
  // skipWaiting()가 반환하는 promise는 안전하게 무시될 수 있다.
  self.skipWaiting();

  // 잠재적으로 event.waitUntil(); 내부에서
  // 서비스 워커 설치를 위해 필요한 다른 action 들을 수행하라.
});
```

명세서
---

| Specification |
| --- |
| Service Workers # service-worker-global-scope-skipwaiting |

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

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

See also
--------

* Using Service Workers (en-US)
* Service workers basic code example
* Is ServiceWorker ready?
* `Clients.claim()`
* `Promises`
* Using web workers (en-US)
ServiceWorkerGlobalScope.clients
================================

`ServiceWorkerGlobalScope` (en-US) 인터페이스의 **`clients`** 읽기 전용 속성은 서비스 워커와 관련된 `Clients` (en-US) 객체를 반환한다.

Syntax
------


```js
swClients = self.clients;
```

### Value

특정한 워커와 관련된 `Clients` (en-US) 객체.

명세서
---

| Specification |
| --- |
| Service Workers # service-worker-global-scope-clients |

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

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

See also
--------

* Using Service Workers (en-US)
* Service workers basic code example
* Is ServiceWorker ready?
* `Promise`
* Using web workers (en-US)
ServiceWorkerGlobalScope: notificationclick event
=================================================

`notificationclick` 이벤트는 `ServiceWorkerRegistration.showNotification()` (en-US) 에 의해 발생한 시스템 notification 이 클릭되었음을 나타내기 위해 발생된다.

|  | No |
| --- | --- |
| Cancelable | No |
| Interface | `NotificationEvent` (en-US) |
| Event handler | `onnotificationclick` |

Examples
--------

`addEventListener` 메소드 내에서 `notificationclick` 이벤트를 사용할 수 있다:


```js
self.addEventListener("notificationclick", function (event) {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
          if (client.url == "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```


또는 `onnotificationclick` 이벤트 핸들러 속성을 사용할 수 있다:


```js
self.onnotificationclick = function (event) {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
          if (client.url == "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
};
```

명세서
---

| Specification |
| --- |
| Notifications API Standard # activating-a-notification |
| Notifications API Standard # dom-serviceworkerglobalscope-onnotificationclick |

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

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

See also
--------

* Service Worker API
* Notifications API
TreeWalker.currentNode
======================

**`TreeWalker.currentNode`** 속성은 `TreeWalker`가 현재 가리키고 있는 `Node` (en-US)를 나타낸다.

구문
--


```js
node = treeWalker.currentNode;
treeWalker.currentNode = node;
```

예제
--


```js
var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW\_ELEMENT,
  {
    acceptNode: function (node) {
      return NodeFilter.FILTER\_ACCEPT;
    },
  },
  false,
);
root = treeWalker.currentNode; // 첫번째 엘리먼트인 루트 엘리먼트!
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-treewalker-currentnode① |

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

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

같이 보기
-----

* `TreeWalker` 인터페이스
AbortSignal.aborted
===================

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

**`aborted`** 읽기 전용 프로퍼티는 신호가 통신하는 DOM 요청이 취소되었는지(`true`) 그렇지 않은지(`false`)를 나타내는 `Boolean`을 반환한다.

구문
--


```js
var isAborted = abortSignal.aborted;
```

### 값

`Boolean`예제
--

다음 스니펫에서는 새로운 `AbortController` 객체를 생성하고 `AbortSignal`를 얻는다(`signal` 프로퍼티에서 가능). 그 다음 `aborted` 프로퍼티를 사용해 신호가 취소되었는지 확인하고 콘솔로 적절한 로그를 전송한다.


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

// ...

signal.aborted
  ? console.log("Request has been aborted")
  : console.log("Request not aborted");
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortsignal-aborted① |

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

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

See also
--------

* Fetch API
AudioNode.numberOfInputs
========================

`AudioNode` 인터페이스의 `numberOfInputs` 속성은 해당 노드에 공급되는 입력의 수를 반환합니다. 소스 노드는 `numberOfInputs` 속성의 값이 0인 노드로 정의됩니다.

구문
--


```js
var numInputs = audioNode.numberOfInputs;
```

### 값

integer ≥ 0.

예제
--


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

const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();

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

console.log(oscillator.numberOfInputs); // 0
console.log(gainNode.numberOfInputs); // 1
console.log(audioCtx.destination.numberOfInputs); // 1
```

명세서
---

| Specification |
| --- |
| Web Audio API # dom-audionode-numberofinputs |

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

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

같이 보기
-----

* Web Audio
API 사용하기