console - Web API

console
=======

**`console`** 객체는 브라우저의 디버깅 콘솔(Firefox 웹 콘솔 등)에 접근할 수 있는 메서드를 제공합니다. 동작 방식은 브라우저마다 다르지만, 사실상 표준으로 여겨지는 기능도 여럿 있습니다.

`console` 객체는 아무 전역 객체에서나 접근할 수 있습니다. 브라우징 문맥에선 `Window`, 워커에서는 `WorkerGlobalScope` (en-US)이 속성으로 포함하고 있습니다. `Window.console`의 형태로 노출되어 있으므로 간단하게 `console`로 참조할 수 있습니다.

```js
console.log("링크를 열 수 없습니다");
```

이 문서는 콘솔 객체에서 사용할 수 있는 메서드와 몇 가지 예제를 다룹니다.

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

메서드
---

`console.assert()`

첫 번째 매개변수가 `false`인 경우 메시지와 스택 추적을 출력합니다.

`console.clear()`

콘솔의 내용을 지웁니다.

`console.count()`

주어진 레이블로 메서드를 호출한 횟수를 출력합니다.

`console.countReset()`

주어진 라벨의 횟수를 초기화합니다.

`console.debug()`

`debug` 중요도로 메시지를 출력합니다.

`console.dir()`

주어진 JavaScript 객체의 속성 목록을 상호작용 가능한 형태로 표시합니다. 속성 값이 다른 객체라면 펼쳐서 살펴볼 수 있습니다.

`console.dirxml()`

객체를 XML/HTML 요소 형태로 나타낼 수 있으면 그렇게 표시하고, 아닐 경우 JavaScript 객체 형태로 표시합니다.

`console.error()`

오류 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.

`console.exception()`
비표준

지원이 중단되었습니다

`error()`의 별칭입니다.

`console.group()`

새로운 인라인 그룹을 생성해, 이후 모든 출력을 한 단계 들여씁니다. 그룹을 나오려면 `groupEnd()`를 호출하세요.

`console.groupCollapsed()`

새로운 인라인 그룹을 생성해, 이후 모든 출력을 한 단계 들여씁니다. 그러나 `group()`과 달리, `groupCollapsed()`로 생성한 그룹은 처음에 접혀 있습니다. 그룹을 나오려면 `groupEnd()`를 호출하세요.

`console.groupEnd()`

현재 인라인 그룹을 나옵니다.

`console.info()` (en-US)

정보 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.

`console.log()`

일반 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.

`console.profile()` (en-US)

브라우저의 내장 프로파일러(Firefox 성능 측정 도구 등)를 실행합니다. 선택 사항으로 프로파일에 이름을 붙일 수 있습니다.

`console.profileEnd()` (en-US)

프로파일러를 멈춥니다. 프로파일 결과는 브라우저의 성능 측정 도구(Firefox 성능 측정 도구 등)에서 확인할 수 있습니다.

`console.table()`

표 형태의 데이터를 표에 그립니다.

`console.time()`

주어진 이름의 타이머를 실행합니다. 하나의 페이지에서는 최대 10,000개의 타이머를 동시에 실행할 수 있습니다.

`console.timeEnd()`

지정한 타이머를 멈추고, 소요시간을 출력합니다.

`console.timeStamp()` (en-US)
비표준

브라우저의 타임라인이나 워터폴 (en-US)에 마커를 추가합니다.

`console.trace()`

스택 추적을 출력합니다.

`console.warn()`

경고 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.

예제
--

### 콘솔에 텍스트 출력하기

콘솔에서 가장 많이 사용하는 기능은 데이터와 텍스트를 출력하는 것입니다. 콘솔 메시지의 중요도는 네 가지로, 각각 `console.log()`, `console.info()` (en-US), `console.warn()`, `console.error()` 메서드를 사용해 출력할 수 있습니다. 중요도 별로 출력 스타일이 조금씩 다르며, 중요도 필터를 사용해 원하는 메시지만 골라 볼 수도 있습니다.

각각의 출력 메서드는 두 가지 방법으로 사용할 수 있습니다. 첫 번째는 단순히 객체 목록을 제공하는 것으로, 각자의 문자열 표현이 하나로 합쳐져서 출력됩니다. 두 번째는 치환 문자열을 포함한 문자열 뒤에, 그 자리에 배치할 객체 목록을 제공하는 것입니다.

#### 단일 객체 출력하기

로그를 남기는 가장 간단한 방법은 하나의 객체를 출력하는 것입니다.

```js
var someObject = { str: "Some text", id: 5 };
console.log(someObject);
```

출력은 다음과 같습니다.

```bash
[09:27:13.475] ({str:"Some text", id:5})
```

#### 여러 객체 출력하기

여러 객체를 출력하는 방법은 메서드를 호출할 때 모두 나열하면 됩니다.

```js
var car = "Dodge Charger";
var someObject = { str: "Some text", id: 5 };
console.info("My first car was a", car, ". The object is: ", someObject);
```

출력은 다음과 같습니다.

```bash
[09:28:22.711] My first car was a Dodge Charger. The object is: ({str:"Some text", id:5})
```

#### 문자열 치환 사용하기

`log()`처럼 문자열을 받는 콘솔 메서드에는 아래의 치환 문자열을 제공할 수 있습니다.

`%o` 또는 `%O`

JavaScript 객체를 출력합니다. 객체 이름을 클릭하면 검사기에 더 자세한 정보를 보여줍니다.

`%d` 또는 `%i`

정수를 출력합니다. 서식도 지원합니다. 예를 들어 `console.log("Foo %.2d", "1.1")`은 정수부를 0이 앞서는 두 자리로 표현하므로 `Foo 01`을 출력합니다.

`%s`

문자열을 출력합니다.

`%f`

부동소수점 수를 출력합니다. 서식도 지원합니다. 예를 들어 `console.log("Foo %.2f", "1.1")`은 소수부를 두 자리로 표현하므로 `Foo 1.10`을 출력합니다.

**참고:** Chrome은 숫자 서식을 지원하지 않습니다

각각의 치환 문자열은 이후 매개변수에서 값을 가져옵니다. 예를 들어...

```js
for (var i = 0; i < 5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i + 1);
}
```

위의 출력은 다음과 같습니다.

```bash
[13:14:13.481] Hello, Bob. You've called me 1 times.
[13:14:13.483] Hello, Bob. You've called me 2 times.
[13:14:13.485] Hello, Bob. You've called me 3 times.
[13:14:13.487] Hello, Bob. You've called me 4 times.
[13:14:13.488] Hello, Bob. You've called me 5 times.
```

#### 콘솔 출력 꾸미기

`"%c"` 명령을 사용해 콘솔 출력에 CSS 스타일을 적용할 수 있습니다.

```js
console.log(
  "This is %cMy stylish message",
  "color: yellow; font-style: italic; background-color: blue;padding: 2px",
);
```

명령 이전의 텍스트는 영향을 받지 않고, 이후의 텍스트는 매개변수로 제공한 CSS 선언을 적용합니다.

![](/ko/docs/Web/API/console/css-styling.png)

`"%c"` 명령을 여러 번 사용할 수도 있습니다.

```js
console.log(
  "Multiple styles: %cred %corange",
  "color: red",
  "color: orange",
  "Additional unformatted message",
);
```

`%c` 구문과 함께 사용할 수 있는 CSS 속성은 다음과 같습니다. (Firefox 기준, 브라우저마다 다를 수 있음)

* `background`와 그 본디 속성.
* `border`와 그 본디 속성.
* `border-radius`
* `box-decoration-break` (en-US)
* `box-shadow` (en-US)
* `clear`, `float`
* `color`
* `cursor`
* `display` (en-US)
* `font`와 그 본디 속성.
* `line-height` (en-US)
* `margin`
* `outline`과 그 본디 속성.
* `padding`
* `text-transform` (en-US) 등 `text-*` 속성.
* `white-space`
* `word-spacing`, `word-break`
* `writing-mode` (en-US)

**참고:** 콘솔 메시지는 인라인 요소처럼 행동합니다. `padding`, `margin`등의 효과를 보려면 `display: inline-block` 등을 지정해야 합니다.

### 콘솔 그룹 사용하기

중첩 그룹을 사용하면 서로 관련된 출력 결과를 시각적으로 묶어 정돈할 수 있습니다. 새로운 중첩 블록을 생성하려면 `console.group()`을 호출하세요. `console.groupCollapsed()` 메서드도 유사하지만, 대신 새로운 블록을 접힌 채로 생성하므로 내부를 보려면 열어야 합니다.

현재 그룹에서 나가려면 `console.groupEnd()`를 호출하세요. 예를 들어...

```js
console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");
```

위의 출력은 다음과 같습니다.

![Demo of nested groups in Firefox console](/ko/docs/Web/API/console/console_groups_demo.png)

### 타이머

특정 작업의 소요시간을 측정할 땐 타이머를 사용할 수 있습니다. 타이머를 시작하려면 `console.time()` 메서드를 호출하세요. 유일한 매개변수로 타이머의 이름을 제공할 수 있습니다. 타이머를 멈추고, 시작한 후 지난 시간을 알아내려면 `console.timeEnd()` 메서드를 호출하세요. 역시, 유일한 매개변수로 이전에 사용한 타이머 이름을 제공하면 됩니다.

예를 들어...

```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/console-timelog.png)

시작할 때와 끝낼 때 모두 타이머의 이름이 표시됨을 알 수 있습니다.

**참고:** 타이머를 네트워크 트래픽 소요시간 측정에 사용하는 경우, 타이머는 총 소요시간을 보여주지만 네트워크 패널에 표시되는 시간은 헤더에 소모한 시간만 나타낸다는 것을 알아야 합니다.
 응답 본문 로깅을 활성화한 경우, 응답 헤더와 본문의 시간을 합한 값이 타이머의 콘솔 출력과 비슷해야 합니다.

### 스택 추적

콘솔 객체는 스택 추적도 지원합니다. 스택 추적은 `console.trace()`를 호출하게 된 경로를 보입니다. 예를 들어...

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

foo();
```

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

![](/ko/docs/Web/API/console/api-trace2.png)

명세
--

| Specification |
| --- |
| Console Standard # console-namespace |

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

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

참고
--

* 적어도 Firefox에서는 페이지가 `console` 객체를 정의하면 해당 객체가 Firefox에 내장된 객체를 재정의합니다.
같이 보기
-----

* Firefox 개발자 도구
* 웹 콘솔: Firefox의 웹 콘솔이 콘솔 API 호출을 처리하는 방법
* 원격 디버깅: 디버깅 대상이 모바일 장치일 때 콘솔 출력을 보는 방법
### 다른 구현체

* Google Chrome 개발자 도구
* Microsoft Edge 개발자 도구
* Safari Web Inspector


Intersection Observer API - Web API

Intersection Observer API
=========================

Intersection Observer API는 상위 요소 또는 최상위 문서의 viewport와 대상 요소 사이의 변화를 비동기적으로 관찰할 수 있는 수단을 제공합니다.

역사적으로, 요소의 가시성 또는 관련된 두 요소 사이의 상대적 가시성을 감지하는 것은 해결책을 신뢰할 수 없고 브라우저와 사용자가 접근하는 사이트를 느리게 만드는 어려운 작업이었습니다. Web이 성숙해짐에 따라, 이러한 종류의 정보의 요구가 늘어났습니다. 교차 정보는 다음과 같은 많은 이유로 필요합니다.

* 페이지가 스크롤 될 때 이미지의 또는 다른 컨텐츠의 지연 로딩(Lazy-loading) 됩니다.
* 스크롤할 때 더 많은 컨텐츠가 로드되고 렌더링 되는 "무한 스크롤" 웹 사이트를 구현함으로써, 사용자가 페이지를 넘길 필요가 없습니다.
* 광고 수익 산정을 위해 광고 가시성을 보고합니다.
* 사용자가 결과를 볼 수 있을지 여부에 따라 작업 또는 애니메이션 프로세스를 수행할지 여부를 결정합니다.

과거에 교차 감지 구현은 영향을 받는 모든 요소에 대해 필요한 정보를 축적하기 위해 이벤트 처리기와 `Element.getBoundingClientRect()`와 같은 메서드를 호출하는 루프를 포함하였습니다. 모든 코드가 메인 스레드에서 실행되기 때문에, 이 중 하나라도 성능 문제를 일으킬 수 있습니다. 이러한 테스트와 함께 사이트가 로드 될 때, 완전히 못생겨질 수 있었습니다.

무한 스크롤을 사용하는 웹 페이지를 생각해봅시다. 주기적으로 페이지에 배치되는 광고를 관리하기 위해 공급업체가 제공하는 라이브러리를 사용하고, 여기저기에 애니메이션 그래픽이 있으며, 공지 박스 같은 것들을 그리는 사용자 정의 라이브러리도 사용합니다. 이 각각에는 해당 교차 감지 루틴이 있고 모두 메인 스레드에서 실행됩니다. 웹 사이트 제작자는 그들이 사용하는 두 가지 라이브러리에 들어있는 내부 작업에 대해서 조금만 알기 때문에 이러한 일이 일어나는 지도 깨닫지 못할 것입니다. 유저가 페이지를 스크롤 할 때, 이러한 교차 감지 루틴은 스크롤 처리 코드가 실행되는 동안 지속적으로 발생하여 사용자가 브라우저, 웹사이트, 컴퓨터에 불만을 느끼게 합니다.

Intersection Observer API는 특정 요소가 다른 요소(또는 viewport)와의 교차점에 들어가거나 나갈 때 또는 두 요소 간의 교차점이 지정된 양만큼 변화될 때 실행되는 콜백 함수를 코드에 등록할 수 있습니다. 이 방법으로, 사이트는 더이상 이러한 종류의 요소 교차를 감시하기 위해 메인 스레드에 아무것도 할 필요가 없고, 브라우저는 적합하다고 판단되는 대로 교차 관리를 자유롭게 최적화할 수 있습니다.

Intersection Observer API가 알려주지 않는 한 가지: 겹치는 픽셀의 정확한 수나 구체적으로 어떤 픽셀인지를 알려주지 못합니다. 그러나 이 API는 "약 N% 정도 겹친다면 어떤 작업을 수행해야 한다"는 더 일반적인 사용 사례를 다룹니다.

교차 관찰자 개념과 사용
-------------

Intersection Observer API는 다음과 같은 상황이 발생했을 때 호출되는 콜백 함수를 구성할 수 있습니다.

* **대상** 요소는 기기의 뷰포트 또는 특정 요소와 교차합니다. 특정 요소는 Intersection Observer API의 목적에 따라 **루트 요소** 또는 **루트**라고 불립니다.
* observer가 최초로 대상 요소를 관찰하라고 요청 받은 시점입니다.

일반적으로, 대상 요소와 가장 가까운 스크롤 가능한 상위 요소나 타겟요소가 스크롤 가능한 요소의 하위 요소가 아닌 경우, 장치 뷰포트와 관련된 교차 변화를 관찰하고 싶어합니다. 장치 뷰포트와 관련된 교차를 관찰하기 위해서는 `root` 옵션에 `null`을 지정해야 합니다. 교차 관찰자 옵션에 대한 더 자세한 설명을 위해서 계속 읽어야 합니다.

뷰포트를 루트로 사용하던지 다른 요소들을 루트로 사용하던지, API는 같은 방식으로 동작하여 대상 요소의 가시성이 변화하여 요청한 양만큼 루트와 교차할 때마다 사용자가 제공한 콜백함수를 실행합니다.

타겟 요소와 타겟 요소의 루트 사이의 교차의 정도는 **intersection ratio** 입니다. 0.0과 1.0 사이의 값으로 보이는 대상 요소의 백분율을 나타냅니다.

### 교차 관찰자 생성하기

intersection observer는 생성자를 호출하고, threshold가 한 방향 혹은 다른 방향으로 교차할 때마다 실행하기 위한 callback 함수를 전달하여 생성합니다.

```js
let options = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 1.0,
};

let observer = new IntersectionObserver(callback, options);
```

threshold가 1.0이라는 의미는 `root` 옵션으로 지정된 요소 내에서 타겟 요소가 100% 보이면 콜백이 호출된다는 의미입니다. 다음과 같은 필드가 있습니다.

#### 교차 관찰자 옵션

`IntersectionObserver()` 생성자에 전달되는 `options` 객체는 observer의 콜백이 언제 호출되는지를 제어할 수 있게 해줍니다. 이 객체는 다음과 같은 필드를 가지고 있습니다.

`root`

대상 가시성을 체크하기 위한 뷰포트로 사용되는 요소. 반드시 타겟의 상위 요소이어야 합니다. 만약 뷰포트를 지정하지 않거나 `null` 이면 브라우저 뷰포트가 기본으로 설정됩니다.

`rootMargin`

루트 주위의 여백입니다. CSS `margin` 속성과 비슷한 값을 가질 수 있습니다. 예시. `"10px 20px 30px 40px"` (위, 오른쪽, 아래, 왼쪽). 값은 백분율이 될 수 있습니다. 이 값의 집합은 교차 지점을 계산하기 전에 루트 요소 경계 박스의 각 사이드 값을 늘리거나 줄일 수 있습니다. 기본 값은 0입니다.

`threshold`

관찰자의 콜백이 무조건 실행되어야 하는 대상의 가시성 백분율을 나타내는 숫자 또는 숫자 배열입니다. 만약 가시성이 50% 지점을 넘는 경우만 감지하고 싶다면, 0.5를 지정하여 사용할 수 있습니다. 만약 가시성이 25%만큼 넘어갈 때마다 콜백을 실행하고 싶다면, [0, 0.25, 0.5, 0.75, 1]을 지정하여 사용할 수 있습니다. 기본 값은 0 입니다. (1 픽셀이라도 보이면, 콜백이 실행됩니다.) 1.0의 값은 모든 픽셀이 가시 상태가 될 때까지 임계값이 통과되지 않는다는 것을 의미합니다.

#### 관찰할 요소를 대상으로 하기

관찰자를 생성했다면, 관찰할 타겟 요소를 전달해야 합니다.

```js
let target = document.querySelector("#listItem");
observer.observe(target);

// observer를 위해 설정한 콜백은 바로 지금 최초로 실행됩니다
// 대상을 관찰자에 할당할 때까지 기다립니다. (타겟이 현재 보이지 않더라도)
```

언제든지 타겟 요소가 `IntersectionObserver`에 지정된 임계값을 만족시키면, 콜백은 호출됩니다. 콜백은 `IntersectionObserverEntry` (en-US) 객체와 관찰자 목록을 받습니다.

```js
let callback = (entries, observer) => {
  entries.forEach((entry) => {
    // 각 엔트리는 관찰된 하나의 교차 변화을 설명합니다.
    // 대상 요소:
    // entry.boundingClientRect
    // entry.intersectionRatio
    // entry.intersectionRect
    // entry.isIntersecting
    // entry.rootBounds
    // entry.target
    // entry.time
  });
};
```

콜백이 수신한 엔트리 목록은 교차 상태의 변화를 보고한 각 대상에 대한 하나의 엔트리를 포함합니다. 엔트리가 현재 루트와 교차하는 요소를 나타내는지 보기 위해 `isIntersecting` (en-US) 속성 값을 확인합니다.

