BroadcastChannel() - Web API

BroadcastChannel()
==================

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
**`BroadcastChannel()`** 생성자는 새 `BroadcastChannel`을 생성하고 이를 채널에 연결합니다.

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

구문
--

```js
new BroadcastChannel(channelName)
```

### 매개변수

`channelName`

채널의 이름을 나타내는 문자열로, 출처가 동일한 모든 브라우징 맥락들에 대해 이 이름을 가진 채널이 단 하나만 존재합니다.

예제
--

```js
// "internal\_notification" 채널을 수신하는 새 채널을 만듭니다.

const bc = new BroadcastChannel("internal\_notification");
bc.postMessage("New listening connected!");
```

명세서
---

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

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

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

같이 보기
-----

* `BroadcastChannel`, the interface it belongs to.


BroadcastChannel: messageerror event - Web API

BroadcastChannel: messageerror event
====================================

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
`messageerror` 이벤트는 역직렬화할 수 없는 메시지가 채널에 도착할 시, `BroadcastChannel` 객체에서 발생합니다.

구문
--

`addEventListener()` 같은 메서드에서 이벤트 이름을 사용하거나, 이벤트 처리기 속성을 설정하세요.

```js
addEventListener("messageerror", (event) => { })
onmessageerror = (event) => { }
```

이벤트 타입
------

`MessageEvent`. `Event`를 상속합니다.

Event

MessageEvent이벤트 속성
------

아래 나열된 속성 외에도, 부모 인터페이스인 `Event`의 속성들을 사용할 수 있습니다.

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

메시지 발신기가 보낸 데이터.

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

메시지 발신기의 출처를 나타내는 문자열.

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

이벤트의 고유 ID를 나타내는 문자열.

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

WindowProxy, `MessagePort` (en-US), 또는 `ServiceWorker` 객체 등 메시지 발신자를 나타내는 메시지 이벤트 소스.

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

메시지가 전송되는 채널과 연결된 포트를 나타내는 `MessagePort` (en-US) 객체의 배열(예: 채널 내 메시징, 공유된 맥락에 메시지를 보낼 때 등).

예제
--

이 코드는 메시지와 에러를 수신하기 위해 `addEventListener`를 사용합니다.

```js
const channel = new BroadcastChannel("example-channel");

channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

channel.addEventListener("messageerror", (event) => {
  console.error(event);
});
```

위와 동일하지만, `onmessage` 와 `onmessageerror` 이벤트 핸들러 속성을 사용합니다.

```js
const channel = new BroadcastChannel("example-channel");

channel.onmessage = (event) => {
  received.textContent = event.data;
};

channel.onmessageerror = (event) => {
  console.log(event);
};
```

명세서
---

| Specification |
| --- |
| HTML Standard # event-messageerror |
| HTML Standard # handler-broadcastchannel-onmessageerror |

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

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

같이 보기
-----

* 연관된 이벤트: `message`


BroadcastChannel.name - Web API

BroadcastChannel.name
=====================

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
**`BroadcastChannel.name`** 읽기 전용 속성은 지정된 채널의 이름을 고유하게 식별하는 문자열을 반환합니다. 이 이름은 생성 시 `BroadcastChannel()` 생성자에 전달되므로 읽기 전용입니다.

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

값
-

문자열.

예제
--

```js
// 채널에 연결
const bc = new BroadcastChannel("test\_channel");

// postMessage 등의 동작들...

// 채널 이름을 콘솔에 로깅
console.log(bc.name); // "test\_channel"

// 완료되면 채널 연결 해제
bc.close();
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-name-dev |

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

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

같이 보기
-----

* `BroadcastChannel.name`이 속한 인터페이스, `BroadcastChannel`.


BroadcastChannel.close() - Web API

BroadcastChannel.close()
========================

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
**`BroadcastChannel.close()`** 는 채널에 대한 연결을 종료하여, 객체가 가비지 컬렉션으로 처리되도록 합니다. 브라우저 입장에서 채널이 더 이상 필요하지 않다는 것을 알 수 있는 다른 방법이 없기 때문에, 이 단계는 반드시 수행해야 하는 단계입니다.

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

구문
--

```js
channel.close()
```

예제
--

```js
// 채널에 연결
const bc = new BroadcastChannel("test\_channel");

// postMessage 등의 동작들...

// 완료되면 채널 연결 해제
bc.close();
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-close-dev |

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

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

같이 보기
-----

* `BroadcastChannel.close()`가 속한 인터페이스, `BroadcastChannel`.


Event.cancelable - Web API

Event.cancelable
================

`Event` 인터페이스의 **`cancelable`** 읽기 전용 속성은 이벤트의 취소가 가능한지를 나타냅니다.

이벤트가 취소 불가능한 경우, 해당 이벤트의 `cancelable` 속성은 `false`이며 수신기에서 이벤트의 발생을 멈출 수 없습니다.

취소 가능한 브라우저 내장 이벤트는 대부분 사용자가 페이지와 상호작용해서 발생하는 이벤트입니다. 예컨대 `click`, `wheel` (en-US), `beforeunload` 이벤트를 취소하게 되면, 각각 사용자가 어떤 요소를 클릭하는 것, 페이지를 스크롤하는 것, 페이지에서 나가는 것을 막게 됩니다.

사용자 JavaScript 코드에서 생성하는 합성 이벤트의 경우, 이벤트를 초기화할 때 취소 가능 여부를 지정할 수 있습니다.

이벤트를 취소하려면 이벤트의 `preventDefault()` 메서드를 호출하세요. 해당 이벤트에 대한 기본 동작을 실행하지 않게 됩니다.

다양한 종류의 이벤트를 처리해야 하는 처리기의 경우 `preventDefault()`를 호출하기 전에 먼저 `cancelable` 속성의 값을 검사해야 할 수 있습니다.

값
-

이벤트를 취소할 수 있으면 `true`.

예제
--

브라우저 제공자들은 `wheel` (en-US) 이벤트를 최초 수신 시점에만 취소할 수 있도록 제안하고 있습니다. 즉, 두 번째 `wheel` 이벤트부터는 취소할 수 없습니다.

```js
function preventScrollWheel(event) {
  if (typeof event.cancelable !== "boolean" || event.cancelable) {
    // 이벤트를 취소할 수 있으므로 취소함
    event.preventDefault();
  } else {
    // 이벤트를 취소할 수 없음
    // preventDefault() 호출이 안전하지 않음
    console.warn(`The following event couldn't be canceled:`);
    console.dir(event);
  }
}

document.addEventListener("wheel", preventScrollWheel);
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-cancelable② |

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

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


Event.eventPhase - Web API

Event.eventPhase
================

`Event` 인터페이스의 **`eventPhase`** 읽기 전용 속성은 현재 평가 중인 이벤트 흐름 단계를 나타냅니다.

값
-

이벤트 흐름의 단계를 나타내는 정수 값을 반환합니다. 가능한 값은 다음과 같습니다.

`Event.NONE (0)`

이 이벤트는 현재 처리 중이 아닙니다.

`Event.CAPTURING_PHASE (1)`

이벤트가 대상의 부모 객체를 통해 전파 중입니다. 이 단계는 `Window`에서 시작해서, `Document`, `HTMLHtmlElement` (en-US)를 거쳐 이벤트가 대상의 부모에 도달할 때까지 지속됩니다. `EventTarget.addEventListener()`로 등록한 이벤트 수신기 중 캡처 모드로 등록한 수신기는 이 단계에서 발동합니다.

`Event.AT_TARGET (2)`

이벤트가 이벤트 대상에 도착했습니다. `Event.bubbles`가 `false`면 `Event.AT_TARGET` 단계가 끝남과 동시에 이벤트 처리도 마칩니다.

`Event.BUBBLING_PHASE (3)`

이벤트가 대상의 조상을 따라 역순으로 전파 중입니다. 이 단계는 대상의 부모에서 시작해서 마침내 `Window`에 도달할 때까지 지속됩니다. 이 동작을 버블링이라고 부르며, `Event.bubbles`가 `true`여야 발생합니다. 이벤트 수신기 중 캡처 모드가 아닌 수신기는 이 단계에서 발동합니다.

예제
--

### HTML

```html
<h4>이벤트 전파 체인</h4>
<ul>
  <li>'d1'을 클릭하세요</li>
  <li>이벤트의 전파 과정을 확인하세요</li>
  <li>다음 div를 클릭해서 위의 과정을 반복하세요</li>
  <li>캡처 모드를 변경하세요</li>
  <li>위의 과정을 반복하세요</li>
</ul>
<input type="checkbox" id="chCapture" />
<label for="chCapture">캡처 사용</label>
<div id="d1">
  d1
  <div id="d2">
    d2
    <div id="d3">
      d3
      <div id="d4">d4</div>
    </div>
  </div>
</div>
<div id="divInfo"></div>
```

### CSS

```css
div {
  margin: 20px;
  padding: 4px;
  border: thin black solid;
}

#divInfo {
  margin: 18px;
  padding: 8px;
  background-color: white;
  font-size: 80%;
}
```

### JavaScript

```js
let clear = false,
  divInfo = null,
  divs = null,
  useCapture = false;

window.onload = function () {
  divInfo = document.getElementById("divInfo");
  divs = document.getElementsByTagName("div");
  chCapture = document.getElementById("chCapture");
  chCapture.onclick = function () {
    RemoveListeners();
    AddListeners();
  };
  Clear();
  AddListeners();
};

function RemoveListeners() {
  for (let i = 0; i < divs.length; i++) {
    let d = divs[i];
    if (d.id != "divInfo") {
      d.removeEventListener("click", OnDivClick, true);
      d.removeEventListener("click", OnDivClick, false);
    }
  }
}

function AddListeners() {
  for (let i = 0; i < divs.length; i++) {
    let d = divs[i];
    if (d.id != "divInfo") {
      if (chCapture.checked) {
        d.addEventListener("click", OnDivClick, true);
      } else {
        d.addEventListener("click", OnDivClick, false);
        d.onmousemove = function () {
          clear = true;
        };
      }
    }
  }
}

function OnDivClick(e) {
  if (clear) {
    Clear();
    clear = false;
  }
  if (e.eventPhase == 2) e.currentTarget.style.backgroundColor = "red";
  const level =
    e.eventPhase == 0
      ? "없음"
      : e.eventPhase == 1
        ? "캡처"
        : e.eventPhase == 2
          ? "대상"
          : e.eventPhase == 3
            ? "버블"
            : "오류";
  const p = document.createElement("p");
  p.textContent = `${e.currentTarget.id}; eventPhase: ${level}`;
  divInfo.appendChild(p);
}

function Clear() {
  for (let i = 0; i < divs.length; i++) {
    if (divs[i].id != "divInfo") {
      divs[i].style.backgroundColor = i & 1 ? "#f6eedb" : "#cceeff";
    }
  }
  divInfo.textContent = "";
}
```

