recursal/MDN huggingface dataset:
DataTransfer
============

**`DateTransfer`** 객체는 드래그 앤 드롭 작업 중에 드래그되고 있는 데이터를 보관하기 위해 사용됩니다. 각각의 데이터 타입들에 해당하는 하나 이상의 데이터 항목을 포함할 수 있습니다. 드래그 앤 드롭에 대한 자세한 정보는 HTML Drag and Drop API을 확인하시길 바랍니다.

이 객체는 모든 `drag events` (en-US)의 `dataTransfer` (en-US) 속성에서 사용할 수 있습니다.

생성자
---

`DataTransfer()`

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

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

### 표준 속성

`DataTransfer.dropEffect` (en-US)

현재 선택된 드래그 앤 드롭 작업의 타입을 가져오거나 작업을 새로운 타입으로 설정합니다. 값은 `none`, `copy`, `link` 또는 `move`이어야 합니다.

`DataTransfer.effectAllowed` (en-US)

가능한 작업의 모든 타입을 제공합니다. `none`, `copy`, `copyLink`, `copyMove`, `link`, `linkMove`, `move`, `all` 또는 `uninitialized` 중 하나이어야 합니다.

`DataTransfer.files`

데이터 전송에서 사용할 수 있는 모든 로컬 파일의 목록을 포함합니다. 드래그 작업에 드래그하고 있는 파일이 포함되지 않으면 이 속성은 빈 목록입니다.

`DataTransfer.items` 읽기 전용

모든 드래그 데이터의 목록인 `DataTransferItemList` (en-US) 객체를 받습니다.

`DataTransfer.types` (en-US) 읽기 전용

`dragstart` 이벤트에 설정된 형식을 제공하는 문자열 배열입니다.

### Gecko 속성

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

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

### 표준 메서드

`DataTransfer.clearData()` (en-US)

지정된 타입과 연결된 데이터를 제거합니다. 타입 전달인자는 선택 사항입니다. 타입이 비어있거나 지정되지 않은 경우 모든 타입과 연결된 데이터가 제거됩니다. 지정된 타입의 데이터가 없거나 데이터 전송에 데이터가 포함되어 있지 않으면 이 메서드는 아무런 효과가 없습니다.

`DataTransfer.getData()`

지정된 타입의 데이터를 검색합니다. 혹은 해당 타입의 데이터가 없거나 데이터 전송에 데이터가 없는 경우에는 빈 문자열을 검색합니다.

`DataTransfer.setData()` (en-US)

지정된 타입의 데이터를 설정합니다. 타입의 데이터가 없으면 타입 목록의 마지막 항목이 새로운 형식이 되도록 타입이 마지막에 추가됩니다. 타입의 데이터가 이미 존재하면 기존 데이터가 동일한 위치에서 교체됩니다.

`DataTransfer.setDragImage()` (en-US)

사용자 지정 이미지를 원하는 경우 드래그에 사용될 이미지를 설정합니다.

### Gecko 메서드

**비표준:** 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

예제
--

문서에 나열된 모든 메서드와 속성은 고유한 참조 페이지가 있으며 각 참조 페이지에는 인터페이스의 예제가 직접 포함되어 있거나 예제에 대한 링크가 있습니다.

명세서
---

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

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

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

같이 보기
-----

* HTML 드래그 앤 드롭 API
* Drag Operations (en-US)
* Recommended Drag Types (en-US)
* DataTransfer test - Paste or Drag
HTMLLIElement
=============

**`HTMLLIElement`** 인터페이스는 리스트 엘리먼트를 조작하기 위한 특정 프로퍼티와 메소드들을 제공합니다.

( 정규 `HTMLElement` 인터페이스의 상속을통해 사용이 가능합니다. )

Properties
----------

*부모인 `HTMLElement`에서 상속받습니다.*

