mdn · hochan222 · Jul 31, 2023 · Jul 29, 2023 · Jul 30, 2023
@@ -2,6 +2,7 @@
 title: AbortController
 slug: Web/API/AbortController
 ---
+
 {{APIRef("DOM")}}{{SeeCompatTable}}
 
 **`AbortController`** 인터페이스는 하나 이상의 웹 요청을 취소할 수 있게 해준다.

@@ -2,6 +2,7 @@
 title: AbortController.signal
 slug: Web/API/AbortController/signal
 ---
+
 {{APIRef("DOM")}}{{SeeCompatTable}}
 
 {{domxref("AbortController")}} 인터페이스의 **`signal`** 읽기 전용 프로퍼티는 DOM 요청과 통신하거나 취소하는데 사용하는 {{domxref("AbortSignal")}} 객체 인터페이스를 반환한다.

@@ -2,6 +2,7 @@
 title: AbortSignal.aborted
 slug: Web/API/AbortSignal/aborted
 ---
+
 {{APIRef("DOM")}}{{SeeCompatTable}}
 
 **`aborted`** 읽기 전용 프로퍼티는 신호가 통신하는 DOM 요청이 취소되었는지(`true`) 그렇지 않은지(`false`)를 나타내는 {{domxref("Boolean")}}을 반환한다.
@@ -26,7 +27,9 @@ var signal = controller.signal;
 
 // ...
 
-signal.aborted ? console.log('Request has been aborted') : console.log('Request not aborted');
+signal.aborted
+  ? console.log("Request has been aborted")
+  : console.log("Request not aborted");
 ```
 
 ## 명세

@@ -10,7 +10,7 @@ slug: Web/API/AbstractRange/collapsed
 ## 문법
 
 ```js
-    var isCollpased = range.collapsed
+var isCollpased = range.collapsed;
 ```
 
 ### Value

@@ -49,7 +49,7 @@ let endElem = startElem.querySelector("span");
 let range = document.createRange();
 
 range.setStart(startElem, 0);
-range.setEnd(endElem, endElem.childNodes[0].length/2);
+range.setEnd(endElem, endElem.childNodes[0].length / 2);
 let contents = range.cloneContents();
 
 document.body.appendChild(contents);
@@ -72,13 +72,15 @@ To illustrate this, consider the HTML below:
 ```html
 <div class="container">
   <div class="header">
-    <img src="" class="sitelogo">
+    <img src="" class="sitelogo" />
     <h1>The Ultimate Website</h1>
   </div>
   <article>
     <section class="entry" id="entry1">
       <h2>Section 1: An interesting thing...</h2>
-      <p>A <em>very</em> interesting thing happened on the way to the forum...</p>
+      <p>
+        A <em>very</em> interesting thing happened on the way to the forum...
+      </p>
       <aside class="callout">
         <h2>Aside</h2>
         <p>An interesting aside to share with you...</p>
@@ -149,7 +151,7 @@ let paraTextNode = paraNode.childNodes[1];
 
 let range = document.createRange();
 range.setStart(paraTextNode, 6);
-range.setEnd(paraTextNode, paraTextNode.length-1);
+range.setEnd(paraTextNode, paraTextNode.length - 1);
 
 let fragment = range.cloneContents();
 document.body.appendChild(fragment);

@@ -2,6 +2,7 @@
 title: AnalyserNode.fftSize
 slug: Web/API/AnalyserNode/fftSize
 ---
+
 {{APIRef("Web Audio API")}}
 
 {{domxref("AnalyserNode")}} 인터페이스의 **`fftSize`** 속성은 unsigned long 값이고 주파수 영역 데이터를 얻기 위해 [고속 푸리에 변환](https://en.wikipedia.org/wiki/Fast_Fourier_transform)(FFT)을 수행할 때 사용될 샘플에서의 window 사이즈를 나타냅니다.

@@ -47,7 +47,7 @@ analyser.getFloatFrequencyData(myDataArray);
 보다 완전한 응용 예제/정보를 보려면 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) 데모를 확인하세요. ([app.js의 108-193번째 줄](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)에서 관련 코드 확인)
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <body>
   <script>
     const audioCtx = new AudioContext();
@@ -103,7 +103,7 @@ analyser.getFloatFrequencyData(myDataArray);
           posX,
           canvas.height - barHeight / 2,
           barWidth,
-          barHeight / 2
+          barHeight / 2,
         );
         posX += barWidth + 1;
       }

@@ -2,6 +2,7 @@
 title: AnalyserNode.getFloatTimeDomainData()
 slug: Web/API/AnalyserNode/getFloatTimeDomainData
 ---