### 결과

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-eventphase③ |

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

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


Event.type - Web API

Event.type
==========

`Event` 인터페이스의 **`type`** 읽기 전용 속성은 이벤트의 유형을 나타내는 문자열을 반환합니다. 이 속성은 이벤트를 생성할 때 설정되며, `click`, `load`, `error`처럼 특정 이벤트를 지칭할 때 사용하는 이름과 같은 값을 반환합니다.

값
-

`Event`의 유형을 나타내는 {{jdxref("String")}}입니다.

예제
--

이 예제에서는 키보드를 누르거나 마우스를 클릭할 때마다 발생한 이벤트의 유형을 기록합니다.

### HTML

```html
<p>아무 키나 누르거나 마우스를 클릭해서 이벤트 유형을 알아보세요.</p>
<p id="log"></p>
```

### JavaScript

```js
function getEventType(event) {
  const log = document.getElementById("log");
  log.innerText = event.type + "\n" + log.innerText;
}

// 키보드 이벤트
document.addEventListener("keydown", getEventType, false); // 1번
document.addEventListener("keypress", getEventType, false); // 2번
document.addEventListener("keyup", getEventType, false); // 3번

// 마우스 이벤트
document.addEventListener("mousedown", getEventType, false); // 1번
document.addEventListener("mouseup", getEventType, false); // 2번
document.addEventListener("click", getEventType, false); // 3번
```

### 결과

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-type④ |

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

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

같이 보기
-----

* `EventTarget.addEventListener()`
* `EventTarget.removeEventListener()`


Event.isTrusted - Web API

Event.isTrusted
===============

`Event` 인터페이스의 **`isTrusted`** 읽기 전용 속성은 사용자 액션에 의해 생성된 이벤트에서는 `true`, 스크립트에서 생성 또는 수정했거나 `EventTarget.dispatchEvent()`로 발송한 이벤트의 경우 `false`인 불리언 값입니다.

예제
--

```js
if (e.isTrusted) {
  // 신뢰할 수 있는 이벤트
} else {
  // 신뢰 불가능한 이벤트
}
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-istrusted① |

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

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


Event.defaultPrevented - Web API

Event.defaultPrevented
======================

`Event` 인터페이스의 **`defaultPrevented`** 읽기 전용 속성은 `Event.preventDefault()`로 이 이벤트를 취소했는지 나타내는 불리언 값을 반환합니다.

값
-

`true`면 사용자 에이전트의 기본 동작을 취소했고, `false`면 취소하지 않았음을 나타내는 불리언 값입니다.

예제
--

이 예제는 두 개의 `<a>` 요소를 사용한 링크 방문 시도를 기록합니다. 두 번째 링크는 JavaScript를 사용해 동작을 막아놨습니다.

### HTML

```html
<p><a id="link1" href="#link1">첫 번째 링크 방문</a></p>
<p><a id="link2" href="#link2">두 번째 링크 방문 시도</a> (사용 불가)</p>
<p id="log"></p>
```

### JavaScript

```js
function stopLink(event) {
  event.preventDefault();
}

function logClick(event) {
  const log = document.getElementById("log");

  if (event.target.tagName === "A") {
    if (event.defaultPrevented) {
      log.innerText =
        "죄송합니다. 이 링크는 방문할 수 없습니다.\n" + log.innerText;
    } else {
      log.innerText = "링크 방문 중...\n" + log.innerText;
    }
  }
}

const a = document.getElementById("link2");
a.addEventListener("click", stopLink);
document.addEventListener("click", logClick);
```

### 결과

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-defaultprevented① |

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

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


Event.timeStamp - Web API

Event.timeStamp
===============

`Event` 인터페이스의 **`timeStamp`** 읽기 전용 속성은 이벤트가 생성된 시간을 밀리초 단위로 반환합니다.

값
-

시간 원점으로부터 이벤트가 생성되기까지 경과한 시간을 밀리초 단위로 나타낸 수입니다. 전역 객체가 `Window`라면, 시간 원점은 사용자가 링크를 클릭했던 시점, 혹은 스크립트가 문서의 로딩을 시작했던 시점입니다. 워커에서의 시간 원점은 워커가 생성된 시점입니다.

이 값은 5 마이크로초(0.005ms)까지 정확한 `DOMHighResTimeStamp` (en-US)지만, 핑거프린팅을 방지하기 위해 낮은 정밀도로 제공합니다.

예제
--

### HTML

```html
<p>
  이 프레임에 포커스를 두고 아무 키나 눌러 keypress 이벤트의 현재 타임스탬프를
  알아보세요.
</p>
<p>timeStamp: <span id="time">-</span></p>
```

### JavaScript

```js
function getTime(event) {
  const time = document.getElementById("time");
  time.firstChild.nodeValue = event.timeStamp;
}
document.body.addEventListener("keypress", getTime);
```

### 결과

감소된 시간 정밀도
----------

타이밍 공격과 핑거프린팅을 방지하기 위해, `Event.timeStamp`는 브라우저 설정에 따라 일정 자릿수에서 반올림된 값을 반환할 수 있습니다.

Firefox에서는 `privacy.reduceTimerPrecision` 설정이 기본적으로 활성화된 상태며 값은 2ms입니다.

```js
// Firefox 60에서 감소된 시간 정밀도 (2ms)
event.timeStamp;
// 1519211809934
// 1519211810362
// 1519211811670
// ...

// privacy.resistFingerprinting을 활성화했을 때 감소된 시간 정밀도
event.timeStamp;
// 1519129853500
// 1519129858900
// 1519129864400
// ...
```

Firefox에서 `privacy.resistFingerprinting` 설정도 함께 활성화할 경우, 정밀도는 100ms와 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`의 값 중 더 큰 쪽이 됩니다.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-timestamp① |

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

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


Event.stopPropagation() - Web API

Event.stopPropagation()
=======================

`Event` 인터페이스의 **`stopPropagation()`** 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다. 전파를 방지해도 이벤트의 기본 동작은 실행되므로, `stopPropagation()`이 링크나 버튼의 클릭을 막는 것은 아닙니다. 이런 기본 동작을 방지하려면 `preventDefault()` 메서드를 사용하세요. 또한, `stopPropagation()`은 같은 이벤트 대상에 부착한 다른 수신기까지 막지는 않습니다. 이것까지 막으려면 `stopImmediatePropagation()`를 사용하세요.

구문
--

```js
event.stopPropagation();
```

예제
--

이벤트 전파를 확인하세요.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-stoppropagation① |

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

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


Event.stopImmediatePropagation() - Web API

Event.stopImmediatePropagation()
================================

`Event` 인터페이스의 **`stopImmediatePropagation()`** 메서드는 같은 이벤트에 대해 나머지 수신기가 발동하지 못하도록 방지합니다.

같은 이벤트 유형에 대한 다수의 수신기를 하나의 요소에 부착한 경우, 각각의 수신기 호출 순서는 부착 순서와 동일합니다. 그 수신기들 중 하나에서 `stopImmediatePropagation()` 메서드를 호출하면 그 이후의 나머지 수신기들은 호출되지 않습니다.

구문
--

```js
event.stopImmediatePropagation();
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-stopimmediatepropagation① |

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

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


Event.preventDefault() - Web API

Event.preventDefault()
======================

`Event` 인터페이스의 **`preventDefault()`** 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다.

`preventDefault()`를 호출한 이벤트도 수신기 중 하나에서 `stopPropagation()` 또는 `stopImmediatePropagation()`을 호출하기 전까지는 다른 이벤트와 마찬가지로 전파됩니다.

아래에도 적혀있지만, `cancelable: true` 없이 `EventTarget.dispatchEvent()`로 발송한 이벤트처럼 취소 불가능한 이벤트의 경우, `preventDefault()`를 호출해도 아무 효과도 나타나지 않습니다.

구문
--
```

event.preventDefault();
```

예제
--

### 기본 클릭 동작 방지하기

체크박스의 클릭 기본 동작은 체크박스를 체크하거나 체크 해제하는 것입니다. 이 예제는 체크박스의 클릭 기본 동작을 방지하는 모습을 보입니다.

#### JavaScript

```js
document.querySelector("#id-checkbox").addEventListener(
  "click",
  function (event) {
    document.getElementById("output-box").innerHTML +=
      "죄송합니다! <code>preventDefault()</code> 때문에 체크할 수 없어요!<br>";
    event.preventDefault();
  },
  false,
);
```

#### HTML

```html
<p>체크박스를 클릭해주세요.</p>

<form>
  <label for="id-checkbox">체크박스:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

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

#### 결과

### 키 입력이 입력 칸을 채우는 것을 방지하기

이 예제에서는 `preventDefault()`를 사용해서 사용자가 입력 칸에 원하지 않는 문자를 입력하지 못하도록 합니다. 실제로 이런 기능이 필요할 땐 내장 HTML 양식 검증 (en-US)을 사용하세요.

#### HTML

```html
<div class="container">
  <p>이름을 입력하세요. 영문 소문자만 사용할 수 있습니다.</p>

  <form>
    <input type="text" id="my-textbox" />
  </form>
</div>
```

#### CSS

사용자가 잘못된 키를 누를 때 보여줄 경고창을 그리기 위한 CSS입니다.

```css
.warning {
  border: 2px solid #f39389;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  background-color: #fbd8d4;
  color: #3b3c40;
}
```

#### JavaScript