`HTMLLIElement.type` 
지원이 중단되었습니다

 는 `DOMString` 의 `"disc"`, `"square"` 나 `"circle"` 같은 bullets 타입을 대표합니다.
 리스트 유형을 정의하는 표준 정의 방법은 CSS `list-style-type` (en-US) 프로퍼티를 통해서 이므로, 스트립트를 통하여 CSSSOM 메소드를 사용하세요.


`HTMLLIElement.value`

 는 주어진 `<ol>` 리스트 엘리먼트 안에서 서수의 위치를 가르키는 오랜 서수적 포지션입니다. 이것은 HTML의 `<li>`엘리먼트의 `value`속성을 나타냅니다. 그리고 `0` 보다 작을 수도 있습니다.
 만일 `<li>` 엘리먼트가 `<ol>` 엘리먼트의 자식이 아니라면, 프로퍼티는 아무 의미가 없게됩니다.


Methods
-------

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

명세서
---

| Specification |
| --- |
| HTML Standard # htmllielement |

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

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

See also
--------

* The HTML element implementing this interface: `<li>`
ImageData
=========

**`ImageData`** 인터페이스는 `<canvas>` 엘리먼트 영역의 기저의 픽셀데이터를 나타냅니다`ImageData()` (en-US)생성자나 canvas객체에 연결된 `CanvasRenderingContext2D` (en-US)객체의 `createImageData()` (en-US)나 `getImageData()` (en-US)메소드로 생성할 수 있습니다. **ImageData**는 `putImageData()` (en-US)의 인자로 전달할 수 있으며, 이를 통해 canvas의 일부로 반영할 수 있습니다.

Constructors
------------

`ImageData()` (en-US) 
Experimental

인자로 주어진 `Uint8ClampedArray`로 부터 해당 크기에 맞는 ImageData객체를 생성합니다. 만약 인자가 주어지지 않으면 검정색 사각형 이미지를 생성합니다. `createImageData()` (en-US)는 worker에서 사용할 수 없기 때문에, ImageData의 생성자를 이용하는 것이 가장 일반적인 방법입니다.

Properties
----------

`ImageData.data` (en-US) 읽기 전용

`Uint8ClampedArray`형식이며 1차원 배열로 RGBA순서로 정의된 이미지 데이터를 나타내니다. 각 원소는 정수값으로 0에서 255사이의 값을 갖습니다.

`ImageData.height` (en-US) 읽기 전용

unsigned long형식으로 ImageData의 pixel기준의 실제 높이값입니다.

`ImageData.width` (en-US) 읽기 전용

unsigned long형식으로 ImageData의 pixel기준의 실제 가로값입니다.

명세서
---

| Specification |
| --- |
| HTML Standard # imagedata |

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

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

See also
--------

* `CanvasRenderingContext2D` (en-US)
* The `<canvas>` element and its associated interface, `HTMLCanvasElement`.
Web Storage API
===============

**Web Storage API**는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다.

Web Storage 개념과 사용법
-------------------

Web Storage의 두 가지 방식은 다음과 같습니다.

* `sessionStorage`는 각각의 출처에 대해 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공합니다.
    + 세션에 한정해, 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장합니다.
    + 데이터를 절대 서버로 전송하지 않습니다.
    + 저장 공간이 쿠키보다 큽니다. (최대 5MB)
* `localStorage`도 위와 같지만, 브라우저를 닫았다 열어도 데이터가 남아있습니다.
    + 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라집니다.
    + 저장 공간이 셋 중 제일 큽니다.

위의 방식은 `Window.sessionStorage`와 `Window.localStorage` 속성을 통해 사용할 수 있습니다. (보다 정확히 말하자면, 지원하는 브라우저에서는 `Window` 객체는 `localStorage` 및 `sessionStorage` 속성을 포함한 `WindowLocalStorage`와 `WindowSessionStorage` 객체를 구현합니다) 두 속성 중 하나에 접근하면 `Storage` 객체의 인스턴스를 생성하게 되고, 그걸 사용해 데이터 항목을 추가, 회수, 제거할 수 있습니다. `sessionStorage`와 `localStorage`의 `Storage` 객체는 각각의 출처별로 다른 것을 사용하며 서로 독립적으로 기능합니다.