콜백이 메인스레드에서 실행되는 것을 유의해야 합니다. 가능한 한 최대한 빨리 동작해야 합니다. 만약 시간 소비가 필요한 일이 마무리 되어야 한다면, `Window.requestIdleCallback()`을 사용하세요.

또한, `root` 옵션을 지정했다면, 대상은 반드시 루트 요소의 하위 요소이어야만 한다는 점을 명심해야 합니다.

### 교차 계산 방법

Intersection Observer API가 고려하는 모든 영역은 직사각형입니다. 불규칙한 모양의 요소는 모든 요소를 둘러싸는 부분들을 가장 작은 직사각형이 차지하는 것으로 여겨집니다. 비슷하게, 요소의 보이는 부분이 직사각형이 아니면, 요소의 교차하는 직사각형이 요소의 보이는 모든 부분을 포함하는 가장 작은 직사각형으로 간주됩니다.

`IntersectionObserverEntry` (en-US)에서 제공하는 다양한 속성이 교차를 어떻게 설명하는지를 조금 이해하는 것이 유용합니다.

#### 교차 루트와 루트 여백

컨테이너와 요소의 교차를 따라가기 전에, 우리는 컨테이너가 무엇인지를 알아야 합니다. 컨테이너는 **교차 루트** 또는 **루트 요소** 입니다. 관찰 대상 요소의 상위 요소인 document의 특정 요소이거나 컨테이너로 문서 뷰포트를 사용하기 위한 `null`이 될 수 있습니다.

**루트 교차 직사각형**은 대상 요소를 확인하기 위한 직사각형입니다. 이 직사각형은 다음과 같이 결정됩니다.

* 만약 교차 루트가 절대적인 루트라면(즉, 최상단 `Document`), 루트 교차 직사각형은 뷰포트 직사각형입니다.
* 교차 루트에 overflow clip이 있는 경우, 루트 교차 직사각형은 루트 요소의 컨텐츠 영역입니다.
* 위 두 가지 경우가 아니라면, root 교차 직사각형은 교차 루트 경계 클라이언트 직사각형입니다.(`getBoundingClientRect()`를 호출하여 반환된)

루트 교차 직사각형은 `IntersectionObserver`를 생성할 때, **root margin** , `rootMargin`을 설정함으로 인해 조정될 수 있습니다. `rootMargin` 값은 최종 교차 루트 경계 (콜백이 실행될 때 `IntersectionObserverEntry.rootBounds` (en-US)에 공개된)를 생성하기 위해 교차 루트 경계 박스의 각 측면을 더해 오프셋을 정의합니다.

#### Thresholds

매번 대상 요소가 얼마나 보이는지의 극미한 변화마다 보고하는 것보다 Intersection Observer API는 **thresholds** 를 사용합니다. 관찰자를 생성할 때, 하나 또는 하나 이상의 보이는 대상 요소의 백분율을 나타내는 숫자 값을 제공할 수 있습니다. 그런 다음, API는 이러한 임계값을 넘어가는 가시성 변경 사항만 보고합니다.

예를 들어, 대상의 가시성이 각 25% 지점보다 크거나 작을 때마다 보고를 받고 싶다면, 관찰자를 생성할 때 [0, 0.25, 0.5, 0.75, 1]로 이루어진 임계값 목록을 지정해야 합니다.

콜백이 호출될 때, 어느 방향에서든 노출된 양이 임계값 중 하나를 초과하는 루트 변화를 교차하는 정도가 관찰된 각 대상에 대한 `IntersectionObserverEntry` 객체 목록을 받습니다.

엔트리의 `isIntersecting` (en-US) 속성을 관찰함으로써 대상이 현재 루트를 교차하는 것을 볼 수 있습니다. 만약 해당 값이 `true` 라면, 대상은 최소한 부분적으로 루트 요소나 문서와 교차하고 있습니다. 이를 통해 엔트리는 교차하는 요소에서 더 이상 교차하지 않는 요소로의 전환을 나타내거나 교차하지 않음에서 교차하는 전환으로 나타낼 수 있습니다.

교차가 정확이 두 개 사이의 경계 또는 `boundingClientRect` (en-US)가 0인 영역을 따르는 경우에 발생하는 무조건 교차하는 직사각형이 존재할 수 있다는 것을 주목해야 합니다. 경계선을 공유하는 대상과 루트의 상태는 교차 상태로의 전환이 충분하지 않다고 여겨질 수 있습니다.

어떻게 임계값이 동작하는 지를 느껴보기 위해서, 아래 상자를 스크롤 해봅시다. 그 안의 각 색칠된 상자는 네 모서리의 보이는 영역의 백분율을 보여주고, 따라서 컨테이너를 스크롤할 때 시간이 지남에 따라 이 비율이 변화하는 것을 볼 수 있습니다. 각 상자는 다른 임계값을 가지고 있습니다.

* 첫번째 상자는 각 가시성 백분율에 대한 임계값을 가지고 있습니다. 즉, `IntersectionObserver.thresholds` (en-US) 목록은 `[0.00, 0.01, 0.02, /*…,*/ 0.99, 1.00]` 입니다.
* 두번째 상자는 50% 지점에 하나의 임계값을 가지고 있습니다.
* 세번째 상자는 가시성의 10% 마다 임계값을 가지고 있습니다. (0%, 10%, 20%, 등.).
* 마지막 상자는 각 25% 마다 임계값을 가지고 있습니다.
```

<template id="boxTemplate">
  <div class="sampleBox">
    <div class="label topLeft"></div>
    <div class="label topRight"></div>
    <div class="label bottomLeft"></div>
    <div class="label bottomRight"></div>
  </div>
</template>

<main>
  <div class="contents">
    <div class="wrapper"></div>
  </div>
</main>
```

```
.contents {
  position: absolute;
  width: 700px;
  height: 1725px;
}

.wrapper {
  position: relative;
  top: 600px;
}

.sampleBox {
  position: relative;
  left: 175px;
  width: 150px;
  background-color: rgb(245, 170, 140);
  border: 2px solid rgb(201, 126, 17);
  padding: 4px;
  margin-bottom: 6px;
}

#box1 {
  height: 200px;
}

#box2 {
  height: 75px;
}

#box3 {
  height: 150px;
}

#box4 {
  height: 100px;
}

.label {
  font:
    14px "Open Sans",
    "Arial",
    sans-serif;
  position: absolute;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.7);
  width: 3em;
  height: 18px;
  padding: 2px;
  text-align: center;
}

.topLeft {
  left: 2px;
  top: 2px;
}

.topRight {
  right: 2px;
  top: 2px;
}

.bottomLeft {
  bottom: 2px;
  left: 2px;
}

.bottomRight {
  bottom: 2px;
  right: 2px;
}
```

```
let observers = [];

startup = () => {
  let wrapper = document.querySelector(".wrapper");

  // 관찰자를 위한 옵션

  let observerOptions = {
    root: null,
    rootMargin: "0px",
    threshold: [],
  };

  // An array of threshold sets for each of the boxes. The
  // first box's thresholds are set programmatically
  // since there will be so many of them (for each percentage
  // point).

  let thresholdSets = [
    [],
    [0.5],
    [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
    [0, 0.25, 0.5, 0.75, 1.0],
  ];

  for (let i = 0; i <= 1.0; i += 0.01) {
    thresholdSets[0].push(i);
  }

  // Add each box, creating a new observer for each

  for (let i = 0; i < 4; i++) {
    let template = document
      .querySelector("#boxTemplate")
      .content.cloneNode(true);
    let boxID = `box${i + 1}`;
    template.querySelector(".sampleBox").id = boxID;
    wrapper.appendChild(document.importNode(template, true));

    // Set up the observer for this box

    observerOptions.threshold = thresholdSets[i];
    observers[i] = new IntersectionObserver(
      intersectionCallback,
      observerOptions,
    );
    observers[i].observe(document.querySelector(`#${boxID}`));
  }

  // Scroll to the starting position

  document.scrollingElement.scrollTop =
    wrapper.firstElementChild.getBoundingClientRect().top + window.scrollY;
  document.scrollingElement.scrollLeft = 750;
};

intersectionCallback = (entries) => {
  entries.forEach((entry) => {
    let box = entry.target;
    let visiblePct = `${Math.floor(entry.intersectionRatio \* 100)}%`;

    box.querySelector(".topLeft").innerHTML = visiblePct;
    box.querySelector(".topRight").innerHTML = visiblePct;
    box.querySelector(".bottomLeft").innerHTML = visiblePct;
    box.querySelector(".bottomRight").innerHTML = visiblePct;
  });
};

startup();
```

#### 잘라내기와 교차 직사각형

브라우저는 다음과 같이 최종 교차 직사각형을 계산합니다. 교차가 일어날 때를 더 정확히 이해하기 위해서 아래 순서를 이해하는 것은 도움이 됩니다.

1. 대상 요소의 경계 직사각형 (즉, 요소를 구성하는 모든 컴포넌트의 경계 상자를 완전히 둘러싸는 제일 작은 직사각형)은 타겟의 `getBoundingClientRect()`로부터 얻습니다. 이건 아마 가장 큰 교차 직사각형입니다. 아래 남은 순서에서 교차 되지 않는 어떤 부분도 제거합니다.
2. 대상의 직계 상위 블록에서 시작하여 밖으로 뻗어 나가면서, 포함된 블록의 잘라낸 조각이 있는 경우 교차 직사각형에 적용됩니다. 블록의 잘라낸 조각은 두 개 블록의 교차와 `overflow` 속성에 의해 특정된 잘라내기 모드가 있다면 이를 기반으로 결정됩니다. `overflow` 를 `visible` 이 아닌 것에 설정하면 clipping이 발생할 수 있습니다.
3. 포함된 요소 중 하나가 중첩된 브라우징 컨텍스트(`<iframe>` (en-US)에 들어있는 문서와 같은)의 루트라면, 교차 사각형은 포함된 컨텍스트의 뷰포트에 고정되고, 컨테이너를 따라 컨테이너의 포함된 블록과 위쪽으로의 반복이 계속됩니다. `<iframe>` 의 최상단 요소에 도달하면, 교차 사각형은 프레임의 뷰포트의 고정되고, 그 프레임의 부모 요소는 교차 루트를 따라 반복된 다음 블록이 됩니다.
4. 위쪽으로의 반복이 교차 루트에 도달하면, 결과 사각형이 교차 루트의 교차 공간에 매핑됩니다.
5. 결과 사각형은 root intersection rectangle과 교차하여 갱신 됩니다.
6. 최종적으로 이 사각형이 대상 `document` 의 교차 공간에 매핑됩니다.
### 교차 변화 콜백

루트 요소 내에 보이는 대상 요소의 양이 임계값 가시성을 지날 때, `IntersectionObserver` 객체의 콜백이 실행됩니다. 콜백은 모든 교차된 각 임계값 중 하나씩, `IntersectionObserverEntry` (en-US) 객체들의 배열과 `IntersectionObserver` 객체 자체에 대한 참조를 입력으로 받습니다.

목록에 있는 각 엔트리는 교차된 하나의 임계값을 의미하는 `IntersectionObserverEntry` (en-US) 객체이고, 각 엔트리가 주어진 요소와 루트 요소가 얼마나 교차하는 지, 요소가 교차하고 있는지에 대한 여부, 그리고 전환이 발생한 위치를 설명합니다.

아래 예시에 나오는 코드 스니펫은 요소가 교차하지 않을 떄부터 루트를 최소 75% 이상 교차할 때 얼마나 전환하는 지를 세는 카운터를 유지하는 콜백을 보여줍니다. 임계값이 0.0 (기본)인 콜백은 approximately `isIntersecting` (en-US) 불리언 값의 전환될 때 호출됩니다. 따라서 스니펫은 먼저 전환이 긍정적인지 확인하고, `intersectionRatio` (en-US) 가 75%를 넘을 때 카운터가 증가합니다.

```js
const intersectionCallback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      let elem = entry.target;

      if (entry.intersectionRatio >= 0.75) {
        intersectionCounter++;
      }
    }
  });
};
```

인터페이스
-----

`IntersectionObserver`

Intersection Observer API의 주요 인터페이스. 같은 교차 설정으로 개수 상관 없이 대상 요소를 관찰할 수 있는 관찰자 생성과 관리를 위해 메서드를 제공합니다. 각 관찰자는 하나 또는 그 이상의 대상 요소와 공유된 상위 요소 또는 최상단 `Document` viewport 사이의 교차 속에서 비동기적으로 변화를 감지할 수 있습니다. 상위 요소 또는 뷰포트는 **root** 로 불립니다.

`IntersectionObserverEntry` (en-US)

대상 요소와 전환하는 특정 순간의 루트 컨테이너 사이의 교차를 말합니다. 이러한 종류의 객체는 `IntersectionObserver` 콜백의 입력 또는 `IntersectionObserver.takeRecords()`를 호출하는 오직 두 가지 방법으로만 얻을 수 있습니다.

간단한 예제
------

이 간단한 예제는 대상 요소가 어느 정도 가시화 되는지에 따라 색상과 투명도가 변화합니다. Intersection Observer API를 통한 타이밍 요소 가시성 (en-US), 일련의 요소(예: 광고)가 사용자에게 표시되는 시간을 측정하고, 통계를 기록하거나 요소를 갱신하여 정보에 반응하는 방법을 보여주는 더 광범위한 예제를 찾을 수 있습니다.

### HTML

이 예제의 HTML은 대상이 될 (창의적인 ID `"box"`) 박스인 기본 요소와 박스 내의 일부 컨텐츠로 매우 짧습니다.

```html
<div id="box">
  <div class="vertical">Welcome to <strong>The Box!</strong></div>
</div>
```

### CSS

CSS는 이 예제에서 그다지 중요하지 않습니다. 요소를 배치하고 `background-color`와 `border` 속성이 CSS transitions에 참여할 수 있도록 설정하여, 요소가 더 많이 혹은 더 적게 보이지 않을 때 요소의 변화에 영향을 주기 위해 사용됩니다.

```css
#box {
  background-color: rgba(40, 40, 190, 1);
  border: 4px solid rgb(20, 20, 120);
  transition:
    background-color 1s,
    border 1s;
  width: 350px;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.vertical {
  color: white;
  font: 32px "Arial";
}

.extra {
  width: 350px;
  height: 350px;
  margin-top: 10px;
  border: 4px solid rgb(20, 20, 120);
  text-align: center;
  padding: 20px;
}
```

### 자바스크립트

마지막으로, Intersection Observer API를 사용하여 작업을 수행하는 JavaScript 코드를 살펴봅시다.

#### 준비

첫째, 변수를 준비하고 observer를 설치해야 합니다.

```js
const numSteps = 20.0;

let boxElement;
let prevRatio = 0.0;
let increasingColor = "rgba(40, 40, 190, ratio)";
let decreasingColor = "rgba(190, 40, 40, ratio)";