이제 실제 작업을 수행할 JavaScript 코드입니다. 우선 `keypress` (en-US) 이벤트를 수신합니다.

```js
var myTextbox = document.getElementById("my-textbox");
myTextbox.addEventListener("keypress", checkName, false);
```

`checkName()` 함수는 사용자가 누른 키를 관찰해서 허용할지, 허용하지 않을지 결정합니다.

```js
function checkName(evt) {
  var charCode = evt.charCode;
  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      displayWarning(
        "영문 소문자만 입력하세요." + "\n" + "charCode: " + charCode + "\n",
      );
    }
  }
}
```

`displayWarning()` 함수는 경고창을 띄웁니다. 완벽한 모습은 아니지만 예제로는 충분합니다.

```js
var warningTimeout;
var warningBox = document.createElement("div");
warningBox.className = "warning";

function displayWarning(msg) {
  warningBox.innerHTML = msg;

  if (document.body.contains(warningBox)) {
    window.clearTimeout(warningTimeout);
  } else {
    // insert warningBox after myTextbox
    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
  }

  warningTimeout = window.setTimeout(function () {
    warningBox.parentNode.removeChild(warningBox);
    warningTimeout = -1;
  }, 2000);
}
```

#### 결과

참고
--

이벤트 흐름의 어떤 단계에서라도 `preventDefault()`를 호출하면 이벤트를 취소합니다. 즉, 이벤트에 대한 구현체의 기본 동작을 실행하지 않습니다.

`Event.cancelable`을 사용해서 이벤트의 취소 가능 여부를 알아낼 수 있습니다. 취소 불가능한 이벤트에 대해 `preventDefault()`를 호출해도 아무 효과가 없습니다.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-preventdefault③ |

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

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


Event.target - Web API

Event.target
============

`Event` 인터페이스의 **`target`** 속성은 이벤트가 발생한 대상 객체를 가리킵니다. 버블링과 캡처링 단계에서는 `Event.currentTarget` (en-US)과 다를 수 있습니다.

### 값

연관된 `EventTarget`.

예제
--

`event.target` 속성을 사용하여 **이벤트 위임**을 구현할 수 있습니다.

```js
// 목록 생성
const ul = document.createElement("ul");
document.body.appendChild(ul);

const li1 = document.createElement("li");
const li2 = document.createElement("li");
ul.appendChild(li1);
ul.appendChild(li2);

function hide(evt) {
  // e.target은 사용자가 클릭한 <li> 요소를 가리킴
  // 여기서 e.currentTarget은 부모인 <ul>을 가리킬 것
  evt.target.style.visibility = "hidden";
}

// 목록에 수신기 부착
// 각각의 <li>를 클릭할 때 호출됨
ul.addEventListener("click", hide, false);
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-target③ |

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

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

같이 보기
-----

* 이벤트 대상의 비교 (en-US)


Event() - Web API

Event()
=======

**`Event()`** 생성자는 새로운 `Event` 객체를 생성합니다. 생성자로 생성한 이벤트는 브라우저가 생성하는 이벤트와 구분해서 합성 이벤트(synthetic event)라고 부르며, 스크립트에서 발송할 수 있습니다.

구문
--

```js
new Event(type);
new Event(type, options);
```

### 매개변수

`type`

이벤트의 이름을 나타내는 문자열입니다.

`options` Optional

다음 속성을 포함하는 객체입니다.

`bubbles` Optional

이벤트의 버블링 여부를 나타내는 불리언 값입니다. 기본 값은 `false`입니다.

`cancelable` Optional

이벤트를 취소할 수 있는지 나타내는 불리언 값입니다. 기본 값은 `false`입니다.

`composed` Optional

이벤트가 섀도 루트(shadow root) 바깥의 이벤트 수신기로도 전달될지 나타내는 불리언 값입니다. `Event.composed` (en-US)에서 자세한 정보를 확인하세요. 기본 값은 `false`입니다.

### 반환 값

새로운 `Event` 객체.

예제
--

```js
// 버블링 가능하고 취소 불가능한 look 이벤트 생성

const evt = new Event("look", { bubbles: true, cancelable: false });
document.dispatchEvent(evt);

// document 외의 다른 요소에서도 이벤트 발송 가능
myDiv.dispatchEvent(evt);
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-event |

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

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

같이 보기
-----

* `Event`
* `EventTarget.dispatchEvent()`
* 이벤트 생성 및 발동


Event.cancelBubble - Web API

Event.cancelBubble
==================

**지원이 중단되었습니다:** 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.

**Event.cancelBubble** 속성은 `Event.stopPropagation()`의 별칭입니다. 이벤트 핸들러에서 반환되기 전에 값을 true로 설정하면 이벤트가 전파되지 않습니다.

예제
--

```js
elem.onclick = function (event) {
  // Do cool things here
  event.cancelBubble = true;
};
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-cancelbubble① |

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

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


Event.bubbles - Web API

Event.bubbles
=============

`Event` 인터페이스의 **`bubbles`** 읽기 전용 속성은 이벤트가 DOM 트리를 타고 위쪽으로 버블링되는지 나타냅니다.

**참고:** 이벤트 버블링과 캡처에서 버블링에 대한 자세한 정보를 알아보세요.

값
-

이벤트가 DOM 트리를 타고 버블링하면 `true`인 불리언 값입니다.

예제
--

```js
function handleInput(e) {
  // 이벤트의 버블링 여부를 확인해서...
  if (!e.bubbles) {
    // ... 버블링 하지 않으면 이벤트를 넘겨주기
    passItOn(e);
  }

  // 이미 버블링
  doOutput(e);
}
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-bubbles③ |

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

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

같이 보기
-----

* `stopPropagation()`으로 캡처링/버블링 단계에서 이벤트의 추가 전파를 막을 수 있습니다.
* `stopImmediatePropagation()`으로 같은 DOM 레벨의 다른 이벤트 수신기들이 현재 이벤트에 발동하지 않도록 막을 수 있습니다.
* `preventDefault()`는 이벤트의 전파를 막지는 않지만, 이벤트에 대한 브라우저의 기본 동작을 비활성화합니다.


console.timeLog() - Web API

console.timeLog()
=================

**`console.timeLog()`** 메서드는 앞서 `console.time()`을 호출하여 시작한 타이머의 현재 값을 콘솔에 출력합니다.

상세한 내용과 예제는 타이머 문서를 참고하세요.

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

구문
--

```js
timeLog(label)
```

### 매개변수

`label`

콘솔에 출력할 타이머의 이름

### 반환 값

레이블(`label`) 매개변수를 전달하지 않았을 때
```

default: 1042ms
```

전달된 `label`이 있을 때
```

timer name: 1242ms
```

### 예외 처리

실행 중인 타이머가 없다면 `timeLog()`는 경고를 반환합니다.
```

Timer "default" doesn't exist.
```

레이블 매개변수를 전달했지만 해당하는 타이머가 없을 때는 다음과 같은 경고를 반환합니다.
```

Timer "timer name" doesn't exist.
```

예제
--

```js
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff…");
console.timeEnd("answer time");
```

 위 예제의 출력 결과는 사용자가 첫 번째 경고창을 닫을 때까지 걸린 시간을 보여준 다음,
 두 번째 경고 창을 닫을 때까지 걸린 시간을 보여줍니다.

![Firefox 콘솔의 타이머 출력 결과](/ko/docs/Web/API/console/timelog_static/timer_output.png)

 타이머의 이름은 `timeLog()`를 사용해서 타이머의 값이 기록될 때 그리고 타이머가 중단되었을 때 표시된다는 점을 명심하세요.
 또한 `timeEnd()`를 실행하면 "timer ended(타이머가 종료됨)"이라는 추가적인 정보도 표시되는데
 이를 통해 해당 타이머가 더 이상 시간을 추적하지 않는다는 사실을 명확하게 해줍니다.

명세
--

| Specification |
| --- |
| Console Standard # timelog |

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

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


console.group() - Web API

console.group()
===============

**`console.group()`** 메서드는 웹 콘솔 로그에 새로운 인라인 그룹을 만듭니다. 이는 `console.groupEnd()`가 호출될 때까지 모든 다음 출력을 추가 수준으로 들여씁니다.

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

구문
--

```js
console.group([label]);
```

매개변수
----

`label`

그룹의 레이블입니다. 이 매개변수는 선택사항입니다. (Chrome 59에서 테스트됨) `console.groupEnd()`와 함께 작동하지 않습니다.

### 콘솔에서 그룹 사용하기

중첩 그룹을 사용하여 관련 메시지를 시각적으로 연결하여 출력을 구성할 수 있습니다. 새 중첩 블록을 만들려면 `console.group()`을 호출하세요. `console.groupCollapsed()` 메서드와 비슷하지만 새 블록이 접혀 있고 이를 읽으려면 공개 버튼을 클릭해야 합니다.

**참고:** Gecko 9부터 Gecko 51까지 `groupCollapsed()` 메소드는 `group()`과 동일했습니다.
 축소된 그룹은 Gecko 52부터 완전히 지원됩니다. Firefox bug 1088360를 참조하세요.

현재 그룹을 종료하려면 `console.groupEnd()`를 호출하세요. 예를 들어...

```js
console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");
```

실행 결과는 다음과 같습니다.

![A screenshot of messages nested in the console output.](/ko/docs/Web/API/console/group_static/nesting.png)

자세한 내용은 `console` 문서의 콘솔 그룹 사용하기를 참조하세요.

명세
--

| Specification |
| --- |
| Console Standard # group |

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

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


console.table() - Web API

console.table()
===============

**`console.table()`** 메서드는 표 형식의 데이터를 테이블로 표시합니다.

 이 함수에는 배열 또는 객체여야 하는 `data`라는 인수를 반드시 전달해야 합니다.
 두 번째 인수인 `columns`는 선택적으로 전달할 수 있습니다.

 이 함수는 `data`를 테이블로 표시합니다. 배열의 각 원소(`data`가 객체인 경우에는 열거 가능한 속성)는
 테이블의 한 줄이 됩니다.

 테이블의 첫 번째 칼럼은 `(index)`를 레이블로 사용합니다. `data`가 배열인 경우에는 배열의 인덱스가
 이 칼럼의 값으로 사용됩니다. `data`가 객체인 경우에는 속성 이름이 값으로 사용됩니다. (Firefox에서는)
 `console.table`이 1000줄 까지만 표현할 수 있는 제약이 있다는 점에 주의하세요
 (첫 번째 줄은 레이블 인덱스입니다).

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