**참고:** Firefox 45 이후로는, 과도한 Web Storage 사용으로 인한 메모리 문제를 피하기 위해 브라우저가 충돌하거나 재시작할 때의 출처 당 저장 공간이 10MB로 제한됩니다.

**참고:** 사용자가 서드 파티 쿠키를 비활성화한 경우 서드 파티 IFrame에서 Web Storage에 접근할 수 없습니다. Firefox는 43부터 이 동작을 사용합니다.

Web Storage 인터페이스
-----------------

`Storage`

특정 도메인과 저장 유형(세션 또는 로컬)에 대해 데이터를 저장, 회수, 삭제할 수 있습니다.

`Window`

Web Storage API는 `Window` 객체를 확장합니다. `Window.sessionStorage`와 `Window.localStorage` 속성을 추가해 현재 도메인의 세션과 로컬 `Storage` 객체의 접근을 가능케 하고, 새로운 항목을 추가하는 등 저장 공간이 변경될 때 발생하는 `Window.onstorage` (en-US) 이벤트 처리기도 추가합니다.

`StorageEvent`

`storage` 이벤트는 저장 공간이 변경될 때 `Window` 객체에서 발생합니다.

예제
--

일반적인 Web Storage 사용법을 설명하기 위한 데모를 만들었습니다. 창의적이게도 Web Storage Demo라는 이름으로, 랜딩 페이지에서 색, 글꼴, 이미지를 바꿀 수 있습니다. 선택지를 바꾸면 페이지가 실시간으로 변함과 동시에 `localStorage`에도 현재 상태를 저장하게 되므로, 페이지를 떠났다가 다시 방문해도 선택지가 그대로 보존됩니다.

추가로 이벤트 출력 페이지도 제공 중입니다. 이 페이지를 다른 탭에 열고 랜딩 페이지에서 선택지를 바꾸면 `StorageEvent`를 통해 업데이트된 저장 정보를 출력하는 것을 볼 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # dom-localstorage-dev |
| HTML Standard # dom-sessionstorage-dev |

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

### api.Window.localStorage

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

### api.Window.sessionStorage

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

사생활 보호 / 시크릿 모드
---------------

대부분의 최신 브라우저는 탐색 기록과 쿠키를 남기지 않는 "사생활 보호 모드", "시크릿 모드", 또는 비슷한 이름의 기능을 가지고 있습니다. 그리고 정말 분명한 이유로 인해 Web Storage와 호환되지 않습니다. 브라우저 공급자들은 다양한 시나리오에서 이를 해결하기 위해 실험을 진행하고 있습니다.

대부분의 브라우저는 Web Storage API에 접근 가능하며 기능하는 것 처럼 보이지만, 큰 차이점으로서, 브라우저를 닫으면 저장한 데이터를 제거하는 전략을 택하고 있습니다. 이런 브라우저 사이에서도, 일반 브라우징 세션에서 저장한 기존 데이터의 처리법에 대해서는 이견이 존재합니다. 사생활 보호 모드에서도 저 데이터에 접근할 수 있어야 할까요? 그런 반면, 마찬가지로 Web Storage API는 존재하지만 최대 용량을 0바이트 할당하여 어떠한 데이터도 입력할 수 없도록 하는 일부 브라우저도 존재하며, 대표적으로 Safari가 있습니다.

Web Storage API에 의존하는 웹 사이트를 개발할 때, 개발자는 이러한 구현 차이에 대해 고려해야 합니다. 더 많은 정보는 이 주제를 다루는 WHATWG 블로그 글을 참고하세요.

같이 보기
-----

* Web Storage API 사용하기 (en-US)
* 브라우저 저장 공간 제한과 정리 기준 (en-US)
table
=====

### HTML Table 요소 인터페이스

