Navigator - Web API

Navigator
=========

**`Navigator`** 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용합니다.

`Navigator` 객체는 `window.navigator` 읽기 전용 속성으로 접근할 수 있습니다.

속성
--

아무 속성도 상속하지 않습니다.

### 표준 속성

`Navigator.bluetooth` (en-US) 읽기 전용
Experimental

현재 문서의 `Bluetooth` (en-US) 객체를 반환합니다. Web Bluetooth API의 기능에 접근할 수 있습니다.

`Navigator.clipboard` (en-US) 읽기 전용 Secure context

시스템 클립보드의 읽기, 쓰기에 접근할 수 있는 `Clipboard` (en-US) 객체를 반환합니다.

`Navigator.connection` 읽기 전용
Experimental

장치의 네트워크 연결 정보를 담은 `NetworkInformation` (en-US) 객체를 반환합니다.

`Navigator.contacts` (en-US) 읽기 전용
Experimental

사용자에게 사용자의 연락처 목록에서 항목을 선택하고 그 항목의 제한된 세부 정보를 웹사이트나 애플리케이션과 공유할 수 있게 하는 `ContactsManager` (en-US) 인터페이스를 반환합니다.

`Navigator.cookieEnabled` (en-US) 읽기 전용

쿠키 설정을 할 수 있으면 참, 아니면 거짓을 반환합니다.

`Navigator.credentials` (en-US) 읽기 전용

`CredentialsContainer` (en-US) 인터페이스를 반환합니다. 사용자 인증 정보를 요청하거나, 로그인 및 로그아웃 등 중요한 인증 관련 이벤트가 발생한 것을 사용자 에이전트에게 알려줄 때 사용합니다.

`Navigator.deviceMemory` (en-US) 읽기 전용
Experimental

장치의 메모리를 기가바이트 단위로 반환합니다. 근삿값으로, 실제 값을 가장 가까운 2의 배수로 반올림한 후에 1024로 나눠서 제공합니다.

`Navigator.geolocation` 읽기 전용

장치의 위치 정보에 접근할 수 있는 `Geolocation` 객체를 반환합니다.

`Navigator.gpu` (en-US) 읽기 전용
Experimental

현재 브라우징 맥략의 `GPU` (en-US) 객체를 반환합니다. WebGPU API (en-US)의 진입점입니다.

`Navigator.hardwareConcurrency` (en-US) 읽기 전용

중앙처리장치의 사용 가능한 논리 코어 수를 반환합니다.

`Navigator.hid` (en-US) 읽기 전용

`HID` (en-US) 객체를 반환합니다. HID 장치에 연결하고, 연결된 HID 장치를 나열하고, HID 장치에 대한 이벤트 처리기를 부착할 수 있습니다.

`Navigator.ink` (en-US) 읽기 전용
Experimental

현재 문서의 `Ink` (en-US) 객체를 반환합니다. Ink API (en-US)의 기능에 접근할 수 있습니다.

`Navigator.keyboard` (en-US) 읽기 전용
Experimental

`Keyboard` (en-US) 객체를 반환합니다. 키보드 레이아웃 맵을 가져올 수 있고, 물리적 키보드의 키 입력 캡처를 켜고 끌 수 있습니다.

`Navigator.language` 읽기 전용

사용자의 선호 언어(주로 브라우저 UI 언어)를 나타내는 `DOMString`을 반환합니다. 언어를 알 수 없는 경우 `null`을 반환합니다.

`Navigator.languages` (en-US) 읽기 전용
Experimental

사용자에게 알려진 언어 목록을 나타내는 `DOMString` 배열을 반환합니다. 정렬 순서는 사용자의 언어 선호도입니다.

`Navigator.locks` (en-US) 읽기 전용
Experimental

새로운 `Lock` (en-US) 객체를 요청하거나, 기존 `Lock` 객체를 질의할 수 있는 `LockManager` (en-US) 객체를 반환합니다.

`Navigator.maxTouchPoints` (en-US) 읽기 전용

현재 장치에서 지원하는 최대 동시 터치 지점의 수를 반환합니다.

`Navigator.mediaCapabilities` (en-US) 읽기 전용
Experimental

주어진 형식과 출력 형태에 대한 인코딩 및 디코딩 능력을 알아낼 수 있는 `MediaCapabilities` (en-US) 객체를 반환합니다.

`Navigator.mediaDevices` 읽기 전용

`MediaStream` (en-US) 객체를 반환합니다. 사용 가능한 미디어 장치들의 정보를 가져오고(`MediaDevices.enumerateDevices()`), 사용자의 컴퓨터와 사용자 에이전트가 지원하는 미디어 제약 조건 속성을 알아내고(`MediaDevices.getSupportedConstraints()` (en-US)), 미디어 접근을 요청할 수 있습니다(`MediaDevices.getUserMedia()` (en-US)).

`Navigator.mediaSession` (en-US) 읽기 전용
Experimental

현재 재생 중인 미디어에 대한 메타데이터를 브라우저에게 제공할 때 사용하는 `MediaSession` (en-US) 객체를 반환합니다. 브라우저는 이 데이터를 전역 미디어 컨트롤 UI 등에 표시할 수 있습니다.

`Navigator.onLine` 읽기 전용

브라우저가 온라인 상태인지 나타내는 불리언 값을 반환합니다.

`Navigator.pdfViewerEnabled` (en-US) 읽기 전용

브라우저가 PDF 파일을 탐색할 때 인라인으로 표시할 수 있으면 `true`, 그렇지 않으면 `false`를 반환합니다.

`Navigator.permissions` (en-US) 읽기 전용
Experimental

`Permissions` (en-US) 객체를 반환합니다. Permissions API의 권한을 질의하고 상태를 변경할 수 있습니다.

`Navigator.presentation` (en-US) 읽기 전용
Experimental

`Presentation` (en-US) API 참조를 반환합니다.

`Navigator.serial` (en-US) 읽기 전용

`Serial` (en-US) 객체를 반환합니다. 직렬 포트를 제어할 수 있는 Web Serial API (en-US)의 진입점입니다.

`Navigator.serviceWorker` (en-US) 읽기 전용

`ServiceWorkerContainer` (en-US) 객체를 반환합니다. 연관 문서(associated document)의 `ServiceWorker`에 대한 등록, 제거, 업그레이드, 통신 기능을 제공합니다.

`Navigator.storage` (en-US) 읽기 전용

`StorageManager` (en-US) 싱글턴 객체를 반환합니다. 사이트/앱에 할당된 저장 공간 권한을 관리하고, 남은 공간을 계산할 때 사용합니다.

`Navigator.usb` (en-US) 읽기 전용

현재 문서의 `USB` (en-US) 객체를 반환합니다. WebUSB API (en-US)의 기능에 접근할 수 있습니다.

`Navigator.userActivation` (en-US) 읽기 전용

현재 창의 사용자 활성화 상태에 대한 정보가 포함된 `UserActivation` (en-US) 객체를 반환합니다.

`Navigator.userAgent` (en-US) 읽기 전용

현재 브라우저의 사용자 에이전트 문자열을 반환합니다.

`Navigator.userAgentData` (en-US) 읽기 전용

`NavigatorUAData` (en-US) 객체를 반환합니다. 사용자의 브라우저와 운영체제에 대한 정보를 제공합니다.

`Navigator.virtualKeyboard` (en-US) 읽기 전용
Experimental

화면에 보이는 가상 키보드를 제어하기 위해 `VirtualKeyboard` (en-US) API의 참조를 반환합니다.

`Navigator.wakeLock` (en-US) 읽기 전용

`WakeLock` (en-US) 인터페이스를 반환합니다. 화면 깨우기를 잠그도록 요청하거나, 화면을 어둡게 하기, 끄기, 화면 보호기 표시하기를 방지할 수 있도록 요청할 수 있습니다.

`Navigator.webdriver` (en-US) 읽기 전용
Experimental

사용자 에이전트가 자동화에 의해 제어 중인지 나타냅니다.

`Navigator.windowControlsOverlay` (en-US) 읽기 전용

`WindowControlsOverlay` (en-US) 객체를 반환합니다. 데스크톱 PWA 제목표시줄의 형태에 대한 정보를 제공하고, 형태가 변화하는 것을 감지할 수 있는 이벤트도 발송합니다.

`Navigator.xr` (en-US) 읽기 전용
Experimental

WebXR API (en-US)의 진입점인 `XR` (en-US) 객체를 반환합니다.

### 비표준 속성

`Navigator.buildID` (en-US) 읽기 전용
비표준

브라우저의 빌드 식별자를 리턴합니다. 현재 최신 브라우저에서 이 속성은 개인 정보 보호 조치로 고정된 타임스탬프를 리턴합니다. 예를 들어 Firefox 64 이상에서는 `20181001000000`을 반환합니다.

`Navigator.globalPrivacyControl` (en-US) 읽기 전용
Experimental

비표준

자신의 정보가 공유되거나 판매되는 것에 대한 사용자의 동의를 나타내는 불리언 값을 리턴합니다.

`Navigator.standalone`
비표준

브라우저가 독립 실행 모드로 실행중인지를 나타내는 불리언 값을 리턴합니다. Apple의 iOS Safari에서만 지원합니다.

### 사용되지 않는 속성

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

비표준

현재 `VRDisplay.ispresenting` (en-US)이 `true`인 모든 `VRDisplay` (en-US) 객체를 담고 있는 배열을 반환합니다.

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

어느 브라우저에서든 항상 `'Mozilla'`를 반환합니다.

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

어느 브라우저에서든 항상 `'Netscape'`를 반환합니다.

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

브라우저의 버전을 문자열로 반환합니다. 정확한 값으로 사용할 때에는 이 기능에 의존하지 마십시오.

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

비표준

사용자의 추적 금지 설정 값을 알립니다. 이 값이 "1"인 경우, 당신의 웹사이트 또는 애플리케이션은 사용자를 추적해서는 안됩니다.

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

브라우저가 지원하는 MIME 타입들을 나열하는 `MimeTypeArray` (en-US)를 반환합니다.

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

현재 운영 체제를 나타내는 문자열을 반환합니다.

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

브라우저의 플랫폼을 나타내는 문자열을 반환합니다. 중요한 값으로 사용할 때에는 이 기능에 의존하지 마십시오.

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

브라우저에 설치된 플러그인을 나열하는 `PluginArray` (en-US)을 반환합니다.

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

어느 브라우저에서든 항상 `'Gecko'`를 반환합니다.

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

`'20030107'`과 `'20100101'` 중 하나를 문자열로 반환합니다.

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

빈 문자열, `'Apple Computer Inc.'`, `'Google Inc.'` 중 하나를 반환합니다.

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

항상 빈 문자열을 반환합니다.

메서드
---

아무 메서드도 상속하지 않습니다.

`Navigator.canShare()` (en-US)

`Navigator.share()` 호출이 성공할지 나타내는 불리언 값을 반환합니다.

`Navigator.clearAppBadge()` (en-US)

현재 앱 아이콘의 배지를 제거하고, `undefined`로 이행하는 `Promise`를 반환합니다.

`Navigator.getBattery()`

`BatteryManager` 객체로 이행하는 `Promise`를 반환합니다. `BatteryManager`는 전원 충전 상태 정보를 제공합니다.

`Navigator.registerProtocolHandler()`

주어진 프로토콜에 대해 현재 웹 사이트를 사용 가능한 처리기로 등록합니다.

`Navigator.requestMediaKeySystemAccess()` (en-US)

`MediaKeySystemAccess` (en-US) 객체로 이행하는 `Promise`를 반환합니다.

`Navigator.sendBeacon()`

작은 데이터를 사용자 에이전트에서 웹 서버로, HTTP를 통해 비동기적으로 전송할 때 사용합니다.

`Navigator.setAppBadge()` (en-US)

현재 앱 아이콘에 배지를 추가하고, `undefined`로 이행하는 `Promise`를 반환합니다.

`Navigator.share()`

현재 플랫폼의 네이티브 공유 기능을 발동합니다.

`Navigator.vibrate()` (en-US)

지원하는 경우, 장치가 진동하도록 합니다. 진동을 지원하지 않는 장치에서는 아무것도 하지 않습니다.

### 사용되지 않는 메서드

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

사용자에게 권한을 요청한 후에 로컬 컴퓨터의 카메라 또는 마이크와 연관된 오디오나 비디오 스트림을 반환합니다.

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

비표준

`VRDisplay` (en-US) 객체 배열을 이행하는 promise를 반환합니다. 이 객체는 컴퓨터에 사용 가능한 VR 기기가 연결되었는지를 나타냅니다.

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

항상 `false`를 반환합니다.

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

`false`를 반환합니다. JavaScript taint/untaint 기능은 JavaScript 1.2에서 제거되었습니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-navigator-object |

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

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


IndexedDB API - Web API

IndexedDB API
=============

 IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다. IndexedDB API는 인덱스를 사용해 데이터를 고성능으로 탐색할 수 있습니다. Web Storage는 적은 양의 데이터를 저장하는데 유용하지만 많은 양의 구조화된 데이터에는 적합하지 않은데, 이런 상황에서 IndexedDB를 사용할 수 있습니다. 이 페이지는 MDN에서 IndexedDB에 대한 내용을 다루는 시작 문서로 전체 API 참고서, 사용 안내서, 세부적인 브라우저 지원 상황, 그리고 핵심 개념에 대한 설명을 제공하는 링크를 찾을 수 있습니다.

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

**참고:** IndexedDB API는 강력하지만, 간단하게 사용하기엔 좀 복잡해 보일 수 있습니다. 보다 단순한 API를 선호한다면, See also섹션의 라이브러리를 알아보세요. IndexedDB를 좀 더 프로그래머 친화적으로 만들어줍니다.

핵심 개념과 사용
---------

IndexedDB는 SQL을 사용하는 관계형 데이터베이스(RDBMS)와 같이 트랜잭션을 사용하는 데이터베이스 시스템입니다. 그러나 IndexedDB는 RDBMS의 고정컬럼 테이블 대신 JavaScript 기반의 객체지향 데이터베이스입니다. IndexedDB의 데이터는 인덱스 **키**를 사용해 저장하고 검색할 수 있으며, 구조화된 복사 알고리즘을 지원하는 객체라면 모두 저장할 수 있습니다. 사용하려면 데이터베이스 스키마를 지정하고, 데이터베이스와 통신을 연 후에, 일련의 **트랜잭션**을 통해 데이터를 가져오거나 업데이트해야 합니다.

* IndexedDB 주요 특성 및 기본 용어 (en-US) (en-US)에 대해 더 알아보세요.
* IndexedDB 사용하기 안내서를 통해 IndexedDB의 기초적인 비동기 사용법을 배워보세요.
* 서비스 워커를 사용해 PWA가 오프라인에서 동작하게 만들기 문서에서 IndexedDB를 사용해 오프라인 데이터를 저장하고, 서비스 워커를 사용해 오프라인 자산을 저장하는 방법을 살펴보세요.

**참고:** 대부분의 웹 저장 솔루션처럼, IndexedDB도 동일 출처 정책을 따릅니다. 그렇기 때문에, 저장한 데이터는 같은 도메인에서만 접근할 수 있으며 다른 도메인에서는 접근할 수 없습니다.

### 동기와 비동기

IndexedDB 작업은 애플리케이션 블록을 방지하기 위해 모두 비동기로 이뤄집니다.

### 저장 용량 한도와 제거 기준

하나의 종류 또는 다른 종류의 데이터를 클라이언트 측(즉, 로컬 디스크 상)에 저장하는 웹 기술은 많습니다. IndexedDB는 가장 일반적으로 언급되는 것입니다. 브라우저가 얼마만큼의 공간을 web data storage에 할당할지 그리고 용량이 한계에 도달했을 때 무엇을 지울지의 프로세스는 간단하지 않고, 브라우저마다 다릅니다. 브라우저 저장 공간 제한과 축출 기준 (en-US) (en-US)을 Firefox의 경우에 이것이 어떻게 작동하는지 설명하려고 시도합니다.

인터페이스
-----

데이터베이스에 접속하기 위해서는 window 객체의 `indexedDB` (en-US) (en-US) 속성에서 `open()` (en-US) (en-US)을 호출해야 합니다. 이 메소드는 `IDBRequest` (en-US) 객체를 반환합니다. 비동기 작업은 `IDBRequest` (en-US) 객체에서 이벤트를 발생시켜 호출한 애플리케이션과 통신합니다.

### 데이터베이스에 연결하기

`IDBFactory` (en-US)