### 윈시 자료형의 컬렉션

`data` 인수는 배열 또는 객체일 것입니다.

```js
// 문자열의 배열

console.table(["apples", "oranges", "bananas"]);
```

| (index) | Values |
| --- | --- |
| 0 | 'apples' |
| 1 | 'oranges' |
| 2 | 'bananas' |

```js
// 속성이 문자열인 배열

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const me = new Person("Tyrone", "Jones");

console.table(me);
```

| (index) | Values |
| --- | --- |
| firstName | 'Tyrone' |
| lastName | 'Jones' |

### 합성 자료형의 컬렉션

배열의 원소나 객체의 속성이 배열 또는 객체라면 그 배열의 원소 혹은 그 객체의 속성이 칼럼당 하나씩 각 줄에 표시됩니다.

```js
// 배열의 배열

const people = [
  ["Tyrone", "Jones"],
  ["Janet", "Smith"],
  ["Maria", "Cruz"],
];
console.table(people);
```

| (index) | 0 | 1 |
| --- | --- | --- |
| 0 | 'Tyrone' | 'Jones' |
| 1 | 'Janet' | 'Smith' |
| 2 | 'Maria' | 'Cruz' |

```js
// 객체의 배열

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const tyrone = new Person("Tyrone", "Jones");
const janet = new Person("Janet", "Smith");
const maria = new Person("Maria", "Cruz");

console.table([tyrone, janet, maria]);
```

배열이 객체를 포함하고 있다면 칼럼은 속성의 이름을 레이블로 사용한다는 점에 주의하세요.

| (index) | firstName | lastName |
| --- | --- | --- |
| 0 | 'Tyrone' | 'Jones' |
| 1 | 'Janet' | 'Smith' |
| 2 | 'Maria' | 'Cruz' |

```js
// 다른 객체를 포함하는 객체

const family = {};

family.mother = new Person("Janet", "Jones");
family.father = new Person("Tyrone", "Jones");
family.daughter = new Person("Maria", "Jones");

console.table(family);
```

| (index) | firstName | lastName |
| --- | --- | --- |
| daughter | 'Maria' | 'Jones' |
| father | 'Tyrone' | 'Jones' |
| mother | 'Janet' | 'Jones' |

### 표시할 칼럼 제한

 기본적으로 `console.table()`는 각 줄마다 모든 원소를 다 나열합니다. 선택적으로 전달할 수 있는
 `columns` 매개변수를 사용하면 일부 칼럼만 선택하여 표시할 수 있습니다.

```js
// 객체의 배열. firstName만 표시

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const tyrone = new Person("Tyrone", "Jones");
const janet = new Person("Janet", "Smith");
const maria = new Person("Maria", "Cruz");

console.table([tyrone, janet, maria], ["firstName"]);
```

| (index) | firstName |
| --- | --- |
| 0 | 'Tyrone' |
| 1 | 'Janet' |
| 2 | 'Maria' |

### 칼럼 정렬

칼럼의 레이블을 클릭하면 특정 칼럼을 기준으로 테이블을 정렬할 수 있습니다.

구문
--

```js
table(data)
table(data, columns)
```

### 매개변수

`data`

표시할 데이터. 배열 또는 객체여야 합니다.

`columns`

출력에 포함할 칼럼 이름을 포함한 배열

### 반환 값

없음 (`undefined`).

명세
--

| Specification |
| --- |
| Console Standard # table |

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

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


console.assert() - Web API

console.assert()
================

**`console.assert()`** 메서드는 주어진 가정이 거짓인 경우 콘솔에 오류 메시지를 출력합니다. 참인 경우, 아무것도 하지 않습니다.

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

구문
--

```js
console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]); // C-like message formatting
```

### 매개변수

`assertion`

아무 불리언 표현식. 거짓인 경우, 메시지를 콘솔에 출력합니다.

`obj1` ... `objN`

출력에 사용할 JavaScript 객체. 각각의 문자열 표현은 입력한 순서대로 함께 출력됩니다.

`msg`

0개 이상의 치환 문자열을 포함하는 JavaScript 문자열.

`subst1` ... `substN`

`msg` 매개변수의 치환 문자열에 대입할 JavaScript 객체. 이 매개변수를 사용하면 출력 형식을 추가로 제어할 수 있습니다.

예제
--

다음 예제는 객체와 가정을 함께 사용하는 법을 보입니다.

```js
const errorMsg = "the # is not even";
for (let number = 2; number <= 5; number += 1) {
  console.log("the # is " + number);
  console.assert(number % 2 === 0, { number: number, errorMsg: errorMsg });
  // or, using ES2015 object property shorthand:
  // console.assert(number % 2 === 0, {number, errorMsg});
}
// output:
// the # is 2
// the # is 3
// Assertion failed: {number: 3, errorMsg: "the # is not even"}
// the # is 4
// the # is 5
// Assertion failed: {number: 5, errorMsg: "the # is not even"}
```

자세한 내용은 `console` 문서의 콘솔에 텍스트 출력하기를 참고하세요.

명세
--

| Specification |
| --- |
| Console Standard # assert |

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

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


console.error() - Web API

console.error()
===============

**`console.error()`** 메서드는 웹 콘솔에 에러 메시지를 출력합니다.

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

구문
--

```js
console.error(obj1 [, obj2, ..., objN]);
console.error(msg [, subst1, ..., substN]);
```

### 매개변수

`obj1` ... `objN`

출력할 JavaScript 객체의 리스트. 각 객체의 문자열 표현은 나열된 순서로 함께 출력됩니다.

`msg`

0개 이상의 하위 문자열을 포함하는 JavaScript 문자열.

`subst1` ... `substN`

`msg` 안의 대체할 하위 문자열을 포함하는 JavaScript 객체. 출력 형식에 추가 제어를 할 수 있게 해줍니다.

자세한 내용은 콘솔에 텍스트 출력하기를 확인하세요.

명세
--

| Specification |
| --- |
| Console Standard # error |

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

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


console.groupCollapsed() - Web API

console.groupCollapsed()
========================

**`console.groupCollapsed()`** 메서드는 웹 콘솔에 새로운 인라인 그룹을 생성합니다. `console.group()`과는 달리, `console.groupCollapsed()`의 그룹은 닫힌 상태로 생성되며, 안쪽의 내용을 보려면 그룹 옆의 펼침 버튼으로 그룹을 먼저 펼쳐야 합니다.

`console.groupEnd()`를 호출해서 부모 그룹으로 나갈 수 있습니다.

자세한 내용과 예제는 `console` 문서의 콘솔 그룹 사용하기를 참고하세요.

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

구문
--

```js
groupCollapsed();
groupCollapsed(label);
```

### 매개변수

`label` Optional

그룹의 레이블입니다.

명세
--

| Specification |
| --- |
| Console Standard # groupcollapsed |

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

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


console.dirxml() - Web API

console.dirxml()
================

**`console.dirxml()`** 메서드는 주어진 XML/HTML 요소의 자손 요소를 인터랙티브한 트리로 표시합니다.
 요소를 표시하는 것이 불가능한 경우에는 JavaScript 객체 보기가 대신 보여집니다.
 출력된 결과는 자식 노드의 내용을 볼 수 있는 여닫을 수 있는 노드의 계층적인 목록으로 나타납니다.

구문
--

```js
dirxml(object)
```

### 매개변수

`object`

출력할 속성을 포함한 JavaScript 객체

### 반환 값

없음 (`undefined`).

명세
--

| Specification |
| --- |
| Console Standard # dirxml |

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

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


console.countReset() - Web API

console.countReset()
====================

**`console.countReset()`** 메서드는 `console.count()`의 카운터를 초기화합니다.

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

구문
--

```js
console.countReset([label]);
```

### 매개변수

`label` Optional

`String`. 지정한 경우, 이 레이블을 지정한 `count()`를 0으로 초기화합니다. 누락한 경우 default 카운터를 0으로 초기화합니다.

예제
--

```js
let user = "";

function greet() {
  console.count();
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
console.countReset();
```

위 코드의 출력 결과는 다음과 같습니다.
```

"default: 1"
"default: 2"
"default: 3"
"default: 4"
"default: 0"
```

`console.countReset()`이 기본 카운터를 0으로 초기화했음을 알 수 있습니다.

첫 번째 `count()`의 매개변수에는 문자열 "bob"을 제공하고, 두 번째에는 문자열 "alice"를 제공할 경우...

```js
let user = "";

function greet() {
  console.count(user);
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.countReset("bob");
console.count("alice");
```

다음과 같이 출력합니다.
```

"bob: 1"
"alice: 1"
"alice: 2"
"bob: 0"
"alice: 3"
```

카운터 "bob"을 초기화해도 "alice"의 값에는 영향이 없습니다.

명세
--

| Specification |
| --- |
| Console Standard # countreset |

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

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


console.clear() - Web API

console.clear()
===============

**`console.clear()`** 메서드는 현재 환경에서 가능한 경우, 콘솔에 기록된 메시지를 모두 지웁니다.

구문
--

```js
console.clear();
```

명세
--

| Specification |
| --- |
| Console Standard # clear |

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

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


console.timeEnd() - Web API

console.timeEnd()
=================

**`console.timeEnd()`** 는 이전에 `console.time()`를 호출하여 시작된 타이머를 중지합니다.

자세한 내용과 예제는 타이머를 참조하세요.

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

구문
--

```js
console.timeEnd(label);
```

### 매개변수

`label`

중지할 타이머의 이름입니다. 중지되면 경과 시간이 웹 콘솔에 자동으로 시간이 종료되었음을 알리는 표시와 함께 표시됩니다.

예제
--

```js
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");
```

위 예제의 출력은 사용자가 첫 번째 경고 상자를 닫는 데 걸린 시간과 사용자가 두 번째 경고를 닫는 데 걸린 시간을 보여줍니다.