+
 {{ APIRef("Web Audio API") }}
 
 {{ domxref("AnalyserNode") }} 인터페이스의 **`getFloatTimeDomainData()`** 메서드는 전달된 {{domxref("Float32Array")}} 배열 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.

@@ -66,7 +66,7 @@ _부모인 {{domxref("AudioNode")}}로부터 메서드를 상속받습니다_.
 다음의 예제는 `AnalyserNode`를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) 데모를 확인하세요 (관련된 코드를 보려면 [app.js 라인 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)를 참고하세요).
 
 ```js
-var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 
 // ...
 
@@ -87,7 +87,6 @@ var canvasCtx = canvas.getContext("2d");
 // 현재 오디오 소스의 오실로스코프를 그립니다
 
 function draw() {
-
   requestAnimationFrame(draw);
 
   analyser.getByteTimeDomainData(dataArray);
@@ -100,13 +99,12 @@ function draw() {
 
   canvasCtx.beginPath();
 
-  var sliceWidth = canvas.width * 1.0 / bufferLength;
+  var sliceWidth = (canvas.width * 1.0) / bufferLength;
   var x = 0;
 
   for (var i = 0; i < bufferLength; i++) {
-
     var v = dataArray[i] / 128.0;
-    var y = v * canvas.height / 2;
+    var y = (v * canvas.height) / 2;
 
     if (i === 0) {
       canvasCtx.moveTo(x, y);

@@ -2,6 +2,7 @@
 title: AnalyserNode.maxDecibels
 slug: Web/API/AnalyserNode/maxDecibels
 ---
+
 {{APIRef("Web Audio API")}}
 
 {{domxref("AnalyserNode")}} 인터페이스의 **`maxDecibels`** 속성은 unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최대 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 `getByteFrequencyData()`를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.

@@ -2,6 +2,7 @@
 title: ANGLE_instanced_arrays
 slug: Web/API/ANGLE_instanced_arrays
 ---
+
 {{APIRef ( "WebGL")}}
 
 이 **`ANGLE_instanced_arrays`**확장은 [WebGL API의](/ko/docs/Web/API/WebGL_API) 일부이며 동일한 객체 또는 동일한 객체 그룹을 같은 정점 데이터, 기본 개수 및 유형을 공유하는 경우 여러 번 그릴 수 있습니다.
@@ -33,7 +34,7 @@ WebGL 확장은 {{domxref ( "WebGLRenderingContext.getExtension()")}} 메서드
 확장 기능 사용 :
 
 ```js
-var ext = gl.getExtension ( 'ANGLE_instanced_arrays');
+var ext = gl.getExtension("ANGLE_instanced_arrays");
 ```
 
 ## 명세서

@@ -8,7 +8,7 @@ slug: Web/API/AnimationTimeline/currentTime
 Web Animations API의 AnimationTimeline 인터페이스의 currentTime 읽기 전용 속성은 타임 라인의 현재 시간을 밀리 초 단위로 반환하거나 타임 라인이 비활성 상태이면 null을 반환합니다.출력 값이 생성되는 시간 세그먼트를 정의합니다. 이러한 값은 대상 속성에 애니메이션 효과를 적용하는 데 사용됩니다.
 
 ```js
-    var currentTime = AnimationTimeline.currentTime;
+var currentTime = AnimationTimeline.currentTime;
 ```
 
 ### Value

@@ -12,7 +12,7 @@ slug: Web/API/atob
 ## 구문
 
 ```js
-atob(encodedData)
+atob(encodedData);
 ```
 
 ### 매개변수
@@ -32,7 +32,7 @@ atob(encodedData)
 ## 예제
 
 ```js