데이터베이스 접속을 제공합니다. 이것은 전역 개체 `indexedDB` (en-US)에 의해 구현된 인터페이스이므로 API의 진입점입니다.

`IDBOpenDBRequest` (en-US)

데이터베이스 열기 요청을 나타냅니다.

`IDBDatabase` (en-US)

데이터베이스에 대한 연결을 나타냅니다. 이것은 데이터베이스에서 트랜잭션을 얻는 유일한 방법입니다.

### 데이터 검색 및 수정

`IDBTransaction` (en-US)

트랜잭션을 나타냅니다. 데이터베이스에서 트랜잭션을 만들고, 범위(예: 액세스하려는 개체 저장소)를 지정하고 원하는 액세스 유형(읽기 전용 또는 읽기 쓰기)을 결정합니다.

`IDBRequest` (en-US)

데이터베이스 요청을 처리하고 결과에 대한 액세스를 제공하는 일반 인터페이스입니다.

`IDBObjectStore` (en-US)

기본 키를 통해 조회된 IndexedDB 데이터베이스의 데이터 집합에 대한 액세스를 허용하는 객체 저장소를 나타냅니다.

`IDBIndex` (en-US)

또한 IndexedDB 데이터베이스의 데이터 하위 집합에 대한 액세스를 허용하지만 기본 키가 아닌 인덱스를 사용하여 레코드를 검색합니다. 이는 때때로 `IDBObjectStore` (en-US)를 사용하는 것보다 빠릅니다.

`IDBCursor` (en-US)

객체 저장소 및 인덱스를 반복합니다.

`IDBCursorWithValue` (en-US)

객체 저장소 및 인덱스를 반복하고 커서의 현재 값을 반환합니다.

`IDBKeyRange` (en-US)

특정 범위의 데이터베이스에서 데이터를 검색할 때 사용할 수 있는 키 범위를 정의합니다.

`IDBLocaleAwareKeyRange` (en-US)
비표준