![](/ko/docs/Web/API/console/timeend_static/timer_output.png)

타이머 이름은 `timeLog()`를 사용하여 타이머 값을 기록할 때 표시되고 중지될 때 다시 표시됩니다. 또한 timeEnd()에 대한 호출에는 타이머가 더 이상 시간을 추적하지 않는다는 것을 분명히 하기 위해 "타이머 종료됨"이라는 추가 정보가 있습니다.

명세
--

| Specification |
| --- |
| Console Standard # timeend |

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

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


console.debug() - Web API

console.debug()
===============

**`console.debug()`** 메서드는 메시지를 "디버그" 중요도로 콘솔에 출력합니다. 디버그 중요도 메시지는 별도 설정 없이는 보이지 않습니다. 대부분의 경우 로그 수준은 콘솔 UI 내에서 구성됩니다. 이 로그 수준은 `Debug` 또는 `Verbose` 로그 수준에 해당할 수 있습니다.

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

구문
--

```js
console.debug(obj1 [, obj2, ..., objN]);
console.debug(msg [, subst1, ..., substN]);
```

### 매개변수

`obj1` ... `objN`

출력에 사용할 JavaScript 객체. 각각의 문자열 표현은 입력한 순서대로 함께 출력됩니다.

`msg`

0개 이상의 치환 문자열을 포함하는 JavaScript 문자열. `subst1`부터 `substN`까지 순서대로 치환됩니다.

`subst1` ... `substN`

`msg` 매개변수의 치환 문자열에 대체할 JavaScript 객체. 출력 형식에 추가 제어를 할 수 있게 해줍니다. 치환 작동 방식에 대한 설명은 console 문서의 문자열 치환 사용하기를 참조하세요.

명세
--

| Specification |
| --- |
| Console Standard # debug |

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

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


console.trace() - Web API

console.trace()
===============

**`console.trace()`** 메서드는 웹 콘솔에 스택 추적을 출력합니다.

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

자세한 내용과 예제는 `console` 문서의 스택 추적을 참고하세요.

구문
--

```js
console.trace([...any, ...data]);
```

### 매개변수

`...any, ...data` Optional

스택 추적과 함께 콘솔에 출력할 0개 이상의 객체. `console.log()` 메서드에 전달되는 것과 동일한 방식으로 조합되고 형식이 지정됩니다.

예제
--

```js
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();
```

콘솔에 다음과 같은 추적이 표시됩니다.
```

bar
foo
<anonymous>
```

명세
--

| Specification |
| --- |
| Console Standard # trace |

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

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


console.count() - Web API

console.count()
===============

**`console.count()`** 메서드는 특정 `count()` 호출의 횟수를 세어 출력합니다.

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

구문
--

```js
console.count([label]);
```

### 매개변수

`label` Optional

`String`. 지정한 경우, 이 레이블을 지정한 `count()` 호출의 수를 출력합니다. 누락한 경우 "default"를 지정한 것처럼 동작합니다.

예제
--

```js
let user = "";

function greet() {
  console.count();
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
```

위 코드의 출력 결과는 다음과 같습니다.
```

"default: 1"
"default: 2"
"default: 3"
"default: 4"
```

레이블을 명시하지 않았기 때문에 `default`로 나타납니다.

첫 번째 `count()`의 매개변수에는 문자열 "bob"을 제공하고, 두 번째에는 문자열 "alice"를 제공할 경우...

```js
let user = "";

function greet() {
  console.count(user);
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");
```

다음과 같이 출력합니다.
```

"bob: 1"
"alice: 1"
"alice: 2"
"alice: 3"
```

이제 `label` 값만으로 별도의 카운트를 유지 관리하고 있습니다.

명세
--

| Specification |
| --- |
| Console Standard # count |

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

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


console.dir() - Web API

console.dir()
=============

**`console.dir()`** 메서드는 주어진 JavaScript 객체 속성을 인터랙티브한 목록으로 표시합니다.
 출력된 결과는 자식 객체의 내용을 볼 수 있는 여닫는 삼각형과 함께 계층적인 목록으로 나타납니다.

 다시 말해, `console.dir()`은 주어진 JavaScript 객체의 모든 속성을 콘솔에서 볼 수 있는 방법으로서
 이를 사용하면 개발자가 객체의 속성을 쉽게 확인할 수 있습니다.

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

![console-dir.png](/ko/docs/Web/API/console/dir_static/console-dir.png)

구문
--

```js
dir(object)
```

### 매개변수

`object`

출력하고 싶은 속성을 포함한 JavaScript 객체

### 반환 값

None (`undefined`).

명세
--

| Specification |
| --- |
| Console Standard # dir |

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

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

같이 보기
-----

* MSDN: Using the F12 Tools Console to View Errors and Status
* Chrome Console API reference


console.time() - Web API

console.time()
==============

**`console.time()`** 메서드는 타이머를 시작해 작업이 얼마나 걸리는지 추적할 수 있습니다. 각 타이머에게 고유한 이름을 줄 수 있고, 한 페이지에 최대 10,000개의 타이머를 설정할 수 있습니다. 같은 이름으로 `console.timeEnd()`를 호출할 때, 브라우저가 밀리초 단위로 경과한 시간을 출력합니다.

자세한 내용과 예제는 `console` 문서의 타이머를 참고하세요.

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

구문
--

```js
console.time(label);
```

매개변수
----

`label`

새 타이머에게 설정할 이름. 타이머를 식별합니다. 같은 이름으로 `console.timeEnd()`를 호출하면 타이머가 중단되고 콘솔에 시간을 출력합니다.

명세
--

| Specification |
| --- |
| Console Standard # time |

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

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

같이 보기
-----

* `console.timeEnd()`
* `console.timeLog()`


console.log() - Web API

console.log()
=============

**`console.log()`** 메서드는 웹 콘솔에 메시지를 출력합니다. 메시지는 (선택적 대체 값을 포함한) 단일 문자열이거나 더 많은 JavaScript 객체중 하나일 수 있습니다.

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

구문
--

```js
console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);
```

### 매개변수

`obj1` ... `objN`

출력할 JavaScript 객체 목록입니다. 이러한 각 객체의 문자열 표현은 입력한 순서대로 함께 출력됩니다. 최신 버전의 Chrome 및 Firefox에서, 콘솔에 기록되는 것은 객체에 대한 참조이며, `console.log()`를 호출하는 순간에 객체의 '값'이 반드시 필요한 것은 아닙니다.

`msg`

0개 이상의 치환 문자열들을 포함하는 JavaScript 문자열입니다.

`subst1` ... `substN`

`msg` 내의 치환 문자열들을 치환할 JavaScript 객체들입니다. 출력 형식에 추가 제어를 할 수 있게 해줍니다.

자세한 내용은 `console` 문서의 콘솔에 텍스트 출력을 참고하세요.

log()와 dir()의 차이
----------------

당신은 `console.dir()`과 `console.log()`가 무엇이 다른지 궁금할 수 있습니다.

DOM 요소들을 콘솔로 보낼 때 Chrome에서 다른 유용한 차이점이 있습니다.

![](/ko/docs/Web/API/console/log_static/dozdcyr.png)

* `console.log`는 요소를 HTML과 같은 트리 구조로 출력합니다.
* `console.dir`은 요소를 JSON과 같은 트리 구조로 출력합니다.

구체적으로, `console.log`는 DOM 요소에 대해 특별한 처리를 제공하지만 `console.dir`은 그렇지 않습니다. 이것은 종종 DOM JS 객체의 전체 표현을 보려고 할 때 유용합니다.

이것과 다른 함수들에 대한 더 많은 정보는 Chrome Console API reference에서 확인할 수 있습니다.

객체 로깅하기
-------

`console.log(obj)`를 사용하지 말고 `console.log(JSON.parse(JSON.stringify(obj)))`를 사용하시기 바랍니다.

이 방법은 여러분이 로그를 남길 당시의 `obj` 값을 보려고 사용했을 것입니다. 그러나 많은 브라우저가 값이 갱신 될때마다 끊임없이 바뀐 값을 보여줍니다. 이는 여러분이 원하는 방법이 아닐 것입니다.

명세
--

| Specification |
| --- |
| Console Standard # log |

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

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

같이 보기
-----

* MSDN: F12 도구 콘솔을 사용하여 오류 및 상태 보기
* NodeJS: Console API


console.warn() - Web API

console.warn()
==============

**`console.warn()`** 메서드는 웹 콘솔에 경고 메시지를 출력합니다.

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

**참고:** Firefox에서는 웹 콘솔의 경고 옆에 작은 느낌표 아이콘이 나타납니다.

구문
--

```js
console.warn(obj1 [, obj2, ..., objN]);
console.warn(msg [, subst1, ..., substN]);
```

매개변수
----

`obj1` ... `objN`

출력할 JavaScript 객체의 리스트. 각 객체의 문자열 표현은 입력한 순서대로 함께 출력됩니다.

`msg`

0개 이상의 치환 문자열을 포함하는 JavaScript 문자열.

`subst1` ... `substN`

`msg` 안의 문자열을 치환하기 위한 JavaScript 객체. 출력 형식에 추가 제어를 할 수 있게 해줍니다.

자세한 내용은 `console` 문서의 콘솔에 텍스트 출력하기를 참고하세요.

명세
--

| Specification |
| --- |
| Console Standard # warn |

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

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

같이 보기
-----

* MSDN: F12 도구 콘솔을 사용하여 오류 및 상태 보기


console.groupEnd() - Web API

console.groupEnd()
==================

**`console.groupEnd()`** 메서드는 웹 콘솔 로그의 현재 인라인 그룹에서 나옵니다. 자세한 내용과 예제는 `console` 문서의 콘솔 그룹 사용하기를 참고하세요.

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

구문
--

```js
groupEnd();
```

### 매개변수

없음.

명세
--

| Specification |
| --- |
| Console Standard # groupend |

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

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

같이 보기
-----

* `console.group()`


알림 API 사용하기 - Web API

알림 API 사용하기
===========

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

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