// Set things up
window.addEventListener(
  "load",
  (event) => {
    boxElement = document.querySelector("#box");

    createObserver();
  },
  false,
);
```

여기서 설정한 상수와 변수는 다음과 같습니다.

`numSteps`

가시성 비율인 0.0과 1.0 사이에서 몇 개의 임계값을 가질 지를 나타내는 상수입니다.

`prevRatio`

이 변수는 임계값이 마지막으로 초과된 가시성 비율을 기록하는 데 사용됩니다. 이를 통해 대상 요소가 더 많이 혹은 더 적게 보이는 지를 알 수 있습니다.

`increasingColor`

가시성 비율이 증가할 때 대상 요소에 적용할 색깔을 정의하는 문자열입니다. 문자열에서 "ratio"라는 단어는 대상의 현재 가시성 비율로 대체될 것이고, 요소는 색상만 변화하는 것이 아니라 덜 모호해지면서 점차 더 불투명해집니다.

`decreasingColor`

비슷하게, 가시성 비율이 감소할 때 적용할 색상을 정의한 문자열입니다.

`load` 이벤트를 수신을 시작하기 위해 `Window.addEventListener()`를 호출합니다. 페이지 로딩이 끝나고 나면, `querySelector()`를 사용하여 `"box"` ID를 가진 요소에 대한 참조를 얻고, 곧 교차 관찰자 구축 및 설치를 처리하기 위해 생성할 `createObserver()` 메서드를 호출합니다.

#### 교차 관찰자 생성

`createObserver()` 메서드는 페이지 로드가 완료되었을 때 호출되어 실제로 새로운 `IntersectionObserver`를 생성하고 대상 요소를 관찰하는 프로세스를 시작합니다.

```js
function createObserver() {
  let observer;

  let options = {
    root: null,
    rootMargin: "0px",
    threshold: buildThresholdList(),
  };

  observer = new IntersectionObserver(handleIntersect, options);
  observer.observe(boxElement);
}
```

이는 관찰자에 대한 설정을 포함하는 `options` 객체를 설정하는 것으로부터 시작합니다. 문서의 뷰포트를 기준으로 대상 요소의 가시성 변화를 관찰하려고 하므로 `root`는 `null` 입니다. 여백은 필요 없기 때문에 여백 오프셋인 `rootMargin`을 "0px"로 지정합니다. 이는 관찰자가 대상 요소의 경계와 뷰포트 사이의 어떤 더해진 (혹은 빠진) 공간 없이 교차 변화를 관찰하는 것을 야기합니다.

가시성 비율 임계값 목록인 `threshold` 는 `buildThresholdList()` 함수를 통해 만들어집니다. 임계값 목록은 이 예시에서 수가 많고 그 수를 조정할 수 있으므로 계획적으로 만들어집니다.

`options`가 준비되면, `IntersectionObserver()` 생성자를 호출하고, 교차 지점이 임계값 중 하나를 교차할 때 호출될 함수인 `handleIntersect()`와 옵션의 집합을 지정하여 새로운 관찰자를 생성합니다. 그리고 반환된 관찰자에 `observe()`를 호출하여 원하는 대상 요소에 전달합니다.

원한다면 각 요소에 대해 `observer.observe()`를 호출하여 뷰포트에 대한 가시성 교차 변화를 여러 요소에서 모니터링할 수 있도록 선택할 수 있습니다.

#### 임계값 비율의 집합 구축

임계값 집합을 만드는 `buildThresholdList()` 함수는 다음과 같습니다.

```js
function buildThresholdList() {
  let thresholds = [];
  let numSteps = 20;

  for (let i = 1.0; i <= numSteps; i++) {
    let ratio = i / numSteps;
    thresholds.push(ratio);
  }

  thresholds.push(0);
  return thresholds;
}
```

이렇게 하면 1과 `numSteps` 사이의 각 숫자 `i`에 대해 `i/numSteps` 값을 `thresholds` 집합에 넣음으로써 0.0에서 1.0 사이의 비율인 각 임계값의 집합을 만듭니다. 또한 그 값을 포함하기 위해서 0을 넣습니다. 그 결과, `numSteps`(20)의 기본값을 고려했을 때 임계값 집합은 다음과 같습니다.

| # | Ratio | # | Ratio |
| --- | --- | --- | --- |
| 0 | 0.05 | 11 | 0.6 |
| 1 | 0.1 | 12 | 0.65 |
| 2 | 0.15 | 13 | 0.7 |
| 3 | 0.2 | 14 | 0.75 |
| 4 | 0.25 | 15 | 0.8 |
| 5 | 0.3 | 16 | 0.85 |
| 6 | 0.35 | 17 | 0.9 |
| 7 | 0.4 | 18 | 0.95 |
| 8 | 0.45 | 19 | 1 |
| 9 | 0.5 | 20 | 0 |
| 10 | 0.55 |

물론, 코드 내에 임계값 집합을 하드 코딩할 수 있고, 여러분은 보통 그렇게 작성하게 될 것 입니다. 그러나 이 예제는 세분화를 조정하기 위해 구성 제어를 추가하기 위한 공간을 남겨두었습니다.

#### 교차 변화 처리

대상 요소(이 예제에서 ID가 `"box"`인 요소)가 공개되거나 가려져서 가시성 비율이 임계값 집합 중 하나를 교차하는 것을 브라우저가 감지할 때, 처리 함수인 `handleIntersect()`를 호출합니다.

```js
function handleIntersect(entries, observer) {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > prevRatio) {
      entry.target.style.backgroundColor = increasingColor.replace(
        "ratio",
        entry.intersectionRatio,
      );
    } else {
      entry.target.style.backgroundColor = decreasingColor.replace(
        "ratio",
        entry.intersectionRatio,
      );
    }

    prevRatio = entry.intersectionRatio;
  });
}
```

`entries` 목록에 있는 각 `IntersectionObserverEntry` (en-US)에 대해 엔트리의 `intersectionRatio` (en-US)가 올라가고 있는지 확인합니다. 만약 올라가고 있다면, 대상의 `background-color`을 `increasingColor`(기억하세요. 색상은 `"rgba(40, 40, 190, ratio)"` 입니다.)의 문자열에 세팅하고, "ratio"라는 단어를 엔트리의 `intersectionRatio`로 대체합니다. 그 결과 색상만 변화하는 게 아니라, 대상 요소의 투명도도 변화합니다. 가시성 비율이 감소하면, 배경 색상의 알파 값은 같이 감소하므로 요소가 더 투명해집니다.

비슷하게, 만약 `intersectionRatio` 가 감소하면, `decreasingColor` 문자열을 사용하고 대상 요소의 `background-color` 를 설정하기 전에 "ratio"라는 단어를 `intersectionRatio` 로 대체합니다.

결국, 가시성 비율이 증가하는지 감소하는지를 따라가기 위해서 `prevRatio` 변수에 있는 현재 비율을 기억해야 합니다.

### 결과

아래는 결과 컨텐츠입니다. 페이지를 위아래로 스크롤하고 움짐임에 따라 박스 모양이 얼마나 변화하는지 알아보세요.

더 광범위한 예제는 다음 링크에 있습니다. Timing element visibility with the Intersection Observer API (en-US).

명세서
---

| Specification |
| --- |
| Intersection Observer # intersection-observer-interface |

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

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

같이 보기
-----

* Intersection Observer polyfill
* Timing element visibility with the Intersection Observer API (en-US)
* `IntersectionObserver` and `IntersectionObserverEntry` (en-US)


InputEvent - Web API

InputEvent
==========

Baseline 2023
-------------

Newly availableSince March 2023, 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
**`InputEvent`** 인터페이스는 편집 가능한 콘텐츠의 변경 이벤트를 나타냅니다.

Event

UIEvent

InputEvent생성자
---

`InputEvent()` (en-US)

`InputEvent` 객체를 생성합니다.

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

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

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

삽입한 문자들로 구성된 문자열을 반환합니다. 문자를 삭제하는 등, 텍스트를 삽입하지 않는 변경 사항에서는 빈 문자열일 수 있습니다.

`InputEvent.dataTransfer` (en-US) 읽기 전용

편집 가능한 콘텐츠에 추가나 제거 중인 서식 텍스트 또는 평문 데이터의 정보가 포함된 `DataTransfer` 객체를 반환합니다.

`InputEvent.inputType` (en-US) 읽기 전용

편집 가능한 콘텐츠의 변경 유형을 반환합니다. 속성 문서에서 가능한 유형의 목록을 확인할 수 있습니다.

`InputEvent.isComposing` (en-US) 읽기 전용

이 이벤트가 `compositionstart` (en-US) 이후, `compositionend` (en-US) 이전에 발생했는지 나타내는 `Boolean`을 반환합니다.

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

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

`InputEvent.getTargetRanges()` (en-US)

이 이벤트를 취소하지 않으면 영향을 받는 DOM 범위들의 배열을 반환합니다.

명세서
---

| Specification |
| --- |
| Input Events Level 2 # interface-InputEvent |
| UI Events # interface-inputevent |

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

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

같이 보기
-----

* `beforeinput` 이벤트 (en-US)
* `input` 이벤트


CustomEvent - Web API

CustomEvent
===========

**`CustomEvent`** 인터페이스는 어떤 목적이든간에 애플리케이션이 초기화한 이벤트를 나타냅니다.

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

Event

CustomEvent생성자
---

`CustomEvent()`

새로운 `CustomEvent`를 생성합니다.

속성
--

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

`CustomEvent.detail` 읽기 전용

이벤트를 초기화할 때 제공한 임의의 데이터입니다.

메서드
---

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

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

`CustomEvent` 객체를 초기화합니다. 이미 발송한 이벤트에서는 아무 동작도 하지 않습니다.

명세서
---

| Specification |
| --- |
| DOM Standard # interface-customevent |

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

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

같이 보기
-----

* `Window.postMessage()`
* 이벤트 생성 및 발동


Notifications API - Web API

Notifications API
=================

Notifications API 는 웹 페이지가 일반 사용자에게 시스템 알림 표시를 제어할 수 있게 해줍니다. 이러한 알람은 최상단 브라우징 컨텍스트 뷰포트의 바깥에 위치하므로 사용자가 탭을 변경하거나 다른 앱으로 이동했을때에도 표시할 수 있습니다. 이 API 는 다양한 플랫폼에 존재하는 알림 시스템과 호환되도록 디자인되었습니다.

개념과 사용
------

지원되는 플랫폼에서, 시스템 알림 표시는 일반적으로 두 가지를 포함합니다. 첫째로, 사용자가 시스템 알림 표시에 대한 현재 origin 권한을 허용해야합니다. 이는 `Notification.requestPermission()` (en-US) 메소드를 사용해 앱이나 사이트가 초기화될 때 일반적으로 완료됩니다. 다음과 같이 요청 대화상자가 나타납니다.

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

여기에서 사용자는 이 origin 으로부터의 알림을 허용할지, 차단할지, 이 시점에는 선택하지 않을지를 선택할 수 있습니다. 하나가 선택된후에는, 그 설정이 현재 세션에대해서 일반적으로 유지됩니다.

**참고:** Firefox 44 부터 Notifications 와 Push 권한이 통합되었습니다. notifications 에대한 권한이 허용되면, push 또한 활성화됩니다.

그 다음, `Notification()` (en-US) 생성자를 사용해 새로운 알림이 생성됩니다. title 인자를 반드시 포함해야하며, 텍스트 방향, 바디 텍스트, 표시할 아이콘, 재생할 알림 사운드 등과 같은 옵션을 지정하는 옵션 객체를 선택적으로 전달할 수 있습니다.

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

부가적으로, Notifications API 명세는 ServiceWorker API 에 여러가지 추가 기능을 지정하여 service worker 가 알림을 발생시킬 수 있도록 허용합니다.

**참고:** 여러분의 앱에서 알림을 사용하는것에 대한 자세한 내용은 Notifications API 사용하기 글에서 찾아보시기 바랍니다.

Notifications 인터페이스
-------------------

`Notification`

notification 객체를 정의합니다.

### Service worker 추가 기능

`ServiceWorkerRegistration` (en-US)

알림 표시 제어를 위한 `ServiceWorkerRegistration.showNotification()` (en-US) 와 `ServiceWorkerRegistration.getNotifications()` (en-US) 메소드를 포함합니다.

`ServiceWorkerGlobalScope` (en-US)

알림이 클릭됐을 때 커스텀 함수를 실행하기 위한 `ServiceWorkerGlobalScope.onnotificationclick` 핸들러를 포함합니다.

`NotificationEvent` (en-US)

`ExtendableEvent` (en-US) 를 기반으로한 이벤트 객체의 특정 타입입니다. 발생한 알림을 나타냅니다.

명세
--

| Specification |
| --- |
| Notifications API Standard  |

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

### api.Notification

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

### api.ServiceWorkerRegistration.showNotification

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

### api.ServiceWorkerRegistration.getNotifications

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

함께 보기
-----

* Notifications API 사용하기


Permissions API - Web API

Permissions API
===============

**Permissions API**는 현재 맥락에 따른 API 권한의 상태를 조회할 수 있는 일관된 프로그래밍 방식을 제공합니다. 예를 들어, Permissions API를 사용하여 특정 API에 대한 접근 권한이 부여되었는지 또는 거부되었는지, 특정 사용자 권한이 필요한지를 확인할 수 있습니다.

이 API의 권한은 보안 맥락에서 API를 사용하기 위한 모든 요구 사항, 문서에 적용된 권한 정책 제한, 사용자 프롬프트 등 맥락에 대한 모든 보안 제한을 효과적으로 집계합니다. 예를 들어 API가 권한 정책 (en-US)에 의해 제한되는 경우, 반환된 권한은 `거부(denied)`되고 사용자에게 접근 여부를 묻는 메시지가 표시되지 않습니다.

**참고:** 이 기능은 WorkerNavigator.permissions (en-US) 속성을 지원하는 Web Workers에서 사용할 수 있습니다.

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

예를 들어, Notifications API는 권한을 요청하고 권한 상태를 확인하는 자체 메서드를 제공한 반면, Geolocation API는 그렇지 않았습니다. Permissions API는 개발자가 권한 작업을 위한 일관되고 더 나은 사용자 환경을 구현할 수 있는 도구를 제공합니다.

`permissions` 속성은 표준 브라우징 맥락과 작업자 맥락(`WorkerNavigator` (en-US) - 작업자 내부에서 권한 확인이 가능) 모두에서 `Navigator` 객체에서 사용할 수 있게 되었으며, Permissions API 기능에 대한 접근을 제공하는 `Permissions` (en-US) 객체를 반환합니다.

이 객체가 있으면, `Permissions.query()` (en-US) 메서드를 사용하여 권한을 조회하여, 특정 API에 대한 `PermissionStatus` (en-US)로 확인되는 프로미스를 반환하는 등 권한 관련 작업을 수행할 수 있습니다.

### 권한 인식 API 목록(Permission-aware APIs)

Permissions API를 사용하여 모든 API의 권한 상태를 조회할 수 있는 것은 아닙니다. 권한을 인식 가능한 API의 전체 목록은 다음과 같습니다.

* Background Synchronization API (en-US): `background-sync` (항상 부여되어야 합니다.)
* Clipboard API: `clipboard-read`, `clipboard-write`
* Geolocation API: `geolocation`
* Local Font Access API (en-US)
* Media Capture and Streams API: `microphone`, `camera`
* Notifications API: `notifications`
* Payment Handler API (en-US): `payment-handler`
* Push API: `push`
* Sensor APIs (en-US): `accelerometer`, `gyroscope`, `magnetometer`, `ambient-light-sensor`
* Storage Access API (en-US): `storage-access`
* Storage API (en-US): `persistent-storage`
* Web Audio Output Devices API (en-US): `speaker-selection`
* Web MIDI API (en-US): `midi`
예제
--

위치 찾기라는 간단한 예제를 만들었습니다. 예제를 실시간으로 실행하거나 Github에서 소스 코드를 확인할 수 있습니다.

작동 방식에 대한 자세한 내용은 Permissions API 사용하기 (en-US) 문서를 참조하세요.

인터페이스
-----

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

기본 맥락 및 작업자 맥락에서 각각 `Permissions` (en-US) 객체에 대한 접근을 제공합니다.

`Permissions` (en-US)

권한을 조회하고, 해제하는 메서드 등 핵심 권한 API 기능을 제공합니다.

`PermissionStatus` (en-US)

권한의 현재 상태에 대한 액세스와 권한 상태 변경에 응답하는 이벤트 핸들러를 제공합니다.

명세서
---

| Specification |
| --- |
| Permissions  |

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

### api.Permissions

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

### api.Navigator.permissions

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

### api.WorkerNavigator.permissions

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

같이 보기
-----

* Permissions API 사용하기 (en-US)
* Permissions API를 사용하여 사용자가 카메라 액세스를 허용하거나 거부하는 빈도 감지하기
* `Notification.permission`
* 개인정보 보호, 권한 및 정보 보안 (en-US)


Beacon API - Web API

Beacon API
==========

**`Beacon`** API는 웹 서버에 비동기적인 논블로킹 요청을 보내기 위해 사용됩니다. 이 요청은 서버로부터 응답을 요구하지 않습니다. `XMLHttpRequest` 나 Fetch API 로 만들어진 요청과는 다르게, 브라우저는 Beacon 요청이 페이지가 닫히기 전에 보내지게 하고, 그것이 완료될 수 있게 보장합니다.

Beacon API의 주된 용도로는 클라이언트 사이드 이벤트나 세션 데이터 같은 분석 정보를 서버로 보내는 것입니다. 과거에는 이를 위해 웹사이트들은 `XMLHttpRequest`를 사용했습니다. 하지만 브라우저는 페이지가 전송 전에 닫힐 때 등, 몇몇 상황에선 브라우저가 이러한 비동기적 요청이 전송되는 것을 보장하지 않습니다. 이처럼 요청이 전송되지 않는 것을 방지하기 위해서, 웹사이트들은 동기적으로 요청하는 등의 응답성에 부정적인 영향을 주는 여러가지 기술에 기대왔습니다. Beacon 요청들은 비동기적이고 서버로 전송되기로 보장되어 있는 덕분에 Beacon은 신뢰성과 좋은 성능을 겸비하고 있습니다.

이 API의 동기 및 사용에 대한 자세한 내용은, `navigator.sendBeacon()` 메서드 문서를 참조하세요.

**참고:** 이 API는 Web Workers 에서 사용이 불가능 합니다. (`WorkerNavigator` (en-US) 에 포함되어 있지 않음)

인터페이스
-----

이 API는 `navigator.sendBeacon()` 라는 하나의 메서드를 정의합니다.

이 메서드는 URL과 서버로 보낼 데이터, 두 개의 인수를 필요로 합니다. 서버로 보낼 데이터는 필수 사항이 아니며, 데이터의 타입은 `TypedArray`, `DataView`, `Blob`, 문자열 이나 객체, `FormData` 객체가 될 수도 있습니다. 브라우저가 요청을 성공적으로 대기열에 넣으면 `true` 를 반환하고 그 외에는 `false` 를 반환합니다.

명세서
---

| Specification |
| --- |
| Beacon # sendbeacon-method |

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

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

같이 보기
-----

* Beacon standard
* Beacon CanIUse data
* Intercepting beacons through service workers; Ehsan Akhgari; 2015-Apr-08
* https://webkit.org/blog/8821/link-click-analytics-and-privacy/
* Beaconing in Practice


TreeWalker - Web API

TreeWalker
==========

**`TreeWalker`** 오브젝트는 도큐먼트 서브트리의 노드들과 그 안에서의 위치를 나타낸다.

`TreeWalker` 는 `Document.createTreeWalker()` 메소드로 생성할 수 있다.

속성
--

*이 인터페이스는 어떤 프라퍼티도 상속하지 않는다.*

`TreeWalker.root` (en-US) 읽기 전용

`TreeWalker` 를 생성할 때 지정한 루트 노드를 나타대는 `Node` (en-US)를 반환한다.

`TreeWalker.whatToShow` (en-US) 읽기 전용

제공해야할 `Node` (en-US) 유형을 기술하는 `unsigned long` 비트마스크를 반환한다. 일치하지 않는 노드들은 건너뛰지만 관련된 경우 그 자식들을 포함할 수 있다. 가능한 값들은:

| 상수 | 숫자 값 | 설명 |
| --- | --- | --- |
| `NodeFilter.SHOW_ALL` | `-1` ( `unsigned long의 최대 값`) | 모든 노드를 보여준다. |
| `NodeFilter.SHOW_ATTRIBUTE`
지원이 중단되었습니다
 | `2` | 속성 `Attr` 노드들을 보여준다. `Attr`노드가 루트인 `TreeWalker`를 생성할 때에만 의미가 있다. 이 경우, 그 속성 노드가 그 반복 또는 순회에 첫 위치로 나타남을 의미한다. 속성은 결코 다른 노드의 자식이 아니기 때문에 도큐먼트 트리를 순회할 때는 나타나지 않는다. |
| `NodeFilter.SHOW_CDATA_SECTION`
지원이 중단되었습니다
 | `8` | `CDATASection` (en-US) 노드들을 보여준다. |
| `NodeFilter.SHOW_COMMENT` | `128` | `Comment` 노드들을 보여준다. |
| `NodeFilter.SHOW_DOCUMENT` | `256` | `Document` 노드들을 보여준다. |
| `NodeFilter.SHOW_DOCUMENT_FRAGMENT` | `1024` | `DocumentFragment` 노드들을 보여준다. |
| `NodeFilter.SHOW_DOCUMENT_TYPE` | `512` | `DocumentType` 노드들을 보여준다. |
| `NodeFilter.SHOW_ELEMENT` | `1` | `Element` (en-US) 노드들을 보여준다. |
| `NodeFilter.SHOW_ENTITY`
지원이 중단되었습니다
 | `32` | `Entity` 노드들을 보여준다. `Entity` 노드를 루트로 하여 `TreeWalker`를 생성할 때만 의미가 있다; 이 경우, 그 `Entity` 노드가 그 순회의 첫 위치에 나타남을 의미한다. 엔티티들은 도큐먼트 트리의 일부가 아니기 때문에 도큐먼트 트리를 순회할 때 나타나지 않는다. |
| `NodeFilter.SHOW_ENTITY_REFERENCE`
지원이 중단되었습니다
 | `16` | `EntityReference` 노드들을 보여준다. |
| `NodeFilter.SHOW_NOTATION`
지원이 중단되었습니다
 | `2048` | `Notation` 노드들을 보여준다. `Notation` 노드를 루트로 하여 `TreeWalker`를 생성할 때만 의미가 있다; 이 경우, 그 `Notation` 노드가 순회의 첫 위치에 나타남을 의미한다, 그들은 도큐먼트 트리를 순회할 때 나타나지 않는다. |
| `NodeFilter.SHOW_PROCESSING_INSTRUCTION` | `64` | `ProcessingInstruction` (en-US) 노드들을 보여준다. |
| `NodeFilter.SHOW_TEXT` | `4` | `Text` 노드들을 보여준다. |

`TreeWalker.filter` (en-US) 읽기 전용

의미있는 노드들을 선택하기 위해 사용하는 `NodeFilter` (en-US)를 반환한다.

`TreeWalker.expandEntityReferences` 읽기 전용
지원이 중단되었습니다

한 `EntityReference`를 버릴 때 그 것의 전체 서브트리도 같이 버려야함을 표시하는 `Boolean`이다.

`TreeWalker.currentNode`

`TreeWalker`가 현재 가리키고 있는 `Node` (en-US)이다.

메서드
---

*이 인터페이스는 아무 메서드도 상속하지 않는다.*

**참고:** *TreeWalker는 보이는 DOM 노드만 고려한다는 것에주의하라.*

`TreeWalker.parentNode()` (en-US)

현재 `Node` (en-US)를 도큐먼트 순서의 첫번째 보이는 조상으로 이동하고 찾은 노드를 반환한다. 그런 노드가 없거나 오브젝트 생성시에 정의한 *루트 노드*보다 앞이면 `null`을 반환하고 현재 노드는 바뀌지 않는다.

`TreeWalker.firstChild()` (en-US)

현재 `Node` (en-US)를 현재 노드의 첫번째 보이는 자식으로 이동하고 찾은 자식을 반환한다. 그런 자식이 없으면 `null`을 반환하고 현재 노드는 바뀌지 않는다.

`TreeWalker.lastChild()` (en-US)

현재 `Node` (en-US)를 현재 노드의 마지막 보이는 자식으로 이동하고 찾은 자식을 반환한다. 그런 자식이 없으면 `null`을 반환하고 현재 노드는 바뀌지 않는다.

`TreeWalker.previousSibling()` (en-US)

현재 `Node` (en-US)를 이전 형제로 이동하고 찾은 형제를 반환한다. 그런 노드가 없으면 `null`을 반환하고 현재 노드는 바뀌지 않는다.

`TreeWalker.nextSibling()` (en-US)

현재 `Node` (en-US)를 다음 형제로 이동하고 찾은 형제를 반환한다. 그런 노드가 없으면 `null`을 반환하고 현재 노드는 바뀌지 않는다.

`TreeWalker.previousNode()` (en-US)

현재 `Node` (en-US)를 도큐먼트 순서의 이전 보이는 노드로 이동하고 찾은 노드를 반환한다. 그런 노드가 없거나 오브젝트 생성시에 정의한 *루트 노드*보다 앞이면 `null`을 반환하고 현재 노드는 바뀌지 않는다.

`TreeWalker.nextNode()` (en-US)

현재 `Node` (en-US)를 도큐먼트 순서의 다음 보이는 노드로 이동하고 찾은 노드를 반환한다. 그런 노드가 없거나 오브젝트 생성시에 정의한 *루트 노드*보다 앞이면 `null`을 반환하고 현재 노드는 바뀌지 않는다.

명세
--

| Specification |
| --- |
| DOM Standard # interface-treewalker |

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

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

같이 보기
-----

* 생성 메소드: `Document.createTreeWalker()`.
* 관련된 인터페이스: `NodeFilter` (en-US), `NodeIterator` (en-US).


ImageCapture - Web API

ImageCapture
============

MediaStream Image Capture API의 **`ImageCapture`** 인터페이스는 유효한 `MediaStreamTrack`이 참조하는 카메라 또는 기타 촬영 장치를 통해 이미지나 사진을 촬영하기 위한 메서드를 제공합니다.

생성자
---

`ImageCapture()`

비디오 스트림을 나타내는 `MediaStreamTrack`에서 정지 프레임(사진)을 캡처하기 위한 `ImageCapture` 객체를 반환합니다.

속성
--

`ImageCapture.track` 읽기 전용

생성자에 전달한 `MediaStreamTrack`의 참조를 반환합니다.

메서드
---

`ImageCapture` 인터페이스는 `EventTarget`의 메서드를 상속하며, 다음 메서드도 포함합니다.

`ImageCapture.takePhoto()`

`MediaStreamTrack`의 출처 비디오 캡처 장치를 통해 단일 노출 촬영을 한 후, 그 데이터를 담은 `Blob`으로 이행하는 `Promise`를 반환합니다.

`ImageCapture.getPhotoCapabilities()`

가능한 설정 옵션을 담은 `PhotoCapabilities` 객체로 이행하는 `Promise`를 반환합니다.

`ImageCapture.getPhotoSettings()`

현재 사진 설정을 담은 `PhotoSettings` 객체로 이행하는 `Promise`를 반환합니다.

`ImageCapture.grabFrame()`

`MediaStreamTrack`의 라이브 비디오에서 스냅샷을 찍은 후, 성공했으면 `ImageBitmap` (en-US)을 반환합니다.

예제
--

다음 코드는 Chrome의 Grab Frame - Take Photo Sample에서 가져온 것입니다. `ImageCapture`는 이미지를 캡처할 도구가 필요하므로, 다음 예제는 브라우저 단말기의 미디어 장치(카메라)로 시작합니다.

이 예제는 `MediaStream` (en-US)으로부터 추출한 `MediaStreamTrack`부터 시작합니다. 그 다음엔 해당 트랙을 사용해 `takePhoto()`와 `grabFrame()`을 호출할 `ImageCapture` 객체를 생성합니다. 마침내, 최종 결과를 캔버스 객체에 적용합니다.

```js
var imageCapture;