특정 인덱스에 대해 지정된 로케일 규칙에 따라 정렬된 특정 범위의 데이터베이스에서 데이터를 검색하는 데 사용할 수 있는 키 범위를 정의합니다. (`createIndex()`'의 선택적 파라미터 (en-US) (en-US)를 보세요) 이 인터페이스는 2.0 사양의 일부가 아닙니다.

### 사용자 정의 이벤트 인터페이스

이 사양은 다음 사용자 정의 인터페이스로 이벤트를 발생시킵니다.

`IDBVersionChangeEvent` (en-US)

`IDBVersionChangeEvent` 인터페이스는 `IDBOpenDBRequest.onupgradeneeded` (en-US) 이벤트 핸들러 함수의 결과로 데이터베이스 버전이 변경되었음을 나타냅니다.

예시
--

* To-do Notifications (view example live): 참조 문서의 예제에 대한 참조 응용 프로그램입니다.
명세
--

| Specification |
| --- |
| Indexed Database API 3.0  |

See also
--------

* localForage: Polyfill은 백그라운드에서 IndexedDB를 사용하는 클라이언트 측 데이터 저장을 위한 간단한 이름:값 구문을 제공합니다. 그러나 IndexedDB를 지원하지 않는 브라우저에서는 WebSQL로 폴백한 다음 localStorage로 폴백합니다.
* Dexie.js: 멋지고 간단한 구문을 통해 훨씬 더 빠른 코드 개발을 허용하는 IndexedDB용 래퍼입니다
* ZangoDB: MongoDB의 익숙한 필터링, 프로젝션, 정렬, 업데이트 및 집계 기능을 대부분 지원하는 MongoDB와 유사한 IndexedDB용 인터페이스입니다.
* JsStore: SQL과 같은 구문을 사용하는 IndexedDB 래퍼입니다.
* MiniMongo: http를 통한 서버 동기화와 함께 localstorage에서 지원하는 클라이언트 측 in-memory mongodb입니다. MiniMongo는 MeteorJS에서 사용됩니다.
* PouchDB: IndexedDB를 사용하여 브라우저에서 CouchDB의 클라이언트 측을 구현한 라이브러리입니다.
* idb: IndexedDB API를 대부분 미러링하는 작은(~1.15k) 라이브러리이지만 사용성에 큰 차이를 만드는 작은 개선 사항이 있습니다.
* idb-keyval: IndexedDB로 구현된 매우 간단하고 작은(~600B) promise 기반 keyval 저장소입니다.
* sifrr-storage: 클라이언트 측 키-값 저장을 위한 작은(~2kB) promise 기반 라이브러리입니다. IndexedDB, localStorage, WebSQL, 쿠키와 함께 작동합니다. 우선 순위에 따라 사용 가능한 지원 스토리지를 자동으로 사용할 수 있습니다.
* lovefield: Lovefield는 웹 앱을 위한 관계형 데이터베이스입니다. JavaScript로 작성되었으며 크로스 브라우저에서 작동합니다. 빠르고 안전하며 사용하기 쉬운 SQL과 유사한 API를 제공합니다.
* $mol\_db: 작고 (~1.3kB) 정적 타입 유형의 promise 기반 API와 자동 마이그레이션의 기능이 있는 라이브러리입니다.


Attr - Web API

Attr
====

**`Attr`** 인터페이스는 요소의 속성 중 하나를 객체로 나타냅니다. 대부분의 경우 속성 값을 문자열로 직접 검색하지만(예: `Element.getAttribute()` (en-US)), 특정 함수(예: `Element.getAttributeNode()` (en-US))나 반복을 통해서는 `Attr` 인스턴스를 반환합니다.

EventTarget

Node

(en-US)

Attr
`Attr` 객체의 핵심 개념은 '이름'과 '값'의 연관성입니다. 또한 속성은 '네임스페이스'의 일부인 경우가 있는데 이때는 네임스페이스를 식별하는 URI와 네임스페이스의 약어인 접두사를 가집니다.

이름은 네임스페이스 접두사를 무시하면 로컬로, 네임스페이스 내의 속성을 포함하면(콜론(`:`)으로 로컬 이름과 구분된 경우도) 한정(*qualified*)된 것으로 간주됩니다. 네임스페이스 외부의 속성, 접두사가 정의되지 않은 네임스페이스 내부의 속성, 접두사가 있는 네임스페이스 내부의 속성과 같은 다음 세 가지 경우로 나눌 수 있습니다.

| 속성 | 네임스페이스 이름 | 네임스페이스 접두사 | 속성 로컬 이름 | 한정된 속성 이름 |
| --- | --- | --- | --- | --- |
| `myAttr` | *none* | *none* | `myAttr` | `myAttr` |
| `myAttr` | `mynamespace` | *none* | `myAttr` | `myAttr` |
| `myAttr` | `mynamespace` | `myns` | `myAttr` | `myns:myAttr` |

**참고:** 이 인터페이스는 SVG, HTML 그리고 MathML 요소의 트리 표현에 존재하는 속성만 나타냅니다.

`<table>` (en-US) 요소에 대한 `HTMLTableElement` 인터페이스의 속성을 나타내지 않습니다. (속성에 대한 자세한 내용은 이 문서를 참고하세요.)

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

이 인터페이스는 상위 인터페이스인 `Node` (en-US)와 `EventTarget`의 속성도 상속합니다.

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

속성의 한정된 이름의 로컬 부분을 나타내는 문자열입니다.

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

속성의 한정된 이름을 나타내는 문자열입니다. 속성이 네임스페이스에 속하지 않은 경우 `localName` (en-US) 속성과 동일합니다.

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

속성의 네임스페이스 URI를 나타내는 문자열입니다. 네임스페이스가 없는 경우 `null`입니다.

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

속성이 속한 `Element` (en-US)입니다.

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

속성의 네임스페이스 접두사를 나타내는 문자열입니다. 접두사가 없거나 네임스페이스가 없는 경우 `null`입니다.

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

이 속성은 항상 `true`를 반환합니다.

`value` (en-US)

이 속성을 사용하여 설정하고 가져올 수 있는 문자열인 속성의 값입니다.

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

이 인터페이스는 특정 메서드를 가지지 않지만, 상위 인터페이스인 `Node` (en-US)와 `EventTarget`의 메서드를 상속합니다.

명세
--

| Specification |
| --- |
| DOM Standard # interface-attr |

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

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

같이 보기
-----

* 다른 노드는 `CDATASection` (en-US), `CharacterData`, `Comment`, `Document`, `Element` (en-US), `ProcessingInstruction` (en-US), 그리고 `Text`가 있습니다.


HTMLSpanElement - Web API

HTMLSpanElement
===============

**`HTMLSpanElement`** 인터페이스는 `<span>` 엘리먼트를 나타내며 `HTMLElement` 인터페이스로부터 파생되었으며 부가적인 프로퍼티나 메소드는 구현되지 않았습니다.

프로퍼티
----

*특정 프로퍼티가 없으며, 부모인 `HTMLElement` 로부터 프로퍼티를 상속받습니다.*

메소드
---

*특정 메소드가 없으며, 부모인 `HTMLElement` 로부터 메소드를 상속받습니다.*

명세
--

| Specification |
| --- |
| HTML Standard # htmlspanelement |

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

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

함께 보기
-----

* 이 인터페이스를 구현한 HTML 엘리먼트: `<span>`.


ServiceWorker - Web API

ServiceWorker
=============

Service Worker API의 **`ServiceWorker`** 인터페이스는 서비스 워커로의 참조를 제공합니다. 다수의 브라우징 맥락(e.g. 페이지, 다른 워커, 등등)는 고유한 `ServiceWorker` 객체를 통해 동일한 서비스 워커와 연결할 수 있습니다.

`ServiceWorker` 객체는 `ServiceWorkerRegistration.active` 속성과 `ServiceWorkerContainer.controller` (en-US) 속성으로 접근할 수 있습니다. `controller`는 활성화되어 페이지를 통제 중인 서비스 워커입니다.

`ServiceWorker` 인터페이스에서는 일련의 생명주기 이벤트(`install`, `activate`)와 기능 이벤트(`fetch`)가 발생합니다. `ServiceWorker` 객체의 생명주기는 `ServiceWorker.state` (en-US) 속성이 담고 있습니다.

속성
--

`ServiceWorker` 인터페이스는 부모 `Worker`에서 속성을 상속합니다.

`ServiceWorker.scriptURL` (en-US) 읽기 전용

Returns the `ServiceWorker` serialized script URL defined as part of `ServiceWorkerRegistration` (en-US). The URL must be on the same origin as the document that registers the `ServiceWorker`.

`ServiceWorker.state` (en-US) 읽기 전용

Returns the state of the service worker. It returns one of the following values: `installing`, `installed,` `activating`, `activated`, or `redundant`.

### 이벤트 처리기

`ServiceWorker.onstatechange` 읽기 전용

An `EventListener` property called whenever an event of type `statechange` is fired; it is basically fired anytime the `ServiceWorker.state` (en-US) changes.

메서드
---

`ServiceWorker` 인터페이스는 부모 `Worker`에서 메서드를 상속합니다. 단, `Worker.terminate()`는 예외이며 서비스 워커에서 접근할 수 없습니다.

예제
--

This code snippet is from the service worker registration-events sample (live demo). The code listens for any change in the `ServiceWorker.state` (en-US) and returns its value.

```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("service-worker.js", {
      scope: "./",
    })
    .then(function (registration) {
      var serviceWorker;
      if (registration.installing) {
        serviceWorker = registration.installing;
        document.querySelector("#kind").textContent = "installing";
      } else if (registration.waiting) {
        serviceWorker = registration.waiting;
        document.querySelector("#kind").textContent = "waiting";
      } else if (registration.active) {
        serviceWorker = registration.active;
        document.querySelector("#kind").textContent = "active";
      }
      if (serviceWorker) {
        // logState(serviceWorker.state);
        serviceWorker.addEventListener("statechange", function (e) {
          // logState(e.target.state);
        });
      }
    })
    .catch(function (error) {
      // Something went wrong during registration. The service-worker.js file
      // might be unavailable or contain a syntax error.
    });
} else {
  // The current browser doesn't support service workers.
}
```

명세
--

| Specification |
| --- |
| Service Workers # serviceworker-interface |

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

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

같이 보기
-----

* ServiceWorker Cookbook
* Using Service Workers (en-US)
* Service worker basic code example
* Is ServiceWorker ready?
* `Promise`
* Using web workers (en-US)


setTimeout() - Web API

setTimeout()
============

전역 **`setTimeout()`** 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다.

구문
--

```js
var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = setTimeout(function[, delay]);
var timeoutID = setTimeout(code[, delay]);
```

### 매개변수

`function`

타이머가 만료된 뒤 실행할 `function`입니다.

`code`

함수 대신 문자열을 지정하는 대체 구문으로, 타이머가 만료될 때 코드로 컴파일 후 실행합니다. `eval()`이 보안 취약점인 것과 같은 이유로 **사용을 권장하지 않습니다**.

`delay` Optional

주어진 함수 또는 코드를 실행하기 전에 기다릴 밀리초 단위 시간입니다. 생략하거나 0을 지정할 경우 "즉시", 더 정확히는 다음 이벤트 사이클에 실행한다는 뜻입니다. 그러나 실제 딜레이는 의도했던 것보다 더 길 수 있습니다. 아래의 딜레이가 지정한 값보다 더 긴 이유를 참고하세요.

`arg1, ..., argN` Optional

`function`에 전달할 추가 매개변수입니다.

### 반환 값

반환하는 `timeoutID`는 양의 정수로서 `setTimeout()`이 생성한 타이머를 식별할 때 사용합니다. 이 값을 `clearTimeout()`에 전달하면 타이머를 취소할 수 있습니다.

같은 객체(`window`, 워커 등)에서 반복해 호출하는 `setTimeout()` 또는 `setInterval()` 메서드는 절대 같은 `timeoutID`를 사용하지 않습니다. 그러나 다른 객체끼리는 다른 ID 풀을 사용합니다.

설명
--

`clearTimeout()`으로 타이머를 취소할 수 있습니다.

어떤 함수를 몇 밀리초마다 반복적으로 호출해야 할 필요가 있으면 `setInterval()`을 사용하세요.

### 비동기 함수로 작업하기

`setTimeout()`은 비동기 함수로서, 함수 스택의 다른 함수 호출을 막지 않습니다. 달리 말하자면, `setTimeout()`을 사용해서 다음 함수 호출을 "일시정지" 할 수는 없습니다.

다음 예제를 살펴보세요.

```js
setTimeout(() => {
  console.log("첫 번째 메시지");
}, 5000);
setTimeout(() => {
  console.log("두 번째 메시지");
}, 3000);
setTimeout(() => {
  console.log("세 번째 메시지");
}, 1000);

// 콘솔 출력:

// 세 번째 메시지
// 두 번째 메시지
// 첫 번째 메시지
```

첫 번째 `setTimeout()` 호출이 두 번째 호출 전에 5초의 "정지" 구간을 만들지 않음에 주의하세요. 그 대신, 위 코드는 첫 함수 실행을 5초간 대기하는 동시에 두 번째 함수 실행을 3초간 대기하고, 다시 동시에 세 번째 함수의 실행도 1초간 대기합니다. 그 후 1초가 지나면 첫 함수와 두 번째 함수 모두 아직 타이머가 끝나지 않았기 때문에 세 번째 함수 먼저 실행됩니다. 그 후에 두 번째, 그리고 마지막으로 첫 번째 함수가 각자의 타이머 만료 후 실행됩니다.

함수의 실행이 완료된 후에 다른 함수를 호출하는 구조가 필요하면 프로미스 문서를 살펴보세요.

### "this" 문제

`setTimeout()`에 메서드를 지정할 경우, 내부의 `this` 값이 예상과 다를 수도 있습니다. 이 문제에 대한 일반적인 설명은 JavaScript
참고서가 자세히 설명합니다.

`setTimeout()`이 실행하는 코드는 `setTimeout()`을 호출했던 함수와는 다른 실행 맥락에서 호출됩니다. 호출 함수의 `this` 키워드 값을 설정하는 일반적인 규칙이 여기서도 적용되며, `this`를 호출 시 지정하지도 않았고 `bind`로 바인딩하지도 않은 경우 기본 값인 `window` (또는 `global`) 객체를 가리키게 됩니다. 따라서 `setTimeout()`을 호출한 함수의 `this` 값과는 다르게 되는 것입니다.

다음 코드를 살펴보세요.

```js
const myArray = ["zero", "one", "two"];
myArray.myMethod = function (sProperty) {
  console.log(arguments.length > 0 ? this[sProperty] : this);
};

myArray.myMethod(); // "zero,one,two" 기록
myArray.myMethod(1); // "one" 기록
```

위의 코드는 `myMethod`를 호출할 때, 호출로 인해 `this`가 `myArray`로 설정되기 때문에 정상적으로 동작합니다. `this[sProperty]`가 `myArray[sProperty]`와 동일함을 확인하세요. 그러나, 다음의 코드도 살펴보세요.

```js
setTimeout(myArray.myMethod, 1.0 \* 1000); // 1초 후 "[object Window]" 기록
setTimeout(myArray.myMethod, 1.5 \* 1000, "1"); // 1.5초 후 "undefined" 기록
```

`myArray.myMethod`를 `setTimeout`에 전달했고, 타이머 만료 후 호출 시점에 `this`가 따로 설정되지 않으므로 기본 값인 `window` 객체를 가리키게 돼 정상적인 동작을 하지 않습니다.

`forEach()`와 `reduce()` 등 `Array`의 메서드와는 달리 `setTimeout()`에는 `thisArg`를 설정할 수 있는 방법 또한 존재하지 않습니다. 그리고 `call`을 사용해 `this`를 설정하는 것 역시 작동하지 않습니다.

```js
setTimeout.call(myArray, myArray.myMethod, 2.0 \* 1000); // 오류
setTimeout.call(myArray, myArray.myMethod, 2.5 \* 1000, 2); // 같은 오류
```

#### 해결법

##### 함수 감싸기

이 문제를 해결할 때 자주 사용하는 방법 중 하나는 `this`를 설정할 수 있도록 함수를 다른 함수로 감싸는 것입니다.

```js
setTimeout(function () {
  myArray.myMethod();
}, 2.0 \* 1000); // 2초 후 "zero,one,two" 기록
setTimeout(function () {
  myArray.myMethod("1");
}, 2.5 \* 1000); // 2.5초 후 "one" 기록
```

화살표 함수로 감쌀 수도 있습니다.

```js
setTimeout(() => {
  myArray.myMethod();
}, 2.0 \* 1000); // 2초 후 "zero,one,two" 기록
setTimeout(() => {
  myArray.myMethod("1");
}, 2.5 \* 1000); // 2.5초 후 "one" 기록
```

##### bind() 사용하기

다른 방법으로는 `bind()`를 사용해서 주어진 함수의 모든 호출에서 `this` 값을 설정하는 것입니다.

```js
const myArray = ["zero", "one", "two"];
const myBoundMethod = function (sProperty) {
  console.log(arguments.length > 0 ? this[sProperty] : this);
}.bind(myArray);

myBoundMethod(); // "zero,one,two" 기록, this가 myArray에 바인딩됐기 때문
myBoundMethod(1); // "one" 기록
setTimeout(myBoundMethod, 1.0 \* 1000); // 1초 후, 바인딩으로 인해 여전히 "zero,one,two" 기록
setTimeout(myBoundMethod, 1.5 \* 1000, "1"); // 1.5초 후 "one" 기록
```

### 문자열 리터럴 지정하기

`setTimeout()`에 함수 대신 문자열을 지정하는 것은 `eval()`을 사용하는 것과 같은 문제를 가집니다.

```js
// 하지 마세요
setTimeout("console.log('Hello World!');", 500);
```

```js
// 이렇게 사용하세요
setTimeout(function () {
  console.log("Hello World!");
}, 500);
```

`setTimeout()`에 전달한 문자열은 전역 맥락에서 평가되므로, `setTimeout()` 호출 시점에 접근 가능했던 로컬 심볼은 문자열 평가 시점에서는 접근 불가능합니다.

### 딜레이가 지정한 값보다 더 긴 이유

지정한 타임아웃 값보다 실행에 긴 시간이 걸리는 이유에는 여러가지가 있습니다. 여기서는 가장 흔한 상황을 설명하겠습니다.

#### 중첩 타임아웃

HTML 표준에 명시된 것과 같이, 브라우저는 `setTimeout` 호출이 5번 이상 중첩된 경우 4ms의 최소 타임아웃을 강제합니다.

다음 예제에서 이 동작을 확인할 수 있습니다. 딜레이로 `0`을 지정한 `setTimeout`을 여러 번 중첩하고, 각각의 콜백이 실제로 호출되기까지의 딜레이를 기록하는데, 첫 네 번 까지는 대략 0ms에 근접하지만, 그 이후로는 4ms에 근접함을 볼 수 있습니다.

```html
<button id="run">시작</button>
<pre>이전        현재         실제 딜레이</pre>
<div id="log"></div>
```

```js
let last = 0;
let iterations = 10;

function timeout() {
  // log the time of this call
  logline(new Date().getMilliseconds());

  // if we are not finished, schedule the next call
  if (iterations-- > 0) {
    setTimeout(timeout, 0);
  }
}

function run() {
  // clear the log
  const log = document.querySelector("#log");
  while (log.lastElementChild) {
    log.removeChild(log.lastElementChild);
  }

  // initialize iteration count and the starting timestamp
  iterations = 10;
  last = new Date().getMilliseconds();

  // start timer
  setTimeout(timeout, 0);
}

function pad(number) {
  return number.toString().padStart(3, "0");
}

function logline(now) {
  // log the last timestamp, the new timestamp, and the difference
  const newLine = document.createElement("pre");
  newLine.textContent = `${pad(last)} ${pad(now)} ${
 now - last
 }`;
  document.getElementById("log").appendChild(newLine);
  last = now;
}

document.querySelector("#run").addEventListener("click", run);
```

#### 비활성 탭의 타임아웃

백그라운드 탭으로 인한 부하(와 그로 인한 배터리 사용량)를 경감하기 위해, 브라우저는 비활성 탭에서의 최소 딜레이에 최소 값을 강제합니다. 또한 Web Audio API `AudioContext`를 사용해 소리를 재생 중일 땐 이 최소 값 정책이 면제될 수도 있습니다.

정확한 동작은 브라우저에 따라 다릅니다.

* Firefox Desktop과 Chrome 모두 비활성 탭에 최소 1초의 타임아웃을 강제합니다.
* Firefox Android에서는 15분의 최소 타임아웃이 존재하고, 탭 전체를 언로드하는 경우도 있습니다.
* Firefox는 비활성 탭이 `AudioContext`를 포함하는 경우 최소 타임아웃을 강제하지 않습니다.

#### 추적 스크립트 스로틀링

Firefox는 추적 스크립트로 인식한 스크립트에 대해 추가 스로틀링을 적용합니다. 전역 탭의 경우 스로틀링의 최소 딜레이는 여전히 4ms지만, 백그라운드 탭에서는 페이지의 첫 로드 이후 30초가 지나면 10,000ms, 또는 10초의 스로틀링을 적용합니다.

추적 방어 문서에서 자세한 정보를 알아보세요.

#### 늦은 타임아웃

페이지, 운영체제, 브라우저가 다른 작업으로 인해 바쁠 경우 타임아웃이 예상보다 늦게 실행될 수 있습니다. 한 가지 중요한 점은, `setTimeout()`을 호출한 스레드가 종료되기 전에는 지정한 함수 또는 코드 조각을 실행할 수 없다는 것입니다.

```js
function foo() {
  console.log("foo 호출");
}
setTimeout(foo, 0);
console.log("setTimeout 완료");
```

위 코드의 콘솔 기록 결과는 다음과 같습니다.
```

setTimeout 완료
foo 호출
```

이렇게 되는 이유는, `setTimeout`을 0의 딜레이로 호출하기는 했으나, 이는 지정한 함수를 대기열에 넣고 가능한 바로 다음 기회에 실행하라는 것과 같으며 즉시 호출하라는 것은 아니기 때문입니다. 대기열의 함수를 실행하려면 현재 실행 중인 코드가 반드시 먼저 완료돼야 하므로, 실제 실행 결과는 예상하던 것과 다를 수 있습니다.

#### 페이지 로드 중 타임아웃 지연

Firefox는 현재 탭이 로딩 중일 땐 `setTimeout()` 타이머 실행을 지연시킵니다. 실제 실행은 메인 스레드가 대기 상태에 들어가기 전까지(`window.requestIdleCallback()`과 비슷), 또는 `load` 이벤트가 발생하기 전까지 미뤄집니다.

### WebExtension 백그라운드 페이지와 타이머

WebExtensions에서는 `setTimeout()`을 신뢰할 수 없습니다. 확장 개발자는 `setTimeout()` 대신 `alarms` (en-US) API를 사용해야 합니다.

### 최대 딜레이

Internet Explorer, Chrome, Safari, Firefox를 포함한 브라우저는 딜레이를 내부적으로 32비트 부호 있는 정수 값으로 저장합니다. 따라서 2,147,483,647ms(약 24.8일)보다 큰 값을 지정하면 정수 오버플로가 발생해서 타이머가 즉시 만료됩니다.

예제
--

### 타임아웃 설정 및 해제

다음 예제는 웹 페이지에 두 개의 간단한 버튼을 추가하고, 각각 `setTimeout()`과 `clearTimeout()`을 실행하도록 합니다. 첫 번째 버튼을 누르면 2초 뒤 메시지가 나타나는 타이머를 설정하고, `clearTimeout()`에서 사용할 수 있는 타임아웃 ID를 저장합니다. 두 번째 버튼을 누르면 첫 번째 버튼으로 설정한 타이머를 해제할 수 있습니다.

#### HTML

```html
<button onclick="delayedMessage();">2초 뒤 메시지 표시</button>
<button onclick="clearMessage();">메시지가 나타나기 전에 취소</button>

<div id="output"></div>
```

#### JavaScript

```js
let timeoutID;

function setOutput(outputContent) {
  document.querySelector("#output").textContent = outputContent;
}

function delayedMessage() {
  setOutput("");
  timeoutID = setTimeout(setOutput, 2 \* 1000, "너무 느려요!");
}

function clearMessage() {
  clearTimeout(timeoutID);
}
```

```
#output {
  padding: 0.5rem 0;
}
```

#### 결과

`clearTimeout()` 예제도 확인해보세요.

명세
--

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

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

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

같이 보기
-----

* `core-js`의 콜백 매개변수 지원 폴리필
* `clearTimeout`
* `setInterval()`
* `window.requestAnimationFrame`
* `queueMicrotask()`


EventTarget - Web API

EventTarget
===========

**`EventTarget`** 인터페이스는 이벤트를 수신할 수 있고, 수신한 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 인터페이스입니다. 즉, 이벤트의 대상이 될 수 있는 객체는 `EventTarget`의 세 메서드를 구현합니다.

`Element` (en-US), `Document`, `Window`가 가장 흔한 이벤트 대상이며, 이외에도 `XMLHttpRequest`, `AudioNode`, `AudioContext` 등의 객체도 이벤트 대상입니다.

많은 이벤트 대상(요소, 문서, 창, ...)은 `onevent` 속성과 특성을 사용한 이벤트 처리기 (en-US) 등록도 지원합니다.

생성자
---

`EventTarget()`

새로운 `EventTarget` 객체 인스턴스를 생성합니다.

메서드
---

`EventTarget.addEventListener()`

`EventTarget`에 특정 이벤트 유형의 처리기를 등록합니다.

`EventTarget.removeEventListener()`

`EventTarget`에서 이벤트 수신기를 하나 제거합니다.

`EventTarget.dispatchEvent()`

`EventTarget`으로 이벤트를 발송합니다.

명세
--

| Specification |
| --- |
| DOM Standard # interface-eventtarget |

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

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

같이 보기
-----

* 이벤트 참고서 (en-US) - 웹 플랫폼에서 사용할 수 있는 이벤트 목록
* 이벤트 입문
* `Event` 인터페이스


clearTimeout() 전역 함수 - Web API

clearTimeout() 전역 함수
====================

전역 **`clearTimeout()`** 메서드는 `setTimeout()`으로 생성한 타임아웃을 취소합니다.

매개변수가 생성된 타임아웃들 중 무엇도 식별하지 못하면 아무 동작도 하지 않습니다.

구문
--

```js
clearTimeout(timeoutID)
```

### 매개변수

`timeoutID`

취소할 타임아웃의 식별자입니다. 이 ID는 취소할 타임아웃을 설정했던 `setTimeout()`이 반환한 값과 같아야 합니다.

`setTimeout()`과 `setInterval()`의 ID 풀이 공유된다는 사실을 참고하세요. 따라서 기술적으로는 `clearTimeout()`과 `clearInterval()` (en-US)을 혼용할 수 있습니다. 하지만 코드의 명확함을 위해 혼용하지 마세요.

### 반환 값

없음 (`undefined`).

예제
--

아래 스크립트를 웹 페이지 컨텍스트에서 실행하고, 페이지를 한 번 클릭하세요. 1초 후에 메시지가 나타납니다. 1초 안에 페이지를 여러 번 클릭해도 메시지는 한 번만 나타납니다.

```js
const alarm = {
  remind(aMessage) {
    alert(aMessage);
    this.timeoutID = undefined;
  },

  setup() {
    if (typeof this.timeoutID === "number") {
      this.cancel();
    }

    this.timeoutID = setTimeout(
      (msg) => {
        this.remind(msg);
      },
      1000,
      "일어나세요!",
    );
  },

  cancel() {
    clearTimeout(this.timeoutID);
  },
};
window.addEventListener("click", () => alarm.setup());
```

참고
--

`clearTimeout()`에 유효하지 않은 ID를 제공하면 아무것도 하지 않습니다. 예외도 발생하지 않습니다.

명세서
---

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

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

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

같이 보기
-----

* `setTimeout()`
* `setInterval()`
* `clearInterval()` (en-US)
* `Window.requestAnimationFrame()`


GeolocationCoordinates - Web API

GeolocationCoordinates
======================

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

**`GeolocationCoordinates`** 인터페이스는 지구상에서의 장치 위치와 고도, 그리고 이 정보들의 정확도를 나타냅니다.

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

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

`GeolocationCoordinates.latitude` 읽기 전용 Secure context

위치의 위도를 도(°) 단위의 `double`로 반환합니다.

`GeolocationCoordinates.longitude` 읽기 전용 Secure context

위치의 경도를 도(°) 단위의 `double`로 반환합니다.

`GeolocationCoordinates.altitude` 읽기 전용 Secure context

위치의 해발고도를 미터 단위의 `double`로 반환합니다. 구현체가 고도 데이터를 제공하지 못하면 `null`입니다.

`GeolocationCoordinates.accuracy` 읽기 전용 Secure context

`latitude`와 `longitude`의 오차범위를 미터 단위의 `double`로 반환합니다.

`GeolocationCoordinates.altitudeAccuracy` 읽기 전용 Secure context

`altitude`의 오차범위를 미터 단위의 `double`로 반환합니다. 이 값은 `null`일 수 있습니다.

`GeolocationCoordinates.heading` 읽기 전용 Secure context

장치가 향한 방위를 나타내는 `double`을 반환합니다. 진북(真北)에서 벗어난 각도를 도(°) 단위로 표현한 값으로, 진북인 `0`부터 시계방향(동쪽은 `90`도, 서쪽은 `270`도)으로 나아갑니다. `speed`가 `0`이면 `heading`은 `NaN`입니다. 장치가 `heading`을 제공하지 못하면 `null`입니다.

`GeolocationCoordinates.speed` 읽기 전용 Secure context

장치의 속도를 초속 미터 단위의 `double`로 반환합니다. 이 값은 `null`일 수 있습니다.

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

`GeolocationCoordinates` 인터페이스는 어떤 메서드도 상속하거나 구현하지 않습니다.

명세서
---

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

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

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

같이 보기
-----

* Geolocation API 사용하기
* `Geolocation`


structuredClone() 전역 함수 - Web API

structuredClone() 전역 함수
=======================

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

Newly availableSince March 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
전역 **`structuredClone()`** 메서드는 structured clone 알고리즘을 사용하여 주어진 값의 깊은 복사를 생성합니다.

또한, 이 메서드는 새 객체로 복사하는 대신 원래 값에서 전송가능한 객체 (en-US)를 전송될 수 있도록 합니다. 전송된 객체는 원래 객체로부터 분리되고 새 객체로 연결됩니다. 더 이상 원래 객체에 접근할 수 없게 됩니다.

구문
--

```js
structuredClone(value)
structuredClone(value, options)
```

### 매개변수

`value`

 복제된 객체.
 이것은 모든 구조화된 복제 가능한 타입일 수 있습니다.

`options` Optional

다음 속성들을 가진 객체.

`transfer`

반환된 객체로 복제되는 대신 이동될 전송가능한 객체 (en-US)의 배열

### 반환 값

반환 값은 원래 `value`의 깊은 복사입니다.

### 예외

`DataCloneError` `DOMException` (en-US)

입력 값의 일부라도 직렬화될 수 없는 경우 예외를 던집니다.

설명
--

 이 함수는 JavaScript 값을 깊은 복사하는데 사용될 수 있습니다.
 또한, 아래와 같이 순환 참조도 지원합니다.

```js
// 값과 스스로를 순환 참조하는 객체 생성
const original = { name: "MDN" };
original.itself = original;

// 복제
const clone = structuredClone(original);

console.assert(clone !== original); // 동일하지 않은 객체 (같지 않은 동일성)
console.assert(clone.name === "MDN"); // 같은 값을 가집니다.
console.assert(clone.itself === clone); // 순환 참조가 보존됩니다.
```

### 값 전송

`options` 매개변수의 `transfer` 속성을 사용하여 복제된 객체에서 복제되는 대신 전송가능한 객체 (en-US)가 전송될 수 있습니다. 전송하면 원래 객체를 사용할 수 없게 됩니다.

>
>
> **참고 사항** 버퍼의 일부 데이터를 저장하기 전에 비동기적으로 검사할 때 유용할 수 있습니다.
>  데이터가 저장되기 전에 버퍼가 수정되는 것을 피하기 위해 버퍼를 복제하고 해당 데이터를 검사할 수 있습니다.
>  데이터를 전송하면, 원래 버퍼를 수정하려는 시도들은 실패하여 실수로 잘못 사용하는 것을 방지합니다.
>
>
>
>

 다음 코드는 배열을 복제하고 해당 기본 자원을 새 객체로 전송하는 방법을 보여줍니다.
 반환 시 원래의 `uInt8Array.buffer`은 지워집니다.

```js
// 16MB = 1024 \* 1024 \* 16
const uInt8Array = Uint8Array.from({ length: 1024 \* 1024 \* 16 }, (v, i) => i);

const transferred = structuredClone(uInt8Array, {
  transfer: [uInt8Array.buffer],
});
console.log(uInt8Array.byteLength); // 0
```

 객체 수에 상관없이 복제하고 해당 객체의 하위 집합을 전송할 수 있습니다.
 예를 들어, 아래 코드는 전달된 값에서 `arrayBuffer1`은 전송하지만, `arrayBuffer2`는 전송하지 않습니다.

```js
const transferred = structuredClone(
  { x: { y: { z: arrayBuffer1, w: arrayBuffer2 } } },
  { transfer: [arrayBuffer1] },
);
```

예제
--

### 객체 복제

이번 예제에서, 배열을 멤버로 가진 객체를 복제합니다. 복제 후, 각 객체에 대한 변경은 다른 객체에 영향을 주지 않습니다.

```js
const mushrooms1 = {
  amanita: ["muscaria", "virosa"],
};

const mushrooms2 = structuredClone(mushrooms1);

mushrooms2.amanita.push("pantherina");
mushrooms1.amanita.pop();

console.log(mushrooms2.amanita); // ["muscaria", "virosa", "pantherina"]
console.log(mushrooms1.amanita); // ["muscaria"]
```

### 객체 전송

이번 예제에서는 `ArrayBuffer`를 생성한 다음 그것을 멤버로 가지는 객체를 복제하여 버퍼를 전송합니다. 복제된 객체에서 버퍼를 사용할 수 있지만, 원래 버퍼를 사용하려고 하면 예외가 발생합니다.

```js
// 바이트 크기의 ArrayBuffer 생성
const buffer1 = new ArrayBuffer(16);

const object1 = {
  buffer: buffer1,
};

// 버퍼를 포함하여 객체를 복제하고 전송
const object2 = structuredClone(object1, { transfer: [buffer1] });

// 복제된 버퍼에서 배열 생성
const int32View2 = new Int32Array(object2.buffer);
int32View2[0] = 42;
console.log(int32View2[0]);

// 원래 버퍼에서 배열을 생성하면 TypeError가 발생합니다.
const int32View1 = new Int32Array(object1.buffer);
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-structuredclone |

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

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

같이 보기
-----

* `structuredClone` 폴리필 is available in `core-js`
* Structured clone 알고리즘
* Structured clone 폴리필


Network Information API - Web API

Network Information API
=======================

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

네트워크 정보 API는 사용자 기기의 현재 대역폭이나 과금이 되는 연결인지와 같은 시스템의 연결 정보를 알려줍니다. 이를 이용해서 사용자에게 높은 용량의 콘텐츠를 제공할지 낮은 용량의 콘텐츠를 제공할지 사용자의 연결 상태에 따라서 제공할 수 있습니다. 전체 API는 DOM에 추가된 단일한 객체로 구성되어 있습니다: `window.navigator.connection`.

연결상태 변경 감지
----------

이 예제는 사용자의 연결상태 변화를 감시합니다. 사용자가 비싼 망에서 싼 망으로 이동할 때 사용자가 추가적인 비용을 지불하지 않게 하기 위해서 전송량을 감소시키는 등과 같은 행동을 할 수 있게 앱이 경고를 하는 일과 비슷합니다.

```js
var connection =
  navigator.connection || navigator.mozConnection || navigator.webkitConnection;

function updateConnectionStatus() {
  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
  if (connection.metered) {
    alert("The connection is metered!");
  }
}

connection.addEventListener("change", updateConnectionStatus);
updateConnectionStatus();
```

명세
--

| Specification |
| --- |
| Network Information API # networkinformation-interface |
| Network Information API # connection-attribute |

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

### api.NetworkInformation

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

### api.Navigator.connection

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

같이 보기
-----

* Online and offline events
* `window.navigator.connection`


File API - Web API

File API
========

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

File API를 사용하면 웹 애플리케이션이 파일과 그 콘텐츠에 접근할 수 있습니다.

웹 애플리케이션은 사용자가 파일 `<input>` 요소를 사용하거나 드래그 앤드 드롭을 통해 파일을 사용할 수 있도록 설정하면 파일에 접근할 수 있습니다.

이러한 방식으로 제공되는 파일 세트는 웹 애플리케이션에서 개별 `File` 객체를 검색할 수 있는 `FileList` 객체로 표시됩니다. `File` 객체는 파일의 이름, 크기, 유형, 마지막 수정 날짜 등의 메타데이터에 대한 접근을 제공합니다.

`File` 객체를 `FileReader` 객체에 전달하여 파일 내용에 접근할 수 있습니다. `FileReader` 인터페이스는 비동기식이지만 웹 워커에서만 사용할 수 있는 동기식 버전은 `FileReaderSync` (en-US) 인터페이스에서 제공됩니다.

인터페이스
-----

`Blob`

`Blob`은 "이진 대용량 객체(Binary Large Object)"를 나타내며, 텍스트 또는 이진 데이터로 읽거나 해당 메서드를 사용하여 데이터를 처리할 수 있도록 `ReadableStream`으로 변환할 수 있습니다.

`File`

파일에 대한 정보를 제공하고 웹 페이지의 Javascript가 해당 콘텐츠에 접근할 수 있도록 허용합니다.

`FileList`

`<input>` (en-US) 요소의 `files` 속성으로 반환되며, 이를 통해 `<input type="file">` 요소로 선택한 파일 목록에 접근할 수 있습니다. 또한 드래그 앤드 드롭 API를 사용할 때 웹 콘텐츠에 끌어다 놓은 파일 목록에도 사용됩니다. 이 사용법에 대한 자세한 내용은 `DataTransfer` 객체를 참조하세요.

`FileReader`

웹 애플리케이션이 `File` 또는 `Blob` 객체를 사용하여 읽을 파일 또는 데이터를 지정하여 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기적으로 읽을 수 있도록 합니다.

`FileReaderSync` (en-US)

웹 애플리케이션이 `File` 또는 `Blob` 객체를 사용하여 읽을 파일 또는 데이터를 지정하여 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 동기적으로 읽을 수 있도록 합니다.

### 다른 인터페이스로의 확장

`URL.createObjectURL()`

`File` 또는 `Blob` 객체를 가져오는 데 사용할 수 있는 URL을 만듭니다.

`URL.revokeObjectURL()`

이전에 `URL.createObjectURL()`을 호출하여 생성한 기존 개체 URL을 해제합니다.

예제
--

### 파일 읽기

이 예제에서는 파일 `<input>` 요소를 제공하고, 사용자가 파일을 선택하면 선택한 첫 번째 파일의 내용을 텍스트로 읽고 그 결과를 `<div>` (en-US)에 표시합니다.

#### HTML

```html
<input type="file" />
<div class="output"></div>
```

#### CSS

```css
.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}
```

#### JavaScript

```js
const fileInput = document.querySelector("input[type=file]");
const output = document.querySelector(".output");