웹 페이지나 앱에서 알림(Notifications) API를 사용하면 페이지 외부에 표시되는 알림을 보낼 수 있습니다. 이것은 시스템 레벨에서 처리되는 것으로 애플리케이션이 유휴 상태거나 백그라운드에 있더라도 웹 앱이 사용자에게 정보를 보낼 수 있습니다. 이 글에서는 여러분의 앱에서 이 API를 사용하기 위한 기초를 알아봅니다.

일반적으로 시스템 알림은 운영 체계의 표준 알림 메커니즘을 말합니다. 예를 들어 일반적인 데스크톱 시스템이나 모바일 장치의 브로드캐스트 알림을 생각해봅시다.

![](/ko/docs/Web/API/Notifications_API/Using_the_Notifications_API/android-notification.png)

물론 시스템 알림 시스템은 플랫폼 및 브라우저에 따라 다양하지만 괜찮습니다. 알림 API는 범용적으로 작성돼서 대부분의 시스템 알림 시스템과 호환됩니다.

예시
--

웹 알림의 대표적인 사용 사례는 웹 기반 메일이나 IRC 애플리케이션입니다. 새 메시지가 도착하면 사용자가 다른 애플리케이션으로 다른 일을 하더라도 사용자에게 알릴 필요가 있습니다. 요즘은 Slack 등 이러한 사례를 많이 찾아볼 수 있습니다.

우리는 웹 알림을 사용하는 방법을 좀더 잘 알 수 있도록 실제적인 예시 — 할 일 목록 앱 —를 작성했습니다. 데이터는 로컬에서 IndexedDB로 저장하고 사용자 알림은 할 일 기한이 됐을 때 시스템 알림을 사용합니다. 할 일 목록 코드를 다운로드하거나, 앱의 라이브 실행을 보세요.

권한 요청하기
-------

앱이 알림을 보내려면 먼저 사용자가 애플리케이션에 해당 권한을 허용해줘야 합니다. 이는 API가 웹페이지 외부와 상호작용할 때 통상적인 요구 사항입니다. 최소 한번은 사용자가 해당 애플리케이션이 알림을 표시할 수 있는 권한을 허용해줄 필요가 있으며 이로써 사용자는 어떤 앱/사이트가 알림을 보일 수 있는지 제어할 수 있습니다.

과거에 푸시 알림에 대한 악용 때문에 웹 브라우저와 개발자는 그런 문제를 완화할 수 있는 전략을 구현하게 되었습니다. 알림을 발생시키려면 사용자 제스처(예: 단추 클릭)에 대한 응답으로만 가능합니다. 이것은 모범적인 방식일 뿐 아니라 — 사용자에게 미동의 알림으로 스팸을 보내면 안됩니다 — 실제로도 전향적인 브라우저는 사용자 제스처에 대한 응답으로 촉발되지 않은 알림은 명시적으로 불허합니다. Firefox는 이미 72 버전부터 이렇게 하고 있으며 Safari도 하고 있습니다.

또한 크롬과 Firefox에서는 사이트가 보안 콘텍스트(즉, HTTPS)가 아니면 알림을 아예 요청할 수 없으며 크로스 오리진 `<iframe>` (en-US)으로부터의 알림 권한은 요청할 수 없게 되었습니다.

### 현재 권한 상태 확인하기

권한을 이미 가지고 있는지 확인하려면 `Notification.permission` 읽기 전용 속성의 값을 확인하면 됩니다. 다음 세 가지 값이 있을 수 있습니다.

`default`

사용자에게 아직 권한을 요구하지 않았으며 따라서 알림을 표시하지 않습니다.

`granted`

사용자에게 알림 표시 권한을 요구했으며 사용자는 권한을 허용했습니다.

`denied`

사용자가 명시적으로 알림 표시 권한을 거부했습니다.

### 권한 획득하기

아직 알림 표시 권한이 허용되지 않았다면 애플리케이션은 `Notification.requestPermission()` (en-US) 메서드를 사용하여 사용자에게 권한을 요청할 필요가 있습니다. 간단하게는 아래와 같이 넣습니다.

```js
Notification.requestPermission().then(function (result) {
  console.log(result);
});
```

여기서는 프로미스 방식의 메서드 버전을 사용합니다. 과거 버전을 지원하려면 아래와 같이 과거의 콜백 버전을 사용해야 할 수 있습니다.

```js
Notification.requestPermission();
```

콜백 버전은 콜백 함수를 옵셔널하게 받을 수 있으며 사용자가 표시 권한 요청에 응답한 후에 호출됩니다.

### 예시

우리가 만드는 할 일 데모에서는 "알림 허용" 단추를 둬서 누르면 앱의 알림 권한을 요청합니다.

```html
<button id="enable">알림 허용</button>
```

누르면 다음 `askNotificationPermission()` 함수를 호출합니다.

```js
function askNotificationPermission() {
  // 권한을 실제로 요구하는 함수
  function handlePermission(permission) {
    // 사용자의 응답에 관계 없이 크롬이 정보를 저장할 수 있도록 함
    if (!("permission" in Notification)) {
      Notification.permission = permission;
    }

    // 사용자 응답에 따라 단추를 보이거나 숨기도록 설정
    if (
      Notification.permission === "denied" ||
      Notification.permission === "default"
    ) {
      notificationBtn.style.display = "block";
    } else {
      notificationBtn.style.display = "none";
    }
  }

  // 브라우저가 알림을 지원하는지 확인
  if (!("Notification" in window)) {
    console.log("이 브라우저는 알림을 지원하지 않습니다.");
  } else {
    if (checkNotificationPromise()) {
      Notification.requestPermission().then((permission) => {
        handlePermission(permission);
      });
    } else {
      Notification.requestPermission(function (permission) {
        handlePermission(permission);
      });
    }
  }
}
```

두 번째 메인 블록을 먼저 보면 알림이 지원되는지 확인하는 것을 알 수 있습니다. 지원하는 경우 그에 따라 `Notification.requestPermission()`의 프로미스 기반 버전이 지원되는지 보는 확인을 실행합니다. 맞다면 프로미스 기반 버전을 실행하고(Safari 외에는 전부 지원됨) 아니라면 과거의 콜백 기반 버전을 실행합니다(Safari에서 지원).

코드 중복을 피하기 위해 뒷 처리 수행 코드를 `handlePermission()` 함수에 넣었는데 이 함수가 코드에서 첫 번째 메인 블록입니다. 그 안에서는 `Notification.permission` 값을 명시적으로 설정하고(크롬의 일부 과거 버전에서는 이게 자동으로 안됩니다) 사용자가 권한 대화창에서 선택한 결과에 따라 단추를 보이거나 숨깁니다. 권한이 이미 허용됐는지 보여주려는 것은 아니고 사용자가 권한을 거부한 경우 나중에 다시 선택할 수 있도록 해주는 것입니다.

**참고:** 크롬 37 버전 전에는 `load` 이벤트 핸들러에서 `Notification.requestPermission()` (en-US)을 호출할 수 없었습니다(이슈 274284 참고).

### requestPermission() 프로미스 기능 알아내기

위에서 우리는 브라우저가 `Notification.requestPermission()`의 프로미스 버전을 지원하는지 확인해야 한다고 했습니다. 아래와 같이 했습니다.

```js
function checkNotificationPromise() {
  try {
    Notification.requestPermission().then();
  } catch (e) {
    return false;
  }

  return true;
}
```

기본적으로 `requestPermission()`에 `.then()` 메서드가 있는지 알아보는 것입니다. 맞다면 계속 진행하고 `true`를 반환합니다. 실패라면 `catch() {}` 블록에서 `false`를 반환합니다.

알림 만들기
------

알림 만들기는 쉬워서 `Notification` 생성자만 사용하면 됩니다. 이 생성자는 알림에 표시할 제목과 `icon` (en-US)이나 텍스트 `body` (en-US) 같은 알림 조작 옵션 몇 가지를 받도록 돼 있습니다.

예를 들어 할일 목록 예시에서 아래 코드로 필요시 알림을 만듭니다(`createNotification()` 함수에서 찾을 수 있음).

```js
var img = "/to-do-notifications/img/icon-128.png";
var text = '아! "' + title + '" 작업 기한이 만료됐습니다.';
var notification = new Notification("할 일 목록", { body: text, icon: img });
```

알림 닫기
-----

Firefox와 Safari는 알림을 자동으로 금방(약 4초) 닫습니다. 이것은 운영 체계 수준에서도 발생합니다. 그런데 크롬 같은 다른 브라우저는 그렇지 않습니다. 모든 브라우저에서 알림이 닫히게 하려면 `setTimeout()` 함수에서 `Notification.close` (en-US) 함수를 호출하여 알림을 4초 후에 닫으면 됩니다. `bind()`를 사용하여 `close()` 호출이 알림에 연동되게 하는 것도 해줘야 합니다.

```js
setTimeout(notification.close.bind(notification), 4000);
```

**참고:** "close" 이벤트를 받았을 때 알림을 닫은 것이 사용자인지는 보장할 수 없습니다. 이것은 규격과도 일치합니다. 규격에서는 "알림이 닫힐 때 그것이 기반 알림 플랫폼에 의한 것이든지 사용자에 의한 것이든지 닫기 절차가 실행돼야 한다."고 기술하고 있습니다.

알림 이벤트
------

`Notification` 인스턴스에 촉발되는 이벤트는 다음 네 가지입니다.

`click`

사용자가 알림을 클릭하면 촉발됩니다.

`close`

알림이 닫힌 후 촉발됩니다.

`error`

알림에 문제가 있을 경우 촉발되며 대개 어떤 이유에 의해 알림을 표시할 수 없는 경우입니다.

`show`

알림이 사용자에게 표시되면 촉발됩니다.

이 이벤트들은 `onclick` (en-US), `onclose` (en-US), `onerror` (en-US), `onshow` (en-US) 핸들러로 추적할 수 있습니다. `Notification`이 `EventTarget`을 상속하기 때문에 `addEventListener()` 메서드를 사용할 수 있습니다.

기존 알림 대체하기
----------

사용자가 잠깐 사이에 알림을 많이 받는 것은 바람직하지 않습니다. 예를 들어 메신저 애플리케이션이 모든 수신 메시지를 사용자에게 알리는데 그게 아주 많다면요? 사용자가 알림 때문에 대량 스팸을 받지 않도록 알림 대기열(큐)을 수정해서 걸려 있는 알림 하나나 여럿을 새로운 알림 하나로 대체할 수 있습니다.