`table` 개체는 (상속으로 이용할 수 있는 정규 element 개체 인터페이스 외에) HTML 표의 layout과 presentation을 다루는 특수 프로퍼티와 메소드를 제공하는 `HTMLTableElement` 인터페이스를 내놓습니다.

### 프로퍼티

table.caption

**caption**은 표 caption을 반환합니다.

table.tHead

**tHead**는 표 head를 반환합니다.

table.tFoot

**tFoot**은 표 footer를 반환합니다.

table.rows

**rows**는 표의 줄(row)을 반환합니다.

table.tBodies

**tBodies**는 표 body를 반환합니다.


table.align

**align**은 표 정렬을 get/set합니다.

table.bgColor 
지원이 중단되었습니다

**bgColor**는 표의 배경색을 get/set합니다.

table.border

**border**는 표 border를 get/set합니다.

table.cellPadding

**cellPadding**은 cell padding을 get/set합니다.

table.cellSpacing

**cellSpacing**은 표 주변 spacing을 get/set합니다.

table.frame

**frame**은 표 어느 쪽이 border를 가질 지를 지정합니다.

table.rules

**rules**는 안쪽 border가 보일 지를 지정합니다.

table.summary

**summary**는 표 요약을 get/set합니다.

table.width

**width**는 표 너비를 get/set합니다.

### 메소드

table.createTHead

**createTHead**는 표 header를 만듭니다.

table.deleteTHead

**deleteTHead**는 표 header를 없앱니다.

table.createTFoot

**createTFoot**은 표 footer를 만듭니다.

table.deleteTFoot

**deleteTFoot**은 표 footer를 없앱니다.

table.createCaption

**createCaption**는 표에 새 caption을 만듭니다.

table.deleteCaption

**deleteCaption**은 표 caption을 없앱니다.

table.insertRow

**insertRow**는 새 줄을 삽입합니다.

table.deleteRow

**deleteRow**는 줄을 없앱니다.
Using the Mozilla JavaScript interface to XSL Transformations
=============================================================

이 문서는 Mozilla 1.2의 JavaScript 인터페이스부터 XSLT 처리 엔진(TransforMiiX)까지 설명합니다.

### XSLTProcessor 만들기

시작하기 위해, XSLTProcessor 개체 만들기가 필요합니다.
```

var processor = new XSLTProcessor();
```

### 스타일시트 지정하기

쓸 수 있으려면 그 전에 `importStylesheet()` 함수로 스타일시트를 가져와야(import) 합니다. 가져올 XSLT 스타일시트의 DOM 노드인 매개변수가 하나 있습니다. 가져오기는 동적임을 (가져온 뒤로 스타일시트 DOM을 바꾸면, 이는 처리에 반영됨을 뜻함) 주의하세요. 그러나 DOM 수정 대신 스타일시트 매개변수 사용을 권장합니다. 이는 보통 더 쉽고 더 나은 성능을 줄 수 있습니다.
```

var testTransform = document.implementation.createDocument("", "test", null);
// just an example to get a transform into a script as a DOM
// XMLDocument.load is asynchronous, so all processing happens in the
// onload handler
testTransform.addEventListener("load", onload, false);
testTransform.load("test-transform.xml");
function onload() {
  processor.importStylesheet(testTransform);
}
```


`importStylesheet`는 DOM 노드인 인수가 하나 필요합니다. 그 노드가 문서 노드면 전체 XSL Transform이나 literal result element transform에 넘길 수 있습니다, 그렇지 않으면 `xsl:stylesheet`나 `xsl:transform` 요소이어야 합니다.

### 문서 변환하기

지정한 XSLT 스타일시트를 써서 문서를 변환하기 위해 `transformToDocument()`나 `transformToFragment()` 메소드를 쓸 수 있습니다.

#### transformToDocument

`transformToDocument()`는 변환할 소스 노드인 인수를 하나 취하고 변환 결과를 갖는 새 DOM `Document`를 반환합니다.
```

var newDocument = processor.transformToDocument(domToBeTransformed);
```