fileInput.addEventListener("change", async () => {
  const [file] = fileInput.files;

  if (file) {
    output.innerText = await file.text();
  }
});
```

### 결과

명세서
---

| Specification |
| --- |
| File API  |

같이 보기
-----

* `<input type="file">`: 파일 input 요소
* `text() method` (en-US): .text()
* `DataTransfer` 인터페이스


AudioBufferSourceNode - Web API

AudioBufferSourceNode
=====================

**`AudioBufferSourceNode`** 의 오디오 소스는 in-memory 의 `AudioNode` 상에 저장된 데이터로 구성되어있다. 이는 오디오 소스 그 자체처럼 동작을 한다.

`AudioBufferSourceNode` 는 입력정보를 가지지 않고 정확히 하나의 출력정보를 가진다. 출력상의 여러 채널은 `AudioBufferSourceNode.buffer` 프로퍼티로로 동작할 `AudioBuffer` 의 채널의 수와 일치한다. 만약에 `AudioBufferSourceNode.buffer`가 `null`이라면 출력은 오직 무음으로 출력이된다. `AudioBufferSourceNode`는 오직 한번만 재생이 된다. 즉 `AudioBufferSourceNode.start()`가 한번만 호출될수 있다. 만약에 한번더 재생하기를 원한다면 또 다른 `AudioBufferSourceNode`를 생성해야 한다. 이 노드는 매우 간편히 생성가능하다. `AudioBuffer`는 다른 곳에서 접근해 재생이 가능하다. `AudioBufferSourceNode`s는 "fire and forget(쓰고 잊자)" 처럼 한번 쓰고 나면 해당노드의 모든 참조들이 없어지고 자동적으로 가비지 콜렉터로 가게된다.

여러번 실행을 하면 `AudioBufferSourceNode.stop()`을 통해 정지가 가능하다. 가장 최근의 실행된것이 이전의 것으로 대체가 되어 `AudioBufferSourceNode`버퍼의 마지막에 도착하지 않은 상태가 된다.

![The AudioBufferSourceNode takes the content of an AudioBuffer and m](/ko/docs/Web/API/AudioBufferSourceNode/webaudioaudiobuffersourcenode.png)

| Number of inputs | `0` |
| --- | --- |
| Number of outputs | `1` |
| Channel count | defined by the associated `AudioBuffer` |

Properties
----------

*`AudioNode`* 를 부모로 가지는 프로퍼티.

`AudioBufferSourceNode.buffer` (en-US)

`AudioBuffer` 의 음원이 재생이 되거나 값이 NULL 이라면 채널하나을 무음으로 정의한다.

`AudioBufferSourceNode.playbackRate` (en-US) 읽기 전용

`AudioParam`에는 두개의 파라메터가 있는 데 그중의 하나인 a-rate을 재생이될 정보의 속도요소로 정의 한다. 출력에 수정된 음의 보정이 있지않으므로 이 는 샘플의 음을 변경하는데 사용이 가능하다.

`AudioBufferSourceNode.loop` (en-US)

Boolean값으로 음원이 재생되어 `AudioBuffer`의 끝에 다달했음을 알리는 값이다. false를 기본값으로 가진다.

`AudioBufferSourceNode.loopStart` (en-US)

double값으로 `AudioBuffer`가 재시작이 되는 경우 반드시 발생한다. 기본값은 0이다.

`AudioBufferSourceNode.loopEnd` (en-US)

double값으로 `AudioBuffer`가 다시 재생이 되는 경우 재생을 멈춰야 한다(그리고 결국에는 다시 시작한다). 기본값은 0이다.

### Event handlers

`AudioBufferSourceNode.onended` (en-US)

event handlers로 ended 이벤트와 연관된 콜백함수를 가진다.

Methods
-------

*`AudioNode`* 를 부모로 가지는 매서드.

`AudioBufferSourceNode.start()` (en-US)

음원이 재생되는 시작되는 시점.

`AudioBufferSourceNode.stop()` (en-US)

음원이 재생되는 끝나는 시점.

Examples
--------

이 예제는 two-second buffer를 생성하여 화이트 노이즈로 채워 이를 `AudioBufferSourceNode을 통해 재생한다.`

**참고:** You can also run the code live, or view the source.

```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var button = document.querySelector("button");
var pre = document.querySelector("pre");
var myScript = document.querySelector("script");

pre.innerHTML = myScript.innerHTML;

// Stereo
var channels = 2;
// Create an empty two-second stereo buffer at the
// sample rate of the AudioContext
var frameCount = audioCtx.sampleRate \* 2.0;

var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);