이를 위해 새 알림에 태그를 붙일 수 있습니다. 알림에 이미 같은 태그가 있고 표시되지 않았다면 새 알림으로 이전 알림을 대체하는 것입니다. 같은 태그의 알림이 이미 표시됐다면 이전 알림을 닫고 새 알림을 표시합니다.

### 태그 예시

다음과 같은 간단한 HTML을 봅시다.

```html
<button>알림 실행!</button>
```

다수의 알림을 아래 방법으로 처리할 수 있습니다.

```js
window.addEventListener("load", function () {
  // 처음에는 알림 권한이 있는지 확인함
  // 없으면 권한 요구
  if (Notification && Notification.permission !== "granted") {
    Notification.requestPermission(function (status) {
      if (Notification.permission !== status) {
        Notification.permission = status;
      }
    });
  }

  var button = document.getElementsByTagName("button")[0];

  button.addEventListener("click", function () {
    // 사용자가 알림을 받는 데 동의한 경우
    // 알림 10개를 보내본다
    if (Notification && Notification.permission === "granted") {
      var i = 0;
      // 어떤 브라우저(Firefox 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용.
      var interval = window.setInterval(function () {
        // 태그 덕분에 "안녕! 9" 알림만 보여야 함
        var n = new Notification("안녕! " + i, { tag: "알림너무많음" });
        if (i++ == 9) {
          window.clearInterval(interval);
        }
      }, 200);
    }

    // 사용자가 알림을 받을지 말지 답하지 않은 경우
    // 참고: 크롬 때문에 권한 속성이 설정됐는지 알 수 없으므로
    // "기본" 값을 확인하는 것은 안전하지 않음
    else if (Notification && Notification.permission !== "denied") {
      Notification.requestPermission(function (status) {
        // 사용자가 ok한 경우
        if (status === "granted") {
          var i = 0;
          // 어떤 브라우저(Firefox 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용.
          var interval = window.setInterval(function () {
            // 태그 덕분에 "안녕! 9" 알림만 보여야 함
            var n = new Notification("안녕! " + i, { tag: "알림너무많음" });
            if (i++ == 9) {
              window.clearInterval(interval);
            }
          }, 200);
        }

        // 그 외의 경우 일반적인 모달 alert로 폴백
        else {
          alert("안녕!");
        }
      });
    }

    // 사용자가 알림을 거부한 경우
    else {
      // 일반적인 모달 alert로 폴백
      alert("안녕!");
    }
  });
});
```

라이브 결과는 아래에서 보세요.

명세서
---

| Specification |
| --- |
| Notifications API Standard # api |

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

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

참고
--

* 사용자 알림 편람
* `Notification`


AnimationEvent: animationName 속성 - Web API

AnimationEvent: animationName 속성
================================

**`AnimationEvent.animationName`** 읽기 전용 속성은 트랜지션에 연관된 `animation-name` (en-US) CSS 속성 값을 담은 문자열입니다.

값
-

CSS `animation-name` (en-US) 속성의 값을 담은 문자열입니다.

명세서
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-animationname |

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

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

같이 보기
-----

* CSS 애니메이션 사용하기
* 애니메이션 관련 CSS 속성과 @규칙: `animation`,
 `animation-delay`, `animation-direction`,
 `animation-duration`, `animation-fill-mode`,
 `animation-iteration-count` (en-US), `animation-name` (en-US),
 `animation-play-state` (en-US), `animation-timing-function` (en-US),
 `@keyframes`
* 이 속성이 속한 `AnimationEvent` 인터페이스.


AnimationEvent: AnimationEvent() 생성자 - Web API

AnimationEvent: AnimationEvent() 생성자
====================================

**`AnimationEvent()`** 생성자는 애니메이션에 관련된 이벤트를 나타내는 `AnimationEvent` 객체를 새로 생성하고 반환합니다.

구문
--

```js
new AnimationEvent(type)
new AnimationEvent(type, options)
```

### 매개변수

`type`

`AnimationEvent`의 유형을 나타내는 문자열입니다. 대소문자를 구분하며 브라우저는`animationstart`, `animationend`, `animationiteration`을 사용합니다.

`options` Optional

`Event()`에서 사용할 수 있는 속성에 더해 다음 속성들도 포함하는 객체입니다.

`animationName` Optional

트랜지션에 연관된 `animation-name` (en-US) CSS 속성 값을 담은 문자열입니다. 기본 값은 `""`입니다.

`elapsedTime` Optional

이 이벤트가 발생한 시점까지 애니메이션이 재생된 총 시간을 나타내는 `float` 값입니다. 초 단위며, 애니메이션이 일시중지됐던 시간은 제외합니다. `animationstart` 이벤트의 `elapsedTime`은 `animation-delay`의 값이 음수인 경우에만 `(-1 * delay)`가 되고, 그 외에는 `0.0`입니다.

`pseudoElement` Optional

애니메이션이 재생 중인 의사 요소의 이름을 담은, `'::'`으로 시작하는 문자열입니다. 애니메이션이 일반 요소에서 재생 중이라면 빈 문자열(`''`)을 반환합니다.

명세서
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-animationevent |

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

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

같이 보기
-----

* CSS 애니메이션 사용하기
* 애니메이션 관련 CSS 속성과 @규칙: `animation`,
 `animation-delay`, `animation-direction`,
 `animation-duration`, `animation-fill-mode`,
 `animation-iteration-count` (en-US), `animation-name` (en-US),
 `animation-play-state` (en-US), `animation-timing-function` (en-US),
 `@keyframes`
* 이 생성자가 속한 `AnimationEvent` 인터페이스.


AnimationEvent: pseudoElement 속성 - Web API

AnimationEvent: pseudoElement 속성
================================

**`AnimationEvent.pseudoElement`** 읽기 전용 속성은 애니메이션이 재생 중인 의사 요소의 이름을 담은, `'::'`으로 시작하는 문자열입니다. 애니메이션이 일반 요소에서 재생 중이라면 빈 문자열(`''`)을 반환합니다.

값
-

애니메이션이 재생 중인 의사 요소의 이름을 담은, `'::'`으로 시작하는 문자열입니다. 애니메이션이 일반 요소에서 재생 중이라면 빈 문자열(`''`)을 반환합니다.

명세서
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-pseudoelement |

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

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

같이 보기
-----

* CSS 애니메이션 사용하기
* 애니메이션 관련 CSS 속성과 @규칙: `animation`,
 `animation-delay`, `animation-direction`,
 `animation-duration`, `animation-fill-mode`,
 `animation-iteration-count` (en-US), `animation-name` (en-US),
 `animation-play-state` (en-US), `animation-timing-function` (en-US),
 `@keyframes`
* 이 속성이 속한 `AnimationEvent` 인터페이스.


AnimationEvent: elapsedTime 속성 - Web API

AnimationEvent: elapsedTime 속성
==============================

**`AnimationEvent.elapsedTime`** 읽기 전용 속성은 이벤트가 발생한 시점까지 애니메이션이 재생된 총 시간을 나타내는 `float` 값입니다. 초 단위며, 애니메이션이 일시정지된 시간은 제외합니다. `animationstart` (en-US) 이벤트의 `elapsedTime`은 `animation-delay`의 값이 음수인 경우에만 `(-1 * delay)`가 되고, 그 외에는 `0.0`입니다.

값
-

초 단위의 시간을 나타내는 `float`입니다.

명세서
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-elapsedtime |

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

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

같이 보기
-----

* CSS 애니메이션 사용하기
* 애니메이션 관련 CSS 속성과 @규칙: `animation`,
 `animation-delay`, `animation-direction`,
 `animation-duration`, `animation-fill-mode`,
 `animation-iteration-count` (en-US), `animation-name` (en-US),
 `animation-play-state` (en-US), `animation-timing-function` (en-US),
 `@keyframes`
* 이 속성이 속한 `AnimationEvent` 인터페이스.


만료 기한 확인하기 - Web API

만료 기한 확인하기
==========

이 문서에서는 IndexedDB를 통해 저장된 만료 기한과 현재 시간 및 날짜를 비교하는 복잡한 예제를 살펴봅니다. 여기서 가장 복잡한 부분은 `Date` 객체에서 가져온 현재 시간 및 날짜를 이용하여 저장된 만료 정보(월, 시간, 일 등)를 확인하는 것입니다.

![예시 애플리케이션의 스크린샷입니다. 빨간 제목은 To do app이라 적혀 있고, To-do item이 있고, 새로운 To-do를 추가하기 위한 폼이 있다.](/ko/docs/Web/API/IndexedDB_API/Checking_when_a_deadline_is_due/to-do-app.png)

이 문서에서 참조할 예제 애플리케이션은 **To-do list 알림**입니다. 이는 간단한 할 일 목록 애플리케이션으로 IndexedDB를 통해 작업 제목 및 마감 기한을 저장하고, Notification 및 Vibration API를 통해 마감 날짜에 도달하면 사용자에게 알림을 제공합니다. To-do List 알림 앱은 GitHub에서 다운로드하여 소스 코드를 수정할 수 있으며, 라이브로 실행중인 앱을 확인할 수도 있습니다.

기본적인 문제점
--------

To-do 앱에서는 기계가 읽을 수 있으면서 동시에 사람이 이해하기 쉬운 형식으로 시간 및 날짜를 기록하고, 각 시간과 날짜가 현재를 기준으로 기록되는지 확인하려고 합니다. 기본적으로 우리는 지금 날짜와 시간을 확인한 다음, 저장된 이벤트를 확인하여 그 중 만료 기한이 현재 날짜와 시간과 일치하는 것이 있는지 확인하려고 합니다. 만약 일치한다면, 사용자가 알 수 있는 알림을 주고 싶습니다.

만약 단순히 두 개의 `Date` 객체를 비교한다면 쉽겠지만, 사람은 JavaScript가 이해할 수 있는 형태로 마감 기한을 저장하는 것을 원치 않을 것입니다. 사람이 이해할 수 있는 날짜는 여러 형태로 표현됩니다.