-const encodedData = btoa('Hello, world'); // 문자열 인코딩
+const encodedData = btoa("Hello, world"); // 문자열 인코딩
 const decodedData = atob(encodedData); // 문자열 디코딩
 ```
 

@@ -13,11 +13,11 @@ slug: Web/API/Attr
 
 이름은 네임스페이스 접두사를 무시하면 로컬로, 네임스페이스 내의 속성을 포함하면(콜론(`:`)으로 로컬 이름과 구분된 경우도) 한정(_qualified_)된 것으로 간주됩니다. 네임스페이스 외부의 속성, 접두사가 정의되지 않은 네임스페이스 내부의 속성, 접두사가 있는 네임스페이스 내부의 속성과 같은 다음 세 가지 경우로 나눌 수 있습니다.
 
-|    속성    | 네임스페이스 이름   | 네임스페이스 접두사   | 속성 로컬 이름          | 한정된 속성 이름             |
-| --------- | -------------- | ---------------- | -------------------- | ------------------------ |
-| `myAttr`  | _none_         | _none_           | `myAttr`             | `myAttr`                 |
-| `myAttr`  | `mynamespace`  | _none_           | `myAttr`             | `myAttr`                 |
-| `myAttr`  | `mynamespace`  | `myns`           | `myAttr`             | `myns:myAttr`            |
+| 속성     | 네임스페이스 이름 | 네임스페이스 접두사 | 속성 로컬 이름 | 한정된 속성 이름 |
+| -------- | ----------------- | ------------------- | -------------- | ---------------- |
+| `myAttr` | _none_            | _none_              | `myAttr`       | `myAttr`         |
+| `myAttr` | `mynamespace`     | _none_              | `myAttr`       | `myAttr`         |
+| `myAttr` | `mynamespace`     | `myns`              | `myAttr`       | `myns:myAttr`    |
 
 > **참고:** 이 인터페이스는 SVG, HTML 그리고 MathML 요소의 트리 표현에 존재하는 속성만 나타냅니다.
 >

@@ -42,7 +42,11 @@ slug: Web/API/AudioBuffer
 var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 
 // AudioContext의 샘플 레이트를 가지는 빈 3초짜리 스테레오 버퍼를 생성합니다.
-var myArrayBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * 3, audioCtx.sampleRate);
+var myArrayBuffer = audioCtx.createBuffer(
+  2,
+  audioCtx.sampleRate * 3,
+  audioCtx.sampleRate,
+);
 
 // 버퍼를 백색소음으로 채웁니다
 // 단순히 -1.0과 1.0사이의 무작위 값

@@ -2,6 +2,7 @@
 title: AudioBufferSourceNode
 slug: Web/API/AudioBufferSourceNode
 ---
+
 {{APIRef("Web Audio API")}}
 
 **`AudioBufferSourceNode`** 의 오디오 소스는 in-memory 의 {{domxref("AudioNode")}} 상에 저장된 데이터로 구성되어있다. 이는 오디오 소스 그 자체처럼 동작을 한다.
@@ -12,9 +13,9 @@ slug: Web/API/AudioBufferSourceNode
 
 ![The AudioBufferSourceNode takes the content of an AudioBuffer and m](webaudioaudiobuffersourcenode.png)
 
-| Number of inputs  | `0`                                                            |
-| ----------------- | -------------------------------------------------------------- |
-| Number of outputs | `1`                                                            |
+| Number of inputs  | `0`                                                  |
+| ----------------- | ---------------------------------------------------- |
+| Number of outputs | `1`                                                  |
 | Channel count     | defined by the associated {{domxref("AudioBuffer")}} |
 
 ## Properties
@@ -54,9 +55,9 @@ _{{domxref("AudioNode")}}_ 를 부모로 가지는 매서드.
 
 ```js
 var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-var button = document.querySelector('button');
-var pre = document.querySelector('pre');
-var myScript = document.querySelector('script');
+var button = document.querySelector("button");
+var pre = document.querySelector("pre");
+var myScript = document.querySelector("script");
 
 pre.innerHTML = myScript.innerHTML;
 
@@ -68,17 +69,17 @@ var frameCount = audioCtx.sampleRate * 2.0;
 
 var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
 