button.onclick = function () {
  // Fill the buffer with white noise;
  //just random values between -1.0 and 1.0
  for (var channel = 0; channel < channels; channel++) {
    // This gives us the actual ArrayBuffer that contains the data
    var nowBuffering = myArrayBuffer.getChannelData(channel);
    for (var i = 0; i < frameCount; i++) {
      // Math.random() is in [0; 1.0]
      // audio needs to be in [-1.0; 1.0]
      nowBuffering[i] = Math.random() \* 2 - 1;
    }
  }

  // Get an AudioBufferSourceNode.
  // This is the AudioNode to use when we want to play an AudioBuffer
  var source = audioCtx.createBufferSource();
  // set the buffer in the AudioBufferSourceNode
  source.buffer = myArrayBuffer;
  // connect the AudioBufferSourceNode to the
  // destination so we can hear the sound
  source.connect(audioCtx.destination);
  // start the source playing
  source.start();
};
```

**참고:** For a `decodeAudioData` example, see the `AudioContext.decodeAudioData` (en-US) page.

명세서
---

| Specification |
| --- |
| Web Audio API # AudioBufferSourceNode |

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

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

See also
--------

* Using the Web Audio API


웹 컴포넌트 - Web API

웹 컴포넌트
======

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다.

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

개발자로서 우리 모두는 가능한 한 코드를 재사용하는 것이 좋은 생각이라는 것을 알고 있습니다. 이는 전통적으로 커스텀 마크업 구조에선 쉽지 않았습니다. 커스텀 UI 컨트롤을 렌더링하기위해 작성해야하는 복잡한 HTML (및 관련된 스타일과 스크립트)을 생각해보십시오. 여러번 사용할 때 조심하지 않으면 페이지가 엉망이 될 수 있습니다.

웹 컴포넌트는 다음 문제들을 해결하는 것을 목표로 합니다 — 세 가지 주요 기술들로 구성되며, 재사용을 원하는 어느곳이든 코드 충돌에 대한 걱정이 없는 캡슐화된 기능을 갖춘 다용도의 커스텀 엘리먼트를 생성하기 위해 함께 사용될 수 있습니다.

* **Custom elements**: 사용자 인터페이스에서 원하는 대로 사용할 수 있는 사용자 정의 요소 및 해당 동작을 정의 할 수 있는 JavaScript API 세트입니다.
* **Shadow DOM**: 캡슐화된 "그림자" DOM 트리를 엘리먼트 — 메인 다큐먼트 DOM 으로부터 독립적으로 렌더링 되는 — 를 추가하고 연관된 기능을 제어하기 위한 JavaScript API 의 집합. 이 방법으로 엘리먼트의 기능을 프라이빗하게 유지할 수 있어, 다큐먼트의 다른 부분과의 충돌에 대한 걱정 없이 스크립트와 스타일을 작성할 수 있습니다.
* **HTML 템플릿**: `<template>` 과 `<slot>` 엘리먼트는 렌더링된 페이지에 나타나지 않는 마크업 템플릿을 작성할 수 있게 해줍니다. 그 후, 커스텀 엘리먼트의 구조를 기반으로 여러번 재사용할 수 있습니다.

웹 컴포넌트를 구현하기 위한 기본 접근법은 일반적으로 다음과 같습니다.

1. ECMAScript 2015 클래스 문법(자세한 내용은 Classes에서 확인)을 사용해 웹 컴포넌트 기능을 명시하는 클래스를 생성합니다.
2. `CustomElementRegistry.define()` (en-US) 메소드를 사용해 새로운 커스텀 엘리먼트를 등록하고, 정의할 엘리먼트 이름, 기능을 명시하고 있는 클래스, (선택적으로) 상속받은 엘리먼트를 전달합니다.
3. 필요한 경우, `Element.attachShadow()` (en-US) 메소드를 사용해 shadow DOM 을 커스텀 엘리먼트에 추가합니다. 일반적인 DOM 메소드를 사용해 자식 엘리먼트, 이벤트 리스너 등을 shadow DOM 에 추가합니다.
4. 필요한 경우, `<template>` 과 `<slot>` 을 사용해 HTML 템플릿을 정의합니다. 다시 일반적인 DOM 메소드를 사용해 템플릿을 클론하고 shadow DOM 에 추가합니다.
5. 일반적인 HTML 엘리먼트처럼, 페이지의 원하는 어느곳이든 커스텀 엘리먼트를 사용할 수 있습니다.
튜토리얼
----

커스텀 엘리먼트 사용하기

간단한 웹 컴포넌트를 생성하는 커스텀 엘리먼트의 기능을 사용하는 방법과 라이프사이클 콜백 및 그 외 고급 기능들을 보여주는 가이드입니다.

shadow DOM 사용하기

shadow DOM 기본을 살펴보고, shadow DOM 을 엘리먼트에 추가하고, shadow DOM 트리를 추가하고 스타일링하는 방법 등을 보여주는 가이드입니다.

템플릿과 슬롯 사용하기 (en-US)

`<template>` 과 `<slot>` 엘리먼트를 사용해 재사용가능한 HTML 구조를 정의하는 방법과 웹 컴포넌트 내에서 그 구조를 사용하는 방법을 보여주는 가이드입니다.

레퍼런스
----

### 커스텀 엘리먼트

`CustomElementRegistry`

커스텀 엘리먼트와 관련된 기능을 포함하며, 새로운 커스텀 엘리먼트를 등록하여 다큐먼트에서 사용할 수 있도록 해주는 `CustomElementRegistry.define()` (en-US) 메소드가 가장 주요합니다.

`Window.customElements`

`CustomElementRegistry` 객체에 대한 참조를 반환합니다.

라이프 사이클 콜백

커스텀 엘리먼트의 클래스 정의 내에 정의되어 동작에 영향을 주는 특별한 콜백 함수입니다.

* `connectedCallback`: 커스텀 엘리먼트가 처음으로 다큐먼트의 DOM 에 연결되었을 때 호출됩니다.
* `disconnectedCallback`: 커스텀 엘리먼트가 다큐먼트의 DOM 으로부터 연결 해제되었을 때 호출됩니다.
* `adoptedCallback`: 커스텀 엘리먼트가 새로운 다큐먼트로 이동되었을 때 호출됩니다.
* `attributeChangedCallback`: 커스텀 엘리먼트의 어트리뷰트가 추가, 제거 또는 변경되었을 때 호출됩니다.

커스텀 내장 엘리먼트 생성을 위한 확장 기능

The following extensions are defined:

* `is` 전역 HTML 어트리뷰트: 표준 HTML 엘리먼트가 등록된 커스텀 내장 엘리먼트처럼 동작하도록 지정을 허용합니다.
* `Document.createElement()` 메소드의 "is" 옵션: 주어진 등록된 커스텀 내장 엘리먼트처럼 동작하는 표준 HTML 엘리먼트의 인스턴스를 생성하는 것을 허용합니다.

CSS 수도(pseudo) 클래스

커스텀 엘리먼트에 관련된 수도 클래스입니다.

* `:defined`: 내장 엘리먼트와 `CustomElementRegistry.define()` 으로 정의된 커스텀 엘리먼트를 포함해, 정의된 모든 엘리먼트와 일치합니다.
* `:host` (en-US): 대상 CSS 를 내부에 포함하고 있는 shadow DOM 의 shadow 호스트를 선택합니다.
* `:host()` (en-US): 대상 CSS 를 내부에 포함하고 있는 shadow DOM 의 shadow 호스트를 선택합니다(따라서 shadow DOM 내부에서 커스텀 엘리먼트를 선택할 수 있습니다) — 함수의 파라미터로써 주어진 셀렉터가 shadow 호스트에 일치하는 경우에만 해당합니다.
* `:host-context()`: 대상 CSS 를 내부에 포함하고 있는 shadow DOM 의 shadow 호스트를 선택합니다(따라서 shadow DOM 내부에서 커스텀 엘리먼트를 선택할 수 있습니다) — 함수의 파라미터로써 주어진 셀렉터가 DOM 계층 내에 위치한 shadow 호스트의 조상에 일치하는 경우에만 해당합니다.

### Shadow DOM

`ShadowRoot` (en-US)

shadow DOM 하위 트리의 루트 노드를 나타냅니다.

`DocumentOrShadowRoot`

다큐먼트와 shadow 루트 모두에서 사용가능한 기능을 정의하는 믹스인

`Element` (en-US) 확장 기능

shadow DOM 에 관련된 `Element` 인터페이스의 확장 기능입니다.

* `Element.attachShadow()` (en-US) 메소드는 shadow DOM 트리를 지정된 엘리먼트에 추가합니다.
* `Element.shadowRoot` (en-US) 프로퍼티는 지정된 엘리먼트에 추가된 shadow 루트를 반환합니다. 추가된 shadow 루트가 없을 경우 `null` 을 반환합니다.

`Node` (en-US) 추가 관련

shadow DOM 과 관련된 `Node` 인터페이스에 추가

* `Node.getRootNode()` (en-US) 메소드는 사용 가능한 shadow 루트가 있을 경우 선택적으로 이를 포함하는 컨텍스트의 객체의 루트를 반환합니다.
* `Node.isConnected` (en-US) 프로퍼티는 노드가 직접 또는 간접적으로 컨텍스트 객체(예를 들면, 일반 DOM 의 경우 `Document` 객체, shadow DOM 의 경우 `ShadowRoot` (en-US))에 연결되었는지를 나타내는 boolean 을 반환합니다.

`Event` 확장 기능

shadow DOM 과 관련된 `Event` 인터페이스의 확장 기능

* `Event.composed` (en-US): 이벤트가 shadow DOM 영역을 거쳐 일반 DOM 으로 전파 되는지를 나타내는 `Boolean` 을 반환합니다(전파되면 `true`, 그렇지 않으면 `false`)
* `Event.composedPath` (en-US): 이벤트의 패스(이벤트가 호출될 객체)를 반환합니다. shadow 루트가 `ShadowRoot.mode` (en-US) closed 로 생성된경우 shadow 트리의 노드를 포함하지 않습니다.

### HTML 템플릿

`<template>`

다큐먼트가 처음 로드될 때 렌더링되지 않지만 JavaScript를 사용하는 런타임에 나타나는 HTML 조각을 포함합니다. 주로 커스텀 엘리먼트 구조의 기본으로 사용됩니다. 관련된 DOM 인터페이스로 `HTMLTemplateElement` 가 있습니다.

`<slot>`

자신만의 마크업으로 채울 수 있는 웹 컴포넌트 내부의 placeholder 입니다. 별도의 DOM 트리로 생성하고 함께 보여줄 수 있게 해줍니다. 관련된 DOM 인터페이스로 `HTMLSlotElement` (en-US) 가 있습니다.

`slot` 전역 HTML 어트리뷰트

shadow DOM shadow 트리내의 slot을 엘리먼트로 할당합니다.

`Slotable` (en-US)

`Element` (en-US) 와 `Text` 노드로 구현된 믹스인입니다. `<slot>` 엘리먼트의 컨텐츠로 만들기 위한 기능들을 정의합니다. 믹스인은 노드가 삽입된 슬롯의 참조를 반환하는 하나의 어트리뷰트 `Slotable.assignedSlot` (en-US) 을 정의합니다.

`Element` (en-US) 확장 기능

슬롯과 관련된 `Element` 인터페이스 확장 기능

* `Element.slot` (en-US): 엘리먼트에 추가된 shadow DOM 슬롯의 이름을 반환합니다.

CSS 수도(pseudo) 엘리먼트

슬롯과 관련된 수도 엘리먼트입니다.

* `::slotted` (en-US): 슬롯으로 삽입된 모든 컨텐츠와 일치합니다.

`slotchange` 이벤트

슬롯에 포함된 노드가 변경될 때 `HTMLSlotElement` (en-US) 인스턴스(`<slot>` 엘리먼트)에서 실행됩니다.

예제
--

web-components-examples GitHub 저장소에 많은 예제를 생성하였습니다. 더 많은 예제가 추가될 예정입니다.

명세서
---

| Specification |
| --- |
| HTML Standard # the-template-element |
| DOM Standard # interface-shadowroot |

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

일반적인 경우,

* 웹 컴포넌트는 기본적으로 Firefox (버전 63), Chrome, 및 Opera 에서 지원됩니다.
* Safari 는 많은 웹 컴포넌트 기능을 지원하지만 위 브라우저들만큼은 아닙니다.
* Edge 는 구현 작업중입니다.

특정 기능들의 브라우저 지원에 대한 상세 내용은, 위에 나열된 레퍼런스 페이지들에서 찾아보시기 바랍니다.

함께 보기
-----

* webcomponents.org — 웹 컴포넌트 예제, 튜토리얼 등의 정보를 포함하는 사이트.
* Hybrids — 오픈 소스 웹 컴포넌트 라이브러리. `class` 와 this 문법보다 일반 객체와 순수 함수를 선호합니다. 커스텀 엘리먼트 생성을 위한 간단한 함수형 API 를 제공합니다.
* Polymer — 구글의 웹 컴포넌트 프레임워크 — 폴리필, 확장 및 예제의 집합. 현재 크로스 브라우징 웹 컴포넌트를 사용하는 가장 쉬운 방법.
* Snuggsi.es — 폴리필 포함 ~1kB 크기의 쉬운 웹 컴포넌트 — 브라우저와 HTML, CSS, JavaScript 클래스에 대한 기본 이해만으로 생산성을 높일 수 있습니다.
* Slim.js — 오픈 소스 웹 컴포넌트 라이브러리 — 빠르고 쉬운 컴포넌트 작성을 위한 고성능 라이브러리; 확장 가능하며 플러거블하고 크로스 프레임워크와 호환됩니다.


AudioContext - Web API

AudioContext
============

`AudioContext` 인터페이스는 `AudioNode`에 의해 각각 표현되는, 함께 연결된 오디오 모듈로부터 만들어진 오디오 프로세싱 그래프를 표현합니다. 오디오 컨텍스트는 이것이 포함하는 노드의 생성과 오디오 프로세싱 혹은 디코딩의 실행 둘 다를 제어합니다. 여러분은 다른 무언가를 하기 전에 `AudioContext`를 생성할 필요가 있습니다. 왜냐하면 모든 것은 컨텍스트 내에서 발생하기 때문입니다. 매번 새로운 컨텍스트를 초기화하는 대신 하나의 AudioContext를 생성하고 재사용하는 것이 추천되며, 몇 개의 다른 오디오 소스에 대해 하나의 `AudioContext`를 사용하고 동시에 연결하는 것은 문제없습니다.

EventTarget

BaseAudioContext

AudioContext생성자
---

`AudioContext()` (en-US)

새로운 `AudioContext` 객체를 생성하고 반환합니다.

속성
--

*또한 부모 인터페이스인 `BaseAudioContext`로부터 속성을 상속받습니다.*

`AudioContext.baseLatency` (en-US) 읽기 전용
Experimental

`AudioDestinationNode`에서 오디오 서브시스템으로 오디오를 전달하는 `AudioContext`에 의해 초래된 프로세싱 레이턴시의 초를 반환합니다.

`AudioContext.outputLatency` (en-US) 읽기 전용
Experimental

현재 오디오 컨텍스트의 출력 레이턴시의 평가치를 반환합니다.

메서드
---

*또한 부모 인터페이스인 `BaseAudioContext`로부터 메서드를 상속받습니다.*

`AudioContext.close()` (en-US)

오디오 컨텍스트가 사용하는 모든 시스템 오디오 자원을 해제하며, 오디오 컨텍스트를 닫습니다.

`AudioContext.createMediaElementSource()` (en-US)

`HTMLMediaElement`와 연관된 `MediaElementAudioSourceNode` (en-US)를 생성합니다. 이것은 `<video>` 혹은 `<audio>` (en-US) 요소로부터 오디오를 재생하거나 조작하기 위해 사용될 수 있습니다.

`AudioContext.createMediaStreamSource()` (en-US)

로컬 컴퓨터 마이크나 다른 소스로부터 올 지도 모르는 오디오 스트림을 나타내는 `MediaStream` (en-US)과 연관된 `MediaStreamAudioSourceNode` (en-US)를 생성합니다.

`AudioContext.createMediaStreamDestination()` (en-US)

로컬 파일에 저장되거나 다른 컴퓨터로 전송될지도 모르는 오디오 스트림을 나타내는 `MediaStream` (en-US)과 연관된 `MediaStreamAudioDestinationNode` (en-US)를 생성합니다.

`AudioContext.createMediaStreamTrackSource()` (en-US)

미디어 스트림 트랙을 나타내는 `MediaStream` (en-US)과 연관된 `MediaStreamTrackAudioSourceNode` (en-US)를 생성합니다.

`AudioContext.getOutputTimestamp()` (en-US)

현재 오디오 컨텍스트에 관련된 두 개의 오디오 타임스탬프 값을 포함하는 새로운 `AudioTimestamp` 객체를 반환합니다.

`AudioContext.resume()` (en-US)

이전에 연기되거나/정지된 오디오 컨텍스트의 시간 진행을 다시 시작합니다.

`AudioContext.suspend()` (en-US)

일시적으로 오디오 하드웨어 접근을 멈추고 프로세스에서의 CPU/배터리 사용을 줄이며, 오디오 컨텍스트에서의 시간 진행을 연기합니다.

예제
--

기본적인 오디오 컨텍스트 선언:

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

크로스 브라우저를 위한 다른 형태:

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();

var oscillatorNode = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();
var finish = audioCtx.destination;
// etc.
```

명세
--

| Specification |
| --- |
| Web Audio API # AudioContext |

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

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

같이 보기
-----

* Web Audio API 사용하기
* `OfflineAudioContext`


Idle Detection API - Web API

Idle Detection API
==================

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
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The Idle Detection API는 특히 사용자의 유휴 상태(활성 상태, 유휴 상태, 잠금 상태)를 감지하고, 스크립트에서 주기적으로 조회하지 않고도 유휴 상태 변경에 대한 알림을 받을 수 있는 수단을 제공합니다.

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

네이티브 애플리케이션과 브라우저 확장 프로그램은 유휴 상태 감지를 사용하여, 사용자가 디바이스와 상호 작용하는 시간을 기준으로 사용자 환경을 구성합니다. 예를 들어 채팅 애플리케이션은 애플리케이션의 다른 사용자에게 어떤 사람이 이용 중인지 여부를 표시할 수 있습니다. 다른 애플리케이션은 사용자가 앱과 상호 작용할 때만 알림을 표시하도록 선택할 수 있습니다. 웹 애플리케이션도 유사한 사용 사례에 이 API를 사용할 수 있습니다. 또한 프로그레시브 웹 앱은 유휴 상태 감지 기능을 사용하여 앱이 사용되지 않을 때 서비스 워커 업데이트를 실행할 수 있습니다.

인터페이스
-----

`IdleDetector` (en-US)
Experimental

디바이스 또는 화면에서 사용자 활동을 감지하는 방법과 이벤트를 제공합니다.

예제
--

다음 예는 탐지기를 만들고, 사용자의 유휴 상태에 대한 변경 사항을 기록하는 방법을 보여줍니다. 버튼은 권한을 요청하기 전에 필요한 사용자 활성화를 가져오는 데 사용됩니다.

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

startButton.addEventListener("click", async () => {
  if ((await IdleDetector.requestPermission()) !== "granted") {
    console.error("Idle detection permission denied.");
    return;
  }

  try {
    const idleDetector = new IdleDetector();
    idleDetector.addEventListener("change", () => {
      const userState = idleDetector.userState;
      const screenState = idleDetector.screenState;
      console.log(`Idle change: ${userState}, ${screenState}.`);
    });

    await idleDetector.start({
      threshold: 60\_000,
      signal,
    });
    console.log("IdleDetector is active.");
  } catch (err) {
    // 권한 거부나 최상위 프레임 외부에서의 실행 등
    // 초기화와 관련된 오류를 처리합니다.
    console.error(err.name, err.message);
  }
});