결과 개체는 스타일시트의 output 메소드가 `html`이면 `HTMLDocument`, `xml`이면 `XMLDocument`, `text`이면 자식이 text인 단일 루트 요소 `<transformiix:result>`를 갖는 `XMLDocument`입니다.

#### transformToFragment

또한 DOM `DocumentFragment` 노드를 반환하는 `transformToFragment()`를 쓸 수 있습니다. 이는 조각(fragment)을 다른 노드에 투명하게 추가함이 그 조각의 자손 모두를 추가하고 조각 자체는 합치지(merge) 않기 때문에 편리합니다. 그러므로 조각은 여기저기 노드 옮기기와 전체 문서 개체의 overhead 없이 저장하기에 쓸모가 있습니다.

`transformToFragment`는 인수 둘을 취합니다. 변환할 소스 문서(위와 같이)와 조각(조각 모두는 문서가 소유해야 합니다)를 소유하는 `Document` 개체.
```

var ownerDocument = document.implementation.createDocument("", "test", null);
var newFragment = processor.transformToFragment(domToBeTransformed, ownerDocument);
```


`transformToFragment`는 소유자 문서 자신이 `HTMLDocument`이거나 스타일시트의 output 메소드가 HTML이면 오직 HTML DOM 개체를 만들어냅니다. 다만 결과의 최상위 요소가 `transformToFragment`로 이 요소를 만드는 데 좀처럼 쓰지 않는 `<html>`이면 HTML DOM 개체를 만들어내지 **않**습니다. 이를 재정의(override)하고 싶으면, 보통은 표준 방식으로 output 메소드를 설정할 수 있습니다.

### 매개변수 설정

`setParameter`, `getParameter`, `removeParameter` 메소드를 써서 parameters for the stylesheet를 조절할 수 있습니다. 이들은 모두 `setParameter` 메소드는 세 번째도 취하면서 처음 두 매개변수로 이름공간 URI와 지역명을 설정한 매개변수 값을 취합니다.

### 재설정

`XSLTProcessor` 개체는 또한 모든 스타일시트와 매개변수를 제거하고 처리기(processor)를 초기 상태로 되돌리는 데 쓸 수 있는 `reset()` 메소드를 구현합니다. 이 메소드는 Mozilla 1.3과 그 뒤에 구현됩니다.

### Resources

* nsIXSLTProcessor.idl는 항상 `XSLTProcessor` 개체의 실제 인터페이스를 반영합니다.
    + A XULPlanet reference page.
* The nsIXMLProcessorObsolete IDL file
 : 1.2판보다 앞서는 Mozilla의 JS 인터페이스.
### 원본 문서 정보

* 저자:
 Mike Hearn
* 최종 업데이트: December 21, 2005
* 저작권 정보: Copyright (C) Mike Hearn
Clipboard 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
**Clipboard API**는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답하거나 시스템 클립보드에 비동기적으로 접근하고 쓸 수 있는 기능을 제공합니다.

**참고:** 이 API는 웹 워커에서 사용할 수 **없습니다**. (`WorkerNavigator` (en-US)에 노출되지 않음)

Clipboard API는 `document.execCommand()`를 사용한 클립보드 접근을 대체하기 위해 디자인되었습니다.

클립보드 접근
-------

시스템 클립보드에 접근할 땐 `Clipboard` 객체의 인스턴스를 생성하지 않고, 전역 `Navigator.clipboard` (en-US)를 사용합니다.


```js
navigator.clipboard
  .readText()
  .then(
    (clipText) => (document.querySelector(".editor").innerText += clipText),
  );
```


위의 코드 조각은 클립보드에서 텍스트를 가져와서, `editor` 클래스를 가진 첫 번째 요소의 콘텐츠 뒤에 추가합니다. `readText()` (en-US)는 (`read()` (en-US)도 마찬가지로) 클립보드의 내용이 텍스트가 아니면 빈 문자열을 반환하므로, 이 코드는 안전합니다.

인터페이스
-----

`Clipboard` (en-US) Secure context