function onGetUserMediaButtonClick() {
  navigator.mediaDevices
    .getUserMedia({ video: true })
    .then((mediaStream) => {
      document.querySelector("video").srcObject = mediaStream;

      const track = mediaStream.getVideoTracks()[0];
      imageCapture = new ImageCapture(track);
    })
    .catch((error) => console.log(error));
}

function onGrabFrameButtonClick() {
  imageCapture
    .grabFrame()
    .then((imageBitmap) => {
      const canvas = document.querySelector("#grabFrameCanvas");
      drawCanvas(canvas, imageBitmap);
    })
    .catch((error) => console.log(error));
}

function onTakePhotoButtonClick() {
  imageCapture
    .takePhoto()
    .then((blob) => createImageBitmap(blob))
    .then((imageBitmap) => {
      const canvas = document.querySelector("#takePhotoCanvas");
      drawCanvas(canvas, imageBitmap);
    })
    .catch((error) => console.log(error));
}

/\* Utils \*/

function drawCanvas(canvas, img) {
  canvas.width = getComputedStyle(canvas).width.split("px")[0];
  canvas.height = getComputedStyle(canvas).height.split("px")[0];
  let ratio = Math.min(canvas.width / img.width, canvas.height / img.height);
  let x = (canvas.width - img.width \* ratio) / 2;
  let y = (canvas.height - img.height \* ratio) / 2;
  canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
  canvas
    .getContext("2d")
    .drawImage(
      img,
      0,
      0,
      img.width,
      img.height,
      x,
      y,
      img.width \* ratio,
      img.height \* ratio,
    );
}

document.querySelector("video").addEventListener("play", function () {
  document.querySelector("#grabFrameButton").disabled = false;
  document.querySelector("#takePhotoButton").disabled = false;
});
```

명세
--

| Specification |
| --- |
| MediaStream Image Capture # imagecaptureapi |

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

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


Web Speech API - Web API

Web Speech API
==============

**Web Speech API**를 사용하면 음성 데이터를 웹 앱에 통합할 수 있습니다. Web Speech API는 두 부분으로 구성됩니다. `SpeechSynthesis` (텍스트 음성 변환) 및 `SpeechRecognition` (비동기 음성 인식)입니다.

Web Speech API의 개념과 사용법
-----------------------

Web Speech API를 사용하면 웹 앱에서 음성 데이터를 처리할 수 있습니다. 이 API에는 두 가지 구성 요소가 있습니다.

* 음성인식은 음성 입력(일반적으로 장치의 기본 음성 인식 서비스를 통해)에서 음성 맥락을 인식하고 적절하게 응답하는 기능을 제공하는 `SpeechRecognition` (en-US) 인터페이스를 통해 접근합니다. 일반적으로 인터페이스의 생성자를 사용하여 장치의 마이크를 통해 음성이 입력될 때, 이를 감지하는 데 사용할 수 있는 여러 이벤트 핸들러가 있는 새 `SpeechRecognition` (en-US) 객체를 생성합니다. `SpeechGrammar` (en-US) 인터페이스는 앱이 인식해야 하는 특정 문법 집합을 위한 컨테이너를 나타냅니다. 문법은 JSpeech 문법 형식(**JSGF**)을 사용하여 정의됩니다.
* 음성 합성은 프로그램이 (일반적으로 장치의 기본 음성 합성기를 통해) 텍스트 콘텐츠를 읽을 수 있게 해주는 텍스트 음성 변환 컴포넌트인 `SpeechSynthesis` (en-US) 인터페이스를 통해 접근합니다. 다양한 음성 유형은 `SpeechSynthesisVoice` (en-US) 객체로 표현되고, 말하고자 하는 텍스트의 다른 부분은 `SpeechSynthesisUtterance` (en-US) 객체로 표현됩니다. 이러한 객체를 `SpeechSynthesis.speak()` (en-US) 메서드에 전달하여 음성을 가져올 수 있습니다.

이러한 기능 사용에 대한 자세한 내용은 Web Speech API 사용하기 (en-US) 문서를 참조하세요.

Web Speech API 인터페이스
--------------------

### 음성 인식(Speech recognition)

`SpeechRecognition` (en-US)

인식 서비스를 위한 컨트롤러 인터페이스로, 인식 서비스에서 전송된 `SpeechRecognitionEvent` (en-US)도 처리합니다.

`SpeechRecognitionAlternative` (en-US)

음성 인식 서비스에서 인식한 단일 단어를 나타냅니다.

`SpeechRecognitionErrorEvent` (en-US)

인식 서비스의 오류 메시지를 표시합니다.

`SpeechRecognitionEvent` (en-US)

`result` (en-US) 및 `nomatch` (en-US) 이벤트에 대한 이벤트 객체로, 중간 또는 최종 음성 인식 결과와 관련된 모든 데이터를 포함합니다.

`SpeechGrammar` (en-US)

인식 서비스에서 인식하기를 원하는 단어 또는 단어 패턴입니다.

`SpeechGrammarList` (en-US)

`SpeechGrammar` (en-US) 객체 목록을 나타냅니다.

`SpeechRecognitionResult` (en-US)

단일 인식 일치를 나타내며, 여러 개의 `SpeechRecognitionAlternative` (en-US) 객체를 포함할 수 있습니다.

`SpeechRecognitionResultList` (en-US)

`continuous` (en-US) 모드에서 결과를 캡처하는 경우, `SpeechRecognitionResult` (en-US) 객체 목록 또는 단일 객체를 나타냅니다.

### 음성 합성(Speech synthesis)

`SpeechSynthesis` (en-US)

음성 서비스를 위한 컨트롤러 인터페이스로, 기기에서 사용할 수 있는 합성 음성에 대한 정보를 검색하고, 음성을 시작 및 일시 중지하고, 기타 명령을 내리는 데 사용할 수 있습니다.

`SpeechSynthesisErrorEvent` (en-US)

음성 서비스에서 `SpeechSynthesisUtterance` (en-US) 객체를 처리하는 동안 발생하는 오류에 대한 정보가 들어있습니다.

`SpeechSynthesisEvent` (en-US)

음성 서비스에서 처리된 `SpeechSynthesisUtterance` (en-US) 객체의 현재 상태에 대한 정보가 들어 있습니다.

`SpeechSynthesisUtterance` (en-US)

음성 요청을 나타냅니다. 여기에는 음성 서비스가 읽어야 하는 콘텐츠와 읽기 방법에 대한 정보(e.g. 언어, 높낮이, 음량 등)가 포함됩니다.

`SpeechSynthesisVoice` (en-US)

시스템이 지원하는 음성을 나타냅니다. 모든 `SpeechSynthesisVoice`에는 언어, 이름 및 URI에 대한 정보를 포함한 고유한 상대 음성 서비스가 있습니다.

`Window.speechSynthesis` (en-US)

`SpeechSynthesisGetter`라는 `[NoInterfaceObject]` 인터페이스의 일부로 지정되고 `Window` 객체에 의해 구현되는 `speechSynthesis` 속성은 음성 합성 컨트롤러에 대한 접근을 제공하므로 음성 합성 기능의 진입점이 됩니다.

에러
--

Speech API에는 보고되는 오류(예를 들면, `"language-not-supported"` 및 `"language-unavailable"`)에 대한 자세한 대용은 다음 문서를 참조하세요.

* `SpeechRecognitionErrorEvent` 객체의 `error` 속성 (en-US)
* `SpeechSynthesisErrorEvent` 객체의 `error` 속성 (en-US)
예제
--

Github의 Web Speech API 예제에는 음성 인식 및 합성을 설명하는 데모가 포함되어 있습니다.

명세서
---

| Specification |
| --- |
| Web Speech API # speechreco-section |
| Web Speech API # tts-section |

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

### api.SpeechRecognition

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

### api.SpeechSynthesis

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

같이 보기
-----

* Web Speech API 사용하기 (en-US)
* SitePoint 글
* HTML5Rocks 글


CSS 객체 모델 (CSSOM) - Web API

CSS 객체 모델 (CSSOM)
=================

**CSS Object Model**은 JavaScript에서 CSS를 조작할 수 있는 API 집합입니다. HTML 대신 CSS가 대상인 DOM이라고 생각할 수 있으며, 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법입니다.

참고서
---

* `AnimationEvent`
* `CaretPosition` (en-US)
* `CSS`
* `CSSCharsetRule`
* `CSSConditionRule` (en-US)
* `CSSCounterStyleRule` (en-US)
* `CSSFontFaceRule` (en-US)
* `CSSFontFeatureValuesMap`
* `CSSFontFeatureValuesRule` (en-US)
* `CSSGroupingRule` (en-US)
* `CSSImportRule` (en-US)
* `CSSKeyframeRule` (en-US)
* `CSSKeyframesRule` (en-US)
* `CSSMarginRule`
* `CSSMediaRule`
* `CSSNamespaceRule` (en-US)
* `CSSPageRule` (en-US)
* `CSSRule` (en-US)
* `CSSRuleList` (en-US)
* `CSSStyleDeclaration` (en-US)
* `CSSStyleSheet` (en-US)
* `CSSStyleRule` (en-US)
* `CSSSupportsRule` (en-US)
* `CSSVariablesMap`
* `CSSViewportRule`
* `FontFace` (en-US)
* `FontFaceSet` (en-US)
* `FontFaceSetLoadEvent` (en-US)
* `GetStyleUtils`
* `MediaList` (en-US)
* `MediaQueryList` (en-US)
* `MediaQueryListEvent` (en-US)
* `Screen` (en-US)
* `StyleSheet`
* `StyleSheetList` (en-US)
* `TransitionEvent` (en-US)

여러 다른 인터페이스도 CSSOM-related 규격에 의해 확장됩니다 : `Document`, `Window`, `Element` (en-US), `HTMLElement`, `HTMLImageElement` (en-US), `Range`, `MouseEvent`, and `SVGElement` (en-US).

### CSS 자료형 객체 모델
Experimental

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

* `CSSImageValue` (en-US)
Experimental
* `CSSKeywordValue` (en-US)
Experimental
* `CSSMathInvert` (en-US)
Experimental
* `CSSMathMax` (en-US)
Experimental
* `CSSMathMin` (en-US)
Experimental
* `CSSMathNegate` (en-US)
Experimental
* `CSSMathProduct` (en-US)
Experimental
* `CSSMathSum` (en-US)
Experimental
* `CSSMathValue` (en-US)
Experimental
* `CSSMatrixComponent` (en-US)
Experimental
* `CSSNumericArray` (en-US)
Experimental
* `CSSNumericValue` (en-US)
Experimental
* `CSSPerspective` (en-US)
Experimental
* `CSSPositionValue` (en-US)
Experimental
* `CSSRotate` (en-US)
Experimental
* `CSSScale` (en-US)
Experimental
* `CSSSkew` (en-US)
Experimental
* `CSSSkewX` (en-US)
Experimental
* `CSSSkewY` (en-US)
Experimental
* `CSSStyleValue` (en-US)
Experimental
* `CSSTransformComponent` (en-US)
Experimental
* `CSSTransformValue` (en-US)
Experimental
* `CSSTranslate` (en-US)
Experimental
* `CSSUnitValue` (en-US)
Experimental
* `CSSUnparsedValue` (en-US)
Experimental
* `CSSVariableReferenceValue` (en-US)
Experimental
* `StylePropertyMap` (en-US)
Experimental
* `StylePropertyMapReadOnly` (en-US)
Experimental
자습서
---

* 화면 방향 관리
명세서
---

| Specification |
| --- |
| CSS Object Model (CSSOM)  |
| CSSOM View Module  |
| CSS Typed OM Level 1  |

같이 보기
-----

* 문서 객체 모델 (DOM)
* CSS Houdini


IntersectionObserver - Web API

IntersectionObserver
====================

Intersection Observer API의 **`IntersectionObserver`** 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 수단을 제공합니다.

`IntersectionObserver`가 생성되면 루트 내에서 설정된 가시성 비율이 자신의 주시 대상 중에서 나타나는지 감지하기 시작합니다. 한 번 생성한 이후에는 설정을 변경할 수 없으므로, 이미 생성된 감지기 객체는 지정했던 가시성 비율의 감지에만 사용할 수 있습니다. 그래도 하나의 감지기가 다수의 대상을 한꺼번에 주시할 수 있습니다.

생성자
---

`IntersectionObserver.IntersectionObserver()`

`IntersectionObserver` 객체를 생성합니다. `IntersectionObserver` 객체는 대상 요소의 가시성 비율이 설정한 역치 값을 넘어가는 것을 감지하면 지정한 콜백을 호출합니다.

속성
--

`IntersectionObserver.root` 읽기 전용

교차 영역 계산에 사용하는 바운딩 박스의 기준이 되는 `Element` (en-US) 또는 `Document`입니다. `root` 설정을 생성자에 제공하지 않았거나, `root`의 값이 `null`인 경우 최상위 문서의 뷰포트를 사용합니다.

`IntersectionObserver.rootMargin` (en-US) 읽기 전용

교차 영역을 계산할 때 루트의 바운딩 박스에 적용할 오프셋입니다. 즉, 필요에 따라 계산 용도로 루트 영역을 늘리거나 줄일 수 있습니다. 생성자 설정에 지정한 값은 생성자 내에서 내부 조건에 맞도록 조정 과정을 거치므로, 이 속성의 반환 값이 설정 값과 다를 수도 있습니다. 각각의 오프셋에는 픽셀(`px`)과 퍼센트(`%`)를 사용할 수 있으며, 기본 값은 `0px 0px 0px 0px`입니다.

`IntersectionObserver.thresholds` (en-US) 읽기 전용

오름차순으로 정렬된 역치 리스트입니다. 각각의 역치는 대상의 바운딩 박스 영역과 교차 영역 사이의 비율에 대한 역치입니다. 대상에 대한 교차 알림(콜백 호출)은 이 역치 값 중 하나라도 넘어갈 때 발생합니다. 아무 값도 생성자에 지정하지 않은 경우의 기본 값은 0입니다.

메서드
---

`IntersectionObserver.disconnect()`

모든 대상의 주시를 해제합니다.

`IntersectionObserver.observe()`

주어진 대상 요소를 주시합니다.

`IntersectionObserver.takeRecords()`

모든 주시 대상에 대한 `IntersectionObserverEntry` (en-US) 배열을 반환합니다.

`IntersectionObserver.unobserve()`

특정 대상 요소에 대한 주시를 해제합니다.

예제
--

```js
var intersectionObserver = new IntersectionObserver(function (entries) {
  // intersectionRatio가 0이라는 것은 대상을 볼 수 없다는 것이므로
  // 아무것도 하지 않음
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("새 항목 불러옴");
});
// 주시 시작
intersectionObserver.observe(document.querySelector(".scrollerFooter"));
```

명세
--

| Specification |
| --- |
| Intersection Observer # intersection-observer-interface |

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

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

같이 보기
-----

* `MutationObserver`
* `PerformanceObserver` (en-US)
* `ResizeObserver` (en-US)


fetch() 전역 함수 - Web API

fetch() 전역 함수
=============

전역 **`fetch()`** 메서드는 네트워크에서 리소스를 취득하는 절차를 시작하고, 응답이 사용 가능해지면 이행하는 프로미스를 반환합니다.

프로미스는 요청에 대한 응답을 나타내는 `Response` 객체로 이행합니다.

`fetch()` 프로미스는 네트워크 오류(보통 권한 문제 등)가 있을 때만 거부되며, `404` 등의 HTTP 오류 시에는 **거부되지 않습니다**. 그러므로 `then()` 처리기는 반드시 `Response.ok` (en-US) 또는 `Response.status` (en-US) 속성을 확인해야 합니다.

`fetch()`는 `Window`와 `WorkerGlobalScope` (en-US) 양쪽 모두에서 전역 함수이므로, 리소스를 취득할 상황이 생기는 거의 모든 컨텍스트에서 사용할 수 있습니다.

`fetch()` 메서드는 받아오려는 리소스의 지시어가 아니라, Content Security Policy (en-US)의 `connect-src` 지시어의 제어를 받습니다.

**참고:** `fetch()` 메서드의 매개변수는 `Request()` 생성자와 동일합니다.

구문
--

```js
fetch(resource)
fetch(resource, options)
```

### 매개변수

`resource`

취득하려는 리소스를 정의합니다. 다음 중 하나입니다.

* 취득하려는 리소스의 URL을 제공하는 문자열 또는 `URL`처럼 문자열 변환자를 포함한 객체.
* `Request` 객체.

`options` Optional

요청에 적용하고자 하는 사용자 지정 설정을 포함하는 객체입니다. 사용 가능한 설정은 다음과 같습니다.

`method`

`GET`, `POST` 등 요청 메서드입니다. 참고로 `Origin` 헤더는 `HEAD`나 `GET` 메서드의 Fetch 요청에는 설정되지 않습니다. (이 동작은 Firefox 65에서 수정되었습니다. Firefox bug 1508661을 참조하세요.) RFC 9110에 정의된 메서드 중 하나와 대소문자 구분 없이 일치하는 문자열은 자동으로 대문자화됩니다. `PATCH`처럼 별도로 정의한 메서드를 사용하려면 직접 대문자로 입력해야 합니다.

`headers`

요청에 추가하고자 하는 헤더들입니다. `Headers` (en-US) 객체에 넣어 제공할 수도 있고, `String` 값들을 가진 객체 리터럴로 제공해도 됩니다. 어떤 이름들은 금지된다는 점을 주의하세요.

**참고:** `Authorization` HTTP 헤더는 요청에 추가할 수 있지만, 요청이 다른 출처로 리다이렉트되면 제거됩니다.

`body`

요청에 추가하고자 하는 본문입니다. `Blob`, `ArrayBuffer`, `TypedArray`, `DataView`, `FormData`, `URLSearchParams`, 문자열 객체 또는 리터럴, `ReadableStream` 객체를 사용할 수 있습니다. 제일 마지막은 아직 실험적 기능이므로 호환성 정보를 먼저 확인해서 사용할 수 있을지 검증하세요. `GET`과 `HEAD` 메서드는 본문을 가질 수 없습니다.

`mode`

이 요청에 사용할 모드, 즉 `cors`, `no-cors`, 또는 `same-origin`입니다.

`credentials`

브라우저가 자격증명(쿠키, HTTP 인증 항목, TLS 클라이언트 인증서)을 어떻게 취급할지 제어합니다. 다음 중 한 문자열이어야 합니다.

`omit`

브라우저가 요청에서 자격증명을 제외하도록 하고, `Set-Cookie` (en-US) 헤더처럼 응답에 포함된 자격증명도 무시하도록 지시합니다.

`same-origin`

브라우저가 동일 출처 URL 요청에 대해서는 자격증명을 보내고, 동일 출처 URL 응답에 포함된 자격증명도 사용하도록 지시합니다. **기본 값입니다.**

`include`

브라우저 동일과 교차 출처 요청 모두에 자격증명을 보내고, 응답 자격증명도 모두 사용하도록 지시합니다.

**참고:** 자격증명은 교차 출처에 대한 단순 요청과 "최종" 요청에는 포함될 수 있지만, CORS 사전 요청에는 포함되어선 안됩니다.

`cache`

요청이 브라우저 HTTP 캐시와 어떻게 상호작용할지 제어합니다. 가능한 값은 `default`, `no-store`, `reload`, `no-cache`, `force-cache`, `only-if-cached` 중 하나고, 각각에 대한 설명은 `Request` 객체 문서의 `cache` 속성에서 확인할 수 있습니다.

`redirect`

리다이렉트 응답 처리법입니다.

* `follow`: 자동으로 리다이렉트를 따라갑니다. 기본 값입니다.
* `error`: 리다이렉트 발생 시 오류와 함께 요청을 중단합니다.
* `manual`: 호출자가 응답을 다른 컨텍스트에서 처리해야 합니다. 자세한 정보는 WHATWG fetch 표준에서 확인하세요.

`referrer`

요청 리퍼러를 지정하는 문자열입니다. 동일 출처 URL, `about:client`, 빈 문자열 중 하나를 사용할 수 있습니다.

`referrerPolicy`

요청에 사용할 리퍼러 정책을 지정합니다. `no-referrer`, `no-referrer-when-downgrade`, `same-origin`, `origin`, `strict-origin`, `origin-when-cross-origin`, `strict-origin-when-cross-origin`, `unsafe-url` 중 하나를 사용할 수 있습니다.

`integrity`

요청의 하위 리소스 무결성을 지정합니다. (예시: `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`)

`keepalive`

요청이 페이지 수명보다 오래 지속되는 걸 허용합니다. `keepalive` 플래그는 `Navigator.sendBeacon()` API의 대체제입니다.

`signal`

`AbortSignal` 객체 인스턴스입니다. 취득 요청과 통신하다가 필요한 경우 `AbortController`를 통해 요청을 중단할 수 있습니다.

`priority`

같은 종류의 취득 요청 중에서 이 요청의 상대적 중요도를 지정합니다. 다음 문자열 중 하나여야 합니다.

* `high`: 같은 종류의 취득 요청 중 높은 우선순위입니다.
* `low`: 같은 종류의 취득 요청 중 낮은 우선순위입니다.
* `auto`: 자동으로 취득 요청의 우선순위를 결정합니다. 기본 값입니다.

### 반환 값

`Response` 객체로 이행하는 `Promise`입니다.

### 예외

`AbortError` `DOMException` (en-US)

요청이 `AbortController`에 대한 `abort()` 메서드에 의해 취소되면 발생합니다.

`TypeError`

다음 항목들에 의해 발생합니다.

| 사유 | 실패 예시 |
| --- | --- |
| 유효하지 않은 헤더 이름. |
```
// 공백 포함: "C ontent-Type"
const headers = {
  'C ontent-Type': 'text/xml',
  'Breaking-Bad': '<3',
};
fetch('https://example.com/', { headers });