stopButton.addEventListener("click", () => {
  controller.abort();
  console.log("IdleDetector is stopped.");
});
```

명세서
---

| Specification |
| --- |
| Idle Detection API # api-idledetector |

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

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


Credential Management API - Web API

Credential Management API
=========================

Credential Management API를 사용하면 웹사이트에서 비밀번호, 공개 키 및 페더레이션 자격 증명을 저장하고 불러올 수 있습니다. 이러한 기능을 통해 사용자는 비밀번호를 입력하지 않고도 로그인하고, 사이트에 로그인할 때 사용한 페더레이션 계정을 확인하고, 만료된 세션의 명시적인 로그인 흐름 없이 세션을 다시 시작할 수 있습니다.

자격 증명 관리 개념 및 사용법
-----------------

이 API를 사용하면 웹사이트가 사용자 에이전트의 비밀번호 시스템과 직접 상호작용할 수 있으므로, 웹사이트는 사이트 자격 증명을 일관된 방식으로 처리할 수 있고 사용자 에이전트는 자격 증명 관리를 개선할 수 있습니다. 예를 들어, 사용자 에이전트는 페더레이션 ID 공급자나 난해한 로그인 메커니즘을 처리하는 데 특히 어려움을 겪습니다.

이러한 문제를 해결하기 위해 Credential Management API는 웹사이트가 다양한 유형의 자격 증명을 저장하고 검색할 방법을 제공합니다. 이를 통해 사용자는 사이트에 로그인할 때 사용한 페더레이션 계정을 확인하거나 만료된 세션의 명시적인 로그인 흐름 없이 세션을 다시 시작하는 등의 기능을 사용할 수 있습니다.

**참고:** 이 API는 최상위 맥락으로 제한됩니다. `<iframe>` 요소 내서 `get()` 및 `store()` 호출은 효과 없이 해결됩니다.

### 하위 도메인 공유 자격 증명

이후 버전의 사양에서는 자격 증명을 다른 하위 도메인에서 검색할 수 있습니다. 예를 들어 `login.example.com`에 저장된 비밀번호를 `www.example.com`에 로그인하는 데 사용할 수 있습니다. 이 기능을 활용하려면 `CredentialsContainer.store()` (en-US)를 호출하여 비밀번호를 명시적으로 저장해야 합니다. 이를 공개 접미사 목록(PSL) 매칭이라고도 하지만, 사양에서는 자격 증명의 유효 범위를 결정할 때만 PSL을 사용하도록 권장하며, 필수 사항은 아닙니다. 따라서 브라우저마다 구현 방식이 다를 수 있습니다.

인터페이스
-----

`Credential` (en-US)

신뢰 결정 전에 개체에 대한 정보를 제공합니다.

`CredentialsContainer` (en-US)

자격증명을 요청하고 성공적인 로그인 또는 로그아웃과 같은 흥미로운 이벤트가 발생할 때 사용자 에이전트에 알릴 수 있는 메서드를 노출합니다. 이 인터페이스는 `navigator.credentials`에서 접근할 수 있습니다.

`FederatedCredential` (en-US)

웹사이트가 사용자를 올바르게 인증하기 위해 신뢰하는 개체인 페더레이션 ID 공급자로부터 자격 증명에 대한 정보를 제공하며, 이를 위한 API를 제공합니다. OpenID Connect는 이러한 프레임워크의 한 예입니다.

`PasswordCredential` (en-US)

사용자 이름/비밀번호 쌍에 대한 정보를 제공합니다.

`PublicKeyCredential` (en-US)

비밀번호 대신 비대칭 암호화에 기반한 보다 안전한 시스템을 사용하여 로그인할 수 있는 자격 증명을 제공합니다.

명세서
---

| Specification |
| --- |
| Credential Management Level 1 # the-credential-interface |

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

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


setInterval() - Web API

setInterval()
=============

`Window` 및 `Worker` 인터페이스에서 제공되는
 **`setInterval()`** 메서드는 각 호출 사이에 고정된 시간 지연으로
 함수를 반복적으로 호출하거나 코드 스니펫을 실행합니다.

이 메서드는 간격(interval)을 고유하게 식별할 수 있는 interval ID를 반환하므로 나중에 `clearInterval()` (en-US) 함수를 호출하여 제거할 수 있습니다.

구문
--

```js
setInterval(code)
setInterval(code, delay)

setInterval(func)
setInterval(func, delay)
setInterval(func, delay, arg0)
setInterval(func, delay, arg0, arg1)
setInterval(func, delay, arg0, arg1, /\* … ,\*/ argN)
```

### 매개변수

`func`

`delay`(밀리초)마다 실행되는 `function`입니다. 첫 번째 실행은 `delay`(밀리초) 후에 발생합니다.

`code`

 선택적 구문을 사용하면 함수 대신 문자열을 포함할 수 있습니다. 모든 `delay`(밀리초)마다 컴파일되고 실행됩니다.
 이 구문은 `eval()`을 사용하는 것과 같은 이유로 보안상 위험하므로 "권장하지 않습니다".

`delay` Optional

 타이머가 지정된 함수 또는 코드 실행 사이에 지연해야 하는 밀리초(1/1000초) 단위의 시간입니다.
 지정하지 않으면 기본 값은 0입니다. `delay` 값의 허용 범위에 대한 자세한 내용은 아래의 지연 제한을 참조하세요.

`arg0, …, argN` Optional

타이머가 만료되면 *func* 에서 지정한 함수로 전달되는 추가 인수입니다.

### 반환 값

 반환된 `intervalID`는 `setInterval()` 호출로 생성된, 타이머를 식별하는 0이 아닌 숫자 값입니다.
 이 값은 `clearInterval()` (en-US)에 전달되어 interval을 취소할 수 있습니다.

`setInterval()` 및 `setTimeout()`은 동일한 ID 풀을 공유하고 `clearInterval()` 및
 `clearTimeout()`은 기술적으로 상호 교환하여 사용할 수 있음을
 알고 있으면 도움이 될 수 있습니다.
 그러나 명확성을 위해 코드를 유지 관리할 때 혼동을 피하기 위해 항상 일치하도록 노력해야 합니다.

>
>
> **Note:** `delay` 인수는 부호 있는 32-bit 정수로 변환됩니다.
>  이는 IDL에서 부호 있는 정수로 지정되기 때문에 `delay`를
>  2147483647 ms로 효과적으로 제한합니다.
>
>
>
>

예제
--

### 예제 1: 기본 구문

다음 예제는 `setInterval()`의 기본 구문을 보여줍니다.

```js
const intervalID = setInterval(myCallback, 500, "Parameter 1", "Parameter 2");

function myCallback(a, b) {
  // 여기에 코드를 작성하세요
  // 매개변수는 순전히 선택적입니다.
  console.log(a);
  console.log(b);
}
```

### 예제 2: 두 가지 색상 변환하기

다음 에제는 중지 버튼을 누를 때까지 1초에 한 번씩 `flashtext()` 함수를 호출합니다.

#### HTML

```html
<div id="my\_box">
  <h3>Hello World</h3>
</div>
<button id="start">Start</button>
<button id="stop">Stop</button>
```

#### CSS

```css
.go {
  color: green;
}
.stop {
  color: red;
}
```

#### JavaScript

```js
// intervalID를 저장할 변수입니다
let nIntervId;

function changeColor() {
  // 간격이 이미 설정되어 있는지 확인합니다
  if (!nIntervId) {
    nIntervId = setInterval(flashText, 1000);
  }
}

function flashText() {
  const oElem = document.getElementById("my\_box");
  oElem.className = oElem.className === "go" ? "stop" : "go";
}

function stopTextColor() {
  clearInterval(nIntervId);
  // 변수에서 intervalID를 해체합니다
  nIntervId = null;
}

document.getElementById("start").addEventListener("click", changeColor);
document.getElementById("stop").addEventListener("click", stopTextColor);
```

#### 결과

같이 보기: `clearInterval()` (en-US)

"this" 문제
---------

 메서드를 `setInterval()` 또는 다른 함수에 전달하면 잘못된
 `this` 값으로 호출됩니다.
 이 문제는 JavaScript reference에서 자세히 설명합니다.

### 설명

`setInterval()`에 의해 실행되는 코드는 호출된 함수와 별도의 실행 컨텍스트에서
 실행됩니다. 결과적으로 호출된 함수의 `this`
 키워드는 `window` (또는 `global`) 객체로 설정되며 `setTimeout`을 호출한 함수의 `this` 값과
 동일하지 않습니다. `setTimeout()` 대신 `setInterval()` 을 사용하여
 다음 예제를 참조하세요(사실 문제는 두 타이머 모두 동일합니다)

```js
myArray = ["zero", "one", "two"];

myArray.myMethod = function (sProperty) {
  alert(arguments.length > 0 ? this[sProperty] : this);
};

myArray.myMethod(); // "zero,one,two"가 출력됩니다
myArray.myMethod(1); // "one"가 출력됩니다
setTimeout(myArray.myMethod, 1000); // 1초 후 "[object Window]"가 출력됩니다
setTimeout(myArray.myMethod, 1500, "1"); // 1,5초 후에 "undefined"가 출력됩니다

// myArray.myMethod 내에서 this의 값을 변경하려는 동안
// setTimeout 내부에서 this의 값을 변경하기 때문에
// .call과 함께 'this'객체를 전달하는 것은 동작하지 않습니다
// 사실 setTimeout 코드는 this가 window 객체가 될 것으로 예상하기 때문에 오류가 발생합니다
setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS\_ERROR\_XPC\_BAD\_OP\_ON\_WN\_PROTO: Illegal operation on WrappedNative prototype object"
setTimeout.call(myArray, myArray.myMethod, 2500, 2); // 위와 동일한 에러가 발생합니다
```

 보시다시피 레거시 JavaScript에서는 `this` 객체를
 콜백 함수에 전달할 방법이 없습니다.

### 가능한 해결 방법

모든 최신 JavaScript 런타임(브라우저 및 기타)은 lexical `this`를 사용하여 화살표 함수를 지원합니다. `myArray` 메서드 내부에 있는 경우 `setInterval(() => this.myMethod())`를 작성할 수 있습니다.

IE를 지원해야 하는 경우 지정된 함수의 모든 호출에 `this`의 값을 고정할 수 있는 `Function.prototype.bind()` 메서드를 사용하세요. 이렇게 하면 함수가 호출된 컨텍스트에 따라 `this`가 무엇인지 명확하지 않은 문제를 쉽게 우회할 수 있습니다.

사용 일람
-----

`setInterval()` 함수는 일반적으로 애니메이션과 같이 반복해서 실행되는 함수의
 지연을 설정하는 데 사용됩니다. `clearInterval()` (en-US)을 사용하여
 interval을 취소할 수 있습니다.

 지정된 지연 후 함수를 "한번" 호출하려면 `setTimeout()`를
 사용하세요.

### 지연 제한

 간격(interval)은 중첩될 수 있습니다. 즉, `setInterval()`에 대한 콜백이
 `setInterval()`을 호출하여 첫 번째 간격이 계속 진행 중일지라도
 다른 간격의 실행을 시작할 수 있습니다. 이것이 성능에 미칠 수 있는 잠재적인
 영향을 완화하기 위해 간격이 5개 수준 이상으로 중첩되면 브라우저는 자동으로
 간격에 대해 4 ms 최소 값을 적용합니다. 중첩 호출이 심화된 `setInterval()`의
 호출에서 4 ms 미만의 값을 지정하면 4 ms로 고정됩니다.

 브라우저는 일부 상황에서 간격에 대해 훨씬 더 엄격한 최소 값을 적용할 수
 있지만 이러한 경우는 일반적이지 않아야 합니다. 또한 콜백 호출 사이의 실제 경과 시간은
 주어진 `delay` 보다 길 수 있습니다.
 더 많은 예제는 지정된 값보다 더 오래 지연되는 이유를 참고하세요.

### 실행 시간이 간격 빈도보다 짧은지 확인

 로직 실행 시간이 간격 시간보다 오래 걸릴 가능성이 있는 경우
 `setTimeout()`을 사용하여 명명된 함수를 재귀적으로 호출하는
 것이 좋습니다. 예를 들어 `setInterval()`을 사용하여 5초마다 원격 서버를
 폴링하는 경우 네트워크 대기 시간, 응답하지 않는 서버 및 기타 여러 문제로 인해
 요청이 할당된 시간 내에 완료되지 않을 수 있습니다. 따라서 반드시 순서대로
 반환되지 않는 대기 중인 XHR 요청이 있을 수 있습니다.

이러한 경우 재귀적인 `setTimeout()` 패턴이 선호됩니다.

```js
(function loop() {
  setTimeout(() => {
    // 로직을 넣어주세요

    loop();
  }, delay);
})();
```

 위 스니펫에서 명명된 함수 `loop()`가 선언되고 즉시 실행됩니다.
 `loop()`는 로직이 실행된 후 `setTimeout()` 내에서 재귀적으로
 호출됩니다. 이 패턴은 고정 간격에서의 실행을 보장하지 않지만
 이전 간격이 재귀하기 전에 완료되었음을 보장합니다.

명세
--

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

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

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

같이 보기
-----

* `core-js`의 콜백에 인수를 전달할 수 있는 `setInterval`의 Polyfill
* `setTimeout`
* `clearTimeout`
* `clearInterval` (en-US)
* `window.requestAnimationFrame`


MutationObserver - Web API

MutationObserver
================

`MutationObserver` 인터페이스는 DOM 트리의 변경을 감지하는 기능을 제공합니다. DOM3 이벤트 명세의 일부였던 Mutation Events (en-US)를 대체합니다.

생성자
---

`MutationObserver()`

DOM 변경이 발생하면 콜백을 호출하는 새 `MutationObserver`를 생성하고 반환합니다.

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

`disconnect()`

`observe()`를 호출하기 전까지 `MutationObserver` 인스턴스가 더이상의 알림을 수신하지 않도록 설정합니다.

`observe()`

주어진 설정과 일치하는 DOM 변경이 발생했을 때 `MutationObserver` 인스턴스가 자신의 콜백으로 알림을 수신하도록 설정합니다.

`takeRecords()` (en-US)

`MutationObserver`의 알림 큐를 비우고, 큐에서 대기 중이던 알림들은 `MutationRecord`들로 구성된 새로운 `Array`로 반환합니다.

예제
--

다음 예제는 이 블로그 글에서 가져온 것입니다.

```js
// 변경을 감지할 노드 선택
const targetNode = document.getElementById("some-id");

// 감지 옵션 (감지할 변경)
const config = { attributes: true, childList: true, subtree: true };

// 변경 감지 시 실행할 콜백 함수
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("자식 노드가 추가되거나 제거됐습니다.");
    } else if (mutation.type === "attributes") {
      console.log(`${mutation.attributeName} 특성이 변경됐습니다.`);
    }
  }
};

// 콜백 함수에 연결된 감지기 인스턴스 생성
const observer = new MutationObserver(callback);

// 설정한 변경의 감지 시작
observer.observe(targetNode, config);