시스템 클립보드에서 텍스트와 데이터를 읽고 쓸 수 있는 인터페이스를 제공합니다. 명세에서는 "Async Clipboard API"라고 부릅니다.

`ClipboardEvent` Secure context

`cut`, `copy`, `paste` 이벤트처럼 클립보드 조작에 대한 정보를 제공하는 이벤트를 나타냅니다. 명세에서는 "Clipboard Event API"라고 부릅니다.

`ClipboardItem` (en-US) Secure context

클립보드 데이터를 읽거나 쓸 때 데이터 형식을 나타낼 수 있습니다.

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboard-interface |
| Clipboard API and events # clipboard-event-interfaces |
| Clipboard API and events # clipboarditem |

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

### api.Clipboard

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

### api.ClipboardEvent

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

### api.ClipboardItem

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

같이 보기
-----

* Async Clipboard API 데모 (Glitch)
* web.dev의 Async Clipboard API
Server-sent events
==================

전통적으로 웹페이지는 새로운 데이터를 받기 위해 서버로 요청을 보내야만 합니다; 서버로 데이터를 요청하는 방식입니다. 하지만 Server-Sent Events 방식으로 웹페이지의 요청 없이도 언제든지 서버가 새로운 데이터를 보내는 것이 가능합니다. 이렇게 보내진 메시지는 웹페이지 안에서 *Events + 데이터*로 다룰 수 있습니다.

기본 & 사용하기
---------

Server-Sent Events를 배우려면 다음 글을 읽어보세요: Server-Sent Events 사용하기.

인터페이스
-----

`EventSource` (en-US)

서버와의 연결, 이벤트/데이터, 에러 받아오기, 연결 종료하기 등을 다루는 모든 기능을 정의하고 있습니다.

예제
--

* PHP를 이용하여 구현한 간단한 SSE 데모
명세
--

| Specification |
| --- |
| HTML Standard # server-sent-events |

더 찾아보기
------

### 도구

* Node.js를 위한 EventSource 폴리필
* Remy Sharp의 EventSource 폴리필
* Yaffle의 EventSource 폴리필
* Rick Waldron jquery 플러그인
* 선언적인 SSE를 지원하는 intercooler.js
### 관련 주제

* AJAX (en-US)
* JavaScript
* WebSockets
### 그 외 자료

* SSE로 구현된 Twitter 어플리케이션과 깃허브에 공개된 소스코드.
* HTML5와 Server-sent events
* Asp.net을 이용한 Server-Sent Events
Comment
=======

**`Comment`** 인터페이스는 마크업 내의 텍스트 표기인 주석을 나타냅니다. 주석은 화면에 보여지지 않지만 웹 페이지의 소스에서 확인할 수 있습니다. HTML과 XML에서 주석은 '`<!--`' 표기와 '`-->`' 사이의 내용입니다. XML의 주석 내용에는 '`--`'을 포함할 수 없습니다.

EventTarget

Node

(en-US)

CharacterData

Comment속성
--

`Comment` 인터페이스는 별도의 속성을 갖지 않지만 부모인 `CharacterData`와, 그 부모인 `Node` (en-US)의 속성을 상속합니다.

생성자
---

`Comment()` (en-US) 
Experimental

매개변수를 내용으로 하는 `Comment` 객체를 반환합니다.

메서드
---

`Comment` 인터페이스는 별도의 메서드를 갖지 않지만 부모인 `CharacterData`와, 그 부모인 `Node` (en-US)의 메서드를 상속합니다.

명세
--

| Specification |
| --- |
| DOM Standard # interface-comment |

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

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

같이 보기
-----

* DOM 인터페이스 목록
Battery Status API
==================

**Battery API** 만큼이나 자주 언급되는 **Battery Status API**는 시스템의 배터리 충전 상태에 대한 정보를 제공하고, 배터리 상태에 따라 발생하는 이벤트를 다룰 수 있도록 해 줍니다. 배터리가 얼마남지 않은 상황에서, 앱에서 배터리의 소모를 줄인다거나 배터리가 방전되기 전에 데이터를 저장하거나 하는 것들이 가능합니다.