### 날짜 정보 기록하기

 모바일 기기에서도 합리적인 UX를 제공하고 모호함을 줄이기 위해, 다음과 같은 HTML 폼을 생성하기로 하였습니다.

 ![to-do 애플리케이션의 폼입니다. 할 일의 제목 및 마감 기한에 대한 년, 월, 일, 시간, 분이 필드로 구성되어 있습니다.](/ko/docs/Web/API/IndexedDB_API/Checking_when_a_deadline_is_due/to-do-app-form2.png)

* to-do list의 제목을 입력하는 text input입니다. 이는 사용자가 입력해야 할 필수 항목입니다.
* 마감 기한의 시간, 분을 입력하는 Number input들입니다. `type="number"`를 지원하는 브라우저에서는 작은 위아래 화살표가 표시됩니다. 모바일 기기에서는 숫자를 입력할 수 있는 숫자 패드가 나타나므로 쉽게 입력할 수 있습니다. 일부 브라우저에서는 기본 text input이 나타날 수 있지만, 괜찮습니다.
* 마감 기한의 년, 월, 일을 지정하기 위한 `<select>` (en-US) 요소입니다. 이 값들은 사용자가 입력하기 가장 모호하기 때문에 (7, 일요일, 일? 04, 4, 4월, 4? 2013, '13, 13?), 사용자가 선택할 수 있는 옵션을 제공하는 게 최선이라고 생각했습니다. 또한 이는 모바일 사용자의 번거로운 타이핑을 줄이는 데에도 도움이 됩니다. 년도는 네 자리 숫자로, 월은 전체 월 이름으로, 그리고 일은 해당 월의 숫자 날짜로 기록됩니다.

폼의 제출 버튼이 눌렸을 때 `addData` 함수가 실행되며, 이 함수는 아래와 같습니다.

```js
function addData(e) {
  e.preventDefault();

  if (!title.value || !hours.value || !minutes.value || !day.value || !month.value || !year.value) {
    note.innerHTML += '<li>제출 실패 — 폼이 완성되지 않았습니다.</li>';
    return;
  }
```

이 부분에서는 폼 필드가 모두 입력되었는지 확인합니다. 입력되지 않은 경우, 사용자에게 무엇이 잘못되었는지 알려주기 위해 앱의 좌하단 개발자 알림 패널에 메시지를 노출시킵니다. 이 절차는 HTML 폼 유효성 검사를 지원하지 않는 브라우저를 위한 것입니다. (HTML의 `required` 속성을 사용하여 유효성 검사를 강제하는 경우는 지원하는 브라우저에서만 적용됩니다.)

```js
   else {
    const newItem = [
      {
        taskTitle: title.value,
        hours    : hours.value,
        minutes  : minutes.value,
        day      : day.value,
        month    : month.value,
        year     : year.value,
        notified : "no"
      }
    ];

    // 읽기/쓰기 DB 트랜잭션을 열고, 데이터를 추가할 준비를 합니다.
    const transaction = db.transaction(["toDoList"], "readwrite");

    // 트랜잭션 열기 성공 여부에 대한 보고입니다.
    transaction.oncomplete = (event) => {
      note.innerHTML += '<li>데이터 추가를 위한 트랜잭션을 열었습니다..</li>';
    };

    transaction.onerror = (event) => {
      note.innerHTML += '<li>트랜잭션을 여는 데에 에러가 발생했습니다. 중복된 값은 허용되지 않습니다.</li>';
    };

    // 트랜잭션에서 객체 저장소를 생성합니다.
    const objectStore = transaction.objectStore("toDoList");

    // 객체 저장소에 newItem 객체를 추가합니다.
    const request = objectStore.add(newItem[0]);
```

이 부분에서는 아이템을 데이터베이스에 추가하기 위해 필요한 형식으로 데이터를 저장하는 `newItem` 객체를 생성합니다. 다음 몇 줄은 데이터베이스의 트랜잭션을 열고, 이에 대한 성공/실패 여부 메시지를 제공합니다. 그 후에는 새로운 아이템이 추가될 `objectStore` 를 생성합니다. `notified` 속성은 to-do list 요소의 만료 기한이 아직 지나지 않고 알려지지 않았는지를 나타냅니다 - 이는 추후에 자세히 설명합니다.

**참고:** `db` 변수는 IndexedDB의 데이터베이스 인스턴스를 저장합니다. 이 변수의 다양한 속성을 사용하여 데이터를 조작할 수 있습니다.

```js
    request.onsuccess = (event) => {

      note.innerHTML += '<li>새로운 아이템이 추가되었습니다.</li>';

      title.value = '';
      hours.value = null;
      minutes.value = null;
      day.value = '01';
      month.value = 'January';
      year.value = 2020;
    };
  }
```

이 다음 섹션에서는 아이템이 성공적으로 추가되었다는 로그 메시지를 생성하고, 다음 아이템의 정보를 입력하기 위해 폼을 초기화합니다.

```js
  // displayData() 함수를 실행해 새로 추가된 아이템을 보여주는 돔을 업데이트합니다.
  displayData();
};
```

마지막으로 우리는 `displayData()` 함수를 실행해 새로 추가된 아이템을 보여주기 위해 돔을 업데이트합니다.

### 만료 기한에 도달했는지 확인하기

이제 우리의 데이터는 데이터베이스에 있으며, 우리는 만료 기한에 도달한 것이 있는 지 확인을 해야합니다. 이는 `checkDeadlines()` 함수를 통해 확인 가능합니다.

```js
function checkDeadlines() {
  const now = new Date();
```

먼저 우리는 빈 `Date` 객체를 생성해 현재 날짜과 시간을 가져옵니다.

```js
const minuteCheck = now.getMinutes();
const hourCheck = now.getHours();
const dayCheck = now.getDate();
const monthCheck = now.getMonth();
const yearCheck = now.getFullYear();
```

`Date` 객체는 날짜와 시간을 분리할 수 있는 여러 개의 메소드가 존재합니다. 여기서는 현재의 년 (`getFullYear()`를 사용해야 합니다. `getYear()`는 더이상 사용되지 않습니다), 월 (0-11 사이의 숫자를 반환합니다. 예를 들어, 0은 1월을 나타냅니다), 당월의 일 (`getDate()`를 사용해야 합니다. `getDay()`는 1주 기준 1-7 사이의 날짜를 반환합니다), 시 (숫자를 반환합니다), 분 (숫자를 반환합니다)을 가져옵니다.

```js
  const objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');

  objectStore.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    let monthNumber;

    if (cursor) {
```

다음으로 우리는 IndexedDB의 다른 `objectStore`를 만들고, 기본적으로 IndexedDB에서 저장소의 모든 아이템을 순회할 수 있는 `openCursor()` 함수를 사용해 커서를 엽니다. 그리고 우리는 커서에 남은 유효 항목이 있을 때까지 모든 항목을 순회합니다.

```js
switch (cursor.value.month) {
  case "January":
    monthNumber = 0;
    break;
  case "February":
    monthNumber = 1;
    break;

  // 중략

  case "December":
    monthNumber = 11;
    break;
  default:
    alert("데이터베이스에 잘못된 월이 입력되었습니다.");
}
```

먼저 데이터베이스에 저장된 월 이름을 JavaScript가 이해할 수 있는 월 숫자로 변환합니다. 이전에 보았듯이, Javascript의 `Date` 객체는 0-11 사이의 월 숫자를 생성합니다.

```js
if (
  Number(cursor.value.hours) === hourCheck &&
  Number(cursor.value.minutes) === minuteCheck &&
  Number(cursor.value.day) === dayCheck &&
  monthNumber === monthCheck &&
  cursor.value.year === yearCheck &&
  notified === "no"
) {
  // 값이 모두 일치하면, createNotification() 함수를 실행합니다.
  // 시스템 알림을 생성하기 위한 함수입니다.
  createNotification(cursor.value.taskTitle);
}
```

현재 날짜와 시간을 IndexedDB에 저장된 값들과 비교할 때 사용할 수 있도록 조합한 후 검증을 해야합니다. 우리는 사용자에게 마감 기한이 지났음을 알리기 위해 모든 값을 일치시켜야 합니다.

`notified === "no"` 검증은 to-do 아이템 하나당 하나의 알림만 받겠다는 설계이므로, 다음 순회에서 검증에 통과하지 못했을 때 `createNotification()` 함수를 통해 값을 `"yes"`로 변경해주어야 합니다. (IndexedDB 사용하기에 설명이 있습니다.)

```js
    // 우리는 이제 이 데이터 객체에서 notified 값을 "yes"로 변경해야 합니다.
    // 이렇게 하면 알림이 다시 설정되지 않습니다.

    // 처음에는 일반적인 방식으로 트랜잭션을 엽니다.
    const objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');

    // 이 제목을 통해 이 제목을 갖고 있는 to-do 리스트 객체를 가져옵니다.
    const request = objectStore.get(title);

    request.onsuccess = () => {
      // 결과로 반환된 값을 가져옵니다.
      const data = request.result;

      // 객체에 있는 값을 "yes"로 변경합니다.
      data.notified = "yes";

      // 데이터베이스에 다시 주입하기 위한 다른 요청을 생성합니다.
      const requestUpdate = objectStore.put(data);

      // 새 요청이 성공했을 때, 디스플레이를 업데이트 하기 위해 displayData() 를 실행합니다
      requestUpdate.onsuccess = () => {
        displayData();
      }
```

만약 모두 일치했다면, 사용자에게 알림을 전달하기 위해 `createNotification()` 함수를 실행합니다.

```js
      cursor.continue();
    }
  }
}
```

함수의 마지막 줄은 IndexedDB에 저장된 다음 아이템의 마감 기한을 검증하기 위해 커서를 옮깁니다.

### 검사 유지하기!

당연히 위의 마감 기한 검사 함수를 한 번만 호출하는 것은 쓸모가 없습니다. 계속해서 마감 기한이 도달했는지 확인하기 위해 `setInterval()`을 통해 1초마다 `checkDeadlines()`를 실행합니다.

```js
setInterval(checkDeadlines, 1000);
```