```
 |
| 유효하지 않은 헤더 값. 헤더 객체는 정확히 두 요소만 포함해야 합니다. |
```
const headers = [
  ['Content-Type', 'text/html', 'extra'],
  ['Accept'],
];
fetch('https://example.com/', { headers });

```
 |
| 유효하지 않은 URL이나 스킴, fetch가 지원하지 않는 스킴, 특정 요청 모드에 대해 지원하지 않는 스킴. |
```
fetch('blob://example.com/', { mode: 'cors' });

```
 |
| URL에 자격증명이 포함됨. |
```
fetch('https://user:password@example.com/');

```
 |
| 유효하지 않은 리퍼러 URL. |
```
fetch('https://example.com/', { referrer: './abc\u0000df' });

```
 |
| 유효하지 않은 모드(`navigate`와 `websocket`). |
```
fetch('https://example.com/', { mode: 'navigate' });

```
 |
| 요청 캐시 모드가 "only-if-cached"인데 요청 모드가 "same-origin"이 아님. |
```
fetch('https://example.com/', {
  cache: 'only-if-cached',
  mode: 'no-cors',
});

```
 |
|
 요청 메서드가 유효하지 않은 이름 토큰이거나, 금지된 헤더 이름 중 하나
 (`'CONNECT'`, `'TRACE'` or `'TRACK'`).
  |
```
fetch('https://example.com/', { method: 'CONNECT' });

```
 |
|
 요청 모드가 "no-cors"인데 요청 메서드가 CORS에 적합한 메서드가 아님
 (`'GET'`, `'HEAD'`, or `'POST'`).
  |
```
fetch('https://example.com/', {
  method: 'CONNECT',
  mode: 'no-cors',
});

```
 |
|
 요청 메서드가 `'GET'` 또는 `'HEAD'`인데 본문이
 `null`도 `undefined`도 아님.
  |
```
fetch('https://example.com/', {
  method: 'GET',
  body: new FormData(),
});

```
 |
| 네트워크 오류. |  |

예제
--

저희의 취득 요청 예제(미리보기)에서는 새로운 `Request` 객체를 생성자로 생성하고, `fetch()` 호출로 취득합니다. 이미지를 취득하고 있으므로, 요청을 올바르게 처리할 수 있도록 `Response.blob()` (en-US) 메서드를 호출해 적합한 MIME 유형을 부여하고, 객체 URL을 생성해 `<img>` 요소로 화면에 그립니다.

```js
const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP 오류! 상태: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });
```

설정 제공 취득 예제(미리보기)에서는 똑같이 이미지를 취득하지만, `fetch()` 호출에 설정 객체를 제공하는 점이 다릅니다.

```js
const myImage = document.querySelector("img");

const myHeaders = new Headers();
myHeaders.append("Accept", "image/jpeg");

const myInit = {
  method: "GET",
  headers: myHeaders,
  mode: "cors",
  cache: "default",
};

const myRequest = new Request("flowers.jpg");

fetch(myRequest, myInit).then((response) => {
  // …
});
```

설정 객체를 `Request` 생성자에 제공해도 같은 결과를 얻을 수 있습니다.

```js
const myRequest = new Request("flowers.jpg", myInit);
```

`headers`에는 객체 리터럴을 사용할 수도 있습니다.

```js
const myInit = {
  method: "GET",
  headers: {
    Accept: "image/jpeg",
  },
  mode: "cors",
  cache: "default",
};

const myRequest = new Request("flowers.jpg", myInit);
```

명세서
---

| Specification |
| --- |
| Fetch Standard # fetch-method |

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

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

같이 보기
-----

* Fetch API
* ServiceWorker API
* HTTP 접근 제어 (CORS)
* HTTP


WebSocket - Web API

WebSocket
=========

`WebSocket` 객체는 WebSocket 서버 연결의 생성과 관리 및 연결을 통한 데이터 송수신 API를 제공합니다.

`WebSocket` 객체를 생성하려면 `WebSocket()` 생성자를 사용하세요.

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

EventTarget

WebSocket생성자
---

`WebSocket()`

새로운 `WebSocket` 객체를 생성해 반환합니다.

속성
--

`WebSocket.binaryType` (en-US)

연결에 사용되는 이진 데이터의 유형입니다.

`WebSocket.bufferedAmount` (en-US) 읽기 전용

큐에 대기 중인 데이터의 바이트 수입니다.

`WebSocket.extensions` (en-US) 읽기 전용

서버에서 선택한 확장입니다.

`WebSocket.protocol` (en-US) 읽기 전용

서버에서 선택한 하위 프로토콜입니다.

`WebSocket.readyState` 읽기 전용

연결의 현재 상태입니다.

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

WebSocket의 절대 URL입니다.

메서드
---

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

연결을 닫습니다.

`WebSocket.send()` (en-US)

전송할 데이터를 큐에 등록합니다.

이벤트
---

`addEventListener()` 메서드를 사용하거나 `WebSocket` 인터페이스의 `oneventname` 속성에 수신기를 할당해서 아래의 이벤트를 수신할 수 있습니다.

`close` (en-US)

`WebSocket`의 연결이 닫힐 때 발생합니다. `onclose` 속성으로도 수신할 수 있습니다.

`error` (en-US)

`WebSocket`의 연결이, 일부 데이터 전송의 실패 등 오류로 인해 닫힐 때 발생합니다. `onerror` 속성으로도 수신할 수 있습니다.

`message` (en-US)

`WebSocket`으로 데이터를 수신했을 때 발생합니다. `onmessage` 속성으로도 수신할 수 있습니다.

`open` (en-US)

`WebSocket` 연결이 열렸을 때 발생합니다. `onopen` 속성으로도 수신할 수 있습니다.

예제
--

```js
// WebSocket 연결 생성
const socket = new WebSocket("ws://localhost:8080");

// 연결이 열리면
socket.addEventListener("open", function (event) {
  socket.send("Hello Server!");
});

// 메시지 수신
socket.addEventListener("message", function (event) {
  console.log("Message from server ", event.data);
});
```

명세
--

| Specification |
| --- |
| WebSockets Standard # the-websocket-interface |

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

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

같이 보기
-----

* WebSocket을 이용하여 클라이언트 애플리케이션 작성하기


File - Web API

File
====

**`File`** 인터페이스는 파일에 대한 정보를 제공하고, 웹 페이지가 JavaScript로 파일의 내용에 접근할 수 있는 방법을 제공합니다.

`File` 객체는 보통 `FileList` 객체가 포함한 것을 사용하게 됩니다. `FileList` 객체는 사용자가 `<input>` (en-US) 요소로 파일을 선택한 결과 값으로, 또는 드래그 앤 드롭 작업의 `DataTransfer` 객체에서 가져올 수 있습니다.

`File` 객체는 `Blob`의 한 종류로, `Blob`을 사용할 수 있는 모든 맥락에서 사용할 수 있습니다. 특히 `FileReader`, `URL.createObjectURL()`, `createImageBitmap()` (en-US), `XMLHttpRequest.send()`는 `Blob`과 `File`을 모두 허용합니다.

자세한 정보 및 예제는 웹 애플리케이션에서 파일 사용하기를 참고하세요.

Blob

File생성자
---

`File()`

새로 생성한 `File`을 반환합니다.

속성
--

`File.prototype.lastModified` (en-US) 읽기 전용

파일의 최종 수정 시간을 UNIX 시간(1970년 1월 1일 자정)과의 밀리초 차이로 반환합니다.

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

`File` 객체가 참조하는 파일의 마지막 수정 시간을 `Date`로 반환합니다.

`File.prototype.name` 읽기 전용

`File` 객체가 참조하는 파일의 이름을 반환합니다.

`File.prototype.webkitRelativePath` (en-US)
비표준
 읽기 전용

`File`의 URL 상대경로를 반환합니다.

`File`은 `Blob`을 구현하므로 다음 속성도 가집니다.

`File.prototype.size` 읽기 전용

`File`의 크기를 바이트 단위로 반환합니다.

`File.prototype.type` 읽기 전용

`File`의 MIME 유형을 반환합니다.

메서드
---

`File` 인터페이스는 메서드를 정의하지 않지만, `Blob` 인터페이스에서 메서드를 상속합니다.

`Blob.prototype.slice()` (en-US)

지정한 바이트 범위 만큼 소스 `Blob`의 데이터를 복사한 새로운 `Blob` 객체를 반환합니다.

`Blob.prototype.stream()` (en-US)

`File`을 `ReadableStream`으로 변환합니다. `ReadableStream`은 파일 내용을 읽을 때 사용할 수 있습니다.

`Blob.prototype.text()` (en-US)

`File`을 스트림으로 변환한 후 끝까지 읽습니다. 문자열로 이행하는 `Promise`를 반환합니다.

`Blob.prototype.arrayBuffer()` (en-US)

`File`을 스트림으로 변환한 후 끝까지 읽습니다. `ArrayBuffer`로 이행하는 `Promise`를 반환합니다.

명세
--

| Specification |
| --- |
| File API # file-section |

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

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

같이 보기
-----

* 웹 애플리케이션에서 파일 사용하기
* `FileReader`


HTMLDocument - Web API

HTMLDocument
============

\*\*`HTMLDocument`\*\*은 일반적인 (XML) 문서에서 기본적으로 존재하지 않는 특별한 프로퍼티와 메소드에 접근을 제공하는 DOM의 추상 인터페이스입니다. 특히 HTML 문서와 엘리먼트에 관련된 기능을 추가해줍니다.

코어 `document` 인터페이스에서 파생되었습니다. 메소드와 프로퍼티는 `document` 페이지에 포함되어있고 DOM 페이지의 해당 섹션에 구분되어 나열되어있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # htmldocument |


UIEvent - Web API

UIEvent
=======

**`UIEvent`** 인터페이스는 간단한 사용자 인터페이스 이벤트를 나타냅니다.

`UIEvent`는 `Event`를 상속합니다. 하위 호환을 유지하기 위해 `UIEvent.initMouseEvent()` 메서드가 사라지지는 않았지만, `UIEvent` 객체의 생성은 `UIEvent()` 생성자로 해야 합니다.

`MouseEvent`, `TouchEvent` (en-US), `FocusEvent` (en-US), `KeyboardEvent`, `WheelEvent` (en-US), `InputEvent`, `CompositionEvent` (en-US) 인터페이스가 `UIEvent`를 직접 또는 간접적으로 상속합니다.

Event

UIEvent생성자
---

`UIEvent()`

`UIEvent` 객체를 생성합니다.

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

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

`UIEvent.detail` 읽기 전용

이벤트에 관련된 세부사항을 나타내는 `long`을 반환합니다. 정확한 정보는 이벤트 유형에 따라 다릅니다.

`UIEvent.sourceCapabilities` (en-US)
Experimental
 읽기 전용

`InputDeviceCapabilities` 인터페이스를 반환합니다. 터치 이벤트를 생성하는 물리적 장치에 대한 정보를 담고 있습니다.

`UIEvent.view` 읽기 전용

이벤트를 생성한 뷰를 담은 WindowProxy를 반환합니다.

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

입력한 숫자 `keyCode`, 또는 알파벳 키의 경우 문자 코드(`charCode`)를 반환합니다.

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

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

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

`UIEvent` 객체를 초기화합니다. 이미 발송한 이벤트에서는 아무 동작도 하지 않습니다.

명세서
---

| Specification |
| --- |
| UI Events # idl-uievent |

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

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

같이 보기
-----

* 이벤트 입문
* `Event`


MediaStream Image Capture API - Web API

MediaStream Image Capture API
=============================

**MediaStream Image Capture API**는 촬영 장치를 사용해 이미지와 비디오를 캡처하기 위한 API입니다. 그러나 데이터 캡처 외에도 이미지 해상도, 적목 현상 감소 기능, 플래시 존재 유무와 현재 사용 여부 등 장치 사양에 대한 정보를 가져올 때에도 사용할 수 있습니다. 거꾸로, Image Capture API를 사용하면 현재 장치의 허용 범위 안에서 해당 기능을 조정할 수도 있습니다.

개념과 사용법
-------

이미지 또는 비디오 스트림을 가져오는 절차는 다음과 같습니다. 예제 코드는 Chrome의 Image Capture 예제에서 가져온 것입니다.

우선, `MediaDevices.getUserMedia()` (en-US)를 사용해 장치를 가리키는 참조를 가져옵니다. 아래 코드는 단순히 사용 가능한 비디오 장치를 아무거나 요청하는 것이지만, `getUserMedia()` 메서드는더 상세한 장치 기능 요청도 허용합니다. 반환 값은 `MediaStream` (en-US) 객체로 이행하는 `Promise`입니다.

```js
navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  // Do something with the stream.
});
```

그 후, `MediaStream.getVideoTracks()` (en-US)를 호출해 미디어 스트림에서 시각적인 부분을 분리합니다. `getVideoTracks()`의 반환 값은 `MediaStreamTrack` 객체의 배열로, 여기서는 사용해야 할 객체를 배열의 첫 번째 요소라고 가정합니다. 실제 사용 시에는 `MediaStreamTrack` 객체의 속성을 사용해 원하는 객체를 찾을 수 있습니다.

```js
const track = mediaStream.getVideoTracks()[0];
```

이미지를 캡처하기 전에 우선 장치의 기능을 설정하고 싶을 것입니다. 다른 작업을 수행하기 전에, 트랙 객체의 `applyConstraints()` 메서드를 사용하면 됩니다.

```js
let zoom = document.querySelector("#zoom");
const capabilities = track.getCapabilities();
// 확대 지원 여부 판별
if (!capabilities.zoom) {
  return;
}
track.applyConstraints({ advanced: [{ zoom: zoom.value }] });
```

마지막으로, `MediaStreamTrack` 객체를 `ImageCapture()` 생성자에 제공합니다. `MediaStream`은 여러 종류의 트랙을 담고 있으며 적절한 트랙을 가져올 때 사용할 수 있는 메서드를 소유하지만, `ImageCapture` 생성자는 `MediaStreamTrack.kind`가 `"video"` 값이 아닌 경우 `NotSupportedError` `DOMException` (en-US)을 던집니다.

```js
let imageCapture = new ImageCapture(track);
```

인터페이스
-----

`ImageCapture`

촬영 장치를 참조하는 유효한 `MediaStreamTrack`을 사용해 이미지를 캡처하기 위한 인터페이스입니다.

`PhotoCapabilities`

장착된 촬영 장치에서 사용 가능한 설정 옵션을 제공합니다. `ImageCapture.getPhotoCapabilities()`를 호출해서 `PhotoCapabilities` 객체를 가져올 수 있습니다.

명세
--

| Specification |
| --- |
| MediaStream Image Capture # imagecaptureapi |

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

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

같이 보기
-----

* `MediaStream` (en-US)
* `MediaStreamTrack`


WebGLShader - Web API

WebGLShader
===========

**WebGLShader** 는 WebGL API 의 일부이며 정점 혹은 프래그먼트 셰이더가 될 수 있다. `WebGLProgram` (en-US) 는 두 타입의 셰이더 모두를 요구한다.설명
--

**WebGLShader** 를 생성하려면 `WebGLRenderingContext.createShader` (en-US)를 사용한다. 그러고 나서는 `WebGLRenderingContext.shaderSource()` (en-US)를 사용해서 GLSL 소스 코드를 연결한다. 마지막으로`WebGLRenderingContext.compileShader()` (en-US)를 호출하고 셰이더를 컴파일한다. 이 시점에서 **WebGLShader** 는 여전히 사용할 수 있는 형식은 아니고`WebGLProgram` (en-US)에 부착되어야 한다.

```js
function createShader(gl, sourceCode, type) {
  // 셰이더 타입 gl.VERTEX\_SHADER 또는 gl.FRAGMENT\_SHADER 중 하나를 컴파일한다.
  var shader = gl.createShader(type);
  gl.shaderSource(shader, sourceCode);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE\_STATUS)) {
    var info = gl.getShaderInfoLog(shader);
    throw "Could not compile WebGL program. \n\n" + info;
  }
}
```

셰이더 부착에 관한 정보는 `WebGLProgram` (en-US) 를 참고한다.

예시들
---

### 정점 셰이더 생성하기

셰이더 소스 코드 문자열들을 작성하고 접근하는 많은 다른 방법들이 있다는 점에 주목하라. 여기의 예는 오직 설명을 목적으로 한다.

```js
var vertexShaderSource = "attribute vec4 position;\n";
"void main() {\n" + " gl\_Position = position;\n" + "}\n";