Battery Status API 는 `window.navigator.battery` 를 제공 합니다. 이는 `BatteryManager` 객체이며 배터리 상태를 감시하고 전달받아 처리할 수 있는 이벤트를 가지고 있습니다.

예제
--

아래 예제에서는 배터리가 충전중인 상태 (전원 케이블을 연결하여 충전 중인지) 와 배터리 수준의 변화를 감시합니다. 각각 `chargingchange` (en-US) 와 `levelchange` (en-US) 이벤트가 발생하면 완료 됩니다.


```js
var battery =
  navigator.battery || navigator.mozBattery || navigator.webkitBattery;

function updateBatteryStatus() {
  console.log("Battery status: " + battery.level \* 100 + " %");

  if (battery.charging) {
    console.log("Battery is charging");
  }
}

battery.addEventListener("chargingchange", updateBatteryStatus);
battery.addEventListener("levelchange", updateBatteryStatus);
updateBatteryStatus();
```


명세서의 예제도 **확인**해보세요.

명세
--

| Specification |
| --- |
| Battery Status API  |

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

### api.BatteryManager

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

### api.Navigator.getBattery

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

더보기
---

* Hacks blog post - Using the Battery API
* `BatteryManager`
* `navigator.battery`
queueMicrotask()
================

`Window` 또는 `Worker` 인터페이스의 **`queueMicrotask()`** 메서드는 브라우저의 이벤트 루프로 통제권이 넘어가기 전, 안전한 시점에 실행할 마이크로태스크를 큐에 추가합니다.

마이크로태스크란 현재 태스크가 종료된 후, 그리고 실행 맥락의 통제권이 브라우저 이벤트 루프로 넘어가기 전에, 실행해야 하는 다른 코드가 없으면 처리되는 짧은 함수입니다.

마이크로태스크를 사용하면 현재 대기 중인 더 중요한 코드에 간섭하지 않으면서도, 브라우저가 실행 맥락을 다시 통제하기 전에 필요한 작업을 처리할 수 있습니다. 마이크로태스크 안내서에서 마이크로태스크 사용법과 필요성을 알아보세요.

마이크로태스크의 중요성은 작업을 비동기적으로, 그러나 특정 순서로 실행할 수 있다는 점에 있습니다. 관련 예제 또한 마이크로태스크 안내서에서 볼 수 있습니다.

최종 정리 작업이나 렌더링 바로 직전 실행해야 하는 작업이 필요한 라이브러리와 프레임워크에서 마이크로태스크를 유용하게 사용할 수 있습니다.

구문
--


```js
queueMicrotask(function);
```

### 매개변수

`function`

브라우저 엔진이 안전한 시점에 실행할 `function`입니다. 큐에 올라간 마이크로태스크는 현재 대기 중인 모든 태스크가 완료된 후, 그러나 통제권을 이벤트 루프로 넘겨주기 전에 실행됩니다.

### 반환 값

`undefined`.

예제
--


```js
queueMicrotask(() => {
  // 함수 내용
});
```


다음은 queueMicrotask 명세에서 가져온 예제 코드입니다.


```js
MyElement.prototype.loadData = function (url) {
  if (this._cache[url]) {
    queueMicrotask(() => {
      this.\_setData(this._cache[url]);
      this.dispatchEvent(new Event("load"));
    });
  } else {
    fetch(url)
      .then((res) => res.arrayBuffer())
      .then((data) => {
        this._cache[url] = data;
        this.\_setData(data);
        this.dispatchEvent(new Event("load"));
      });
  }
};
```

명세
--

| Specification |
| --- |
| HTML Standard # microtask-queuing |

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

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

같이 보기
-----

* `core-js`의 `queueMicrotask` 폴리필
* JavaScript의 queueMicrotask()와 함께 마이크로태스크 사용하기
* 비동기 JavaScript
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
===============

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

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)
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` 인터페이스