-button.onclick = function() {
+button.onclick = function () {
   // Fill the buffer with white noise;
   //just random values between -1.0 and 1.0
   for (var channel = 0; channel < channels; channel++) {
-   // This gives us the actual ArrayBuffer that contains the data
-   var nowBuffering = myArrayBuffer.getChannelData(channel);
-   for (var i = 0; i < frameCount; i++) {
-     // Math.random() is in [0; 1.0]
-     // audio needs to be in [-1.0; 1.0]
-     nowBuffering[i] = Math.random() * 2 - 1;
-   }
+    // This gives us the actual ArrayBuffer that contains the data
+    var nowBuffering = myArrayBuffer.getChannelData(channel);
+    for (var i = 0; i < frameCount; i++) {
+      // Math.random() is in [0; 1.0]
+      // audio needs to be in [-1.0; 1.0]
+      nowBuffering[i] = Math.random() * 2 - 1;
+    }
   }
 
   // Get an AudioBufferSourceNode.
@@ -91,7 +92,7 @@ button.onclick = function() {
   source.connect(audioCtx.destination);
   // start the source playing
   source.start();
-}
+};
 ```
 
 > **참고:** For a `decodeAudioData` example, see the {{domxref("AudioContext.decodeAudioData")}} page.

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

@@ -2,6 +2,7 @@
 title: AudioDestinationNode
 slug: Web/API/AudioDestinationNode
 ---
+
 {{APIRef()}}
 
 `AudioDestinationNode` 은 주어진 컨택스트의 음원의 종착점을 나타냅니다. 보통 스피커를 가리킵니다. 이는 또한 `OfflineAudioContext` 를 사용해 데이터가 녹음되는 노드가 되기도 합니다.

@@ -2,6 +2,7 @@
 title: AudioNode.channelCount
 slug: Web/API/AudioNode/channelCount
 ---
+
 {{ APIRef("Web Audio API") }}
 
 {{ domxref("AudioNode") }} 인터페이스의 **`channelCount`** 속성은 노드의 모든 입력에 대해 연결을 [업믹싱하거나 다운믹싱](/ko/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#up-mixing_and_down-mixing)할 때 얼마나 많은 채널이 사용될 지를 결정하기 위해 사용되는 integer를 나타냅니다.

@@ -63,7 +63,7 @@ slug: Web/API/AudioNode/channelCountMode
 
 ```js
 var oscillator = audioCtx.createOscillator();
-oscillator.channelCountMode = 'explicit';
+oscillator.channelCountMode = "explicit";
 ```
 
 ### 값
@@ -83,7 +83,7 @@ var gainNode = audioCtx.createGain();
 oscillator.connect(gainNode);
 gainNode.connect(audioCtx.destination);
 
-oscillator.channelCountMode = 'explicit';
+oscillator.channelCountMode = "explicit";
 ```
 
 ## 명세서

@@ -2,6 +2,7 @@
 title: AudioNode.channelInterpretation
 slug: Web/API/AudioNode/channelInterpretation
 ---
+
 {{ APIRef("Web Audio API") }}
 
 {{domxref("AudioNode")}} 인터페이스의 **`channelInterpretation`** 프로퍼티는 입력/출력 채널의 수가 다를 때 입력 채널이 출력 채널에 매핑되는 방법을 기술하는 열거형 값을 나타냅니다. 예를 들어, 이 설정은 모노 입력이 어떻게 스테레오 또는 5.1 채널 출력으로 업믹스될 것인지를 정의하거나, 어떻게 쿼드 채널 입력이 스테레오 또는 모노 출력으로 다운믹스될 것인지를 정의합니다.
@@ -12,7 +13,7 @@ slug: Web/API/AudioNode/channelInterpretation
 
 ```js
 var oscillator = audioCtx.createOscillator();
-oscillator.channelInterpretation = 'discrete';
+oscillator.channelInterpretation = "discrete";
 ```
 
 ### 값
@@ -39,7 +40,7 @@ var gainNode = audioCtx.createGain();
 oscillator.connect(gainNode);
 gainNode.connect(audioCtx.destination);
 
-oscillator.channelInterpretation = 'discrete';
+oscillator.channelInterpretation = "discrete";
 ```
 
 ## 명세서

@@ -2,6 +2,7 @@
 title: AudioNode.connect()
 slug: Web/API/AudioNode/connect
 ---
+
 {{ APIRef("Web Audio API") }}
 
 {{ domxref("AudioNode") }} 인터페이스의 `connect()` 메서드는 노드의 출력 중 하나를 목표에 연결할 수 있게 하는데, 이 목표는 다른 `AudioNode` 일 수도 있고 (이렇게 함으로써 사운드 데이터를 명시된 노드로 향하게 합니다) {{domxref("AudioParam")}} 일 수도 있습니다 (이 경우 노드의 출력 데이터가 자동적으로 시간에 따라 그 파라미터의 값을 변화시키기 위해 사용됩니다).

@@ -2,6 +2,7 @@
 title: AudioNode.disconnect()
 slug: Web/API/AudioNode/disconnect
 ---
+
 {{ APIRef("Web Audio API") }}
 
 {{ domxref("AudioNode") }} 인터페이스의 **`disconnect()`** 메서드는 하나 이상의 노드를 메서드가 호출된 노드로부터 연결 해제할 수 있게 합니다.

@@ -2,6 +2,7 @@
 title: AudioNode
 slug: Web/API/AudioNode
 ---
+
 {{APIRef("Web Audio API")}}
 
 **`AudioNode`** 인터페이스는 오디오 프로세싱 모듈을 나타내기 위한 포괄적인 인터페이스입니다.

@@ -2,6 +2,7 @@
 title: AudioNode.numberOfInputs
 slug: Web/API/AudioNode/numberOfInputs
 ---
+
 {{APIRef("Web Audio API")}}
 
 {{domxref("AudioNode")}} 인터페이스의 `numberOfInputs` 속성은 해당 노드에 공급되는 입력의 수를 반환합니다. 소스 노드는 `numberOfInputs` 속성의 값이 0인 노드로 정의됩니다.