// 위 예시로부터 createShader 함수를 사용한다.
var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX\_SHADER);
```

### 프래그먼트 셰이더 생성하기

```js
var fragmentShaderSource =
  "void main() {\n" + " gl\_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" + "}\n";

// 위 예시로부터 createShader 함수를 사용한다.
var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT\_SHADER);
```

명세
--

| Specification |
| --- |
| WebGL Specification # 5.8 |

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

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

See also
--------

* `WebGLProgram` (en-US)
* `WebGLRenderingContext.attachShader()` (en-US)
* `WebGLRenderingContext.bindAttribLocation()` (en-US)
* `WebGLRenderingContext.compileShader()` (en-US)
* `WebGLRenderingContext.createProgram()` (en-US)
* `WebGLRenderingContext.createShader()` (en-US)
* `WebGLRenderingContext.deleteProgram()` (en-US)
* `WebGLRenderingContext.deleteShader()` (en-US)
* `WebGLRenderingContext.detachShader()` (en-US)
* `WebGLRenderingContext.getAttachedShaders()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderParameter()` (en-US)
* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
* `WebGLRenderingContext.getShaderInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderSource()` (en-US)
* `WebGLRenderingContext.isProgram()` (en-US)
* `WebGLRenderingContext.isShader()` (en-US)
* `WebGLRenderingContext.linkProgram()` (en-US)
* `WebGLRenderingContext.shaderSource()` (en-US)
* `WebGLRenderingContext.useProgram()` (en-US)
* `WebGLRenderingContext.validateProgram()` (en-US)


Web Bluetooth API - Web API

Web Bluetooth API
=================

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

Web Bluetooth API는 블루투스 저에너지 주변 장비와 연결하고 상호 작용할 수 있는 기능을 제공합니다.

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

인터페이스
-----

`Bluetooth` (en-US)

지정된 옵션이 있는 `BluetoothDevice` (en-US) 객체애 대한 `Promise`를 반환합니다.

`BluetoothCharacteristicProperties` (en-US)

`BluetoothRemoteGATTCharacteristic` 속성을 제공합니다.

`BluetoothDevice` (en-US)

특정 스크립트 실행 환경 내의 블루투스 장치를 나타냅니다.

`BluetoothRemoteGATTCharacteristic` (en-US)

주변 장치의 서비스에 대한 추가 정보를 제공하는 기본 데이터 요소인 GATT 특성을 나타냅니다.

`BluetoothRemoteGATTDescriptor` (en-US)

특성 값에 대한 추가 정보를 제공하는 GATT 설명자를 나타냅니다.

`BluetoothRemoteGATTServer` (en-US)

원격 장치의 GATT 서버를 나타냅니다.

`BluetoothRemoteGATTService` (en-US)

장치, 참조된 서비스 목록 및 이 서비스의 특성 목록을 포함하여 GATT 서버에서 제공하는 서비스를 나타냅니다.

명세서
---

| Specification |
| --- |
| Web Bluetooth # bluetooth |

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

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


GeolocationPosition - Web API

GeolocationPosition
===================

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

**`GeolocationPosition`** 인터페이스는 주어진 시간에 장치가 위치한 지점을 나타냅니다. 지점은 `Coordinates` (en-US) 객체로 표현하여, 지구를 나타내는 회전타원체 위의 2D 위치와 더불어 높이와 속도 정보를 담습니다.

속성
--

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

`Position.coords` (en-US) 읽기 전용 Secure context

주어진 시간의 위치를 나타내는 `Coordinates` (en-US) 객체입니다.

`Position.timestamp` (en-US) 읽기 전용 Secure context

위치를 기록한 시간을 나타내는 `DOMTimeStamp` (en-US)입니다.

메서드
---

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

명세
--

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

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

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

같이 보기
-----

* 위치정보 사용하기
* 이 인터페이스를 사용하는 `Geolocation` 인터페이스.


AudioParamMap - Web API

AudioParamMap
=============

Web Audio API의 **`AudioParamMap`** 인터페이스는 다수의 오디오 파라미터의 집합을 나타내는데, 각 파라미터는 `DOMString`의 매핑으로 기술되고, DOMString은 `AudioParam` 객체에 대한 파라미터를 명시하며, AudioParam 객체는 자신의 값을 나타냅니다.

속성
--

`AudioParamMap` 객체는 `Map`으로써 이용되는데, 이 Map에서 각 파라미터는 이 파라미터의 값을 포함하고 있는 `AudioParam`에 매핑된 name 문자열에 의해 식별됩니다. 추가적으로, 다음의 속성들을 사용할 수 있습니다.

`size`

?

메서드
---

`entries()`

?

`forEach()`

?

`has()`

?

`keys()`

?

`values()`

?

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

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


Streams API - Web API

Streams API
===========

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

Streams API는 Javascript를 이용해 네트워크를 통해 전송된 데이터 스트림에 접근하여 원하는 대로 처리가 가능한 API를 제공합니다.

개념과 사용법
-------

Streaming은 네트워크를 통해 받은 리소스를 작은 조각으로 나누어, Bit 단위로 처리합니다. 이는 브라우저가 수신한 자원을 웹페이지에 표현할 때 주로 사용하는 방법입니다. — Video buffer는 재생되기 전 천천히 채워지며 가끔 이미지도 천천히 로딩되는 것을 보실 수 있을 겁니다..

하지만 Javascript에서는 지금까지 불가능했습니다. 이전에는 (비디오나 텍스트 파일 등의) 리소스를 처리하기 위해서 우선, 전체 파일을 다운로드 받은 후 알맞은 포맷으로 파싱된 후에야, 전송된 전체 데이터를 처리할 수 있었습니다.

With Javascript에 Stream이 도입된 후에는 모든 것이 바뀌었는데, 이제 Buffer, String 또는 blob 없이도 Javascript를 통해 Raw Data를 비트 단위로 처리할 수 있습니다.

![](/ko/docs/Web/API/Streams_API/concept.png)

장점은 또 있습니다 — Stream의 시작 또는 종료를 감지할 수 있으며, 여러 stream을 엮어서 에러를 처리하거나 필요한 경우 stream을 취소할 수도 있습니다. 또한 stream이 읽어들이는 속도에 따라 반응할 수도 있지요.

Stream의 주요한 기본 사용법은 응답 데이터를 stream으로 만드는 것입니다. `fetch()`를 통해 정상적으로 전송된 응답 `Body`는 `ReadableStream`로 표현 가능합니다. 또한 `ReadableStream.getReader()` (en-US)를 통해 Reader 객체를 얻어 데이터를 읽을 수도 있으며, `ReadableStream.cancel()` (en-US)로 Stream을 취소하는 것 등이 가능합니다.

조금 더 복잡한 사용법은 `ReadableStream()` (en-US) 생성자를 통해 사용자가 직접 Stream을 생성하는 것입니다. 예를 들자면 service worker에 전달할 데이터를 Stream으로 만들 수도 있습니다.

`WritableStream`을 사용하면 Stream에 데이터를 쓰는 것도 가능합니다..

**참고:** Streams API concepts (en-US), Using readable streams, Using writable streams (en-US) — 페이지에서 stream에 관한 더 자세한 이론과 예제를 찾을 수 있습니다.

스트림 인터페이스
---------

### 읽기 스트림(Readable streams)

`ReadableStream`

데이터 읽기 스트림을 나타냅니다. Fetch API의 결과 스트림이나 개발자가 정의한 스트림(예, 커스텀 `ReadableStream()` (en-US) 클래스)등을 핸들링할 수 있습니다.

`ReadableStreamDefaultReader` (en-US)

네트워크(예, fetch 요청)등에서 전달된 스트림 데이터를 처리하는 기본 Reader를 반환합니다.

`ReadableStreamDefaultController` (en-US)

`ReadableStream`의 상태나 내부 큐를 컨트롤 할 수 있는 기본 컨트롤러를 반환합니다. 기본 컨트롤러는 Byte 스트림 외의 스트림에만 해당합니다.

### 쓰기 스트림(writable streams)

`WritableStream`

목적지 스트림에 데이터를 쓰기 위한 표준 추상 인터페이스를 제공하는 객체입니다. 이 객체는 내장 백프레셔와 큐잉을 구현하고 있습니다.

`WritableStreamDefaultWriter` (en-US)

쓰기 스트림에 데이터 조각들을 쓰기 위한 기본 Writer 객체를 반환한다.

`WritableStreamDefaultController` (en-US)

`WritableStream` 상태를 컨트롤하는 기본 컨트롤러를 반환한다. `WritableStream`을 생성하면 해당 스트림을 컨트롤 하기 위해 `WritableStreamDefaultController` 인스턴스가 내부적으로 생성된다.

### 관련 스트림 API와 기능

`ByteLengthQueuingStrategy` (en-US)

스트림을 생성할 때 기본으로 사용 할 내장 byte length queuing strategy를 제공합니다.

`CountQueuingStrategy` (en-US)

스트림을 생성할 때 기본적으로 사용 할 내장 chunk counting queuing strategy를 제공합니다..

### 외부 API 확장

`Request`

새 `Request` 객체가 생성될 때 `RequestInit` 딕셔너리의 `body`에 `ReadableStream` 를 전달할 수 있습니다. 이 `Request`는 `fetch()` 에 전달되에서 스트림을 fetch하는데 사용됩니다.

`Body`

`fetch()` 성공 시 기본적으로 `Body` `ReadableStream`로 제공되며, reader를 붙여 데이터를 읽어들일 수 있습니다.

### ByteStream 관련 인터페이스

**경고:** **중요**: 아래 항목들은 아직 구현된 곳이 없으며, 스펙의 세부 사항이 구현할 수 있을 만큼 충분한 지 논의가 진행중입니다. 추후 변경될 수 있습니다.

`ReadableStreamBYOBReader` (en-US)

개발자가 직접 제공하여 stream data를 읽을 수 있는 BYOB ("bring your own buffer") reader를 표현합니다. (예 커스텀 `ReadableStream()` (en-US) 생성자).

`ReadableByteStreamController` (en-US)

`ReadableStream`의 상태와 내부 큐를 컨트롤 하는 컨트롤러 객체를 표현합니다. Byte stream 컨트롤러는 byte stream을 위한 컨트롤러입니다.

`ReadableStreamBYOBRequest` (en-US)

`ReadableByteStreamController` (en-US)의 request를 표현합니다.

예제
--

Streams API 문서와 참조할 만한 예제를 함께 작성하였습니다 — mdn/dom-examples/streams 를 참조하세요. 예제는 아래와 같습니다.:

* Simple stream pump: ReadableStream에서 어떻게 데이터를 읽어들여 다른 곳으로 전달하는지 보여줍니다.
* Grayscale a PNG: PNG file의 ReadableStream을 통해 grayscale로 변경하는 방법을 보여줍니다.
* Simple random stream: 커스텀 스트림을 통해 무작위 문자열을 생성하고, 데이터 청크로 큐잉한 뒤, 다시 읽어들이는 방법에 대해 설명합니다.
* Simple tee example: 이 예제는 simple random stream 예제를 확장하여, 스트림을 분할하고 각 스트림이 독립적으로 데이터를 읽는 방법을 보여줍니다.
* Simple writer: Writable stream에 데이터를 쓰는 방법을 설명하고, 스트림 데이터를 디코드하여 UI로 표현하는 방법을 보여줍니다.
* Unpack chunks of a PNG: `pipeThrough()` (en-US) 을 통해 PNG file을 PNG 청크 스트림으로 변환하는 방식으로 ReadableStream을 다른 데이터 타입 스트림으로 전환하는 방법을 설명합니다.

다른 개발자의 예제:

* Progress Indicators with Streams, Service Workers, & Fetch.
명세서
---

| Specification |
| --- |
| Streams Standard # rs-class |
| Streams Standard # ws-class |

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

### api.ReadableStream

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

### api.WritableStream

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

더 보기
----

* Streams API 개 (en-US)념
* Readable stream 사용하기
* Writable stream 사용하기 (en-US)


DOMParser - Web API

DOMParser
=========

The **`DOMParser`** 인터페이스는 DOM `Document` 문서에 맞는 XML 및 HTML 소스 코드를 해석할 수 있는 기반을 제공한다 .

**참고:** `XMLHttpRequest` 객체로도 인식 가능한 URL 주소로부터 직접 XML 및 HTML 문서를 해석하여 `response` (en-US) 속성을 통해 `Document` 객체로 제공한다.

반대로 DOM 구조를 XML 및 HTML 소스 코드로 제공하는 방식은 `XMLSerializer` (en-US) 인터페이스를 참고하도록 한다.

HTML 문서의 경우, `Element.innerHTML` 속성과 `outerHTML` 속성을 통해 DOM 구조를 새로운 방식으로 변경할 수 있다. 또한 이들 속성을 통해 HTML 구조의 하위에 있는 HTML 구조도 불러올 수 있다.

문법
--

```js
let domparser = new DOMParser();
```

메소드
---

* `DOMParser.parseFromString()` (en-US)

#### 문법

```js
let doc = domparser.parseFromString(string, mimeType);
```

#### 반환

**`mimeType`** 인자를 통해 정의한 형식에 따른 `Document` 또는`XMLDocument` (en-US) 문서를 반환한다.

#### 인자

이 메소드에는 2개의 인자가 제공되는데, 모두 필수값이다.

`string`

해석할 `DOMString` 문자열. 반드시 HTML, xml, xhtml+xml 또는 svg 문서 형식에 맞아야 한다.

`mimeType`

아래 표에 정의한 형식을 반환 값으로 제공할 `DOMString` 문자열.

| `mimeType` | `doc.constructor` |
| --- | --- |
| `text/html` | ``Document`` |
| `text/xml` | ``XMLDocument` (en-US)` |
| `application/xml` | ``XMLDocument` (en-US)` |
| `application/xhtml+xml` | ``XMLDocument` (en-US)` |
| `image/svg+xml` | ``XMLDocument` (en-US)` |

예제
--

이 인터페이스의 유일한 메서드인 `DOMParser.parseFromString()` (en-US)에 대한 설명서에는 XML, SVG 및 HTML 문자열을 구문 분석하기 위한 예제가 포함되어 있습니다.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-parsing-and-serialization |

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

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

같이 보기
-----

* XML 문서 직렬화와 해석 (en-US)
* `XMLHttpRequest`
* `XMLSerializer` (en-US)
* `JSON.parse()` - `JSON` 문서에 대해 같은 역할을 제공한다.


Geolocation - Web API

Geolocation
===========

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

**`Geolocation`** 인터페이스는 장치의 위치를 가져오는 방법을 나타냅니다. `Geolocation`을 사용하면 웹 사이트나 웹 앱이 위치 정보를 활용해, 현재 위치에 대해 맞춤 콘텐츠를 제공할 수 있습니다.

`Navigator` 객체의 `geolocation` 속성으로 이 인터페이스를 구현하는 객체에 접근할 수 있습니다.

**참고:** 보안 상의 문제로, 웹 페이지가 위치 정보에 접근을 시도하면 사용자에게 알림을 보내고 권한을 허용할지 묻습니다. 각 브라우저는 자신만의 권한 정책과 요청 방식을 가지고 있으므로 주의해야 합니다.

속성
--

*`Geolocation` 인터페이스는 어떤 속성도 구현하거나 상속하지 않습니다.*

메서드
---

**`Geolocation` 인터페이스는 어떤 메서드도 상속하지 않습니다.**

`Geolocation.getCurrentPosition()` Secure context

장치의 현재 위치를 조사한 후 `GeolocationPosition` 객체로 반환합니다.

`Geolocation.watchPosition()` Secure context

장치의 위치가 변경될 때마다 호출하는 콜백을 등록합니다. 반환값은 콜백의 식별자로 쓸 수 있는 `long` 값입니다.

`Geolocation.clearWatch()` Secure context

`watchPosition()`을 이용해 등록한 특정 콜백을 삭제합니다.

명세
--

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

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

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

같이 보기
-----

* Geolocation API 사용하기


Service Worker API - Web API

Service Worker API
==================

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

서비스 워커는 웹 응용 프로그램, 브라우저, 그리고 (사용 가능한 경우) 네트워크 사이의 프록시 서버 역할을 합니다. 서비스 워커의 개발 의도는 여러가지가 있지만, 그 중에서도 효과적인 오프라인 경험을 생성하고, 네트워크 요청을 가로채서 네트워크 사용 가능 여부에 따라 적절한 행동을 취하고, 서버의 자산을 업데이트할 수 있습니다. 또한 푸시 알림과 백그라운드 동기화 API로의 접근도 제공합니다.

서비스 워커의 개념과 사용법
---------------

서비스 워커는 출처와 경로에 대해 등록하는 이벤트 기반 워커로서 JavaScript 파일의 형태를 갖고 있습니다. 서비스 워커는 연관된 웹 페이지/사이트를 통제하여 탐색과 리소스 요청을 가로채 수정하고, 리소스를 굉장히 세부적으로 캐싱할 수 있습니다. 이를 통해 웹 앱이 어떤 상황에서 어떻게 동작해야 하는지 완벽하게 바꿀 수 있습니다. (제일 대표적인 상황은 네트워크를 사용하지 못할 때입니다.)

서비스 워커는 워커 맥락에서 실행되기 때문에 DOM에 접근할 수 없습니다. 또한 앱을 구동하는 주 JavaScript와는 다른 스레드에서 동작하므로 연산을 가로막지 않습니다(논 블로킹). 서비스 워커는 온전히 비동기적으로 설계됐으며, 그로 인해 동기적 XHR이나 웹 저장소 등의 API를 서비스 워커 내에서 사용할 수 없습니다.

서비스 워커는 보안 상의 이유로 HTTPS에서만 동작합니다. 네트워크 요청을 수정할 수 있다는 점에서 중간자 공격에 굉장히 취약하기 때문입니다. 또한 Firefox에서는 사생활 보호 모드에서 Service Worker API에 접근할 수 없습니다.

**참고:** 서비스 워커는 모든 것을 세부적으로 통제할 수 있다는 점에서 AppCache 등 오프라인이나 캐시의 이전 시도보다 우위를 점합니다. 서비스 워커는 개발자의 의도를 짐작하지 않으며, 예측과 빗나갔을 때 망가지지도 않기 때문입니다.

**참고:** 서비스 워커는 응답을 기다린 후 성공 또는 실패 액션을 실행하는 경우가 많으므로 프로미스를 적극적으로 사용합니다.

### 등록

서비스 워커는 `ServiceWorkerContainer.register()` (en-US) 메서드를 사용해 처음 등록합니다. 성공적으로 등록한 경우 클라이언트가 서비스 워커를 다운로드하고, 출처 전체에 대해 혹은 개발자가 지정한 특정 주소들에 대해서 서비스 워커의 설치와 활성화(아래 구획 참고)를 시도합니다.

### 다운로드, 설치, 활성화

서비스 워커를 살펴보면 다음과 같은 생명주기를 볼 수 있습니다.

1. 다운로드
2. 설치
3. 활성화

서비스 워커가 제어하는 사이트/페이지에 사용자가 처음 접근하는 순간 서비스 워커가 즉시 다운로드됩니다.

서비스 워커의 업데이트는 다음 경우에 발생합니다.

* 범위 내 페이지로의 탐색 발생
* 서비스 워커에서 이벤트가 발생했는데, 서비스 워커를 이전 24시간 내에 다운로드하지 않은 경우

다운로드한 파일이 더 새로운 버전인 경우 서비스 워커의 설치를 시도합니다. 버전 비교는 기존 서비스 워커 파일과의 바이트 단위 비교 결과를 사용합니다. 이 페이지/사이트에서 서비스 워커를 처음 발견한 경우에도 "새로운 버전"으로 취급합니다.

기존 서비스 워커가 없으면 설치를 시도하고, 설치를 성공하면 활성화합니다.

기존에 서비스 워커가 존재하던 경우, 새로운 버전을 백그라운드에서 설치하지만 활성화는 아직 하지 않습니다. 이 시점의 워커를 **대기 중인 워커**라고 부릅니다. 대기 중인 워커는 이전 버전의 서비스 워커를 사용하는 페이지가 모두 닫힌 경우 활성화되어 **활성 워커**가 됩니다. `ServiceWorkerGlobalScope.skipWaiting()`을 사용해 활성화 절차를 더 빨리 시작할 수 있으며, 새로운 활성 워커는 `Clients.claim()`을 사용해 이전 페이지를 회수할 수 있습니다.

생명주기 중 발생하는 이벤트 중 하나는 `install` (en-US) 이벤트입니다. 이 이벤트의 대표적인 사용 방법은, 예를 들면 내장 저장소 API를 사용해 캐시를 만들고, 오프라인 상황에서 사용할 자산을 준비하는 등, 서비스 워커의 사용을 준비하는 것입니다.

`activate` (en-US) 이벤트도 있습니다. `activate`의 시점에서는 과거의 캐시를 지우고, 구버전 서비스 워커에 관련된 항목을 청소하는 등 여러가지를 정리하기에 좋습니다.

서비스 워커는 `FetchEvent` (en-US) 이벤트를 사용해 요청에 응답할 수 있습니다. `FetchEvent.respondWith()` (en-US) 메서드를 사용해 요청에 대한 응답을 원하는 방식으로 자유롭게 바꾸세요.

**참고:** `install`과 `activate` 이벤트 처리는 시간이 꽤 걸릴 수도 있기에, 서비스 워커 명세는 `waitUntil()` (en-US) 메서드를 제공합니다. `install`이나 `activate`에서 `waitUntil()`을 호출하면서 매개변수로 프로미스를 제공하면, 성공적으로 이행하기 전까지는 기능 이벤트가 발생하지 않습니다.

기본적인 첫 서비스 워커를 차근차근 만드는 방법은 서비스 워커 사용하기 (en-US)에서 읽어볼 수 있습니다.

다른 사용법 아이디어
-----------

서비스 워커의 설계는 다음과 같은 용도로 사용하는 것도 감안했습니다.

* 백그라운드 데이터 동기화.
* 다른 출처에서의 리소스 요청을 응답.
* 위치정보, 자이로 센서 등 계산에 높은 비용이 들어가는 다수의 페이지에서 함께 사용할 수 있도록 데이터 업데이트를 중앙화.
* 개발 목적으로서 CoffeeScript, Less, CJS/AMD 모듈 등의 의존성 관리와 컴파일.
* 백그라운드 서비스 훅.
* 특정 URL 패턴에 기반한 사용자 지정 템플릿 제공.
* 성능 향상. 사진 앨범의 다음 사진 몇 장처럼, 사용자가 필요로 할 것으로 생각되는 리소스의 프리페칭 등.

미래의 서비스 워커는 웹 플랫폼이 네이티브 앱의 능력에 보다 근접하도록 여러 가지 유용한 기능을 수행할 수 있을 것입니다. 흥미롭게도 다른 명세에서도 서비스 워커 맥락을 사용할 수 있으며, 이미 다음과 같은 곳에서 사용하고 있습니다.

* 백그라운드 동기화: 아무 사용자도 사이트에 없을 때 서비스 워커를 가동해 캐시를 업데이트 하는 등의 작업을 수행.
* 푸시 메시지에 반응: 서비스 워커를 가동, 새로운 콘텐츠가 이용 가능하다는 메시지를 사용자에게 전송.
* 특정 시간과 날짜에 반응.
* 지오펜스 진입.
인터페이스
-----

`Cache`
Experimental

`ServiceWorker` 생명주기의 일부로서 캐시되는 `Request` / `Response` 객체 쌍의 저장소를 나타냅니다.

`CacheStorage` (en-US)
Experimental

`Cache` 객체의 저장소를 나타냅니다. `ServiceWorker`가 접근할 수 있는 모든 유명 캐시의 주 디렉토리를 제공하며, `Cache` 객체를 가리키는 문자열 이름의 맵핑도 관리합니다.

`Client` (en-US)
Experimental

서비스 워커 클라이언트의 범위를 나타냅니다. 서비스 워커 클라이언트는 브라우저 맥락에서의 문서이거나, 활성화된 워커가 제어하는 `SharedWorker`입니다.

`Clients` (en-US)
Experimental

`Client` (en-US) 객체의 목록을 나타냅니다. Clients는 현재 출처의 활성 서비스 워커 클라이언트에 접근하는 주요 방법입니다.

`ExtendableEvent` (en-US)
Experimental

서비스 워커 생명주기의 일부로서 `ServiceWorkerGlobalScope` (en-US)에서 발생하는 `install`과 `activate` 이벤트의 지속시간을 늘립니다. 이로써 데이터베이스 스키마를 업그레이드하거나, 만료된 캐시 항목을 지우는 작업 등이 끝나기 전까지 `FetchEvent` (en-US)와 같은 기능 이벤트가 `ServiceWorker`로 전달되지 않도록 합니다.

`ExtendableMessageEvent` (en-US)
Experimental

The event object of a `message` event fired on a service worker (when a channel message is received on the `ServiceWorkerGlobalScope` (en-US) from another context) — extends the lifetime of such events.

`FetchEvent` (en-US)
Experimental

The parameter passed into the `ServiceWorkerGlobalScope.onfetch` handler, `FetchEvent` represents a fetch action that is dispatched on the `ServiceWorkerGlobalScope` (en-US) of a `ServiceWorker`. It contains information about the request and resulting response, and provides the `FetchEvent.respondWith()` (en-US) method, which allows us to provide an arbitrary response back to the controlled page.

`InstallEvent` (en-US)
Experimental

The parameter passed into the `oninstall` handler, the `InstallEvent` interface represents an install action that is dispatched on the `ServiceWorkerGlobalScope` (en-US) of a `ServiceWorker`. As a child of `ExtendableEvent` (en-US), it ensures that functional events such as `FetchEvent` (en-US) are not dispatched during installation.

`NavigationPreloadManager` (en-US)
Experimental

Provides methods for managing the preloading of resources with a service worker.

`Navigator.serviceWorker` (en-US)

Returns a `ServiceWorkerContainer` (en-US) object, which provides access to registration, removal, upgrade, and communication with the `ServiceWorker` objects for the associated document.

`NotificationEvent` (en-US)
Experimental

The parameter passed into the `onnotificationclick` handler, the `NotificationEvent` interface represents a notification click event that is dispatched on the `ServiceWorkerGlobalScope` (en-US) of a `ServiceWorker`.

`ServiceWorker`
Experimental

Represents a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same `ServiceWorker` object.

`ServiceWorkerContainer` (en-US)
Experimental

Provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister, and update service workers, and access the state of service workers and their registrations.

`ServiceWorkerGlobalScope` (en-US)

Represents the global execution context of a service worker.

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

Represents a message sent to a `ServiceWorkerGlobalScope` (en-US). **Note that this interface is deprecated in modern browsers. Service worker messages will now use the `MessageEvent` interface, for consistency with other web messaging features.**

`ServiceWorkerRegistration` (en-US)
Experimental

Represents a service worker registration.

`ServiceWorkerState` (en-US)
Experimental

Associated with its `ServiceWorker`'s state.

`SyncEvent` (en-US)
비표준

The SyncEvent interface represents a sync action that is dispatched on the `ServiceWorkerGlobalScope` (en-US) of a ServiceWorker.

`SyncManager` (en-US)
비표준

Provides an interface for registering and listing sync registrations.

`WindowClient` (en-US)
Experimental

Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of `Client` (en-US) object, with some additional methods and properties available.

명세
--

| Specification |
| --- |
| Service Workers  |

같이 보기
-----

* ServiceWorker 쿡북
* 서비스 워커 사용하기 (en-US)
* 서비스 워커 기초 코드 예제
* Is ServiceWorker ready?
* `Promise`
* 웹 워커 사용하기 (en-US)


OfflineAudioContext - Web API

OfflineAudioContext
===================

`OfflineAudioContext` 인터페이스는 함께 연결된 `AudioNode`들로부터 만들어진 오디오 프로세싱 그래프를 나타내는 `AudioContext` 인터페이스입니다. 표준 `AudioContext`와는 대조적으로, `OfflineAudioContext`는 오디오를 장치 하드웨어로 렌더링하지 않습니다; 대신, 이것은 가능한 한 빨리 오디오를 생성하고, 그 결과를 `AudioBuffer`에 출력합니다.

EventTarget

BaseAudioContext

OfflineAudioContext생성자
---

`OfflineAudioContext.OfflineAudioContext()` (en-US)

새로운 `OfflineAudioContext` 인스턴스를 생성합니다.

속성
--

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

`OfflineAudioContext.length` (en-US) 읽기 전용

샘플 프레임의 버퍼 사이즈를 나타내는 정수.

### 이벤트 처리기

`OfflineAudioContext.oncomplete` (en-US)

`OfflineAudioContext.startRendering()` (en-US)의 이벤트 기반 버전이 사용된 이후, 프로세싱이 종료되었을 때, 즉 (`OfflineAudioCompletionEvent` (en-US) 유형의) `complete (en-US)` 이벤트가 발생되었을 때 호출되는 이벤트 처리기 (en-US)입니다.

메서드
---

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

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

특정한 시간에서의 오디오 컨텍스트의 시간 진행의 연기를 스케쥴링하고 프로미스를 반환합니다.

`OfflineAudioContext.startRendering()` (en-US)

현재 연결과 현재 스케쥴링된 변화를 고려하며 오디오 렌더링을 시작합니다. 이 문서는 이벤트 기반 버전과 프로미스 기반 버전 모두를 다룹니다.

### 더 이상 사용되지 않는 메서드

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

이전에 연기된 오디오 컨텍스트에서의 시간 진행을 재개합니다.

**참고:** `resume()` 메서드는 여전히 사용 가능합니다 — 이것은 이제 `BaseAudioContext` 인터페이스에 정의되었고 (`AudioContext.resume` (en-US)을 참조하세요) 따라서 `AudioContext`와 `OfflineAudioContext` 인터페이스 모두에서 접근 가능합니다.

이벤트
---

`addEventListener()`를 사용하거나 이벤트 수신기를 이 인터페이스의 `oneventname` 속성에 부여함으로써 이 이벤트들을 수신하세요.

`complete` (en-US)

 오프라인 오디오 컨텍스트의 렌더링이 완료되었을 때 발생됩니다.
 또한 `oncomplete` (en-US) 이벤트 처리기 속성을 사용하여 이용 가능합니다.

예제
--

이 간단한 예제에서, 우리는 `AudioContext`와 `OfflineAudioContext` 객체 모두를 선언합니다. 우리는 `AudioContext`을 XHR(`BaseAudioContext.decodeAudioData` (en-US))을 통해 오디오 트랙을 로드하기 위해 사용하고, 그리고 나서 `OfflineAudioContext`를 오디오를 `AudioBufferSourceNode`에 렌더링하고 트랙을 재생하기 위해 사용합니다. 오프라인 오디오 그래프가 준비된 후, 여러분은 `OfflineAudioContext.startRendering` (en-US)을 사용하여 `AudioBuffer`에 이것을 렌더링할 필요가 있습니다.

`startRendering()` 프로미스가 이행할 때, 렌더링은 완료되었고 `AudioBuffer` 출력은 프로미스에서 반환됩니다.

이 시점에서 우리는 다른 오디오 컨텍스트를 생성하고, 그것의 내부에 `AudioBufferSourceNode`를 생성하고, 그리고 이것의 버퍼를 `AudioBuffer` 프로미스와 같게 설정합니다. 이것은 그리고 나서 간단한 표준 오디오 그래프의 일부로 재생됩니다.

**참고:** 작동하는 예제를 보려면 offline-audio-context-promise GitHub 레포지토리를 참고하세요 (소스 코드도 보세요.)

```js
// 온라인과 오프라인 오디오 컨텍스트를 정의합니다