// 이후 감지 중단 가능
observer.disconnect();
```

명세서
---

| Specification |
| --- |
| DOM Standard # interface-mutationobserver |

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

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

같이 보기
-----

* `PerformanceObserver` (en-US)
* `ResizeObserver` (en-US)
* `IntersectionObserver`
* 짧은 개요
* 좀 더 깊게 알아보기
* Chromium 개발자 Rafael Weinstein의 발표


Web Animations API - Web API

Web Animations API
==================

**Web Animations API**를 사용하면 웹 페이지의 프레젠테이션, 즉 DOM 요소의 애니메이션에 대한 변경 사항을 동기화하고 타이밍을 조정할 수 있습니다. 이는 타이밍 모델과 애니메이션 모델이라는 두 가지 모델을 결합하여 수행됩니다.

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

Web Animations API는 브라우저와 개발자가 DOM 요소의 애니메이션을 설명할 수 있는 공통 언어를 제공합니다. API의 개념과 사용 방법에 대한 자세한 내용은 Web Animations API 사용하기 (en-US) 문서를 참조하세요.

웹 애니메이션 인터페이스
-------------

`Animation` (en-US)

애니메이션 노드 또는 소스에 대한 재생 컨트롤과 타임라인을 제공합니다. `KeyframeEffect()` (en-US) 생성자로 생성된 객체를 받을 수 있습니다.

`KeyframeEffect` (en-US)

**keyframes**이라고 하는 애니메이션 가능한 속성과 값의 집합과 타이밍 옵션을 설명합니다. 그런 다음 `Animation()` (en-US) 생성자를 사용하여 재생할 수 있습니다.

`AnimationTimeline` (en-US)

애니메이션의 타임라인을 나타냅니다. 이 인터페이스는 `DocumentTimeline` (en-US) 및 향후 타임라인 객체에 상속되는 타임라인 기능을 정의하기 위해 존재하며, 개발자에 의해 직접 접근되지 않습니다.

`AnimationEvent`

실제 CSS 애니메이션의 일부입니다.

`DocumentTimeline` (en-US)

`Document.timeline` 속성을 사용하여 접근한 기본 문서 타임라인을 포함한 애니메이션 타임라인을 표시합니다.

다른 인터페이스로의 확장
-------------

Web Animations API는 `document`와 `element` (en-US)에 몇 가지 새로운 기능을 추가합니다.

### `Document` 인터페이스로의 확장

`document.timeline`

기본 문서 타임라인을 나타내는 `DocumentTimeline` 객체입니다.

`document.getAnimations()` (en-US)

`document`의 요소에 현재 적용 중인 `Animation` (en-US) 객체 배열을 반환합니다.

### `Element` 인터페이스로의 확장

`Element.animate()` (en-US)

요소에서 애니메이션을 생성하고 재생하는 메서드입니다. 생성된 `Animation` (en-US) 객체 인스턴스를 반환합니다.

`Element.getAnimations()` (en-US)

현재 요소의 영향을 미치고 있거나, 향후 영향을 미칠 예정인 `Animation` (en-US) 객체의 배열을 반환합니다.

명세서
---

| Specification |
| --- |
| Web Animations  |

같이 보기
-----

* Web Animations API 사용하기 (en-US)
* 웹 애니메이션 데모
* Polyfill
* Firefox의 현재 구현: AreWeAnimatedYet
* 브라우저 호환 테스트


range - Web API

range
=====

**`Range`** 객체는 주어진 document 내의 텍스트 노드들의 부분들(parts)과 document의 단편화에 포함된 노드들을 나타내고 있다.

Range 오브젝트는 `Document` 객체에 포함되어 있는 `createRange` 메소드를 사용하여 생성할 수 있다. 또한 `selection` 객체에 포함되어 있는 `getRangeAt` 메소드를 사용하여 추출할 수 있다.

`Range()` (en-US) 생성자 또한 사용 가능하다.

속성
--

collapsed

Range의 시작점과 끝점이 같인 위치인지를 알 수 있는 boolean 값을 반환한다.

commonAncestorContainer

startContainer와 endContainer 노드들을 포함한 최상위 노드를 반환한다.

endContainer

Range의 끝 위치를 포함하는 Node를 반환한다.

endOffset

endContainer 안에 있는 Range 끝을 나타내는 숫자(offset)를 반환한다.

startContainer

Range의 시작 위치를 포함하는 Node를 반환한다.

startOffset

startContainer 안에 있는 Range 시작을 나타내는 숫자(offset)를 반환한다.

생성자
---

`Range()` (en-US)
Experimental

`Range` 객체의 시작과 끝에 따라 전역 `Document` 와 함께 `Range` 객체를 반환한다.

메서드
---

*상속한 메서드는 없다.*

`Range.setStart()` (en-US)

`Range 의 시작 위치를 설정한다`.

`Range.setEnd()` (en-US)

`Range 의 끝 위치를 설정한다`.

`Range.setStartBefore()` (en-US)

다른 `Node` (en-US) 와 관계가 있는 `Range 의 시작 위치를 설정한다`.

`Range.setStartAfter()` (en-US)

다른 `Node` (en-US) 와 관계가 있는 `Range 의 시작 위치를 설정한다`.

`Range.setEndBefore()` (en-US)

다른 `Node` (en-US) 와 관계가 있는 `Range 의 끝 위치를 설정한다`.

`Range.setEndAfter()` (en-US)

다른 `Node` (en-US) 와 관계가 있는 `Range 의 끝 위치를 설정한다`.

`Range.selectNode()` (en-US)

`Range` 에 `Node` (en-US) 와 그것의 내용물을 포함 시킨`다`.

`Range.selectNodeContents()`

`Range` 에 `Node` (en-US) 의 내용물을 포함 시킨`다`.

`Range.collapse()` (en-US)

`Range` 의 경계 지점 중 하나로 영역을 붕괴 시킨다.

`Range.cloneContents()` (en-US)

`Range` 의 노드들을 복사하여 `DocumentFragment` 를 반환한다.

`Range.deleteContents()` (en-US)

`Document` 로 부터 `Range` 의 컨텐츠들을 삭제한다.

`Range.extractContents()` (en-US)

`Document` 트리로 부터 `Range` 의 컨텐츠들을 domxref("DocumentFragment") }} 로 이동시킨다.

`Range.insertNode()` (en-US)

`Range` 의 맨 앞에 `Node` (en-US)를 삽입한다.

`Range.surroundContents()` (en-US)

Moves content of a `Range` into a new `Node` (en-US).

`Range.compareBoundaryPoints()` (en-US)

Compares the boundary points of the `Range` with another `Range`.

`Range.cloneRange()` (en-US)

Returns a `Range` object with boundary points identical to the cloned `Range`.

`Range.detach()` (en-US)

Releases the `Range` from use to improve performance.

`Range.toString()` (en-US)

Returns the text of the `Range`.

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

비표준

Returns a constant representing whether the `Node` (en-US) is before, after, inside, or surrounding the range.

`Range.comparePoint()` (en-US)
Experimental

Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the `Range`.

`Range.createContextualFragment()` (en-US)
Experimental

Returns a `DocumentFragment` created from a given string of code.

`Range.getBoundingClientRect()` (en-US)
Experimental

Returns a `ClientRect` object which bounds the entire contents of the `Range`; this would be the union of all the rectangles returned by `range.getClientRects()` (en-US).

`Range.getClientRects()` (en-US)
Experimental

Returns a list of `ClientRect` objects that aggregates the results of `Element.getClientRects()` for all the elements in the `Range`.

`Range.intersectsNode()` (en-US)
Experimental

Returns a `boolean` indicating whether the given node intersects the `Range`.

`Range.isPointInRange()` (en-US)
Experimental

Returns a `boolean` indicating whether the given point is in the `Range`.

명세
--

| Specification |
| --- |
| DOM Standard # interface-range |
| DOM Parsing and Serialization # extensions-to-the-range-interface |
| CSSOM View Module # extensions-to-the-range-interface |

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

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

같이 보기
-----

* The DOM interfaces index (en-US)


StorageEvent - Web API

StorageEvent
============

**`StorageEvent`** 인터페이스는 `storage` 이벤트가 구현합니다. `storage` 이벤트는 `window`에서 접근 가능한 저장소가 다른 문서에서 변경될 경우 발생합니다.

Event

StorageEvent생성자
---

`StorageEvent()` (en-US)

새로 생성한 `StorageEvent` 객체를 반환합니다.

속성
--

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

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

바뀐 키를 나타내는 `DOMString`을 반환합니다. `clear()` 메서드에 의해 발생한 이벤트에서는 `null`입니다.

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

`key`가 가리키는 새로운 값을 나타내는 `DOMString`을 반환합니다. `clear()` 메서드에 의해, 또는 `key`가 저장소에서 제거되어 발생한 이벤트에서는 `null`입니다.

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

`key`가 가리키던 원래 값을 나타내는 `DOMString`을 반환합니다. 저장소에 `key`를 새로 추가해서 발생한 경우, 이전 값이 존재할 수 없으므로 `oldValue`도 `null`입니다.

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

영향을 받은 저장소를 나타내는 `Storage` 객체를 반환합니다.

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

`key`를 바꾼 문서의 URL `DOMString`을 반환합니다.

메서드
---

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

명세
--

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

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

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


HTMLTemplateElement - Web API

HTMLTemplateElement
===================

**`HTMLTemplateElement`** 인터페이스는 HTML `<template>` 엘리먼트의 컨텐츠에 접근할 수 있게 해줍니다.

프로퍼티
----

*이 인터페이스는 `HTMLElement` 의 프로퍼티를 상속받습니다.*

`HTMLTemplateElement.content` (en-US)읽기 전용

`DocumentFragment`: `<template>` 엘리먼트의 템플릿 컨텐츠를 반환합니다.

메소드
---

*이 인터페이스는 `HTMLElement` 의 메소드를 상속받습니다.*

명세
--

| Specification |
| --- |
| HTML Standard # htmltemplateelement |

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

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


HTMLCanvasElement - Web API

HTMLCanvasElement
=================

**`HTMLCanvasElement`** 인터페이스는 <canvas> 요소의 레이아웃이나 프레젠테이션을 조작하는 여러 프로퍼티와 메서드들을 제공합니다. 또한 `HTMLCanvasElement` 인터페이스는 `HTMLElement` 인터페이스의 여러 프로퍼티와 메서드들을 상속받습니다.

프로퍼티
----

\_부모객체인 \_`HTMLElement` 로*부터 프로퍼티를 상속받음.*

`HTMLCanvasElement.height` (en-US)

는 `<canvas>` 요소에서 HTML 속성인 `height`를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다. 속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 150이 사용됩니다.

`HTMLCanvasElement.mozOpaque` (en-US)
비표준

는 `<canvas>` 요소에서 HTML 속성인 `moz-opaque`를 반영하는 `Boolean` 객체입니다. 이는 `<canvas>`에게 반투명이 인자로 사용될지에 대한 여부를 알려줍니다. 만약 반투명 요소가 없다면, `<canvas>`의 성능이 최적화될 수 있습니다.

`HTMLCanvasElement.width` (en-US)

는 `<canvas>` 요소에서 HTML 속성인 `width`를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다. 속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 300이 사용됩니다.

`HTMLCanvasElement.mozPrintCallback`
비표준

는 페이지가 프린트 되는 경우 호출되는 함수입니다. 사용자는 해당 객체에 특정 JavaScript 함수를 등록함으로써, 만약 프린터가 사용되는 경우 `<canvas>`를 더욱 고해상도로 다시 그리게 할 수 있습니다. 기본적으로 null 값을 갖습니다. 다음의 블로그 글을 참조하세요.

메서드
---

*부모객체인 `HTMLElement` 로부터 메서드를 상속받음.*

`HTMLCanvasElement.captureStream()` (en-US)
Experimental

<canvas> 상의 화면을 실시간 비디오로 캡처할 수 있는 `CanvasCaptureMediaStream` (en-US) 을 반환합니다.

`HTMLCanvasElement.getContext()`

<canvas> 상의 드로잉 컨텍스트를 반환합니다. 만약 컨텍스트 ID가 지원되지 않는 경우 null값을 반환합니다. 드로잉 컨텍스트는 <canvas> 상에 그림을 그릴 수 있게 해줍니다. getContext를 `"2d"` 를 매개 변수로 호출한다면 `CanvasRenderingContext2D` (en-US) 객체를 반환할 것이며, `"experimental-webgl"` (또는 `"webgl"`) 를 매개 변수로 호출한다면 `WebGLRenderingContext` (en-US) 객체를 반환할 것입니다. 후자의 컨텍스트의 경우 WebGL 이 구현된 브라우저에서만 사용 가능합니다.

`HTMLCanvasElement.toDataURL()` (en-US)

`type` 파라미터에서 지정하고 있는 포맷(기본: png) 의 이미지를 나타내는 data-URL을 반환합니다. 반환된 이미지는 96dpi의 해상도를 갖습니다.

`HTMLCanvasElement.toBlob()` (en-US)

<canvas>가 포함하고 있는 이미지를 나타내는 `Blob` 객체를 생성합니다. 이 파일은 사용자의 브라우저에 따라 디스크나 메모리에 캐싱되거나 저장될 수 있습니다.

`HTMLCanvasElement.transferControlToOffscreen()` (en-US)
Experimental

메인 쓰레드나 워커 쓰레드에서 `OffscreenCanvas` 객체에게 제어 권한을 넘깁니다.

`HTMLCanvasElement.mozGetAsFile()` (en-US)
비표준

지원이 중단되었습니다

<canvas>가 포함하고 있는 이미지를 나타내는 `File` 객체를 반환합니다. 이 파일은 메모리 기반의 파일이며, `name` 의 이름을 갖습니다. 만약 `type` 이 지정되지 않는다면, 이미지는 기본적으로 `image/png`의 타입을 갖게 될 것입니다.

명세
--

| Specification |
| --- |
| HTML Standard # htmlcanvaselement |

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

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

참조
--

* 이 인터페이스를 구현한 HTML 요소: `<canvas>`.


PerformanceEntry - Web API

PerformanceEntry
================

**`PerformanceEntry`** 객체는 *performance timeline* 상의 단일 성능 수치를 캡슐화 합니다. *performance entry*는 응용프로그램의 특정 지점에서 performance \*`mark` (en-US)\*나 \*`measure` (en-US)\*를 생성함으로써 (예를 들면 `mark()`를 호출하는 방법으로) 직접적으로 만들어질 수 있습니다. 또는 (이미지와 같은) 리소스를 로딩하는 등의 간접적인 방법으로 생성되기도 합니다.

`PerformanceEntry` 인스턴스는 항상 다음 서브타입들 중 하나를 따릅니다:

* `PerformanceMark` (en-US)
* `PerformanceMeasure` (en-US)
* `PerformanceFrameTiming`
* `PerformanceNavigationTiming` (en-US)
* `PerformanceResourceTiming` (en-US)
* `PerformancePaintTiming` (en-US)

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

Properties
----------

`PerformanceEntry.name` (en-US) 읽기 전용

A value that further specifies the value returned by the `PerformanceEntry.entryType` (en-US) property. The value of both depends on the subtype. See property page for valid values.

`PerformanceEntry.entryType` (en-US) 읽기 전용

A `DOMString` representing the type of performance metric such as, for example, "`mark`". See property page for valid values.

`PerformanceEntry.startTime` (en-US) 읽기 전용

A `DOMHighResTimeStamp` (en-US) representing the starting time for the performance metric.

`PerformanceEntry.duration` (en-US) 읽기 전용

A `DOMHighResTimeStamp` (en-US) representing the time value of the duration of the performance event.

Methods
-------

`PerformanceEntry.toJSON()` (en-US)

Returns a JSON representation of the `PerformanceEntry` object.

Example
-------

The following example checks all `PerformanceEntry` properties to see if the browser supports them and if so, write their values to the console.

```js
function print\_PerformanceEntries() {
  // Use getEntries() to get a list of all performance entries
  var p = performance.getEntries();
  for (var i = 0; i < p.length; i++) {
    console.log("PerformanceEntry[" + i + "]");
    print\_PerformanceEntry(p[i]);
  }
}
function print\_PerformanceEntry(perfEntry) {
  var properties = ["name", "entryType", "startTime", "duration"];

  for (var i = 0; i < properties.length; i++) {
    // Check each property
    var supported = properties[i] in perfEntry;
    if (supported) {
      var value = perfEntry[properties[i]];
      console.log("... " + properties[i] + " = " + value);
    } else {
      console.log("... " + properties[i] + " is NOT supported");
    }
  }
}
```

명세서
---

| Specification |
| --- |
| Performance Timeline # dom-performanceentry |

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

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


BatteryManager - Web API

BatteryManager
==============

**지원이 중단되었습니다:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**`BatteryManager`** 인터페이스는 시스템의 배터리 충전 상태에 대한 정보를 확인 하는 방법을 제공합니다.

`navigator.battery` 프로퍼티는 Battery Status API와 상호작용 할 수 있는 `BatteryManager` 인터페이스의 인스턴스를 반환합니다.

속성
--

`BatteryManager.charging` 읽기 전용

배터리가 현재 충전 중인지 여부를 Boolean 값으로 나타냅니다.

`BatteryManager.chargingTime` 읽기 전용

배터리가 완전히 충전되기 까지 남은 시간을 초로 표현합니다. 0 이면 이미 배터리의 충전이 완료 된 상황 입니다.

`BatteryManager.dischargingTime` 읽기 전용

배터리가 완전히 방전되고 시스템이 중지 될 때까지의 남은 시간을 초로 표현 합니다.

`BatteryManager.level` (en-US) 읽기 전용

배터리의 충전 상태를 0.0 에서 1.0 사이의 값으로 표현 합니다.

### 이벤트

`chargingchange` (en-US)

`charging` 이벤트의 핸들러 입니다. 이 이벤트는 배터리 충전 상태가 변경될 때 발생합니다.

`chargingtimechange` (en-US)

`chargingTime` 이벤트의 핸들러 입니다. 이 이벤트는 배터리 충전 시간이 변경될 때 발생합니다.

`dischargingtimechange` (en-US)

`dischargingTime` 이벤트의 핸들러 입니다. 이 이벤트는 배터리 방전 시간이 변경될 때 발생합니다.

`levelchange` (en-US)

`level` (en-US) 이벤트의 핸들러 입니다. 이 이벤트는 배터리 수준 상태가 변경 될 때 발생합니다.

메서드
---

`EventTarget` 으로 부터 상속을 받습니다.

명세
--

| Specification |
| --- |
| Battery Status API # the-batterymanager-interface |

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

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

참고
--

* `navigator.battery`
* Battery Status API


PeriodicWave - Web API

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 - Web 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 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 - Web API

Crypto
======

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

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

속성
--

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

`Crypto.subtle`
Experimental
읽기 전용

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

메소드
---

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

`RandomSource.getRandomValues()`

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

더보기
---

* Components.utils.importGlobalProperties


Response - Web API

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 - Web API

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()`