var audioCtx = new AudioContext();
var offlineCtx = new OfflineAudioContext(2, 44100 \* 40, 44100);

source = offlineCtx.createBufferSource();

// 오디오 트랙을 로딩하기 위해 XHR를 사용하고,
// 이것을 디코딩하기 위해 decodeAudioData를 사용하고 렌더링하기 위해 OfflineAudioContext를 사용합니다

function getData() {
  request = new XMLHttpRequest();

  request.open("GET", "viper.ogg", true);

  request.responseType = "arraybuffer";

  request.onload = function () {
    var audioData = request.response;

    audioCtx.decodeAudioData(audioData, function (buffer) {
      myBuffer = buffer;
      source.buffer = myBuffer;
      source.connect(offlineCtx.destination);
      source.start();
      //source.loop = true;
      offlineCtx
        .startRendering()
        .then(function (renderedBuffer) {
          console.log("Rendering completed successfully");
          var song = audioCtx.createBufferSource();
          song.buffer = renderedBuffer;

          song.connect(audioCtx.destination);

          play.onclick = function () {
            song.start();
          };
        })
        .catch(function (err) {
          console.log("Rendering failed: " + err);
          // 참고: 이 프로미스는 OfflineAudioContext에서 startRendering이 두 번째로 호출되었을 때 거부되어야만 합니다
        });
    });
  };

  request.send();
}

// 프로세스를 시작하기 위해 getData를 실행합니다