Event - Web API

Event
=====

**`Event`** 인터페이스는 DOM에서 발생하는 이벤트를 나타냅니다.

이벤트는 마우스를 클릭하거나 키보드를 누르는 것과 같이 사용자의 액션에 의해 발생할 수도 있고, 비동기적 작업의 진행을 나타내기 위해서 API들이 생성할 수도 있습니다. 요소의 `HTMLElement.click()` 메서드를 호출하거나, 이벤트를 정의한 후 대상의 `EventTarget.dispatchEvent()` 메서드를 사용해 발송하는 등 프로그래밍적으로도 만들어낼 수 있습니다.

이벤트에는 다양한 종류가 있으며 일부는 `Event` 인터페이스의 파생 인터페이스를 사용합니다. `Event` 자체는 모든 이벤트에 공통된 속성과 메서드를 가집니다.

많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"할 수 있습니다. 이벤트 처리기는 주로 `EventTarget.addEventListener()`를 사용해 다양한 요소(`<button>`, `<div>`, `<span>`, 등등)에 연결("부착")됩니다. 올바르게 부착한 경우, `removeEventListener()`를 사용하면 반대로 제거할 수도 있습니다.

**참고:** 하나의 요소가 다수의 처리기를 가질 수 있습니다. 완전히 동일한 이벤트에 여러 처리기를 따로 등록할 수 있습니다. 예컨대 광고 모듈과 통계 모듈이 각각 비디오 시청 이벤트에 대한 처리기를 부착하는 것이 가능합니다.

중첩된 많은 요소가 서로 자신만의 이벤트 처리기를 가지고 있으면 이벤트의 처리가 매우 복잡해질 수 있습니다. 특히 부모 요소와 자식 요소가 화면에서 차지하는 영역이 겹쳐서 (클릭 등의) 이벤트가 양쪽 모두에서 발생하는 경우, 이벤트 처리 순서는 각 처리기의 이벤트 버블링과 캡처 설정에 따라 달라집니다.

Event 기반 인터페이스
--------------

다음은 `Event` 인터페이스에서 파생된 인터페이스의 목록입니다. 링크를 클릭해서 MDN API 참조서의 개별 페이지를 방문할 수 있습니다.

모든 이벤트 인터페이스 이름은 "Event"로 끝난다는 사실도 확인할 수 있습니다.

* `AnimationEvent`
* `AudioProcessingEvent` (en-US)
지원이 중단되었습니다
* `BeforeUnloadEvent` (en-US)
* `BlobEvent` (en-US)
* `ClipboardEvent`
* `CloseEvent` (en-US)
* `CompositionEvent` (en-US)
* `CustomEvent`
* `DeviceMotionEvent` (en-US)
* `DeviceOrientationEvent` (en-US)
* `DeviceProximityEvent`
지원이 중단되었습니다
* `DragEvent` (en-US)
* `ErrorEvent` (en-US)
* `FetchEvent` (en-US)
* `FocusEvent` (en-US)
* `FontFaceSetLoadEvent` (en-US)
* `FormDataEvent` (en-US)
* `GamepadEvent` (en-US)
* `HashChangeEvent` (en-US)
* `HIDInputReportEvent` (en-US)
* `IDBVersionChangeEvent` (en-US)
* `InputEvent`
* `KeyboardEvent`
* `MediaStreamEvent` (en-US)
지원이 중단되었습니다
* `MessageEvent`
* `MouseEvent`
* `MutationEvent` (en-US)
지원이 중단되었습니다
* `OfflineAudioCompletionEvent` (en-US)
* `PageTransitionEvent` (en-US)
* `PaymentRequestUpdateEvent` (en-US)
* `PointerEvent`
* `PopStateEvent` (en-US)
* `ProgressEvent` (en-US)
* `RTCDataChannelEvent`
* `RTCPeerConnectionIceEvent` (en-US)
* `StorageEvent`
* `SubmitEvent` (en-US)
* `SVGEvent` (en-US)
지원이 중단되었습니다
* `TimeEvent` (en-US)
* `TouchEvent` (en-US)
* `TrackEvent` (en-US)
* `TransitionEvent` (en-US)
* `UIEvent`
* `UserProximityEvent`
지원이 중단되었습니다
* `WebGLContextEvent` (en-US)
* `WheelEvent` (en-US)
생성자
---

`Event()`

`Event` 객체를 생성하고 반환합니다.

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

`Event.bubbles` 읽기 전용

이벤트가 DOM을 타고 버블링되는지 나타내는 불리언입니다.

`Event.cancelable` 읽기 전용

이벤트를 취소할 수 있는지 나타내는 불리언입니다.

`Event.composed` (en-US) 읽기 전용

이벤트가 섀도 DOM과 일반 DOM의 경계를 넘어 버블링되는지 나타내는 불리언입니다.

`Event.currentTarget` (en-US) 읽기 전용

이벤트의 현재 대상입니다. 이벤트 전파 과정 중 지금 이벤트를 수신 중인 객체를 가리킵니다. '리타겟팅'(retargeting)으로 인해 중간에 값이 바뀌었을 수 있습니다.

`Event.defaultPrevented` 읽기 전용

`event.preventDefault()`의 호출로 이벤트가 취소됐는지 나타냅니다.

`Event.eventPhase` 읽기 전용

이벤트 흐름에서 현재 처리 중인 단계를 나타냅니다. `NONE`, `CAPTURIING_PHASE`, `AT_TARGET`, `BUBBLING_PHASE` 중 하나의 숫자입니다.

`Event.isTrusted` 읽기 전용

이벤트가 사용자 클릭 등으로 브라우저에 의해 시작됐는지, 이벤트 생성 메서드 등 스크립트에 의해 시작됐는지 나타냅니다.

`Event.target` 읽기 전용

이벤트가 처음에 발생한 대상을 가리킵니다.

`Event.timeStamp` 읽기 전용

이벤트가 생성된 시간(밀리초)입니다. 과거에는 명세 상 UNIX 시간과 이벤트 생성 시점까지의 차이였지만 실제 구현은 브라우저마다 달랐습니다. 지금은 `DOMHighResTimeStamp` (en-US)를 반환합니다.

`Event.type` 읽기 전용

이벤트의 이름입니다. 대소문자를 구분하지 않습니다.

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

`Event.composedPath()` (en-US)

이벤트의 경로(수신기가 발동할 객체들의 배열)를 반환합니다. 섀도 루트의 `ShadowRoot.mode` (en-US)가 `closed`면 섀도 트리의 노드는 포함하지 않습니다.

`Event.preventDefault()`

취소 가능한 이벤트를 취소합니다.

`Event.stopImmediatePropagation()`

이 특정 이벤트에 대해서 다른 모든 수신기의 호출을 방지합니다. 같은 요소에 부착된 수신기는 물론 캡처링과 버블링 단계에서 뒤이어 도달할 수신기들도 호출되지 않습니다.

`Event.stopPropagation()`

이벤트의 DOM 전파를 멈춥니다.

명세서
---

| Specification |
| --- |
| DOM Standard # interface-event |

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

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

같이 보기
-----

* 사용 가능한 이벤트 유형 목록: 이벤트 참고서 (en-US)
* 이벤트 대상의 비교 (en-US) (`target` vs. `currentTarget` vs. `relatedTarget` vs `originalTarget`)
* 이벤트 생성 및 발동


atob() - Web API

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()`


VirtualKeyboard API - Web API

VirtualKeyboard API
===================

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

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

VirtualKeyboard API는 개발자가 태블릿, 휴대폰 또는 하드웨어 키보드를 사용할 수 없는 기타 장치에서 화면상의 가상 키보드가 나타나고 사라질 때 애플리케이션의 레이아웃을 제어할 수 있도록 합니다.

웹 브라우저는 포커스가 맞춰지면, 일반적으로 뷰포트 높이를 조정하고 입력 필드로 스크롤 하는 방식으로 가상 키보드를 자체적으로 처리합니다.

아래 그림은 장치에서 화면상의 가상 키보드가 숨겨져 있을 때와 표시되어 있을 때, 웹 페이지에서 뷰포트 높이와 스크롤 위치의 차이를 보여줍니다.

![두 기기 중 하나는 가상 키보드가 없는 경우, 웹 페이지가 기기의 수직 공간의 대부분을 활용할 수 있음을 나타내며, 다른 하나는 가상 키보드가 있는 경우, 웹 페이지가 남은 공간에만 표시될 수 있음을 보여줍니다.](/ko/docs/Web/API/VirtualKeyboard_API/viewport-height.png)

더 복잡한 애플리케이션이나 멀티스크린 휴대폰과 같은 특정 장치에서는 가상 키보드가 나타날 때 레이아웃을 더 많이 제어해야 할 수 있습니다.

아래 그림은 듀얼 스크린 장치에서 가상 키보드가 두 화면 중 하나에만 표시될 때 어떤 일이 발생하는지 보여줍니다. 가상 키보드를 수용하기 위해 두 화면 모두에서 뷰포트가 작아지고 가상 키보드가 표시되지 않는 화면에는 낭비되는 공간이 남습니다.

![가상 키보드가 한 화면에 표시되는 듀얼 스크린 장치로, 웹 페이지가 키보드가 표시된 후 남은 수직 공간만 사용할 수 있음을 보여줍니다. 이에 따라 다른 화면에는 빈 공간이 남을 수 있습니다.](/ko/docs/Web/API/VirtualKeyboard_API/dual-screen.png)

VirtualKeyboard API를 사용하면 브라우저가 가상 키보드를 자동으로 처리하는 방식을 선택 해제하고 대신 가상 키보드를 완전히 제어할 수 있습니다. 또한 VirtualKeyboard API를 통해 양식 컨트롤에 포커스가 맞춰져 있을 때, 필요에 따라 키보드가 계속 나타나고 사라지지만 뷰포트는 변경되지 않으며 JavaScript 및 CSS를 사용하여 레이아웃을 조정할 수 있습니다.

개념
--

VirtualKeyboard API는 세 부분으로 구성됩니다.

* `navigator.virtualKeyboard` (en-US)를 통해 접근하는 `VirtualKeyboard` (en-US) 인터페이스는 자동 가상 키보드 동작을 선택 해제하고, 프로그래밍 방식으로 가상 키보드를 표시하거나 숨기고, 가상 키보드의 현재 위치와 크기를 가져오는 데 사용됩니다.
* `keyboard-inset-*` CSS 환경 변수는 가상 키보드의 위치 및 크기에 대한 정보를 제공합니다.
* `virtualkeyboardpolicy` (en-US) 속성은 가상 키보드를 `contenteditable` 요소에 표시할지 여부를 지정합니다.
### 자동 가상 키보드 동작 사용 중지

브라우저의 자동 가상 키보드 동작을 선택 해제하려면, use `navigator.virtualKeyboard.overlaysContent = true`를 사용합니다. 브라우저는 더 이상 가상 키보드를 위한 공간을 확보하기 위해 뷰포트의 크기를 자동으로 조정하지 않고 대신 콘텐츠를 오버레이 합니다.

### JavaScript를 사용하여 가상 키보드 지오메트리 감지

브라우저의 기본 동작을 선택 해제하고 나면, `navigator.virtualKeyboard.boundingRect`를 사용하여 가상 키보드의 현재 지오메트리를 가져와 CSS 및 JavaScript를 사용하여 레이아웃을 적절히 조정할 수 있습니다. `geometrychange` 이벤트를 사용하여 키보드가 표시되거나 숨겨질 때와 같은 지오메트리 변경을 수신할 수 있습니다.

이는 가상 키보드가 덮지 않는 영역에 중요한 UI 요소를 배치할 때 유용합니다.

아래 코드는 `geometrychange` 이벤트를 사용하여 가상 키보드 지오메트리가 변경되는 시점을 감지한 다음, `boundingRect` 속성에 접근하여 가상 키보드의 크기와 위치를 조회합니다.

```js
if ("virtualKeyboard" in navigator) {
  navigator.virtualKeyboard.overlaysContent = true;

  navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
    const { x, y, width, height } = event.target.boundingRect;
  });
}
```

### CSS 환경 변수를 사용하여 가상 키보드 지오메트리 감지

또한 VirtualKeyboard API는 다음 `CSS environment variables` (en-US)를 노출합니다: `keyboard-inset-top`, `keyboard-inset-right`, `keyboard-inset-bottom`, `keyboard-inset-left`, `keyboard-inset-width`와 `keyboard-inset-height`.

`keyboard-inset-*` CSS 환경 변수는 CSS를 사용하여 레이아웃을 가상 키보드 모양에 맞게 조정하는 데 유용합니다. 이 변수는 뷰포트 가장자리에서 위쪽, 오른쪽, 아래쪽, 왼쪽 인셋으로 직사각형을 정의합니다. 필요한 경우 `width`와 `height` 변수도 사용할 수 있습니다.

아래 코드는 `keyboard-inset-height` CSS 변수를 사용하여 채팅과 유사한 애플리케이션에서 메시지 목록 및 입력 필드 아래에 가상 키보드가 표시될 공간을 예약합니다. 가상 키보드가 숨겨지면, `env()` 함수가 `0px`를 반환하고 `keyboard` 격자 영역이 숨겨집니다. 메시지 및 입력 요소는 뷰포트의 전체 높이를 차지할 수 있습니다. 가상 키보드가 나타나면 `keyboard` 격자 영역은 가상 키보드의 높이가 됩니다.

```html
<style>
 body {
 display: grid;
 margin: 0;
 height: 100vh;
 grid-template:
 "messages" 1fr
 "input" auto
 "keyboard" env(keyboard-inset-height, 0px);
 }
</style>
<ul id="messages"></ul>
<input type="text" />
<script>
 if ("virtualKeyboard" in navigator) {
 navigator.virtualKeyboard.overlaysContent = true;
 }
</script>
```

### `contenteditable` 요소에서 가상 키보드 제어

기본적으로 `contenteditable` 속성을 사용하는 요소는 탭 하거나 클릭하면 가상 키보드를 나타냅니다. 특정 상황에서는 이 동작을 방지하고 대신 다른 이벤트 후에 가상 키보드를 표시하는 것이 바람직할 수 있습니다.

브라우저에서 가상 키보드가 기본적으로 처리되지 않도록 `virtualkeyboardpolicy` (en-US) 속성을 `manual`으로 설정하고, 대신 `VirtualKeyboard` (en-US) 인터페이스의 `show()`와 `hide()` 메서드를 사용하여 직접 처리하세요.

아래 코드는 `virtualkeyboardpolicy` 속성과 `navigator.virtualKeyboard.show()` 메서드를 사용하여 두 번 클릭 시 가상 키보드를 대신 표시하는 방법을 보여줍니다.

```html
<div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>
<script>
 if ("virtualKeyboard" in navigator) {
 navigator.virtualKeyboard.overlaysContent = true;

 const editor = document.getElementById("editor");
 editor.addEventListener("dblclick", () => {
 navigator.virtualKeyboard.show();
 });
 }
</script>
```

인터페이스
-----

`VirtualKeyboard` (en-US)
Experimental

키보드 레이아웃 맵을 검색하고 물리적 키보드에서 키 누름 캡처를 토글 하는 기능을 제공합니다.

명세서
---

| Specification |
| --- |
| VirtualKeyboard API # the-virtualkeyboard-interface |

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

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

같이 보기
-----

* VirtualKeyboard API 완전 제어


Geolocation API - Web API

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 - Web API

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.