getData();
```

명세
--

| Specification |
| --- |
| Web Audio API # OfflineAudioContext |

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

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

같이 보기
-----

* Web Audio API 사용하기


Storage - Web API

Storage
=======

Web Storage API의 **`Storage`** 인터페이스는 특정 도메인을 위한 세션 저장소 또는 로컬 저장소의 접근 경로로서 데이터를 추가하고 수정하거나 삭제할 수 있습니다.

도메인의 세션 저장소를 수정해야 하면 `Window.sessionStorage`에, 로컬 저장소를 수정해야 하면 `Window.localStorage`에 접근하세요.

속성
--

`Storage.length` 읽기 전용

`Storage` 객체에 저장된 데이터 항목의 수를 반환합니다.

메서드
---

`Storage.key()`

주어진 숫자 `n`에 대하여 저장소의 `n`번째 항목 키를 반환합니다.

`Storage.getItem()` (en-US)

주어진 키에 연결된 값을 반환합니다.

`Storage.setItem()` (en-US)

키가 저장소에 존재하는 경우 값을 재설정합니다. 존재하지 않으면 키와 값을 저장소에 추가합니다.

`Storage.removeItem()`

주어진 키를 저장소에서 제거합니다.

`Storage.clear()` (en-US)

저장소의 모든 키를 저장소에서 제거합니다.

예제
--

아래 코드에서는 `localStorage`에 접근해 `Storage` 객체를 접근합니다. 우선 `!localStorage.getItem('bgcolor')`를 사용해 데이터가 저장소에 존재하는지 알아냅니다. 데이터가 있으면 `Storage.getItem()` (en-US)으로 회수한 후 `setStyles()`로 페이지 스타일을 바꿉니다. 데이터가 없으면 `populateStorage()` 함수를 호출하고, 그 안에서는 `Storage.setItem()` (en-US)을 통해 데이터를 설정합니다. 그 후에는 동일하게 `setStyles()`를 사용합니다.

```js
if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);
}

function setStyles() {
  var currentColor = localStorage.getItem("bgcolor");
  var currentFont = localStorage.getItem("font");
  var currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = "#" + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```

**참고:** 실제 작동 예제는 저희의 Web Storage Demo에서 볼 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # storage |

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

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

같이 보기
-----

* Web Storage API 사용하기 (en-US)
* `Window.localStorage`
* `Window.sessionStorage`
* `CacheStorage` (en-US)


StyleSheet - Web API

StyleSheet
==========

`StyleSheet` 인터페이스를 구현하는 객체는 단일 스타일 시트를 나타냅니다. CSS 스타일 시트는 보다 특수화된 `CSSStyleSheet` (en-US) 인터페이스를 추가로 구현합니다.

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

`StyleSheet.disabled` (en-US)

현재 스타일시트가 적용되었는지 여부를 나타내는 불리언 값입니다.

`StyleSheet.href` (en-US) 읽기 전용

스타일시트의 위치를 나타내는 문자열을 반환합니다.

`StyleSheet.media` (en-US) 읽기 전용

스타일 정보에 대해 원하는 대상 매체를 나타내는 `MediaList` (en-US)를 반환합니다.

`StyleSheet.ownerNode` (en-US) 읽기 전용

현재 문서와 이 스타일 시트를 연결하는 `Node` (en-US)를 반환합니다.

`StyleSheet.parentStyleSheet` (en-US) 읽기 전용

이 시트를 포함하는 `StyleSheet`를 반환합니다. 없으면 `null`을 반환합니다.

`StyleSheet.title` (en-US) 읽기 전용

현재 스타일 시트의 추가적인 제목을 나타내는 문자열을 반환합니다.

`StyleSheet.type` (en-US)읽기 전용

이 스타일 시트의 스타일 시트 언어를 나타내는 문자열을 반환합니다.

명세서
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-stylesheet-interface |

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

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

같이 보기
-----

* `CSSStyleSheet` (en-US)


AudioParam - Web API

AudioParam
==========

Web Audio API의 `AudioParam` 인터페이스는 오디오에 관련된 파라미터를 나타내는데, 보통 (`GainNode.gain` (en-US)과 같은) `AudioNode`의 파라미터입니다.

`AudioParam` 은 특정한 값이나 값의 변화로 설정될 수 있고, 특정한 시간에 그리고 특정한 패턴을 따라 일어나도록 예정될 수 있습니다.

각 `AudioParam` 은 이벤트의 리스트를 가지고 있고, 이는 초기적으로는 비어 있습니다. 이 이벤트의 리스트는 값이 언제 그리고 어떻게 변화할지를 정의합니다. 이 리스트가 비어있지 않을 때, `AudioParam.value` 특성을 사용한 변화는 무시됩니다. 이 이벤트의 리스트는 우리가 임의적인 타임라인 기반의 자동화 커브를 사용해 아주 정밀한 시간에 일어나야만 하는 변화들을 예정할 수 있게 합니다. 사용되는 이 시간은 `AudioContext.currentTime` (en-US)에 정의된 것입니다.

AudioParam 유형
-------------

두 종류의 `AudioParam` 이 있는데, 그것은 *a-rate* 와 *k-rate* 파라미터입니다. 각 `AudioNode`는 명세에서 이것의 파라미터들 중 어떤 것이 *a-rate* 이고 어떤 것이 *k-rate* 인지 정의합니다.

### a-rate

*a-rate* `AudioParam` 은 오디오 신호의 각 샘플 프레임에 대해 현재의 오디오 파라미터 값을 취합니다.

### k-rate

*k-rate* `AudioParam` 은 처리되는 전체 블럭에 대해 같은 초기 오디오 파라미터 값을 사용합니다. 즉, 128 샘플 프레임입니다. 다른 말로 하자면, 오디오가 노드에 의해 처리되는 동안 같은 값이 오디오에 있는 모든 프레임에 적용됩니다.

속성
--

`AudioParam.defaultValue` 읽기 전용

`AudioParam` 을 생성하는 특정한 `AudioNode`에 의해 정의되는 특성의 초기 값을 나타냅니다.

`AudioParam.maxValue` 읽기 전용

파라미터의 명목상의 (효과적인) 범위에 대한 최대로 가능한 값을 나타냅니다.

`AudioParam.minValue` 읽기 전용

파라미터의 명목상의 (효과적인) 범위에 대한 최소로 가능한 값을 나타냅니다.

`AudioParam.value`

현재 시간에 대한 파라미터의 현재 값을 나타냅니다. 초기적으로는 `defaultValue`의 값으로 설정됩니다.

메서드
---

`AudioParam.setValueAtTime()`

정밀한 시간에서 `AudioParam` 의 값에 즉각적인 변화를 예정합니다. 이 시간은 `AudioContext.currentTime` (en-US)과 비교하여 측정됩니다. 새로운 값은 `value` 매개변수에 의해 주어집니다.

`AudioParam.linearRampToValueAtTime()`

`AudioParam` 의 값에 점진적인 선형적 변화를 예정합니다. 이 변화는 *previous* 이벤트에 명시된 시간에 시작하고, `value` 매개변수에 주어진 새로운 값까지 선형적인 경사(ramp)를 따라 변경된 후, `endTime` 매개변수에 주어진 시간에서 새로운 값에 도달합니다.

`AudioParam.exponentialRampToValueAtTime()`

`AudioParam` 의 값에 점진적인 지수적 변화를 예정합니다. 이 변화는 *previous* 이벤트에 명시된 시간에 시작하고, `value` 매개변수에 주어진 새로운 값까지 지수적인 경사를 따라 변경된 후, `endTime` 매개변수에 주어진 시간에서 새로운 값에 도달합니다.

`AudioParam.setTargetAtTime()`

`AudioParam` 의 값에 변화의 시작을 예정합니다. 이 변화는 `startTime` 에 명시된 시간에 시작해 `target` 매개변수에 주어진 값을 향해 지수적으로 움직입니다. 이 지수적인 감소(decay) 비율은 `timeConstant` 매개변수에 의해 정의되는데, 이 값은 초 단위로 측정된 시간입니다.

`AudioParam.setValueCurveAtTime()`

`AudioParam` 의 값들이 주어진 구간에 맞도록 조정된 부동점 숫자들의 배열을 따르게 예정합니다. 수의 구간은 주어진 시작 시간에 시작하고, 주어진 지속 시간에 걸쳐 이어집니다.

`AudioParam.cancelScheduledValues()`

`AudioParam` 에 예정된 모든 미래의 변화들을 취소합니다.

`AudioParam.cancelAndHoldAtTime()`

`AudioParam` 에 예정된 모든 미래의 변화들을 취소하나 다른 메서드를 사용해 추가적인 변화가 만들어질 때까지 주어진 시간에서 값을 유지합니다.

예제
--

첫째는 기본적인 예제인데 `GainNode` (en-US)가 `gain` 값을 설정하는 것을 보여줍니다. `gain` 은 a-rate AudoParam의 예시인데, 왜냐하면 이 값은 잠재적으로 오디오의 각각의 샘플 프레임에 대해 다르게 설정될 수 있기 때문입니다.

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

var gainNode = audioCtx.createGain();
gainNode.gain.value = 0;
```

다음 예제는 `DynamicsCompressorNode` (en-US)가 몇 개의 파라미터 값들을 조작하는 것을 보여줍니다. 이 값들은 k-rate AudioParam의 예시인데, 왜냐하면 이것들은 한번에 전체 오디오 블럭에 대해 설정되기 때문입니다.

```js
var compressor = audioCtx.createDynamicsCompressor();
compressor.threshold.setValueAtTime(-50, audioCtx.currentTime);
compressor.knee.setValueAtTime(40, audioCtx.currentTime);
compressor.ratio.setValueAtTime(12, audioCtx.currentTime);
compressor.attack.setValueAtTime(0, audioCtx.currentTime);
compressor.release.setValueAtTime(0.25, audioCtx.currentTime);
```

명세서
---

| Specification |
| --- |
| Web Audio API # AudioParam |

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

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

같이 보기
-----

* Web Audio API 사용하기


Web Workers API - Web API

Web Workers API
===============

**웹 워커**(Web worker)는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술입니다. 웹 워커를 통해 무거운 작업을 분리된 스레드에서 처리하면 주 스레드(보통 UI 스레드)가 멈추거나 느려지지 않고 동작할 수 있습니다.

웹 워커의 개념과 활용법
-------------

워커는 이름을 지정한 JavaScript 파일을 구동하는 객체로서 `Worker()` (en-US) 등의 생성자로 생성합니다. 해당 파일은 현재 `window`와는 다른 전역 맥락에서 동작하는 워커 스레드에서 작동합니다. 이 때, 전역 맥락은 전용 워커(단일 스크립트에서만 사용하는 워커)의 경우 `DedicatedWorkerGlobalScope` (en-US) 객체이고, 공유 워커(여러 스크립트에서 공유하는 워커)의 경우 `SharedWorkerGlobalScope` (en-US) 객체입니다.

원하는 코드는 뭐든 워커 스레드에서 실행할 수 있으나 몇 가지 예외가 존재합니다. 예를 들어 워커에서 DOM을 직접 조작할 수 없고, `window`의 일부 메서드와 속성은 사용할 수 없습니다. 그러나 WebSocket과 IndexedDB를 포함한 많은 수의 항목은 사용 가능합니다. 워커에서 사용할 수 있는 함수와 클래스 (en-US)에서 더 자세히 알아보세요.

워커와 메인 스레드 간의 데이터 교환은 메시지 시스템을 사용합니다. 양측 모두 postMessage() 메서드를 사용해 전송하고, `onmessage` 이벤트 처리기(메시지는 `Message`의 `data` 속성에 들어있습니다)를 사용해 수신합니다. 전송하는 데이터는 복사하며 공유하지 않습니다.

워커 역시 새로운 워커를 생성할 수 있습니다. 단, 생성하려는 워커가 부모 페이지와 동일한 출처에 호스팅 되어있어야 합니다. 추가로, 워커는 `XMLHttpRequest`를 사용해 네트워크 입출력을 할 수 있지만 `responseXML`과 `channel` 특성은 항상 `null`을 반환합니다.

전용 워커 외에도 다음과 같은 다른 유형의 워커도 존재합니다.

* 공유 워커는 워커와 도메인이 같다면 창, IFrame, 등등 여러 곳에서 작동 중인 다수의 스크립트에서 사용 가능한 워커입니다. 전용 워커보다 복잡한 편으로, 스크립트간 통신은 활성 포트를 통해 이뤄져야 합니다. `SharedWorker` 문서에서 더 자세히 알아보세요.
* 서비스 워커는 웹 응용 프로그램, 브라우저, 그리고 (사용 가능한 경우) 네트워크 사이의 프록시 서버 역할을 합니다. 서비스 워커의 개발 의도는 여러가지가 있지만, 그 중에서도 효과적인 오프라인 경험을 생성하고, 네트워크 요청을 가로채서 네트워크 사용 가능 여부에 따라 적절한 행동을 취하고, 서버의 자산을 업데이트할 수 있습니다. 또한 푸시 알림과 백그라운드 동기화 API로의 접근도 제공합니다.
* 오디오 워커는 웹 워커 맥락 내에서 스크립트를 통한 직접적인 오디오 처리 능력을 제공합니다.
웹 워커 인터페이스
----------

`AbstractWorker` (en-US)

모든 종류의 워커(`Worker`, `SharedWorker` 등)에 공통적인 속성과 메서드를 추상화합니다.

`Worker`

실행 중인 워커 스레드를 나타냅니다. 현재 작동 중인 워커로 메시지를 전송할 때 사용할 수 있습니다.

`WorkerLocation` (en-US)

`Worker`가 실행하는 스크립트의 절대 위치를 정의합니다.

`SharedWorker`

다수의 창, `<iframe>` (en-US), 혹은 다른 워커 등 브라우징 맥락 여러 개에서 접근할 수 있는 특정 종류의 워커를 나타냅니다.

`WorkerGlobalScope` (en-US)

모든 워커의 통용 범위를 나타냅니다. 통용 범위는 일반적인 웹 콘텐츠의 `Window`와 같은 역할을 합니다. 각각의 워커 유형별로 이 인터페이스를 상속한 후 보다 세부적인 기능을 추가한 인터페이스를 전역 범위 객체로 사용합니다.

`DedicatedWorkerGlobalScope` (en-US)

`WorkerGlobalScope` (en-US)를 상속해서 몇 가지 전용 기능을 추가한 전용 워커의 범위를 나타냅니다.

`SharedWorkerGlobalScope` (en-US)

`WorkerGlobalScope` (en-US)를 상속해서 몇 가지 전용 기능을 추가한 공유 워커의 범위를 나타냅니다.

`WorkerNavigator` (en-US)

사용자 에이전트(클라이언트)의 신분과 상태를 나타냅니다.

예제
--

워커의 기본 사용법을 보이는 간단한 데모를 준비해놨습니다.

* 기본적인 전용 워커 예제 (실행)
* 기본적인 공유 워커 예제 (실행)

웹 워커 사용하기 (en-US)에서 데모의 동작법을 자세히 알아볼 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # workers |

같이 보기
-----

* 웹 워커 사용하기 (en-US)
* `Worker` 인터페이스
* `SharedWorker` 인터페이스
* Service Worker API
* 워커에서 사용할 수 있는 함수와 클래스 (en-US)


URL - Web API

URL
===

**`URL`** 인터페이스는 URL을 분석, 생성, 정규화, 인코딩 할 때 사용하며, URL의 각 구성요소를 쉽게 읽고 쓸 수 있는 속성을 제공합니다. `URL` 객체 생성은 생성자에 전체 URL 문자열, 또는 상대 URL과 기준 URL을 생성자에 전달해 진행합니다. 이렇게 생성한 URL 객체를 사용해 URL을 쉽게 바꾸거나 읽을 수 있습니다.

브라우저가 아직 `URL()` 생성자를 지원하지 않을 땐 `Window` 인터페이스의 `Window.URL` 속성으로 `URL` 객체에 접근할 수 있습니다. 개발에 사용하기 전, 프로젝트의 지원 대상 브라우저를 확인하고, 이런 절차를 추가해야 하는지 결정하세요.

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

생성자
---

`new URL()`

주어진 절대 URL, 또는 상대 URL과 기준 URL 문자열을 사용해 생성한 `URL` 객체를 생성하고 반환합니다.

속성
--

`hash`

`'#'`과 URL의 프래그먼트 식별자를 담은 `USVString`입니다.

`host`

URL의 도메인(호스트 이름), `':'`, 포트를 담은 `USVString`입니다.

`hostname`

URL의 도메인을 담은 `USVString`입니다.

`href`

전체 URL을 반환하는 문자열화 속성입니다.

`origin` 읽기 전용

URL의 출처, 즉 스킴, 도메인, 포트를 담은 `USVString`입니다.

`password`

도메인 이름 이전에 지정된 비밀번호를 담은 `USVString`입니다.

`pathname`

`'/'`와 URL의 경로를 담은 `USVString`입니다.

`port`

URL의 포트 번호를 담은 `USVString`입니다.

`protocol`

URL의 프로토콜 스킴을 담은 `USVString`입니다. 마지막 `':'`을 포함합니다.

`search`

URL의 매개변수 문자열을 나타내는 `USVString`입니다. 어떤 매개변수라도 존재하는 경우 `'?'` 문자로 시작해, 모든 매개변수를 포함합니다.

`searchParams` 읽기 전용

`search` 속성의 매개변수 각각에 접근할 수 있는 `URLSearchParams` 객체입니다.

`username`

도메인 이름 이전에 지정된 사용자 이름을 담은 `USVString`입니다.

메서드
---

`toString()`

전체 URL을 담은 `USVString`을 반환합니다. `URL.href`와 동일하나, `toString()`으로는 URL을 편집할 수 없습니다.

`toJSON()`

전체 URL을 담은 `USVString`을 반환합니다. `URL.href`와 동일한 문자열을 반환합니다.

정적 메서드
------

`createObjectURL()`

고유한 블롭 URL, 즉 `blob:` 을 스킴으로 하고, 브라우저 내의 객체를 가리키는 고유한 불투명 문자열을 그 뒤에 붙인 `DOMString`을 반환합니다.

`revokeObjectURL()`

이전에 `URL.createObjectURL()`로 생성한 객체 URL을 취소합니다.

사용 일람
-----

생성자는 `url` 매개변수를 받으며, URL이 상대 URL인 경우 선택적으로 `base` 매개변수를 지정해 기준으로 사용할 수 있습니다.

```js
const url = new URL("../cats", "http://www.example.com/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"
```

URL 속성을 사용해 URL을 만들 수 있습니다.

```js
url.hash = "tabby";
console.log(url.href); // "http://www.example.com/cats#tabby"
```

URL은 RFC 3986의 규칙을 따라 인코딩 됩니다.

```js
url.pathname = "démonstration.html";
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"
```

`URLSearchParams` 인터페이스를 사용해 URL 쿼리 문자열을 생성하거나 조작할 수 있습니다.

현재 URL의 검색 매개변수를 가져오려면 다음과 같은 코드를 사용하세요.

```js
// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"
```

`toString()` 메서드는 단순히 `href` 속성의 값을 반환하는 것이므로, URL 정규화와 인코딩에 생성자를 직접 사용할 수 있습니다.

```js
const response = await fetch(
  new URL("http://www.example.com/démonstration.html"),
);
```

명세
--

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

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

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

같이 보기
-----

* URL API (en-US)
* `URLSearchParams`.