diff options
Diffstat (limited to 'files/ko')
195 files changed, 8560 insertions, 4186 deletions
diff --git a/files/ko/learn/javascript/building_blocks/build_your_own_function/index.html b/files/ko/learn/javascript/building_blocks/build_your_own_function/index.html index 284e16ea68..4b95292788 100644 --- a/files/ko/learn/javascript/building_blocks/build_your_own_function/index.html +++ b/files/ko/learn/javascript/building_blocks/build_your_own_function/index.html @@ -1,5 +1,5 @@ --- -title: 자신만의 함수 만들기 +title: 함수 만들기 slug: Learn/JavaScript/Building_blocks/Build_your_own_function translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function --- @@ -13,7 +13,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function <tbody> <tr> <th scope="row">필요한 사전 지식:</th> - <td>기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해, <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a>.</td> + <td>기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해, <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a>.</td> </tr> <tr> <th scope="row">목표:</th> @@ -22,7 +22,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function </tbody> </table> -<h2 id="Active_learning_Lets_build_a_function">Active learning: 함수를 만들어 봅시다</h2> +<h2 id="Active_learning_Lets_build_a_function">직접 해보기: 함수를 만들어 봅시다</h2> <p>우리가 만들 사용자 정의 함수는 <code>displayMessage()</code>라는 이름입니다. 이 함수는 웹 페이지에 사용자 정의 메시지 박스를 표시하고 브라우저의 내장 <a href="/ko/docs/Web/API/Window/alert">alert()</a> 함수를 대체하는 역할을 할 것입니다. 우리는 이것을 전에 보긴 했지만, 기억을 되살려 봅시다. 원하는 어떤 페이지에서든지, 다음을 브라우저의 JavaScript 콘솔에 입력해 보세요:</p> @@ -33,7 +33,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function <p><code>alert</code> 함수는 제한적입니다: 메시지를 바꿀 수는 있지만, 색상, 아이콘 등 그 밖에 다른 것에는 쉽게 변화를 줄 수 없습니다. 우리는 더 재미있는 것을 만들 것입니다.</p> <div class="note"> -<p><strong>Note</strong>: 이 예제는 모든 현대적인 브라우저에서 잘 동작할 것이지만, 약간 오래된 브라우저에서는 스타일이 조금 이상하게 적용될지도 모릅니다. Firefox, Opera, 또는 Chrome같은 브라우저에서 이 연습을 진행하기를 추천합니다.</p> +<p><strong>참고</strong>: 이 예제는 모든 현대적인 브라우저에서 잘 동작할 것이지만, 약간 오래된 브라우저에서는 스타일이 조금 이상하게 적용될지도 모릅니다. Firefox, Opera, 또는 Chrome같은 브라우저에서 이 연습을 진행하기를 추천합니다.</p> </div> <h2 id="The_basic_function">기본적인 함수</h2> @@ -41,7 +41,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function <p>기본적인 함수를 만들면서 시작해 봅시다.</p> <div class="note"> -<p><strong>Note</strong>: 함수에 이름을 붙일 때 <a href="/ko/docs/Learn/JavaScript/First_steps/Variables#an_aside_on_variable_naming_rules">변수 명명 규칙</a>과 같은 규칙을 따라야 합니다. 함수와 변수를 떼어놓고 이야기할 수 있으므로, 이렇게 하는 것은 괜찮습니다 — 함수명은 뒤에 괄호가 나타나지만 변수는 그렇지 않습니다.</p> +<p><strong>참고</strong>: 함수에 이름을 붙일 때 <a href="/ko/docs/Learn/JavaScript/First_steps/Variables#an_aside_on_variable_naming_rules">변수 명명 규칙</a>과 같은 규칙을 따라야 합니다. 함수와 변수를 떼어놓고 이야기할 수 있으므로, 이렇게 하는 것은 괜찮습니다 — 함수명은 뒤에 괄호가 나타나지만 변수는 그렇지 않습니다.</p> </div> <ol> @@ -186,7 +186,7 @@ panel.appendChild(closeBtn);</pre> <ol> <li>우선, 이 예제를 위해 필요한 아이콘들을 GitHub에서 다운로드하세요 (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">경고</a> 그리고 <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">채팅</a>). 이것들을 HTML파일과 같은 위치에 있는 <code>icons</code> 라는 새로운 폴더에 저장하세요. - <div class="note"><strong>Note</strong>: 경고와 채팅 아이콘은 원래 <a href="https://www.iconfinder.com/">iconfinder.com</a>에서 찾아졌고, <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>가 디자인했습니다 — 감사합니다! (실제 아이콘 페이지는 이전에 이동되거나 삭제되었습니다.)</div> + <div class="note"><strong>참고</strong>: 경고와 채팅 아이콘은 원래 <a href="https://www.iconfinder.com/">iconfinder.com</a>에서 찾아졌고, <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>가 디자인했습니다 — 감사합니다! (실제 아이콘 페이지는 이전에 이동되거나 삭제되었습니다.)</div> </li> <li>다음으로, HTML 파일 내부에서 CSS를 찾으세요. 우리는 아이콘이 들어갈 자리를 만들기 위해 약간의 변경을 가할 것입니다. 우선, <code>.msgBox</code> 폭을 <pre class="brush: css notranslate">width: 200px;</pre> @@ -222,7 +222,7 @@ displayMessage('Brian: Hi there, how are you today?','chat');</pre> </ol> <div class="note"> -<p><strong>Note</strong>: 만약 이 예제를 작업하는 데 어려움이 있다면, 자유롭게 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">GitHub에 있는 완성된 버전</a>과 비교해 보거나 (<a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">실제로 작동하는 모습</a>도 보세요), 우리에게 도움을 요청해 보세요.</p> +<p><strong>참고</strong>: 만약 이 예제를 작업하는 데 어려움이 있다면, 자유롭게 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">GitHub에 있는 완성된 버전</a>과 비교해 보거나 (<a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">실제로 작동하는 모습</a>도 보세요), 우리에게 도움을 요청해 보세요.</p> </div> <h2 id="Test_your_skills!">실력을 평가해 보세요!</h2> @@ -238,13 +238,13 @@ displayMessage('Brian: Hi there, how are you today?','chat');</pre> <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">이 모듈에서는</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단 내리기 — 조건문</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a></li> - <li><strong>자신만의 함수 만들기</strong></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></li> + <li><strong>함수 만들기</strong></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li> diff --git a/files/ko/learn/javascript/building_blocks/conditionals/index.html b/files/ko/learn/javascript/building_blocks/conditionals/index.html index d42c0232eb..4c924f8047 100644 --- a/files/ko/learn/javascript/building_blocks/conditionals/index.html +++ b/files/ko/learn/javascript/building_blocks/conditionals/index.html @@ -1,5 +1,5 @@ --- -title: 판단을 만드세요 — 조건문 +title: 판단 내리기 — 조건문 slug: Learn/JavaScript/Building_blocks/conditionals translation_of: Learn/JavaScript/Building_blocks/conditionals original_slug: Learn/JavaScript/Building_blocks/조건문 @@ -13,9 +13,9 @@ original_slug: Learn/JavaScript/Building_blocks/조건문 <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">선행 조건:</th> + <th scope="row">필요한 사전 지식:</th> <td> - 기본적인 컴퓨터 활용 능력, HTML, CSS, <a href="/ko/docs/Learn/JavaScript/First_steps">Javascript 첫 걸음</a> + 기본적인 컴퓨터 활용 능력, HTML, CSS, <a href="/ko/docs/Learn/JavaScript/First_steps">Javascript 첫걸음</a> </td> </tr> <tr> @@ -27,17 +27,17 @@ original_slug: Learn/JavaScript/Building_blocks/조건문 </tbody> </table> -<h2 id="You_can_have_it_on_one_condition..!">당신은 한 조건보다 우위에 있을 수 있습니다..!</h2> +<h2 id="You_can_have_it_on_one_condition..!">여러분은 한 조건보다 우위에 있을 수 있습니다..!</h2> <p>사람(과 동물)은 항상 그들의 삶에 영향을 미치는 결정을, 작은 것(과자를 하나 먹을까? 두개 먹을까?)부터 큰 것(고향에 머물면서 아버지의 농장에서 일해야 할까? 아니면 천체물리학을 공부하러 미국으로 유학을 갈까?)까지 내립니다.</p> <p>조건문은 우리가, 반드시 내려져야 하는 선택에서부터 (예를 들자면, "쿠키 한 개 또는 두 개"), 그 선택들의 결과까지 (아마도 "쿠키 한 개를 먹는다" 의 결과는 "여전히 배가 고프다" 일지도 모르고, "쿠키 두 개를 먹는다" 의 결과는 "배부르다, 그러나 엄마가 쿠키를 다 먹었다고 나를 야단칠 것이다" 일지도 모릅니다), 그러한 의사 결정을 자바스크립트에서 표현할 수 있게 합니다.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="cookie-choice-small.png" style="display: block; margin: 0 auto;"></p> <h2 id="if...else_statements">if ... else 문</h2> -<p>당신이 자바스크립트에서 쓸 단연코 가장 일반적인 형태의 조건문을 살펴봅시다 — 변변찮은 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else"> 문</a>입니다.</p> +<p>여러분이 자바스크립트에서 쓸 단연코 가장 일반적인 형태의 조건문을 살펴봅시다 — 변변찮은 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else"> 문</a>입니다.</p> <h3 id="Basic_if_..._else_syntax">기본 if ... else 문법</h3> @@ -53,7 +53,7 @@ original_slug: Learn/JavaScript/Building_blocks/조건문 <ol> <li>키워드 <code>if</code> 뒤에 괄호가 옵니다.</li> - <li>시험할 조건은 괄호 안에 위치합니다 (전형적으로 "이 값은 다른 값보다 큰가?", 또는 "이 값은 존재하는가?"). 이 조건은 마지막 모듈에서 논의했던 비교 연산자(<a href="/ko/Learn/JavaScript/First_steps/Math#Comparison_operators">comparison operators</a>)를 사용할 것이고 <code>true</code>나 <code>false</code>를 리턴합니다.</li> + <li>시험할 조건은 괄호 안에 위치합니다 (전형적으로 "이 값은 다른 값보다 큰가?", 또는 "이 값은 존재하는가?"). 이 조건은 마지막 모듈에서 논의했던 비교 연산자(<a href="/ko/docs/Learn/JavaScript/First_steps/Math#comparison_operators">comparison operators</a>)를 사용할 것이고 <code>true</code>나 <code>false</code>를 리턴합니다.</li> <li>내부의 중괄호 안에 코드가 있습니다. — 이것은 우리가 좋아하는 어떤 코드든 될 수 있고, 오직 조건이 <code>true</code>를 반환하는 경우에만 실행됩니다.</li> <li>키워드 <code>else</code>.</li> <li>또 다른 중괄호 안에 더 많은 코드가 있습니다. — 이것은 우리가 좋아하는 어떤 코드든 될 수 있고, 오직 조건이 <code>true</code>가 아닌 경우에만 실행됩니다. — 또는 다른 말로 하자면, 조건이 <code>false</code>인 경우에만 실행됩니다.</li> @@ -69,9 +69,9 @@ original_slug: Learn/JavaScript/Building_blocks/조건문 실행할 다른 코드</pre> -<p>하지만, 여기서 조심해야 할 점 — 위의 경우, 코드의 두 번째 블록은 조건문에 의해서 제어되지 않아서, 조건이 <code>true</code>나 <code>false</code>를 리턴하는 것에 관계없이 <strong>항상</strong> 동작합니다. 이것이 반드시 나쁜 것은 아니지만, 당신이 원하는 것이 아닐 지도 모릅니다. — 종종 당신은 둘 다가 아니라, 코드의 한 블럭 또는 다른 블럭을 실행하기를 원합니다.</p> +<p>하지만, 여기서 조심해야 할 점 — 위의 경우, 코드의 두 번째 블록은 조건문에 의해서 제어되지 않아서, 조건이 <code>true</code>나 <code>false</code>를 리턴하는 것에 관계없이 <strong>항상</strong> 동작합니다. 이것이 반드시 나쁜 것은 아니지만, 여러분이 원하는 것이 아닐 지도 모릅니다. — 종종 여러분은 둘 다가 아니라, 코드의 한 블럭 또는 다른 블럭을 실행하기를 원합니다.</p> -<p>마지막으로, 당신은 때때로 다음과 같이 짧은 스타일로 중괄호 없이 쓰여진 <code>if...else</code>를 보았을 지도 모릅니다:</p> +<p>마지막으로, 여러분은 때때로 다음과 같이 짧은 스타일로 중괄호 없이 쓰여진 <code>if...else</code>를 보았을 지도 모릅니다:</p> <pre class="notranslate">if (조건) 만약 조건(condition)이 참일 경우 실행할 코드 else 대신 실행할 다른 코드</pre> @@ -94,7 +94,7 @@ if (shoppingDone === true) { <p>위 코드는 항상 <code>false</code>를 리턴하는 <code>shoppingDone</code>변수를 결과로 낳는데, 이는 우리의 불쌍한 아이에게 실망을 안겨주겠죠. 아이가 부모님과 함께 쇼핑을 간다면 부모님이 <code>shoppingDone</code>변수를 <code>true</code>로 설정하는 메커니즘을 제공하는 것은 우리에게 달렸습니다.</p> <div class="note"> -<p><strong>Note</strong>: GitHub에서 예시를 더 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">이 예제의 완성 버전 on GitHub</a> (also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">running live</a>.)</p> +<p><strong>참고</strong>: GitHub에서 예시를 더 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">이 예제의 완성 버전 on GitHub</a> (also see it <a href="https://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">running live</a>.)</p> </div> <h3 id="else_if">else if</h3> @@ -147,12 +147,12 @@ function setWeather() { </ol> <div class="note"> -<p><strong>Note</strong>: 또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">이 예제를 GitHub에서 찾을 수 있습니다</a>. (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">see it running live</a> on there also.)</p> +<p><strong>참고</strong>: 또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">이 예제를 GitHub에서 찾을 수 있습니다</a>. (<a href="https://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">see it running live</a> on there also.)</p> </div> <h3 id="A_note_on_comparison_operators">비교 연산자에 대한 메모</h3> -<p>비교 연산자는 우리의 조건문 안의 조건을 테스트하는데 사용됩니다. 우리는 먼저 이전의 <a href="/ko/Learn/JavaScript/First_steps/Math#Comparison_operators">자바스크립트의 기본적인 연산 - 숫자와 연산자</a> 문서에서 비교 연산자를 봤습니다. 우리의 선택들은 다음과 같습니다:</p> +<p>비교 연산자는 우리의 조건문 안의 조건을 테스트하는데 사용됩니다. 우리는 먼저 이전의 <a href="/ko/docs/Learn/JavaScript/First_steps/Math#comparison_operators">자바스크립트의 기본적인 연산 - 숫자와 연산자</a> 문서에서 비교 연산자를 봤습니다. 우리의 선택들은 다음과 같습니다:</p> <ul> <li><code>===</code>와 <code>!==</code> — 한 값이 다른 값과 같거나 다른지 테스트한다.</li> @@ -161,7 +161,7 @@ function setWeather() { </ul> <div class="note"> -<p><strong>Note</strong>: 이것들에 대한 기억을 되살리기를 원하신다면 저 링크에 있는 것들을 다시 보세요.</p> +<p><strong>참고</strong>: 이것들에 대한 기억을 되살리기를 원하신다면 저 링크에 있는 것들을 다시 보세요.</p> </div> <p>몇 번이고 다시 만날 boolean(<code>true</code>/<code>false</code>)값을 테스트하는 것과 일반적인 패턴에 대한 특별한 언급을 하고 싶었습니다. 어떠한 값들이든 <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>이나 빈 문자열(<code>''</code>)이 아닌 값은 조건문으로 테스트되었을 때, 실제로는 <code>true</code>를 리턴하므로, 변수가 참인지 혹은 값이 존재하는지를 테스트하기 위해 변수 이름 그 자체를 사용할 수 있습니다. 예를 들어:</p> @@ -201,7 +201,7 @@ if (shoppingDone) { // 명시적으로 '=== true'를 명시할 필요가 없습 <h3 id="Logical_operators_AND_OR_and_NOT">논리 연산자: AND, OR 그리고 NOT</h3> -<p>만약 중첩된 <code>if...else</code>문을 작성 없이 다양한 조건을 테스트하길 원한다면 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators">논리 연산자</a>가 당신을 도와줄 수 있습니다. 조건 내에서 사용될 때, 처음의 두 가지는 다음을 합니다:</p> +<p>만약 중첩된 <code>if...else</code>문을 작성 없이 다양한 조건을 테스트하길 원한다면 <a href="/en-US/docs/Web/JavaScript/Reference/Operators">논리 연산자</a>가 여러분을 도와줄 수 있습니다. 조건 내에서 사용될 때, 처음의 두 가지는 다음을 합니다:</p> <ul> <li><code>&&</code> — AND; 전체 표현식(expression)이 <code>true</code>를 리턴하기 위해 두 개 혹은 그 이상의 표현식이 개별적으로 <code>true</code>로 평가되도록 그 식들을 같이 연결할 수 있게 합니다.</li> @@ -236,13 +236,13 @@ if (shoppingDone) { // 명시적으로 '=== true'를 명시할 필요가 없습 <p>위 예시에서, OR 문이 <code>true</code>를 리턴한다면, NOT 연산자는 전체 표현식이 <code>false</code>를 리턴하도록 부정할 것입니다.</p> -<p>어떤 구조든지, 당신이 원하는 만큼 많은 논리 문(statement)을 결합할 수 있습니다. 다음 예시는 오직 두 OR 문 모두가 true를 리턴하면 내부의 코드를 실행하는데, 이는 전체의 AND 문이 true를 리턴할 것임을 의미합니다.</p> +<p>어떤 구조든지, 여러분이 원하는 만큼 많은 논리 문(statement)을 결합할 수 있습니다. 다음 예시는 오직 두 OR 문 모두가 true를 리턴하면 내부의 코드를 실행하는데, 이는 전체의 AND 문이 true를 리턴할 것임을 의미합니다.</p> <pre class="brush: js notranslate">if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { // run the code }</pre> -<p>조건문에서 논리적 OR 연산자를 사용할 때의 일반적인 실수는 당신이 검사하는 값의 변수를 한 번 명시하기(state)를 시도하고, 그리고 true를 리턴할 수 있는 값들의 목록을, <code>||</code> (OR) 연산자에 의해 분리하며 제공하는 것입니다. 예를 들자면:</p> +<p>조건문에서 논리적 OR 연산자를 사용할 때의 일반적인 실수는 여러분이 검사하는 값의 변수를 한 번 명시하기(state)를 시도하고, 그리고 true를 리턴할 수 있는 값들의 목록을, <code>||</code> (OR) 연산자에 의해 분리하며 제공하는 것입니다. 예를 들자면:</p> <pre class="example-bad brush: js notranslate">if (x === 5 || 7 || 10 || 20) { // run my code @@ -256,9 +256,9 @@ if (shoppingDone) { // 명시적으로 '=== true'를 명시할 필요가 없습 <h2 id="switch_statements">switch 문</h2> -<p><code>if...else</code> 문은 조건문 코드가 잘 가능하게 하는 일을 하지만, 단점이 없지는 않습니다. 그 문은 두 가지 선택을 가지고 있고, 각각은 실행될 합리적인 양의 코드가 필요하고, 및/또는 그 조건이 복잡한 (예를 들자면, 다수의 논리 연산자) 경우에 주로 유용합니다. 당신이 단지 어떤 값의 선택에 변수를 설정하거나 조건에 달린 특정한 문(statement)을 출력하기를 원하는 경우에, 그 구문(syntax)은 다소 번거로울 수 있는데, 특히 당신이 다수의 선택을 가지고 있는 경우에 그렇습니다.</p> +<p><code>if...else</code> 문은 조건문 코드가 잘 가능하게 하는 일을 하지만, 단점이 없지는 않습니다. 그 문은 두 가지 선택을 가지고 있고, 각각은 실행될 합리적인 양의 코드가 필요하고, 및/또는 그 조건이 복잡한 (예를 들자면, 다수의 논리 연산자) 경우에 주로 유용합니다. 여러분이 단지 어떤 값의 선택에 변수를 설정하거나 조건에 달린 특정한 문(statement)을 출력하기를 원하는 경우에, 그 구문(syntax)은 다소 번거로울 수 있는데, 특히 여러분이 다수의 선택을 가지고 있는 경우에 그렇습니다.</p> -<p>그러한 경우에 <a href="/ko/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code>문</a>은 당신의 친구입니다. 이는 입력으로 하나의 표현식/값을 받고, 값과 일치하는 하나를 찾을 때까지 여러 항목을 살펴보고 그에 맞는 코드를 실행합니다. 당신에게 아이디어를 주기 위해, 여기 몇몇 많은 의사 코드가 있습니다:</p> +<p>그러한 경우에 <a href="/ko/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code>문</a>은 여러분의 친구입니다. 이는 입력으로 하나의 표현식/값을 받고, 값과 일치하는 하나를 찾을 때까지 여러 항목을 살펴보고 그에 맞는 코드를 실행합니다. 여러분에게 아이디어를 주기 위해, 여기 몇몇 많은 의사 코드가 있습니다:</p> <pre class="notranslate">switch (expression) { case choice1: @@ -288,7 +288,7 @@ if (shoppingDone) { // 명시적으로 '=== true'를 명시할 필요가 없습 </ol> <div class="note"> -<p><strong>Note</strong>: <code>default</code>를 반드시 포함하지 않아도 됩니다 — 만약 표현식이 미지의 값과 같게 되어버릴 수 있는 경우가 없다면 당신은 안전하게 이것을 생략할 수 있습니다. 그러나, 그 경우가 있다면, 당신은 미지의 경우를 다루기 위해 이것을 포함할 필요가 있습니다.</p> +<p><strong>참고</strong>: <code>default</code>를 반드시 포함하지 않아도 됩니다 — 만약 표현식이 미지의 값과 같게 되어버릴 수 있는 경우가 없다면 여러분은 안전하게 이것을 생략할 수 있습니다. 그러나, 그 경우가 있다면, 여러분은 미지의 경우를 다루기 위해 이것을 포함할 필요가 있습니다.</p> </div> <h3 id="A_switch_example">A switch example</h3> @@ -336,7 +336,7 @@ function setWeather() { <p>{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p> <div class="note"> -<p><strong>Note</strong>: 또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">이 예제를 GitHub에서 찾을 수 있습니다</a>. (see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">running live</a> on there also.)</p> +<p><strong>참고</strong>: 또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">이 예제를 GitHub에서 찾을 수 있습니다</a>. (see it <a href="https://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">running live</a> on there also.)</p> </div> <h2 id="Ternary_operator">삼항연산자 </h2> @@ -384,10 +384,10 @@ select.onchange = function() { <p>끝으로, 우리는 또한 삼항연산자를 포함하고 있는 함수의 실행을 제공하는 '<a href="/ko/docs/Web/API/GlobalEventHandlers/onchange">onchange</a>' 이벤트 리스너를 가지고 있습니다. 이것은 테스트 조건으로 시작합니다 — <code>select.value === 'black'</code>. 만약 이것이 <code>true</code>를 리턴하면, 우리는 검정과 하양의 매개변수를 지니고 있는 <code>update()</code>함수를 실행하는데, 이는 배경색은 검정으로 텍스트 색은 하양으로 되는 결과를 의미합니다. 만약 이것이 <code>false</code>를 리턴하면, 우리는 하양과 검정의 매개변수를 지니고 있는 <code>update()</code>함수를 실행하는데, 이는 사이트의 색상이 반전됐다는 것을 의미합니다.</p> <div class="note"> -<p><strong>Note</strong>: 또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">이 예제를 GitHub에서 찾을 수 있습니다</a>. (see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">running live</a> on there also.)</p> +<p><strong>참고</strong>: 또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">이 예제를 GitHub에서 찾을 수 있습니다</a>. (see it <a href="https://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">running live</a> on there also.)</p> </div> -<h2 id="Active_learning_A_simple_calendar">Active learning: 간단한 달력 만들기</h2> +<h2 id="Active_learning_A_simple_calendar">직접 해보기: 간단한 달력 만들기</h2> <p>이 예제에서는 간단한 달력 어플리케이션을 만들어 볼 것입니다. 코드에는 다음과 같은 것들이 들어 있습니다.</p> @@ -593,9 +593,9 @@ textarea.onkeyup = function(){ <p>{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p> -<h2 id="Active_learning_More_color_choices!">Active learning: 색깔 고르기</h2> +<h2 id="Active_learning_More_color_choices!">직접 해보기: 색깔 고르기</h2> -<p>이 예제에서는 위에서 봤던 삼항연산자 예제의 삼항연산자를 간단한 웹사이트에 더 많은 선택을 적용할 수 있게 하는 switch문으로 전환할 것입니다. {{htmlelement("select")}}을 보세요 — 이번에는 이것이 두 개의 테마 옵션을 가지고 있지 않고, 다섯 개를 가지고 있는 것을 보실 수 있을 것입니다. 당신은 <code>// ADD SWITCH STATEMENT</code> 주석 바로 밑에 추가할 필요가 있습니다:</p> +<p>이 예제에서는 위에서 봤던 삼항연산자 예제의 삼항연산자를 간단한 웹사이트에 더 많은 선택을 적용할 수 있게 하는 switch문으로 전환할 것입니다. {{htmlelement("select")}}을 보세요 — 이번에는 이것이 두 개의 테마 옵션을 가지고 있지 않고, 다섯 개를 가지고 있는 것을 보실 수 있을 것입니다. 여러분은 <code>// ADD SWITCH STATEMENT</code> 주석 바로 밑에 추가할 필요가 있습니다:</p> <ul> <li>이것은 <code>choice</code> 변수를 이것의 입력 표현식으로 받아야 합니다.</li> @@ -746,33 +746,33 @@ textarea.onkeyup = function(){ <p>{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}</p> -<h2 id="Test_your_skills!">당신의 실력을 평가해 보세요!</h2> +<h2 id="Test_your_skills!">실력을 평가해 보세요!</h2> -<p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">Test your skills: Conditionals</a>.</p> +<p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">실력을 평가해 보세요: 조건문</a>.</p> <h2 id="Conclusion">결론</h2> -<p>그리고 이것이 당신이 지금 자바스크립트에서 알아야 할 조건문 구조에 대한 모든 것입니다! 저는 당신이 이 개념들을 이해했고 이 예제들을 쉽게 통과했을 것이라고 확신합니다; 만약 이해하지 못한 게 있으시다면, 자유롭게 이 문서를 다시 읽어 보시고, 도움이 필요하시다면 <a href="/en-US/Learn#Contact_us">contact us</a>를 방문해 보세요.</p> +<p>그리고 이것이 여러분이 지금 자바스크립트에서 알아야 할 조건문 구조에 대한 모든 것입니다! 저는 여러분이 이 개념들을 이해했고 이 예제들을 쉽게 통과했을 것이라고 확신합니다; 만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="/en-US/docs/Learn#contact_us">문의하기</a>에서 도움을 요청해 보세요.</p> -<h2 id="See_also">더 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> - <li><a href="/ko/Learn/JavaScript/First_steps/Math#Comparison_operators">비교 연산자(Comparison operators)</a></li> - <li><a href="/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements">조건문 자세하게 살펴보기</a></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if...else 레퍼런스</a></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">삼항연산자 레퍼런스</a></li> + <li><a href="/ko/docs/Learn/JavaScript/First_steps/Math#comparison_operators">비교 연산자(Comparison operators)</a></li> + <li><a href="/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#conditional_statements">조건문 자세하게 살펴보기</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if...else 참고서</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">삼항연산자 참고서</a></li> </ul> <p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">이 모듈에서는</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li> + <li><strong>판단 내리기 — 조건문</strong></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li> </ul> diff --git a/files/ko/learn/javascript/building_blocks/events/index.html b/files/ko/learn/javascript/building_blocks/events/index.html index 85f3fe64a5..6b1ea60a64 100644 --- a/files/ko/learn/javascript/building_blocks/events/index.html +++ b/files/ko/learn/javascript/building_blocks/events/index.html @@ -16,16 +16,16 @@ tags: <div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">이벤트(event)란 당신이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 당신이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것입니다. 예를 들자면, 만약 유저가 웹페이지에 있는 버튼을 고른다면, 당신은 그 사건에 인포메이션 박스를 표시함으로써 응답하기를 원할지도 모릅니다. 이 문서에서는, 우리는 이벤트에 대한 몇몇 중요한 개념을 논하고, 그것들이 브라우저에서 어떻게 작동하는지 살펴봅니다. 이것은 완전한 공부가 되지 않을 것입니다; 단지 지금 단계에서 당신이 알아야 할 필요가 있는 것입니다.</p> +<p class="summary">이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것입니다. 예를 들자면, 만약 유저가 웹페이지에 있는 버튼을 고른다면, 여러분은 그 사건에 인포메이션 박스를 표시함으로써 응답하기를 원할지도 모릅니다. 이 문서에서는, 우리는 이벤트에 대한 몇몇 중요한 개념을 논하고, 그것들이 브라우저에서 어떻게 작동하는지 살펴봅니다. 이것은 완전한 공부가 되지 않을 것입니다; 단지 지금 단계에서 여러분이 알아야 할 필요가 있는 것입니다.</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">필요한 사전 지식:</th> - <td>기본적인 컴퓨터 활용 능력, HTML, CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>에 대한 기본적인 이해</td> + <td>기본적인 컴퓨터 활용 능력, HTML, CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>에 대한 기본적인 이해</td> </tr> <tr> - <th scope="row">목적:</th> + <th scope="row">목표:</th> <td>이벤트에 대한 필수적인 이론, 브라우저에서 이벤트가 어떻게 작동하는지, 그리고 어떻게 다른 프로그래밍 환경에서 다를 지도 모르는지를 이해하기</td> </tr> </tbody> @@ -33,11 +33,11 @@ tags: <h2 id="A_series_of_fortunate_events">일련의 운 좋은 사건들</h2> -<p>위에서 언급했다시피, <strong>이벤트</strong>란 당신이 프로그래밍하고 있는 시스템에서 일어나는 사건이나 발생입니다 — 시스템은 이벤트가 발생할 때 몇몇 종류의 신호를 생산(produce) (또는 "발사(fire)"하고, 이벤트가 발생했을 때 사건이 자동적으로 취해질 수 있는 메커니즘 (즉, 코드의 실행)을 제공합니다. 예를 들자면, 공항에서, 활주로가 이륙을 위해 막혀 있지 않을 때, 신호가 파일럿에게 전달됩니다. 결과적으로, 비행기는 안전하게 이륙할 수 있습니다.</p> +<p>위에서 언급했다시피, <strong>이벤트</strong>란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건이나 발생입니다 — 시스템은 이벤트가 발생될 때 몇몇 종류의 신호를 생산(produce) (또는 "발생(fire)"시키고, 이벤트가 발생되었을 때 사건이 자동적으로 취해질 수 있는 메커니즘 (즉, 코드의 실행)을 제공합니다. 예를 들자면, 공항에서, 활주로가 이륙을 위해 막혀 있지 않을 때, 신호가 파일럿에게 전달됩니다. 결과적으로, 비행기는 안전하게 이륙할 수 있습니다.</p> <p><img alt="" src="mdn-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p> -<p>웹의 경우에, 이벤트는 브라우저 윈도우 내에서 발사되고, 그것이 거주하는 특정한 요소에 부착되는 경향이 있습니다 — 이것은 하나의 요소, 요소들의 집합, 현재 탭에 로드된 HTML 문서, 혹은 전체 브라우저 윈도우일지도 모릅니다. 발생할 수 있는 많은 각양각색의 이벤트 타입이 있습니다. 예를 들자면:</p> +<p>웹의 경우에, 이벤트는 브라우저 윈도우 내에서 발생되고, 그것이 거주하는 특정한 요소에 부착되는 경향이 있습니다 — 이것은 하나의 요소, 요소들의 집합, 현재 탭에 로드된 HTML 문서, 혹은 전체 브라우저 윈도우일지도 모릅니다. 발생될 수 있는 많은 각양각색의 이벤트 타입이 있습니다. 예를 들자면:</p> <ul> <li>유저가 어떤 요소를 선택하거나 어떤 요소 위에 커서를 올려둡니다(hover).</li> @@ -49,18 +49,18 @@ tags: <li>오류가 발생했습니다.</li> </ul> -<p>당신은 이것으로부터 (그리고 MDN <a href="/en-US/docs/Web/Events">이벤트 레퍼런스</a>를 흘낏 보는 것으로부터) 응답되어질 수 있는 <strong>많은</strong> 이벤트들이 있다는 것을 알 수 있습니다.</p> +<p>여러분은 이것으로부터 (그리고 MDN <a href="/en-US/docs/Web/Events">이벤트 레퍼런스</a>를 흘낏 보는 것으로부터) 응답되어질 수 있는 <strong>많은</strong> 이벤트들이 있다는 것을 알 수 있습니다.</p> -<p>각각의 이용가능한 이벤트들은 <strong>이벤트 핸들러</strong>(event handler)를 가지고 있는데, 이는 이벤트가 발사되면 실행되는 코드 블럭 (보통 당신과 같은 프로그래머가 만드는 JavaScript 함수)입니다. 그러한 코드 블럭이 이벤트에 응답해서 실행되기 위해 정의되었을 때, 우리는 <strong>이벤트 핸들러를 등록</strong>(register)했다고 말합니다. 알림: 이벤트 핸들러는 때때로 <strong>이벤트 리스너</strong>(event listener)라고 불립니다 — 이것들은 우리의 목적을 위해 꽤 교체할수 있지만, 그러나 엄밀히 말하자면, 그들은 같이 동작합니다. 리스너는 발생하는 이벤트에 대해 듣고, 핸들러는 발생하는 이벤트에 응답해서 실행되는 코드입니다.</p> +<p>각각의 이용가능한 이벤트들은 <strong>이벤트 핸들러</strong>(event handler)를 가지고 있는데, 이는 이벤트가 발생되면 실행되는 코드 블럭 (보통 여러분과 같은 프로그래머가 만드는 JavaScript 함수)입니다. 그러한 코드 블럭이 이벤트에 응답해서 실행되기 위해 정의되었을 때, 우리는 <strong>이벤트 핸들러를 등록</strong>(register)했다고 말합니다. 알림: 이벤트 핸들러는 때때로 <strong>이벤트 리스너</strong>(event listener)라고 불립니다 — 이것들은 우리의 목적을 위해 꽤 교체할수 있지만, 그러나 엄밀히 말하자면, 그들은 같이 동작합니다. 리스너는 발생되는 이벤트에 대해 듣고, 핸들러는 발생되는 이벤트에 응답해서 실행되는 코드입니다.</p> <div class="notecard note"> - <h4>Note</h4> + <h4>참고</h4> <p>웹 이벤트는 코어 JavaScript 언어의 일부가 아닙니다 — 이것들은 브라우저에 내장된 API의 일부로서 정의됩니다.</p> </div> <h3 id="A_simple_example">간단한 예제</h3> -<p>우리가 여기서 의미한 것의 간단한 예제를 봅시다. 당신은 이미 많은 예제들에서 사용된 이벤트와 이벤트 핸들러를 보았지만, 단지 우리의 지식을 견고하게 하기 위해 요약해 봅시다. 다음의 예제에서, 우리는 하나의 {{htmlelement("button")}}을 가지고 있는데, 눌러졌을 때, 이는 배경이 무작위의 색으로 바뀌게 만듭니다:</p> +<p>우리가 여기서 의미한 것의 간단한 예제를 봅시다. 여러분은 이미 많은 예제들에서 사용된 이벤트와 이벤트 핸들러를 보았지만, 단지 우리의 지식을 견고하게 하기 위해 요약해 봅시다. 다음의 예제에서, 우리는 하나의 {{htmlelement("button")}}을 가지고 있는데, 눌러졌을 때, 이는 배경이 무작위의 색으로 바뀌게 만듭니다:</p> <pre class="brush: html"><button>Change color</button></pre> @@ -81,9 +81,9 @@ btn.onclick = function() { document.body.style.backgroundColor = rndCol; }</pre> -<p>이 코드에서, {{domxref("Document.querySelector()")}} 함수를 사용하여, 우리는 <code>btn</code> 상수 내부에 버튼에 대한 참조를 저장했습니다. 우리는 또한 무작위의 숫자를 반환하는 함수를 정의했습니다. 코드의 세번째 부분은 이벤트 핸들러입니다. <code>btn</code> 상수는 <code><a href="/ko/docs/Web/HTML/Element/button"><button></a></code> 요소를 가리키고, 이 타입의 객체는 발사할 수 있는 얼마간의 이벤트를 가지고 있으므로, 이벤트 핸들러를 사용 가능합니다. <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> 이벤트 핸들러 프로퍼티를 무작위의 RGB 색상을 생성하고 그것과 같은 <code><a href="/en-US/docs/Web/HTML/Element/body"><body></a></code> <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>를 설정하는 코드를 포함하는 익명함수에 설정함으로써, 우리는 <code><a href="/ko/docs/Web/API/Element/click_event">click</a></code> 이벤트 발사에 귀를 기울이고 있습니다.</p> +<p>이 코드에서, {{domxref("Document.querySelector()")}} 함수를 사용하여, 우리는 <code>btn</code> 상수 내부에 버튼에 대한 참조를 저장했습니다. 우리는 또한 무작위의 숫자를 반환하는 함수를 정의했습니다. 코드의 세번째 부분은 이벤트 핸들러입니다. <code>btn</code> 상수는 <code><a href="/ko/docs/Web/HTML/Element/button"><button></a></code> 요소를 가리키고, 이 타입의 객체는 발생시킬 수 있는 얼마간의 이벤트를 가지고 있으므로, 이벤트 핸들러를 사용 가능합니다. <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> 이벤트 핸들러 프로퍼티를 무작위의 RGB 색상을 생성하고 그것과 같은 <code><a href="/en-US/docs/Web/HTML/Element/body"><body></a></code> <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>를 설정하는 코드를 포함하는 익명함수에 설정함으로써, 우리는 <code><a href="/ko/docs/Web/API/Element/click_event">click</a></code> 이벤트 발생에 귀를 기울이고 있습니다.</p> -<p>이 코드는 언제든지 <code><button></code> 요소에서 click 이벤트가 발사될 때, 즉 언제든지 유저가 그것을 선택했을 때, 실행됩니다.</p> +<p>이 코드는 언제든지 <code><button></code> 요소에서 click 이벤트가 발생될 때, 즉 언제든지 유저가 그것을 선택했을 때, 실행됩니다.</p> <p>예제 출력은 다음과 같습니다:</p> @@ -95,13 +95,13 @@ btn.onclick = function() { <p>예를 들자면, 개발자들이 JavaScript를 네트워크와 서버사이드 어플리케이션을 제작하기 위해 사용하는 것을 가능하게 하는 <a href="/ko/docs/Learn/Server-side/Express_Nodejs">Node.js</a>는 매우 인기있는 JavaScript 런타임입니다. <a href="https://nodejs.org/docs/latest-v12.x/api/events.html">Node.js 이벤트 모델</a>은 이벤트를 듣는 리스너와 이벤트를 주기적으로 발산하는 이미터(emitter)에 의존하고 있습니다 — 이것은 그렇게 다른 것처럼 들리지 않지만, 코드는 상당히 다른데, 이벤트 리스너를 등록하기 위해 <code>on()</code>, 이벤트 리스너를 등록하고 한 번 실행된 이후에 등록을 해제하는 <code>once()</code>같은 함수를 사용합니다. <a href="https://nodejs.org/docs/latest-v12.x/api/http.html#http_event_connect">HTTP connect 이벤트 문서</a>는 좋은 예시를 제공합니다.</p> -<p><a href="/ko/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>이라 불리는 기술을 사용하여, 당신은 또한 크로스 브라우저 애드온(cross-browser add-on) — 브라우저 기능성 강화 — 을 개발하기 위해 JavaScript를 사용할 수 있습니다. 이 이벤트 모델은 웹 이벤트 모델과 유사하나, 조금 다릅니다 — 이벤트 리스너 프로퍼티들은 (<code>onmessage</code>가 아니라 <code>onMessage</code>와 같이) 카멜케이스(camel-case)화 되어있고, <code>addListener</code> 함수와 연결될 필요가 있습니다. 예시를 위해 <a href="/ko/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#examples"><code>runtime.onMessage</code> 페이지</a>를 봐 보세요.</p> +<p><a href="/ko/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>이라 불리는 기술을 사용하여, 여러분은 또한 크로스 브라우저 애드온(cross-browser add-on) — 브라우저 기능성 강화 — 을 개발하기 위해 JavaScript를 사용할 수 있습니다. 이 이벤트 모델은 웹 이벤트 모델과 유사하나, 조금 다릅니다 — 이벤트 리스너 프로퍼티들은 (<code>onmessage</code>가 아니라 <code>onMessage</code>와 같이) 카멜케이스(camel-case)화 되어있고, <code>addListener</code> 함수와 연결될 필요가 있습니다. 예시를 위해 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#examples"><code>runtime.onMessage</code> 페이지</a>를 봐 보세요.</p> <p>지금 배우는 단계에서는 그러한 다른 환경들에 대해서 아무것도 이해할 필요가 없습니다; 우리는 단지 이벤트가 다른 프로그래밍 환경에서 다를 수 있다는 것을 확실히 하고 싶었습니다.</p> <h2 id="Ways_of_using_web_events">웹 이벤트를 사용하는 방법들</h2> -<p>이벤트 리스너 코드가 관련된 이벤트가 발사되었을 때 실행되도록 웹 페이지에 이것을 더하는 얼마간의 방법들이 있습니다. 이 섹션에서, 우리는 다양한 메커니즘을 관찰하고 어떤 것을 당신이 사용해야만 하는지 논할 것입니다.</p> +<p>이벤트 리스너 코드가 관련된 이벤트가 발생되었을 때 실행되도록 웹 페이지에 이것을 더하는 얼마간의 방법들이 있습니다. 이 섹션에서, 우리는 다양한 메커니즘을 관찰하고 어떤 것을 여러분이 사용해야만 하는지 논할 것입니다.</p> <h3 id="Event_handler_properties">이벤트 핸들러 프로퍼티</h3> @@ -114,9 +114,9 @@ btn.onclick = function() { document.body.style.backgroundColor = rndCol; }</pre> -<p><code><a href="/ko/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> 프로퍼티는 이 상황에서 쓰이고 있는 이벤트 핸들러 프로퍼티입니다. 이것은 본질적으로 버튼에서 사용 가능한 다른 것들과 같은 프로퍼티지만 (예: <code><a href="/ko/docs/Web/API/Node/textContent">btn.textContent</a></code>, 또는 <code><a href="/ko/docs/Web/API/ElementCSSInlineStyle/style">btn.style</a></code>), 이것은 특별한 타입입니다 — 어떤 코드와 동일한 것을 설정했을 때, 그 코드는 버튼에서 이벤트가 발사되었을 때 실행됩니다.</p> +<p><code><a href="/ko/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> 프로퍼티는 이 상황에서 쓰이고 있는 이벤트 핸들러 프로퍼티입니다. 이것은 본질적으로 버튼에서 사용 가능한 다른 것들과 같은 프로퍼티지만 (예: <code><a href="/ko/docs/Web/API/Node/textContent">btn.textContent</a></code>, 또는 <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), 이것은 특별한 타입입니다 — 어떤 코드와 동일한 것을 설정했을 때, 그 코드는 버튼에서 이벤트가 발생되었을 때 실행됩니다.</p> -<p>당신은 또한 기명 함수 이름과 같은 핸들러 프로퍼티를 설정할 수 있습니다 (<a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a>에서 본 것처럼요). 다음은 아주 똑같이 동작합니다:</p> +<p>여러분은 또한 기명 함수 이름과 같은 핸들러 프로퍼티를 설정할 수 있습니다 (<a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a>에서 본 것처럼요). 다음은 아주 똑같이 동작합니다:</p> <pre class="brush: js">const btn = document.querySelector('button'); @@ -129,20 +129,20 @@ btn.onclick = bgChange;</pre> <p>사용 가능한 많은 가지각색의 이벤트 핸들러 프로퍼티가 있습니다. 실험해 봅시다.</p> -<p>우선, <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>를 다운받으시고, 당신의 브라우저에서 열어보세요. 이것은 우리가 이미 해본 단순한 무작위 색상 예제의 복사본입니다. 이제 <code>btn.onclick</code>를 다음의 다른 값들로 차례대로 바꿔 보시고, 예제에서 그 결과를 관찰해 보세요.</p> +<p>우선, <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>를 다운받으시고, 여러분의 브라우저에서 열어보세요. 이것은 우리가 이미 해본 단순한 무작위 색상 예제의 복사본입니다. 이제 <code>btn.onclick</code>를 다음의 다른 값들로 차례대로 바꿔 보시고, 예제에서 그 결과를 관찰해 보세요.</p> <ul> - <li><code><a href="/ko/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code>와 <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — 색상은 버튼이 포커스되고 포커스가 해제되었을 때 바뀝니다; 버튼을 포커스하기 위해 탭 키를 눌러 보시고 다시 탭 키를 눌러서 버튼으로부터 포커스를 해제해 보세요. 이것들은 종종 양식 필드(form field)가 포커스되었을 때 그것에 채움(filling)에 대한 정보를 표시하기 위해 사용되거나, 만약 양식 필드가 올바르지 않은 값으로 채워진다면 에러 메시지를 표시하기 위해 사용됩니다.</li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code>와 <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — 색상은 버튼이 포커스되고 포커스가 해제되었을 때 바뀝니다; 버튼을 포커스하기 위해 탭 키를 눌러 보시고 다시 탭 키를 눌러서 버튼으로부터 포커스를 해제해 보세요. 이것들은 종종 양식 필드(form field)가 포커스되었을 때 그것에 채움(filling)에 대한 정보를 표시하기 위해 사용되거나, 만약 양식 필드가 올바르지 않은 값으로 채워진다면 에러 메시지를 표시하기 위해 사용됩니다.</li> <li><code><a href="/ko/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — 오직 버튼이 더블 클릭되었을 때만 색상이 바뀝니다.</li> - <li><code><a href="/ko/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — 키보드에서 키가 눌렸을 때 색상이 바뀝니다. <code>keydown</code> 과 <code>keyup</code>은 단지 각각 키 누름(keystroke)의 누름(key down)과 뗌(key up) 부분을 지칭합니다. 알림: 만약 당신이 이 이벤트 핸들러를 버튼 그 자체에 등록한다면 이것은 작동하지 않습니다 — 우리는, 전체 브라우저를 나타내는, <a href="/ko/docs/Web/API/Window">window</a>에 이것을 등록해야만 합니다.</li> - <li><code><a href="/ko/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> 와 <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — 각각 마우스 포인터가 버튼 위에 올라가 있을 때, 혹은 포인터가 버튼에서 벗어났을 때 색상이 바뀝니다.</li> + <li><code><a href="/ko/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — 키보드에서 키가 눌렸을 때 색상이 바뀝니다. <code>keydown</code> 과 <code>keyup</code>은 단지 각각 키 누름(keystroke)의 누름(key down)과 뗌(key up) 부분을 지칭합니다. 알림: 만약 여러분이 이 이벤트 핸들러를 버튼 그 자체에 등록한다면 이것은 작동하지 않습니다 — 우리는, 전체 브라우저를 나타내는, <a href="/ko/docs/Web/API/Window">window</a>에 이것을 등록해야만 합니다.</li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> 와 <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — 각각 마우스 포인터가 버튼 위에 올라가 있을 때, 혹은 포인터가 버튼에서 벗어났을 때 색상이 바뀝니다.</li> </ul> -<p>몇몇 이벤트들은 일반적이고 거의 어디서나 사용 가능한 반면 (예: <code>onclick</code> 핸들러는 거의 어떠한 요소에서도 등록될 수 있습니다), 몇몇은 더욱 특수하고 오직 어떤 상황들에서만 유용합니다 (예: <a href="/ko/docs/Web/API/GlobalEventHandlers/onplay">onplay</a>를 오직 {{htmlelement("video")}}와 같은, 특정한 요소에서만 사용하는 것은 타당합니다).</p> +<p>몇몇 이벤트들은 일반적이고 거의 어디서나 사용 가능한 반면 (예: <code>onclick</code> 핸들러는 거의 어떠한 요소에서도 등록될 수 있습니다), 몇몇은 더욱 특수하고 오직 어떤 상황들에서만 유용합니다 (예: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onplay">onplay</a>를 오직 {{htmlelement("video")}}와 같은, 특정한 요소에서만 사용하는 것은 타당합니다).</p> <h3 id="Inline_event_handlers_—_dont_use_these">인라인 이벤트 핸들러 — 사용하지 마세요</h3> -<p>당신은 또한 코드에서 이것과 같은 패턴을 봤을 지도 모릅니다:</p> +<p>여러분은 또한 코드에서 이것과 같은 패턴을 봤을 지도 모릅니다:</p> <pre class="brush: html"><button onclick="bgChange()">Press me</button> </pre> @@ -153,19 +153,19 @@ btn.onclick = bgChange;</pre> }</pre> <div class="notecard note"> - <h4>Note</h4> - <p>당신은 이 예제에 대한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">전체 소스 코드를</a> Github에서 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">실제로 작동하는 모습</a>도 보세요).</p> + <h4>참고</h4> + <p>여러분은 이 예제에 대한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">전체 소스 코드를</a> Github에서 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">실제로 작동하는 모습</a>도 보세요).</p> </div> -<p>웹에서 찾아지는 가장 이른 이벤트 핸들러의 등록 방법은 위에서 보이는 것처럼 <strong>이벤트 핸들러 HTML 어트리뷰트</strong> (또는 <strong>인라인 이벤트 핸들러</strong>)을 포함합니다. — 어트리뷰트 값은 말 그대로 이벤트가 발생했을 때 당신이 실행하기를 원하는 JavaScript 코드입니다. 위의 예시는 같은 페이지의 {{htmlelement("script")}} 요소 안에서 정의된 함수를 호출하지만, 당신은 또한 어트리뷰트 안에 직접적으로 JavaScript을 삽입할 수 있습니다. 예를 들자면:</p> +<p>웹에서 찾아지는 가장 이른 이벤트 핸들러의 등록 방법은 위에서 보이는 것처럼 <strong>이벤트 핸들러 HTML 어트리뷰트</strong> (또는 <strong>인라인 이벤트 핸들러</strong>)을 포함합니다. — 어트리뷰트 값은 말 그대로 이벤트가 발생되었을 때 여러분이 실행하기를 원하는 JavaScript 코드입니다. 위의 예시는 같은 페이지의 {{htmlelement("script")}} 요소 안에서 정의된 함수를 호출하지만, 여러분은 또한 어트리뷰트 안에 직접적으로 JavaScript을 삽입할 수 있습니다. 예를 들자면:</p> <pre class="brush: html"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> -<p>당신은 HTML 어트리뷰트를 많은 이벤트 핸들러 프로퍼티와 동등한 것이라고 생각할 수도 있습니다; 그러나, 당신은 이 방법을 사용해서는 안 됩니다 — 이 방법은 나쁜 습관이라고 여겨집니다. 만약 당신이 뭔가를 정말 빨리 한다면 이벤트 핸들러 어트리뷰트를 사용하는 것이 쉬워 보일지도 모르나, 이것은 빠르게 다루기 힘들어지고 비효율적이 됩니다.</p> +<p>여러분은 HTML 어트리뷰트를 많은 이벤트 핸들러 프로퍼티와 동등한 것이라고 생각할 수도 있습니다; 그러나, 여러분은 이 방법을 사용해서는 안 됩니다 — 이 방법은 나쁜 습관이라고 여겨집니다. 만약 여러분이 뭔가를 정말 빨리 한다면 이벤트 핸들러 어트리뷰트를 사용하는 것이 쉬워 보일지도 모르나, 이것은 빠르게 다루기 힘들어지고 비효율적이 됩니다.</p> -<p>우선, HTML과 JavaScript를 뒤죽박죽으로 만드는 것은 좋은 생각이 아닙니다. 왜냐하면 분석하기(parse)가 어려워지기 때문입니다 — JavaScript를 분리한 채로 놔두는 것이 좋은 습관입니다; 만약 이것이 분리된 파일 안에 있다면 당신은 이것을 다수의 HTML 문서에 적용할 수 있습니다.</p> +<p>우선, HTML과 JavaScript를 뒤죽박죽으로 만드는 것은 좋은 생각이 아닙니다. 왜냐하면 분석하기(parse)가 어려워지기 때문입니다 — JavaScript를 분리한 채로 놔두는 것이 좋은 습관입니다; 만약 이것이 분리된 파일 안에 있다면 여러분은 이것을 다수의 HTML 문서에 적용할 수 있습니다.</p> -<p>하나의 파일이더라도, 인라인 이벤트 핸들러는 좋은 생각이 아닙니다. 하나의 버튼은 괜찮지만, 100개의 버튼이라면 어떡할 건가요? 당신은 파일에 100개의 어트리뷰트를 더해야만 합니다; 이것은 빠르게 유지보수의 악몽으로 변할 것입니다. JavaScript와 함께, 다음과 같은 것을 통해서, 당신은 버튼이 얼마나 있든 간에 페이지에 있는 모든 버튼에 쉽게 이벤트 핸들러를 추가할 수 있습니다.</p> +<p>하나의 파일이더라도, 인라인 이벤트 핸들러는 좋은 생각이 아닙니다. 하나의 버튼은 괜찮지만, 100개의 버튼이라면 어떡할 건가요? 여러분은 파일에 100개의 어트리뷰트를 더해야만 합니다; 이것은 빠르게 유지보수의 악몽으로 변할 것입니다. JavaScript와 함께, 다음과 같은 것을 통해서, 여러분은 버튼이 얼마나 있든 간에 페이지에 있는 모든 버튼에 쉽게 이벤트 핸들러를 추가할 수 있습니다.</p> <pre class="brush: js">const buttons = document.querySelectorAll('button'); @@ -180,8 +180,8 @@ for (let i = 0; i < buttons.length; i++) { });</pre> <div class="notecard note"> - <h4>Note</h4> - <p>프로그래밍 로직을 콘텐츠로부터 분리하는 것은 또한 당신의 사이트를 검색 엔진에 더욱 친화적으로 만듭니다.</p> + <h4>참고</h4> + <p>프로그래밍 로직을 콘텐츠로부터 분리하는 것은 또한 여러분의 사이트를 검색 엔진에 더욱 친화적으로 만듭니다.</p> </div> <h3 id="adding_and_removing_event_handlers">이벤트 핸들러를 추가하고 제거하기</h3> @@ -198,7 +198,7 @@ function bgChange() { btn.addEventListener('click', bgChange);</pre> <div class="note"> -<p>당신은 이 예제에 대한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">전체 소스 코드를</a> Github에서 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">실제로 작동하는 모습</a>도 보세요).</p> +<p>여러분은 이 예제에 대한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">전체 소스 코드를</a> Github에서 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">실제로 작동하는 모습</a>도 보세요).</p> </div> <p><code>addEventListener()</code> 함수 안에, 우리는 두 매개변수(parameter)를 명시합니다: 우리가 이 핸들러에 등록하고자 하는 이벤트의 이름과, 그것에 응답하여 우리가 실행하기를 원하는 핸들러 함수를 구성하는 코드입니다. 알림: <code>addEventListener()</code> 내부에, 다음과 같이, 익명 함수 안에 모든 코드를 넣는 것은 완벽히 괜찮습니다:</p> @@ -242,33 +242,33 @@ myElement.addEventListener('click', functionB);</pre> <h3 id="What_mechanism_should_I_use">어떤 메커니즘을 사용해야만 하는가?</h3> -<p>이 세 가지 메커니즘 중에서, 당신은 HTML 이벤트 핸들러 어트리뷰트를 사용해서는 안 됩니다 — 이것은 위에서 언급되었다시피, 구식이고, 나쁜 습관입니다.</p> +<p>이 세 가지 메커니즘 중에서, 여러분은 HTML 이벤트 핸들러 어트리뷰트를 사용해서는 안 됩니다 — 이것은 위에서 언급되었다시피, 구식이고, 나쁜 습관입니다.</p> <p>다른 두 가지는, 적어도 간단한 사용에 대해서는, 비교적 서로 바꿀 수 있습니다.</p> <ul> - <li>이벤트 핸들러 프로퍼티는 더 적은 능력과 옵션을 가지고 있지만, 더 나은 크로스 브라우저 호환성을 가지고 있습니다 (Internet Explorer 8만큼 옛날 브라우저에서도 지원됨). 당신은 아마도 학습을 시작하면서 이것들과 함께 시작해야 합니다.</li> - <li>DOM Level 2 이벤트 (<code>addEventListener()</code> 등)은 더욱 강력하지만, 또한 복잡하며 덜 지원됩니다 (Internet Explorer 9만큼 옛날 브라우저에서 지원됨). 당신은 또한 이것들로 실험해봐야 하고, 가능한 곳에서 사용해봐야 합니다.</li> + <li>이벤트 핸들러 프로퍼티는 더 적은 능력과 옵션을 가지고 있지만, 더 나은 크로스 브라우저 호환성을 가지고 있습니다 (Internet Explorer 8만큼 옛날 브라우저에서도 지원됨). 여러분은 아마도 학습을 시작하면서 이것들과 함께 시작해야 합니다.</li> + <li>DOM Level 2 이벤트 (<code>addEventListener()</code> 등)은 더욱 강력하지만, 또한 복잡하며 덜 지원됩니다 (Internet Explorer 9만큼 옛날 브라우저에서 지원됨). 여러분은 또한 이것들로 실험해봐야 하고, 가능한 곳에서 사용해봐야 합니다.</li> </ul> -<p>세 번째 메커니즘의 주된 이점은, 필요하다면 <code>removeEventListener()</code>을 사용하여 이벤트 핸들러 코드를 삭제할 수 있고, 만약 요구된다면 같은 타입의 다수의 리스너를 요소들에 추가할 수 있다는 것입니다. 예를 들어, 당신은 요소에 <code>addEventListener('click', function() { ... })</code>를, 두 번째 인자(argument)에 다른 함수를 명시한 채로, 여러 번 호출할 수 있습니다. 이것은 이벤트 핸들러 프로퍼티로는 불가능합니다. 왜냐하면 프로퍼티를 설정하려는 어떠한 연이은 시도도 앞선 것들을 덮어쓸 것이기 때문입니다. 예를 들자면:</p> +<p>세 번째 메커니즘의 주된 이점은, 필요하다면 <code>removeEventListener()</code>을 사용하여 이벤트 핸들러 코드를 삭제할 수 있고, 만약 요구된다면 같은 타입의 다수의 리스너를 요소들에 추가할 수 있다는 것입니다. 예를 들어, 여러분은 요소에 <code>addEventListener('click', function() { ... })</code>를, 두 번째 인자(argument)에 다른 함수를 명시한 채로, 여러 번 호출할 수 있습니다. 이것은 이벤트 핸들러 프로퍼티로는 불가능합니다. 왜냐하면 프로퍼티를 설정하려는 어떠한 연이은 시도도 앞선 것들을 덮어쓸 것이기 때문입니다. 예를 들자면:</p> <pre class="brush: js">element.onclick = function1; element.onclick = function2; 등등.</pre> <div class="notecard note"> - <h4>Note</h4> - <p>만약 당신이 Internet Explorer 8보다 오래된 브라우저를 지원하라고 요청받았다면, 그러한 아주 오래된 브라우저들은 새로운 브라우저들과는 다른 이벤트 모델을 사용하므로, 당신은 어려움을 만날 지도 모릅니다. 하지만 걱정하지 마세요, 대부분의 JavaScript 라이브러리들은 (예를 들자면 <code>jQuery</code>) 크로스 브라우저 차이를 분리하는 내장 함수들을 가지고 있습니다. 이 배움의 단계에서 이것을 너무 많이는 걱정하지 마세요.</p> + <h4>참고</h4> + <p>만약 여러분이 Internet Explorer 8보다 오래된 브라우저를 지원하라고 요청받았다면, 그러한 아주 오래된 브라우저들은 새로운 브라우저들과는 다른 이벤트 모델을 사용하므로, 여러분은 어려움을 만날 지도 모릅니다. 하지만 걱정하지 마세요, 대부분의 JavaScript 라이브러리들은 (예를 들자면 <code>jQuery</code>) 크로스 브라우저 차이를 분리하는 내장 함수들을 가지고 있습니다. 이 배움의 단계에서 이것을 너무 많이는 걱정하지 마세요.</p> </div> <h2 id="Other_event_concepts">다른 이벤트 개념들</h2> -<p>이 섹션에서는, 우리는 간략하게 이벤트에 관련된 몇몇 고급 개념들을 다룹니다. 이 개념들을 이 지점에서 완전히 이해하는 것은 중요하지 않지만, 당신이 마주칠 가능성이 있는 몇몇 코드 패턴의 설명을 제공할지도 모릅니다.</p> +<p>이 섹션에서는, 우리는 간략하게 이벤트에 관련된 몇몇 고급 개념들을 다룹니다. 이 개념들을 이 지점에서 완전히 이해하는 것은 중요하지 않지만, 여러분이 마주칠 가능성이 있는 몇몇 코드 패턴의 설명을 제공할지도 모릅니다.</p> <h3 id="Event_objects">이벤트 객체</h3> -<p>때때로 이벤트 핸들러 함수 내부에서, 당신은 <code>event</code>, <code>evt</code>, 혹은 <code>e</code>와 같은 이름으로 명명된 매개변수(parameter)를 봤을 것입니다. 이것들은 <strong>이벤트 객체</strong>라고 불리고, 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달됩니다. 예시로, 무작위 색상 예제를 다시 약간 재작성해 봅시다.</p> +<p>때때로 이벤트 핸들러 함수 내부에서, 여러분은 <code>event</code>, <code>evt</code>, 혹은 <code>e</code>와 같은 이름으로 명명된 매개변수(parameter)를 봤을 것입니다. 이것들은 <strong>이벤트 객체</strong>라고 불리고, 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달됩니다. 예시로, 무작위 색상 예제를 다시 약간 재작성해 봅시다.</p> <pre class="brush: js">function bgChange(e) { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; @@ -279,18 +279,18 @@ element.onclick = function2; btn.addEventListener('click', bgChange);</pre> <div class="notecard note"> - <h4>Note</h4> - <p>당신은 이 예제에 대한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">전체 소스 코드를</a> Github에서 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">실제로 작동하는 모습</a>도 보세요).</p> + <h4>참고</h4> + <p>여러분은 이 예제에 대한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">전체 소스 코드를</a> Github에서 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">실제로 작동하는 모습</a>도 보세요).</p> </div> -<p>여기서 당신은 우리가 이벤트 객체, <strong>e</strong>를, 함수에 포함하고, 함수에서 배경 색상 스타일을 — 버튼 그 자체인 — <code>e.target</code>에서 설정한 것을 볼 수 있습니다. 이벤트 객체의 <code>target</code> 프로퍼티는 항상 이벤트가 발생한 요소에 대한 참조입니다. 그래서, 이 예제에서, 우리는 무작위의 배경색을 페이지가 아니라, 버튼에 설정했습니다.</p> +<p>여기서 여러분은 우리가 이벤트 객체, <strong>e</strong>를, 함수에 포함하고, 함수에서 배경 색상 스타일을 — 버튼 그 자체인 — <code>e.target</code>에서 설정한 것을 볼 수 있습니다. 이벤트 객체의 <code>target</code> 프로퍼티는 항상 이벤트가 발생된 요소에 대한 참조입니다. 그래서, 이 예제에서, 우리는 무작위의 배경색을 페이지가 아니라, 버튼에 설정했습니다.</p> <div class="notecard note"> - <h4>Note</h4> - <p>당신은 이벤트 객체에 대해 당신이 좋아하는 어떠한 이름이든 사용할 수 있습니다 — 당신은 단지 이벤트 핸들러 함수 내에서 그것을 참조하기 위해 사용할 수 있는 이름을 선택할 필요가 있습니다. <code>e</code>/<code>evt</code>/<code>event</code>가 가장 일반적으로 개발자들에 의해 사용됩니다. 왜냐하면 짧고 기억하기 쉽기 때문입니다. 일관적인 것은 항상 좋습니다 — 당신 자신과, 그리고 만약 가능하다면 타인과.</p> + <h4>참고</h4> + <p>여러분은 이벤트 객체에 대해 여러분이 좋아하는 어떠한 이름이든 사용할 수 있습니다 — 여러분은 단지 이벤트 핸들러 함수 내에서 그것을 참조하기 위해 사용할 수 있는 이름을 선택할 필요가 있습니다. <code>e</code>/<code>evt</code>/<code>event</code>가 가장 일반적으로 개발자들에 의해 사용됩니다. 왜냐하면 짧고 기억하기 쉽기 때문입니다. 일관적인 것은 항상 좋습니다 — 여러분 자신과, 그리고 만약 가능하다면 타인과.</p> </div> -<p>당신이 같은 이벤트 핸들러를 다수의 요소에 설정하고 그것들에 이벤트가 발생했을 때 그것들 모두에 뭔가를 하기를 원할 때 <code>e.target</code>은 엄청나게 유용합니다. 예를 들자면, 당신에게 선택되었을 때 사라지는 16개의 타일 세트가 있다고 합시다. 타일을 몇몇 더욱 어려운 방법으로 선택해야만 하는 것 대신에, <code>e.target</code>으로서 단지 타일을 사라지게 항상 설정할 수 있는 것은 유용합니다. 다음의 예제에서 (전체 소스 코드는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a>에서 찾을 수 있습니다; <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">또한 실제로 작동하는 모습</a>도 보세요), 우리는 16개의 {{htmlelement("div")}} 요소를 JavaScript를 통해 생성했습니다. 우리는 그리고서 {{domxref("document.querySelectorAll()")}}을 사용해 그것들 모두를 선택했고, 그리고서 선택되었을 때 무작위 색상이 적용되도록 만드는 <code>onclick</code> 핸들러를 각각에 추가하며 요소들을 순회했습니다:</p> +<p>여러분이 같은 이벤트 핸들러를 다수의 요소에 설정하고 그것들에 이벤트가 발생되었을 때 그것들 모두에 뭔가를 하기를 원할 때 <code>e.target</code>은 엄청나게 유용합니다. 예를 들자면, 여러분에게 선택되었을 때 사라지는 16개의 타일 세트가 있다고 합시다. 타일을 몇몇 더욱 어려운 방법으로 선택해야만 하는 것 대신에, <code>e.target</code>으로서 단지 타일을 사라지게 항상 설정할 수 있는 것은 유용합니다. 다음의 예제에서 (전체 소스 코드는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a>에서 찾을 수 있습니다; <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">또한 실제로 작동하는 모습</a>도 보세요), 우리는 16개의 {{htmlelement("div")}} 요소를 JavaScript를 통해 생성했습니다. 우리는 그리고서 {{domxref("document.querySelectorAll()")}}을 사용해 그것들 모두를 선택했고, 그리고서 선택되었을 때 무작위 색상이 적용되도록 만드는 <code>onclick</code> 핸들러를 각각에 추가하며 요소들을 순회했습니다:</p> <pre class="brush: js">const divs = document.querySelectorAll('div'); @@ -349,13 +349,13 @@ for (let i = 0; i < divs.length; i++) { <p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p> -<p>당신이 만날 대부분의 이벤트 핸들러들은 이벤트 객체에서 사용 가능한 표준 프로퍼티와 함수 (메서드) 집합을 가지고 있습니다; 전체 리스트를 위해 {{domxref("Event")}} 객체 레퍼런스를 참조해 보세요. 그러나 몇몇의 더욱 고급 핸들러들은 그들이 기능하기를 필요로 하는 추가적인 데이터를 포함하는 전문적인 프로퍼티들을 추가합니다. 예를 들어, <a href="/ko/docs/Web/API/MediaStream_Recording_API">Media Recorder API</a>는 <code>dataavailable</code> 이벤트를 가지고 있는데, 이는 몇몇 오디오나 비디오가 기록되고 뭔가를 할 수 있을 때 (예를 들자면 저장하거나, 다시 재생하거나) 발사합니다. 해당하는 <a href="/ko/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> 핸들러의 이벤트 객체는 당신이 그것에 접근하거나 그것으로 무언가를 할 수 있게 하는 녹화된 오디오나 비디오 데이터를 포함하는 이용 가능한 <code>data</code> 프로퍼티를 가지고 있습니다.</p> +<p>여러분이 만날 대부분의 이벤트 핸들러들은 이벤트 객체에서 사용 가능한 표준 프로퍼티와 함수 (메서드) 집합을 가지고 있습니다; 전체 리스트를 위해 {{domxref("Event")}} 객체 레퍼런스를 참조해 보세요. 그러나 몇몇의 더욱 고급 핸들러들은 그들이 기능하기를 필요로 하는 추가적인 데이터를 포함하는 전문적인 프로퍼티들을 추가합니다. 예를 들어, <a href="/en-US/docs/Web/API/MediaStream_Recording_API">Media Recorder API</a>는 <code>dataavailable</code> 이벤트를 가지고 있는데, 이는 몇몇 오디오나 비디오가 기록되고 뭔가를 할 수 있을 때 (예를 들자면 저장하거나, 다시 재생하거나) 발생됩니다. 해당하는 <a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> 핸들러의 이벤트 객체는 여러분이 그것에 접근하거나 그것으로 무언가를 할 수 있게 하는 녹화된 오디오나 비디오 데이터를 포함하는 이용 가능한 <code>data</code> 프로퍼티를 가지고 있습니다.</p> <h3 id="Preventing_default_behavior">기본 행동 방지하기</h3> <p>때때로, 이벤트가 기본으로 하는 것을 방지하고 싶은 상황에 마주칠 수 있습니다. 가장 일반적인 예제는 웹 양식에 관한 것인데, 예를 들자면, 커스텀 등록 양식입니다. 세부 사항을 채우고 제출 버튼을 선택했을 때, 자연적인 행동은 데이터가 처리를 위해 서버에 있는 명시된 페이지로 제출되는 것이고, 브라우저는 몇몇 종류의 "성공 메시지" 페이지로 리다이렉트되는 것입니다 (혹은 만약 다른 것이 명시되지 않았다면, 같은 페이지로).</p> -<p>문제는 유저가 데이터를 옳게 제출하지 않았을 때 발생합니다 — 개발자로서, 당신은 서버로의 제출을 방지하고 무엇이 잘못되었고 옳게 되기 위해 무엇이 완료되어야 하는지를 말하는 에러 메시지를 주기를 원합니다. 몇몇 브라우저는 자동 양식 데이터 확인 기능을 제공하지만, 많은 브라우저들은 그렇지 않으므로, 그것들에 의존하지 않고 당신만의 점검 기능을 구현하는 것이 낫습니다. 간단한 예제를 살펴봅시다.</p> +<p>문제는 유저가 데이터를 옳게 제출하지 않았을 때 발생합니다 — 개발자로서, 여러분은 서버로의 제출을 방지하고 무엇이 잘못되었고 옳게 되기 위해 무엇이 완료되어야 하는지를 말하는 에러 메시지를 주기를 원합니다. 몇몇 브라우저는 자동 양식 데이터 확인 기능을 제공하지만, 많은 브라우저들은 그렇지 않으므로, 그것들에 의존하지 않고 여러분만의 점검 기능을 구현하는 것이 낫습니다. 간단한 예제를 살펴봅시다.</p> <p>우선, 이름과 성을 입력하기를 요구하는 간단한 HTML 양식입니다.</p> @@ -381,7 +381,7 @@ for (let i = 0; i < divs.length; i++) { </pre> </div> -<p>이제 JavaScript입니다 — 여기 우리는 텍스트 필드가 비었는지를 검사하는 <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> 이벤트 핸들러 (제출 이벤트는 양식이 제출되었을 때 발사됩니다) 내부에 아주 간단한 점검을 구현했습니다. 만약 텍스트 필드가 비었다면, 우리는 이벤트 객체에 있는 — 양식 제출을 멈추는 — <code><a href="/ko/docs/Web/API/Event/preventDefault">preventDefault()</a></code> 함수를 호출하고 그리고서 유저에게 무엇이 잘못되었는지를 말하기 위해 양식 아래에 있는 단락에 에러 메시지를 표시합니다.</p> +<p>이제 JavaScript입니다 — 여기 우리는 텍스트 필드가 비었는지를 검사하는 <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> 이벤트 핸들러 (제출 이벤트는 양식이 제출되었을 때 발생됩니다) 내부에 아주 간단한 점검을 구현했습니다. 만약 텍스트 필드가 비었다면, 우리는 이벤트 객체에 있는 — 양식 제출을 멈추는 — <code><a href="/ko/docs/Web/API/Event/preventDefault">preventDefault()</a></code> 함수를 호출하고 그리고서 유저에게 무엇이 잘못되었는지를 말하기 위해 양식 아래에 있는 단락에 에러 메시지를 표시합니다.</p> <pre class="brush: js">const form = document.querySelector('form'); const fname = document.getElementById('fname'); @@ -400,13 +400,13 @@ form.onsubmit = function(e) { <p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p> <div class="notecard note"> - <h4>Note</h4> + <h4>참고</h4> <p>전체 코드 소스는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a>에서 확인하실 수 있습니다 (또한 여기서 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">실제로 작동하는 모습</a>도 보세요).</p> </div> <h3 id="Event_bubbling_and_capture">이벤트 버블링과 캡처</h3> -<p>여기서 다룰 마지막 주제는 당신이 종종 마주치지 못할 무언가이지만, 만약 당신이 이것을 이해하지 못한다면 진짜 고통일 것입니다. 이벤트 버블링과 캡처는 같은 이벤트 타입의 두 이벤트 핸들러가 한 요소에서 작동되었을 때 무슨 일이 일어나는지를 기술하는 두 메커니즘입니다. 이것을 쉽게 만드는 예시를 봅시다. <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> 예시와 (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">소스 코드</a>를 다른 탭에서) 여세요. 이것은 또한 아래에서 바로 이용 가능합니다.</p> +<p>여기서 다룰 마지막 주제는 여러분이 종종 마주치지 못할 무언가이지만, 만약 여러분이 이것을 이해하지 못한다면 진짜 고통일 것입니다. 이벤트 버블링과 캡처는 같은 이벤트 타입의 두 이벤트 핸들러가 한 요소에서 작동되었을 때 무슨 일이 일어나는지를 기술하는 두 메커니즘입니다. 이것을 쉽게 만드는 예시를 봅시다. <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> 예시와 (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">소스 코드</a>를 다른 탭에서) 여세요. 이것은 또한 아래에서 바로 이용 가능합니다.</p> <div class="hidden"> <h6 id="Hidden_video_example">Hidden video example</h6> @@ -518,7 +518,7 @@ video.onclick = function() { <h4 id="Bubbling_and_capturing_explained">버블링과 캡처링 설명</h4> -<p>부모 요소를 가지고 있는 요소에서 이벤트가 발사되었을 때 (이 경우, {{htmlelement("video")}}는 부모로서의 {{htmlelement("div")}}를 가지고 있습니다), 현대의 브라우저들은 두 가지 다른 단계(phase)를 실행합니다 — <strong>캡처링</strong>(capturing) 단계와 <strong>버블링</strong>(bubbling) 단계입니다.</p> +<p>부모 요소를 가지고 있는 요소에서 이벤트가 발생되었을 때 (이 경우, {{htmlelement("video")}}는 부모로서의 {{htmlelement("div")}}를 가지고 있습니다), 현대의 브라우저들은 두 가지 다른 단계(phase)를 실행합니다 — <strong>캡처링</strong>(capturing) 단계와 <strong>버블링</strong>(bubbling) 단계입니다.</p> <p><strong>캡처링</strong> 단계에서는:</p> @@ -546,7 +546,7 @@ video.onclick = function() { </ul> <div class="notecard note"> - <h4>Note</h4> + <h4>참고</h4> <p>버블링과 캡처링, 두 타입의 이벤트 핸들러가 모두 존재하는 경우에, 캡처링 단계가 먼저 실행되고, 이어서 버블링 단계가 실행됩니다.</p> </div> @@ -564,47 +564,47 @@ video.onclick = function() { <p><a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html 소스 코드</a>를 다운받아 직접 고쳐볼 수도 있고, <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a>에서 고쳐진 결과를 볼 수도 있습니다 (또한 여기서 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">소스 코드</a>를 보세요).</p> <div class="notecard note"> - <h4>Note</h4> + <h4>참고</h4> <p>왜 캡처링과 버블링으로 애를 쓰냐구요? 글쎄요, 브라우저들이 지금보다 훨씬 덜 호환되던 옛날의 좋지 못하던 시절에, Netscape는 오직 이벤트 캡처링만을 사용했고, Internet Explorer는 오직 이벤트 버블링만을 사용했습니다. W3C가 이 움직임을 표준화하고 합의에 이르기를 시도하기로 결정했을 때, 그들은 양 쪽을 다 포함하는 이 시스템을 채용하게 되었는데, 이것이 현대 브라우저들이 구현한 것입니다.</p> </div> <div class="notecard note"> - <h4>Note</h4> + <h4>참고</h4> <p>위에서 언급했다시피, 기본적으로 모든 이벤트 핸들러는 버블링 단계에 등록되어 있고, 이것은 대부분의 경우 더 타당합니다. 만약 정말로 이벤트를 캡처링 단계에 대신 등록하기를 원한다면, <code><a href="/ko/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>를 사용하고, 옵션인 세 번째 프로퍼티를 <code>true</code>로 설정하여 핸들러를 등록함으로써 그렇게 할 수 있습니다.</p> </div> <h4 id="Event_delegation">이벤트 위임(Event delegation)</h4> -<p>버블링은 또한 <strong>이벤트 위임</strong>의 이점을 취할 수 있게 합니다 — 이 개념은 만약 다수의 자식 요소 중 하나를 선택했을 때 코드를 실행하기를 원한다면, 모든 자식에 개별적으로 이벤트 리스너를 설정해야만 하는 것 대신 이벤트 리스너를 그들의 부모에 설정하고 그들에게서 일어난 이벤트가 그들의 부모에게까지 올라오게 할 수 있다는 사실에 의존합니다. 기억하세요, 버블링은 이벤트 핸들러에 대해 이벤트가 발사된 요소를 먼저 검사하고서, 요소의 부모 등등으로 올라가는 것을 포함합니다.</p> +<p>버블링은 또한 <strong>이벤트 위임</strong>의 이점을 취할 수 있게 합니다 — 이 개념은 만약 다수의 자식 요소 중 하나를 선택했을 때 코드를 실행하기를 원한다면, 모든 자식에 개별적으로 이벤트 리스너를 설정해야만 하는 것 대신 이벤트 리스너를 그들의 부모에 설정하고 그들에게서 일어난 이벤트가 그들의 부모에게까지 올라오게 할 수 있다는 사실에 의존합니다. 기억하세요, 버블링은 이벤트 핸들러에 대해 이벤트가 발생된 요소를 먼저 검사하고서, 요소의 부모 등등으로 올라가는 것을 포함합니다.</p> -<p>하나의 좋은 예시는 일련의 리스트 아이템들입니다 — 만약 각각이 선택되었을 때 메시지를 띄우기(pop up)를 원한다면, 당신은 <code>click</code> 이벤트 리스너를 부모 <code><ul></code>에 설정할 수 있고, 이벤트들은 리스트 아이템들에서 <code><ul></code>까지 올라갈 것입니다.</p> +<p>하나의 좋은 예시는 일련의 리스트 아이템들입니다 — 만약 각각이 선택되었을 때 메시지를 띄우기(pop up)를 원한다면, 여러분은 <code>click</code> 이벤트 리스너를 부모 <code><ul></code>에 설정할 수 있고, 이벤트들은 리스트 아이템들에서 <code><ul></code>까지 올라갈 것입니다.</p> <p>이 개념은 David Walsh의 블로그에서, 다수의 예제와 함께 더 설명됩니다. <a href="https://davidwalsh.name/event-delegate">어떻게 JavaScript 이벤트 위임은 작동하는가</a>를 보세요.</a>.</p> -<h2 id="Test_your_skills!">당신의 실력을 평가해 보세요!</h2> +<h2 id="Test_your_skills!">실력을 평가해 보세요!</h2> -<p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events">당신의 실력을 평가해 보세요: 이벤트</a>.</p> +<p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events">실력을 평가해 보세요: 이벤트</a>.</p> <h2 id="Conclusion">결론</h2> -<p>당신은 이제 이 이른 단계에서 웹 이벤트에 대해 알아야 할 모든 것들을 알아야만 합니다. 언급했듯이, 이벤트는 코어 JavaScript의 일부가 정말 아닙니다 — 이것들은 브라우저 웹 API에 정의되어 있습니다.</p> +<p>여러분은 이제 이 이른 단계에서의 웹 이벤트에 대해 알아야 할 모든 것들을 알고 계실 것입니다. 언급했듯이, 이벤트는 코어 JavaScript의 일부가 정말 아닙니다 — 이것들은 브라우저 웹 API에 정의되어 있습니다.</p> -<p>또한, JavaScript가 쓰이는 다른 맥락들은 다른 이벤트 모델들을 가지고 있다는 것을 이해하는 것은 중요합니다 — 웹 API에서 브라우저 WebExtensions과 Node.js (서버사이드 JavaScript)와 같은 다른 영역들까지. 우리는 이 모든 영역을 지금 당신이 이해하기를 기대하지는 않지만, 이것은 당신이 웹 개발을 배우며 나아가는 동안 이벤트의 기본을 이해하는 것을 분명히 돕습니다.</p> +<p>또한, JavaScript가 쓰이는 다른 맥락들은 다른 이벤트 모델들을 가지고 있다는 것을 이해하는 것은 중요합니다 — 웹 API에서 브라우저 WebExtensions과 Node.js (서버사이드 JavaScript)와 같은 다른 영역들까지. 우리는 이 모든 영역을 지금 여러분이 이해하기를 기대하지는 않지만, 이것은 여러분이 웹 개발을 배우며 나아가는 동안 이벤트의 기본을 이해하는 것을 분명히 돕습니다.</p> -<p>만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="https://discourse.mozilla.org/c/mdn/learn">contact us</a>에서 도움을 요청해 보세요.</p> +<p>만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="https://discourse.mozilla.org/c/mdn/learn">문의하기</a>에서 도움을 요청해 보세요.</p> -<h2 id="See_also">더 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li><a href="https://domevents.dev/">domevents.dev</a> — 탐험을 통해 DOM 이벤트 시스템의 움직임에 대한 배울 수 있는 매우 유용한 인터랙티브 놀이터 앱</li> - <li><a href="/ko/docs/Web/Events">이벤트 레퍼런스</a></li> + <li><a href="/ko/docs/Web/Events">이벤트 참고서</a></li> <li><a href="https://www.quirksmode.org/js/events_order.html">이벤트 순서</a> (캡처링과 버블링에 대한 논의) — Peter-Paul Koch가 작성한 뛰어나게 상세한 글</li> <li><a href="https://www.quirksmode.org/js/events_access.html">이벤트 접근</a> (이벤트 객체에 대한 논의) — Peter-Paul Koch가 작성한 또 다른 뛰어나게 상세한 글</li> </ul> <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">이 모듈에서는</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li> diff --git a/files/ko/learn/javascript/building_blocks/functions/index.html b/files/ko/learn/javascript/building_blocks/functions/index.html index 0b5efacc40..88410c34cd 100644 --- a/files/ko/learn/javascript/building_blocks/functions/index.html +++ b/files/ko/learn/javascript/building_blocks/functions/index.html @@ -1,5 +1,5 @@ --- -title: 함수 — 재사용 가능한 코드 블록 +title: 함수 — 코드 재사용 slug: Learn/JavaScript/Building_blocks/Functions translation_of: Learn/JavaScript/Building_blocks/Functions --- @@ -7,12 +7,12 @@ translation_of: Learn/JavaScript/Building_blocks/Functions <div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">코딩에 있어서 또 하나의 필수적인 개념은 <strong>함수</strong>인데, 이는 하나의 일을 하는 코드 조각을 정의된 블록 안에 저장하고, 같은 코드를 여러 번 타이핑하기보다는, 하나의 짧은 명령을 사용하여 당신이 그 함수가 필요할 때 언제든지 그 코드를 호출할 수 있게 합니다. 이 문서에서 우리는 기본 문법(syntax), 어떻게 함수를 호출하고(invoke) 정의하는지, 스코프(scope), 그리고 매개변수(parameter)와 같은 함수 뒤에 있는 핵심적인 개념들을 탐구할 것입니다.</p> +<p class="summary">코딩에 있어서 또 하나의 필수적인 개념은 <strong>함수</strong>인데, 이는 하나의 일을 하는 코드 조각을 정의된 블록 안에 저장하고, 같은 코드를 여러 번 타이핑하기보다는, 하나의 짧은 명령을 사용하여 여러분이 그 함수가 필요할 때 언제든지 그 코드를 호출할 수 있게 합니다. 이 문서에서 우리는 기본 문법(syntax), 어떻게 함수를 호출하고(invoke) 정의하는지, 스코프(scope), 그리고 매개변수(parameter)와 같은 함수 뒤에 있는 핵심적인 개념들을 탐구할 것입니다.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">필요 사항:</th> + <th scope="row">필요한 사전 지식:</th> <td>기본적인 컴퓨터 활용 능력, HTML과 CSS의 기본적인 이해, <a href="/ko/docs/Learn/JavaScript/First_steps">자바스크립트 첫 단계</a>.</td> </tr> <tr> @@ -26,7 +26,7 @@ translation_of: Learn/JavaScript/Building_blocks/Functions <p>자바스크립트 어디서든 함수를 찾을 수 있습니다. 사실, 우리는 지금까지 수업에서 함수를 계속 사용해왔습니다. 함수에 대해서 아주 많이 말해오지 않았을 뿐이죠. 그러나 이제 함수에 대해서 분명하게 말하고, 실제로 문법을 탐험할 때가 되었습니다.</p> -<p> <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#%EB%A3%A8%ED%94%84%EC%9D%98_%ED%91%9C%EC%A4%80">for loop</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#while_%EA%B7%B8%EB%A6%AC%EA%B3%A0_do_..._while">while 과 do...while loop</a>, 또는 <a href="/ko/docs/Learn/JavaScript/Building_blocks/%EC%A1%B0%EA%B1%B4%EB%AC%B8#if_..._else_%EB%AC%B8">if...else문</a>과 같은 일반적인 내장 언어 구조를 사용하지 <strong>않고</strong> — <code>()</code> —같은 괄호 쌍을 사용했다면 당신은 함수를 사용하고 있던 겁니다</p> +<p> <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#%EB%A3%A8%ED%94%84%EC%9D%98_%ED%91%9C%EC%A4%80">for loop</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#while_%EA%B7%B8%EB%A6%AC%EA%B3%A0_do_..._while">while 과 do...while loop</a>, 또는 <a href="/ko/docs/Learn/JavaScript/Building_blocks/%EC%A1%B0%EA%B1%B4%EB%AC%B8#if_..._else_%EB%AC%B8">if...else문</a>과 같은 일반적인 내장 언어 구조를 사용하지 <strong>않고</strong> — <code>()</code> —같은 괄호 쌍을 사용했다면 여러분은 함수를 사용하고 있던 겁니다.</p> <h2 id="브라우저_내장_함수">브라우저 내장 함수</h2> @@ -58,20 +58,20 @@ console.log(madeAString); <p>...우리는 함수를 사용하고 있었어요!</p> <div class="note"> -<p><strong>Note</strong>: 만약 필요하다면, 이 기능들에 다시 익숙해지기 위해 당신의 브라우저 자바스크립트 콘솔에 자유롭게 이 코드들을 입력해 보세요.</p> +<p><strong>참고</strong>: 만약 필요하다면, 이 기능들에 다시 익숙해지기 위해 여러분의 브라우저 자바스크립트 콘솔에 자유롭게 이 코드들을 입력해 보세요.</p> </div> -<p>JavaScript 언어는 당신 스스로 코드 전체를 적을 필요 없이, 유용한 것들을 할 수 있게 해주는 많은 내장 함수를 가지고 있습니다. 사실, 브라우저 내장 함수를 <strong>호출</strong>("함수를 실행하다(run 또는 execute)"는 말을 멋있게 "호출하다(invoke)"라고 하기도 합니다)할 때 호출하는 일부 코드는 JavaScript로 작성될 수 없었습니다 — 이러한 함수 중 상당수는 백그라운드 브라우저 코드의 일부를 호출하고 있으며, 이는 JavaScript와 같은 웹 언어가 아니라 대체로 C++와 같은 저수준 시스템 언어로 작성됩니다.</p> +<p>JavaScript 언어는 여러분 스스로 코드 전체를 적을 필요 없이, 유용한 것들을 할 수 있게 해주는 많은 내장 함수를 가지고 있습니다. 사실, 브라우저 내장 함수를 <strong>호출</strong>("함수를 실행하다(run 또는 execute)"는 말을 멋있게 "호출하다(invoke)"라고 하기도 합니다)할 때 호출하는 일부 코드는 JavaScript로 작성될 수 없었습니다 — 이러한 함수 중 상당수는 백그라운드 브라우저 코드의 일부를 호출하고 있으며, 이는 JavaScript와 같은 웹 언어가 아니라 대체로 C++와 같은 저수준 시스템 언어로 작성됩니다.</p> <p>몇몇 브라우저 내장함수는 핵심(core) 자바스크립트 언어의 일부가 아니라는 것을 유념하세요. 몇몇은 브라우저 API의 일부로써 정의되어 있는데, 더욱 많은 기능성을 제공하기 위해 기본(default) 언어의 위에 개발되었습니다 (<a href="/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript#%EA%B7%B8%EB%9E%98%EC%84%9C_%EC%A7%84%EC%A7%9C_%EC%96%B4%EB%96%A4_%EC%9D%BC%EC%9D%84_%ED%95%A0_%EC%88%98_%EC%9E%88%EB%82%98%EC%9A%94">앞선 코스</a>에서 더 자세한 설명을 볼 수 있습니다). 브라우저 API를 다루는 법은 나중에 더 살펴보도록 하겠습니다.</p> <h2 id="함수_대_메소드">함수 대 메소드</h2> -<p>프로그래머들은 객체(object)의 부분인 <strong>함수</strong>를 <strong>메서드</strong>(method)라고 부릅니다. 당신은 아직 구성된(structured) 자바스크립트 객체의 내부 작동에 대해서 배울 필요는 없습니다. 차후의 모듈에서 객체의 내부 작동과, 어떻게 객체를 생성하는지에 대한 모든 것을 배울 수 있습니다. 우선은, 우리는 메서드 대 함수에 대해 있을 수 있는 혼란을 단지 정리하기를 원합니다. — 웹 상에서 이용 가능한 관련된 리소스들을 살펴보면서 당신은 두 용어를 만날 가능성이 있습니다.</p> +<p>프로그래머들은 객체(object)의 부분인 <strong>함수</strong>를 <strong>메서드</strong>(method)라고 부릅니다. 여러분은 아직 구성된(structured) 자바스크립트 객체의 내부 작동에 대해서 배울 필요는 없습니다. 차후의 모듈에서 객체의 내부 작동과, 어떻게 객체를 생성하는지에 대한 모든 것을 배울 수 있습니다. 우선은, 우리는 메서드 대 함수에 대해 있을 수 있는 혼란을 단지 정리하기를 원합니다. — 웹 상에서 이용 가능한 관련된 리소스들을 살펴보면서 여러분은 두 용어를 만날 가능성이 있습니다.</p> -<p>우리가 지금까지 사용해 왔던 내장된(built-in) 코드는 두 형태로 나타납니다. 바로 <strong>함수</strong>와 <strong>메서드</strong>입니다. 당신은 내장 함수의 전체 목록과, 내장 객체와 그들의 해당하는 메서드들 또한 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects">여기서</a> 확인할 수 있습니다.</p> +<p>우리가 지금까지 사용해 왔던 내장된(built-in) 코드는 두 형태로 나타납니다. 바로 <strong>함수</strong>와 <strong>메서드</strong>입니다. 여러분은 내장 함수의 전체 목록과, 내장 객체와 그들의 해당하는 메서드들 또한 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects">여기서</a> 확인할 수 있습니다.</p> -<p>당신은 또한 많은 <strong>사용자 정의 함수</strong>(custom functions)들을 이 코스에서 지금까지 봐 왔습니다. — 브라우저 내부에서 정의된 게 아니라, 당신의 코드에서 정의된 함수 말입니다. 괄호 바로 앞에 있는 사용자 정의 이름을 봤을 때마다, 당신은 사용자 정의 함수를 사용하고 있었던 것입니다. <a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문(loops) 문서</a>의 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> 예제 (전체 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">소스 코드</a> 또한 보세요)에서, 우리는 다음과 같은 사용자 정의 <code>draw()</code> 함수를 포함했었습니다.</p> +<p>여러분은 또한 많은 <strong>사용자 정의 함수</strong>(custom functions)들을 이 코스에서 지금까지 봐 왔습니다. — 브라우저 내부에서 정의된 게 아니라, 여러분의 코드에서 정의된 함수 말입니다. 괄호 바로 앞에 있는 사용자 정의 이름을 봤을 때마다, 여러분은 사용자 정의 함수를 사용하고 있었던 것입니다. <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문(loops) 문서</a>의 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> 예제 (전체 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">소스 코드</a> 또한 보세요)에서, 우리는 다음과 같은 사용자 정의 <code>draw()</code> 함수를 포함했었습니다.</p> <pre class="brush: js notranslate">function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); @@ -87,13 +87,13 @@ console.log(madeAString); <pre class="brush: js notranslate">draw();</pre> -<p>우리가 이것을 반복하기를 원할 때마다 모든 코드를 또 작성하지 않고 말이죠. 그리고 함수는 당신이 원하는 코드를 무엇이든지간에 포함할 수 있습니다. 당신은 심지어 다른 함수들을 함수 내부에서부터 호출할 수 있습니다. 위의 예시는 아래와 같이 정의된 <code>random()</code> 함수를 세 번이나 호출하고 있죠.</p> +<p>우리가 이것을 반복하기를 원할 때마다 모든 코드를 또 작성하지 않고 말이죠. 그리고 함수는 여러분이 원하는 코드를 무엇이든지간에 포함할 수 있습니다. 여러분은 심지어 다른 함수들을 함수 내부에서부터 호출할 수 있습니다. 위의 예시는 아래와 같이 정의된 <code>random()</code> 함수를 세 번이나 호출하고 있죠.</p> <pre class="brush: js notranslate">function random(number) { return Math.floor(Math.random()*number); }</pre> -<p>브라우저의 내장 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> 함수는 오직 0과 1사이의 무작위 소수를 생성하기 때문에 우리는 이 함수가 필요했습니다. 우리는 0과 명시된 숫자 사이의 무작위 정수를 원했습니다.</p> +<p>브라우저의 내장 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> 함수는 오직 0과 1사이의 무작위 소수를 생성하기 때문에 우리는 이 함수가 필요했습니다. 우리는 0과 명시된 숫자 사이의 무작위 정수를 원했습니다.</p> <h2 id="함수_호출">함수 호출</h2> @@ -107,12 +107,12 @@ myFunction() // calls the function once</pre> <div class="notecard note"> -<p>이 형태의 함수 생성은 또한 <em>함수 선언</em>(function declaration)으로도 알려져 있습니다. 이것은 언제나 호이스팅(hoisting)되어서, 당신은 함수를 함수 정의 위에서 호출할 수 있고 이것은 잘 작동할 것입니다.</p> +<p>이 형태의 함수 생성은 또한 <em>함수 선언</em>(function declaration)으로도 알려져 있습니다. 이것은 언제나 호이스팅(hoisting)되어서, 여러분은 함수를 함수 정의 위에서 호출할 수 있고 이것은 잘 작동할 것입니다.</p> </div> <h2 id="익명_함수">익명 함수</h2> -<p>당신은 조금 다른 방식으로 정의되거나 호출되는 함수를 본 적 있을 거예요. 이제까지 우리는 이런 식으로 함수를 생성했죠: </p> +<p>여러분은 조금 다른 방식으로 정의되거나 호출되는 함수를 본 적 있을 거예요. 이제까지 우리는 이런 식으로 함수를 생성했죠: </p> <pre class="brush: js notranslate">function myFunction() { alert('hello'); @@ -132,9 +132,9 @@ myButton.onclick = function() { alert('hello'); }</pre> -<p>위의 예시는 페이지 상의 클릭을 위해 {{htmlelement("button")}} 요소를 필요로 합니다. 당신은 코스를 거치며 이런 구조의 코드를 꽤 봐왔을 거예요. 다음 문서에서 더 많은 걸 배워 보자구요.</p> +<p>위의 예시는 페이지 상의 클릭을 위해 {{htmlelement("button")}} 요소를 필요로 합니다. 여러분은 코스를 거치며 이런 구조의 코드를 꽤 봐왔을 거예요. 다음 문서에서 더 많은 걸 배워 보자구요.</p> -<p>당신은 변수 속에 익명함수를 넣을 수 있어요. 예시입니다.</p> +<p>여러분은 변수 속에 익명함수를 넣을 수 있어요. 예시입니다.</p> <pre class="brush: js notranslate">var myGreeting = function() { alert('hello'); @@ -148,7 +148,7 @@ myButton.onclick = function() { <pre class="brush: js notranslate">myGreeting();</pre> -<p>이 방법은 효과적으로 함수에 이름을 부여하고 있어요. 당신은 다중 변수들에 함수를 할당할 수도 있죠. 예를 들면,</p> +<p>이 방법은 효과적으로 함수에 이름을 부여하고 있어요. 여러분은 다중 변수들에 함수를 할당할 수도 있죠. 예를 들면,</p> <pre class="brush: js notranslate">var anotherGreeting = function() { alert('hello'); @@ -178,7 +178,7 @@ anotherGreeting();</pre> <p>몇몇 함수는 호출을 위해 매개변수를 필요로 하는 경우가 있습니다. 이것들은 함수 괄호 안에 포함될 필요가 있는 값들인데, 올바르게 동작하기 위해 필요합니다.</p> <div class="note"> -<p><strong>Note</strong>: 매개변수는 종종 arguments, properties, 심지어 attributes 라고도 불려요.</p> +<p><strong>참고</strong>: 매개변수는 종종 arguments, properties, 심지어 attributes 라고도 불려요.</p> </div> <p>예를 들어, 브라우저의 내장 함수인 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a>은 어떤 매개변수도 필요로 하지 않습니다. 이 함수는 호출되면 늘 0과 1사이의 무작위 수를 반환해 주죠. </p> @@ -191,10 +191,10 @@ anotherGreeting();</pre> var newString = myText.replace('string', 'sausage');</pre> <div class="note"> -<p><strong>Note</strong>: 여러 개의 매개변수는 콤마에 의해 구분되어집니다. </p> +<p><strong>참고</strong>: 여러 개의 매개변수는 콤마에 의해 구분되어집니다. </p> </div> -<p>매개변수는 이따금 선택 사항이기도 합니다. 당신이 명시해 줄 필요가 없다는 뜻이죠. 그런 경우, 일반적으로 함수는 기본 기능을 수행합니다. 예를 들어, 배열과 관련된 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> 함수의 매개변수가 그렇죠.</p> +<p>매개변수는 이따금 선택 사항이기도 합니다. 여러분이 명시해 줄 필요가 없다는 뜻이죠. 그런 경우, 일반적으로 함수는 기본 기능을 수행합니다. 예를 들어, 배열과 관련된 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> 함수의 매개변수가 그렇죠.</p> <pre class="brush: js notranslate">var myArray = ['I', 'love', 'chocolate', 'frogs']; var madeAString = myArray.join(' '); @@ -206,13 +206,13 @@ var madeAString = myArray.join(); <h2 id="함수_스코프와_충돌">함수 스코프와 충돌(conflicts)</h2> -<p>우리 '<a href="https://developer.mozilla.org/ko/docs/Glossary/Scope">스코프</a>(scope)'에 대해 얘기해 볼까요? '스코프'는 함수와 관련된 매우 중요한 개념입니다. 함수를 생성할 때, 변수 및 함수 내 정의된 코드들은 그들만의 분리된 '스코프' 안에 자리하게 됩니다. 그 말인 즉슨, 다른 함수의 내부나 외부 함수의 코드가 접근할 수 없는 그들만의 구획에 갇혀 있다는 뜻입니다. </p> +<p>우리 '<a href="/ko/docs/Glossary/Scope">스코프</a>(scope)'에 대해 얘기해 볼까요? '스코프'는 함수와 관련된 매우 중요한 개념입니다. 함수를 생성할 때, 변수 및 함수 내 정의된 코드들은 그들만의 분리된 '스코프' 안에 자리하게 됩니다. 그 말인 즉슨, 다른 함수의 내부나 외부 함수의 코드가 접근할 수 없는 그들만의 구획에 갇혀 있다는 뜻입니다. </p> <p>함수 바깥에 선언된 가장 상위 레벨의 스코프를 '<strong>전역 스코프</strong>(global scope)' 라고 부릅니다.전역 스코프 내에 정의된 값들은 어느 코드든 접근이 가능합니다.</p> -<p>자바스크립트는 다양한 이유로 인해 이와 같이 설정되어 있지만, 주로는 안전성과 구조 때문입니다. 어떤 때에는 당신의 변수가 어느 코드나 접근 가능한 변수가 되는 걸 원치 않을 겁니다. 당신이 어딘가에서 불러온 외부 스크립트가 문제를 일으킬 수도 있으니깐요. 외부 스크립트의 코드와 같은 변수 이름을 사용하면 충돌이 일어나게 돼요. 이건 악의적일 수도 있고, 아님 뭐 단순한 우연이겠죠.</p> +<p>자바스크립트는 다양한 이유로 인해 이와 같이 설정되어 있지만, 주로는 안전성과 구조 때문입니다. 어떤 때에는 여러분의 변수가 어느 코드나 접근 가능한 변수가 되는 걸 원치 않을 겁니다. 여러분이 어딘가에서 불러온 외부 스크립트가 문제를 일으킬 수도 있으니깐요. 외부 스크립트의 코드와 같은 변수 이름을 사용하면 충돌이 일어나게 돼요. 이건 악의적일 수도 있고, 아님 뭐 단순한 우연이겠죠.</p> -<p>예를 들어 , 당신에게 두 개의 외부 자바스크립트 파일을 호출하는 HTML이 있다고 쳐요. 그 둘은 같은 이름으로 정의된 변수와 함수를 사용하고 있습니다.</p> +<p>예를 들어 , 여러분에게 두 개의 외부 자바스크립트 파일을 호출하는 HTML이 있다고 쳐요. 그 둘은 같은 이름으로 정의된 변수와 함수를 사용하고 있습니다.</p> <pre class="brush: html notranslate"><!-- Excerpt from my HTML --> <script src="first.js"></script> @@ -233,21 +233,21 @@ function greeting() { alert('Our company is called ' + name + '.'); }</pre> -<p>당신이 호출하고 싶은 두 함수 모두 <code>greeting()</code> 이지만, 당신은 오직 <code>first.js</code> 파일의 <code>greeting()</code> 함수에만 접근할 수 있을 뿐입니다 (두번째 것은 무시됩니다). 추가적으로, <code>second.js</code> 파일에서 <code>let</code> 키워드로 <code>name</code> 변수를 두 번째로 선언하려고 시도하는 것은 오류를 낳습니다.</p> +<p>여러분이 호출하고 싶은 두 함수 모두 <code>greeting()</code> 이지만, 여러분은 오직 <code>first.js</code> 파일의 <code>greeting()</code> 함수에만 접근할 수 있을 뿐입니다 (두번째 것은 무시됩니다). 추가적으로, <code>second.js</code> 파일에서 <code>let</code> 키워드로 <code>name</code> 변수를 두 번째로 선언하려고 시도하는 것은 오류를 낳습니다.</p> <div class="note"> -<p><strong>Note</strong>: 예제를 여기서 볼 수 있습니다. <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">running live on GitHub</a> (<a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">source code</a> 또한 볼 수 있습니다.).</p> +<p><strong>참고</strong>: 예제를 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">GitHub</a>에서 볼 수 있습니다. (<a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">소스 코드</a> 또한 볼 수 있습니다).</p> </div> <p>함수의 일부를 코드 안에 가두는 것은 이러한 문제를 피할 수 있고, 가장 좋은 방법이라 여겨집니다.</p> <p>동물원 같네요. 사자, 얼룩말, 호랑이, 그리고 펭귄은 자신들만의 울타리 안에 있으며, 그들의 울타리 내부에 있는 것만 건드릴 수 있어요. 함수 스코프처럼 말이죠. 만약 동물들이 다른 울타리 안으로 들어갈 수 있었다면, 문제가 생겼을 겁니다. 좋게는 다른 동물이 낯선 거주 환경에서 불편함을 느끼는 정도겠죠. 사자나 호랑이가 펭귄의 물기 많고 추운 영역 안에서 끔찍함을 느끼듯이요. 하지만 최악의 상황엔 사자나 호랑이가 펭귄을 먹어 치울지도 모르죠!</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="mdn-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p> <p>사육사는 전역 스코프와 같습니다. 그들은 모든 울타리에 들어갈 수 있고, 먹이를 보충하고, 아픈 동물들을 돌볼 수 있어요.</p> -<h3 id="실습_스코프랑_놀자">실습: 스코프랑 놀자</h3> +<h3 id="실습_스코프랑_놀자">직접 해보기: 스코프랑 놀자</h3> <p>스코프를 설명하기 위해 스코프 사용의 실례를 한번 봅시다.</p> @@ -256,7 +256,7 @@ function greeting() { <li>예제를 인터넷 브라우저나 텍스트 에디터를 통해 열어봅시다.</li> <li>브라우저 개발자 툴에서 자바스크립트 콘솔을 엽시다. 자바스크립트 콘솔에서 아래와 같이 작성해보세요. <pre class="brush: js notranslate">output(x);</pre> - 당신은 브라우저 뷰포트에 출력된 변수 <code>x</code>의 값을 볼 수 있을 것입니다.</li> + 여러분은 브라우저 뷰포트에 출력된 변수 <code>x</code>의 값을 볼 수 있을 것입니다.</li> <li>이제 다음을 콘솔에 입력해 보세요. <pre class="brush: js notranslate">output(y); output(z);</pre> @@ -275,8 +275,8 @@ function b() { <pre class="brush: js notranslate">a(); b();</pre> - 당신은 페이지에 출력된 <code>y</code>와 <code>z</code>값들을 볼 수 있을 것입니다. <code>output()</code> 함수가 다른 함수 안쪽에서 호출되고 있으므로, 이것은 잘 작동합니다. — 각각의 경우에서, 같은 스코프에서 그것이 출력하고 있는 변수들이 정의되어 있으므로. <code>output()</code>는 전역 스코프에서 정의되었으므로, 이 함수 자체는 어디서든 이용할 수 있습니다.</li> - <li>이제 당신의 코드를 다음과 같이 갱신해 보세요. + 여러분은 페이지에 출력된 <code>y</code>와 <code>z</code>값들을 볼 수 있을 것입니다. <code>output()</code> 함수가 다른 함수 안쪽에서 호출되고 있으므로, 이것은 잘 작동합니다. — 각각의 경우에서, 같은 스코프에서 그것이 출력하고 있는 변수들이 정의되어 있으므로. <code>output()</code>는 전역 스코프에서 정의되었으므로, 이 함수 자체는 어디서든 이용할 수 있습니다.</li> + <li>이제 여러분의 코드를 다음과 같이 갱신해 보세요. <pre class="brush: js notranslate">function a() { var y = 2; output(x); @@ -292,7 +292,7 @@ function b() { b();</pre> </li> <li>브라우저 뷰포트에 <code>a()</code> 와 <code>b()</code> 모두 x 값을 출력해야 합니다. 왜냐하면 비록 <code>output()</code> 호출이 <code>x</code>가 정의되어 있는 같은 스코프에 있지 않더라도, <code>x</code>는 전역 변수이므로 모든 코드 어디서든 이용 가능하기 때문에 이것들은 잘 작동합니다.</li> - <li>마지막으로, 당신의 코드를 다음과 같이 갱신해 보세요. + <li>마지막으로, 여러분의 코드를 다음과 같이 갱신해 보세요. <pre class="brush: js notranslate">function a() { var y = 2; output(z); @@ -310,11 +310,11 @@ b();</pre> </ol> <div class="note"> -<p><strong>Note</strong>: 같은 스코프 규칙은 반복문 (예: <code>for() { ... }</code>)과 조건문(conditional blocks) (예: <code>if() { ... }</code>)에 적용되지 않습니다. — 이것들은 아주 비슷하게 생겼지만, 같은 것이 아닙니다! 헷갈리지 않도록 조심하세요.</p> +<p><strong>참고</strong>: 같은 스코프 규칙은 반복문 (예: <code>for() { ... }</code>)과 조건문(conditional blocks) (예: <code>if() { ... }</code>)에 적용되지 않습니다. — 이것들은 아주 비슷하게 생겼지만, 같은 것이 아닙니다! 헷갈리지 않도록 조심하세요.</p> </div> <div class="note"> -<p><strong>Note</strong>: <a href="/ko/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> 오류는 당신이 마주칠 가장 일반적인 것들 중 하나입니다. 만약 당신이 이 오류를 얻었고 당신이 문제의 변수를 정의했다는 것이 확실하다면, 그것이 어떤 스코프 안에 들어있는지 확인해 보세요.</p> +<p><strong>참고</strong>: <a href="/ko/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> 오류는 여러분이 마주칠 가장 일반적인 것들 중 하나입니다. 만약 여러분이 이 오류를 얻었고 여러분이 문제의 변수를 정의했다는 것이 확실하다면, 그것이 어떤 스코프 안에 들어있는지 확인해 보세요.</p> </div> <ul> @@ -322,7 +322,7 @@ b();</pre> <h3 id="Functions_inside_functions">함수 내부의 함수</h3> -<p>당신은 함수를 어디에서나, 심지어 다른 함수 내에서도 호출할 수 있다는 것을 명심하세요. 이것은 종종 코드를 깔끔하게 유지하기 위한 방법으로써 사용됩니다. — 만약 당신이 크고 복잡한 함수를 가지고 있다면, 만약 당신이 그것을 몇몇의 하위 함수(sub-functions)로 나눈다면 이해하기 더 쉬울 것입니다.</p> +<p>여러분은 함수를 어디에서나, 심지어 다른 함수 내에서도 호출할 수 있다는 것을 명심하세요. 이것은 종종 코드를 깔끔하게 유지하기 위한 방법으로써 사용됩니다. — 만약 여러분이 크고 복잡한 함수를 가지고 있다면, 만약 여러분이 그것을 몇몇의 하위 함수(sub-functions)로 나눈다면 이해하기 더 쉬울 것입니다.</p> <pre class="brush: js notranslate">function myBigFunction() { var myValue; @@ -345,7 +345,7 @@ function subFunction3() { } </pre> -<p>함수 내부에서 사용되고 있는 값들이 올바르게 스코프 내에 있는지 확실히 하세요. 상기의 예시는 <code>ReferenceError: myValue is not defined</code> 오류를 던질 것인데, 이는 왜냐하면 비록 <code>myValue</code> 변수가 함수가 호출되는 같은 스코프 내에 정의되어 있긴 하지만, 이것은 함수 정의 (함수가 호출될 때 실행되는 실제 코드) 내부에 정의되어 있지 않습니다. 이것을 작동하게 하려면, 당신은 값을 함수 내부에 매개변수로써 다음과 같이 전달해야만 합니다.</p> +<p>함수 내부에서 사용되고 있는 값들이 올바르게 스코프 내에 있는지 확실히 하세요. 상기의 예시는 <code>ReferenceError: myValue is not defined</code> 오류를 던질 것인데, 이는 왜냐하면 비록 <code>myValue</code> 변수가 함수가 호출되는 같은 스코프 내에 정의되어 있긴 하지만, 이것은 함수 정의 (함수가 호출될 때 실행되는 실제 코드) 내부에 정의되어 있지 않습니다. 이것을 작동하게 하려면, 여러분은 값을 함수 내부에 매개변수로써 다음과 같이 전달해야만 합니다.</p> <pre class="brush: js notranslate">function myBigFunction() { var myValue = 1; @@ -367,20 +367,20 @@ function subFunction3(value) { console.log(value); }</pre> -<h2 id="Test_your_skills!">당신의 기량을 시험해 보세요!</h2> +<h2 id="Test_your_skills!">실력을 평가해 보세요!</h2> -<p>당신은 이 문서의 끝에 도달했지만, 가장 중요한 정보들을 기억할 수 있으신가요? 당신은 나아가기 전에 이 정보들을 보유하고 있다는 것을 확인하는 추가적인 테스트들을 찾을 수 있습니다 — 다음을 보세요: <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a>. 이 테스트들은 다음 두 문서에서 다뤄지는 기술들을 요구하므로, 당신은 그 문서들을 이 테스트를 시도해 보기 전에 먼저 읽기를 원할지도 모릅니다.</p> +<p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">실력을 평가해 보세요: 함수</a>. 이 테스트들은 다음 두 문서에서 다뤄지는 기술들을 요구하므로, 여러분은 그 문서들을 이 테스트를 시도해 보기 전에 먼저 읽기를 원할지도 모릅니다.</p> <h2 id="Conclusion">결론</h2> -<p>이 문서는, 당신만의 사용자 정의 함수 만들기를 익히도록 돕고 실제적인 것을 다루는 다음 문서에 대한 길을 만들며, 함수 뒤에 있는 핵심적인 개념들을 탐구했습니다.</p> +<p>이 문서는, 여러분만의 사용자 정의 함수 만들기를 익히도록 돕고 실제적인 것을 다루는 다음 문서에 대한 길을 만들며, 함수 뒤에 있는 핵심적인 개념들을 탐구했습니다.</p> -<h2 id="See_also">참조</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li><a href="/ko/docs/Web/JavaScript/Guide/Functions">자세한 함수 가이드</a> — 여기 포함되지 않은 몇몇 고급 기능들을 다룹니다.</li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수 레퍼런스</a></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수</a> — 고급 개념 레퍼런스</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수 참고서</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수</a> — 고급 개념 참고서</li> </ul> <ul> @@ -388,14 +388,14 @@ function subFunction3(value) { <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">In this module</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단 내리기 — 조건문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> + <li><strong>함수 — 코드 재사용</strong></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li> </ul> diff --git a/files/ko/learn/javascript/building_blocks/image_gallery/index.html b/files/ko/learn/javascript/building_blocks/image_gallery/index.html index 5e9e8f997b..3214dd6d0f 100644 --- a/files/ko/learn/javascript/building_blocks/image_gallery/index.html +++ b/files/ko/learn/javascript/building_blocks/image_gallery/index.html @@ -17,13 +17,13 @@ tags: <div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">이제 우리는 JavaScript의 핵심적인 구성 요소를 살펴보았으므로, 우리는 반복문, 함수, 조건문, 그리고 이벤트에 대한 당신의 이해를 시험할 것입니다. 많은 웹사이트들에서 보게 될 꽤 흔한 아이템인 — JavaScript를 이용하는 이미지 갤러리를 만듦으로써 말이죠.</p> +<p class="summary">이제 우리는 JavaScript의 핵심적인 구성 요소를 살펴보았으므로, 우리는 반복문, 함수, 조건문, 그리고 이벤트에 대한 여러분의 이해를 시험할 것입니다. 많은 웹사이트들에서 보게 될 꽤 흔한 아이템인 — JavaScript를 이용하는 이미지 갤러리를 만듦으로써 말이죠.</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">필요한 사전 지식:</th> - <td>이 평가를 시도하기 전에 당신은 이 모듈의 모든 문서를 독파해야만 합니다.</td> + <td>이 평가를 시도하기 전에 여러분은 이 모듈의 모든 문서를 독파해야만 합니다.</td> </tr> <tr> <th scope="row">목표:</th> @@ -44,7 +44,7 @@ tags: <h2 id="Project_brief">프로젝트 개요</h2> -<p>당신에게 몇몇 HTML, CSS 그리고 이미지 에셋(asset) 그리고 몇 줄의 JavaScript 코드가 제공되었습니다; 당신은 이것을 작동하는 프로그램으로 만들기 위해 필수적인 JavaScript를 작성할 필요가 있습니다. HTML body는 다음과 같습니다:</p> +<p>여러분에게 몇몇 HTML, CSS 그리고 이미지 에셋(asset) 그리고 몇 줄의 JavaScript 코드가 제공되었습니다; 여러분은 이것을 작동하는 프로그램으로 만들기 위해 필수적인 JavaScript를 작성할 필요가 있습니다. HTML body는 다음과 같습니다:</p> <pre class="brush: html"><h1>Image gallery example</h1> @@ -69,7 +69,7 @@ tags: <li>이것은 <code>thumb-bar <div></code> (소위 "섬네일" 이미지) 내부의 이미지들의 폭을 20%로 설정하고, 사진들이 한 줄에서 서로의 다음에 오도록 왼쪽으로 부유시킵니다.</li> </ul> -<p>당신의 JavaScript는 다음을 하기를 필요로 합니다:</p> +<p>여러분의 JavaScript는 다음을 하기를 필요로 합니다:</p> <ul> <li>모든 이미지를 순회하고, 각각에 대해 <code><img></code> 요소를 페이지에 그 이미지를 끼워 넣는 <code>thumb-bar <div></code> 내부에 삽입하기.</li> @@ -87,26 +87,26 @@ tags: <p>우리는 이미 <code>thumbBar</code> 상수 내부에 <code>thumb-bar <div></code>에 대한 참조를 저장하고, 새로운 <code><img></code> 요소를 생성하고, 그것의 <code>src</code> 어트리뷰트를 플레이스홀더 값 <code>xxx</code>로 설정하고, 그리고 <code>thumbBar</code> 내부에 이 새로운 <code><img></code> 요소를 추가하는 코드를 제공했습니다.</p> -<p>당신은 다음을 할 필요가 있습니다:</p> +<p>여러분은 다음을 할 필요가 있습니다:</p> <ol> - <li>5개의 모든 이미지를 순회하는 반복문 내부의 "Looping through images" 주석 아래에 코드 섹션 추가하기 — 당신은 그저 5개의 숫자를 순회할 필요가 있는데, 각 숫자는 각각의 이미지를 나타냅니다.</li> + <li>5개의 모든 이미지를 순회하는 반복문 내부의 "Looping through images" 주석 아래에 코드 섹션 추가하기 — 여러분은 그저 5개의 숫자를 순회할 필요가 있는데, 각 숫자는 각각의 이미지를 나타냅니다.</li> <li>각각의 반복에서, <code>xxx</code> 플레이스홀더 값을 각 경우의 이미지 경로와 동일한 문자열으로 대체하세요. 우리는 <code>src</code> 어트리뷰트의 값을 각 경우에서 이 값으로 설정하고 있습니다. 각 경우에서, 이미지는 이미지 디렉토리 내부에 있고 그것의 이름은 <code>pic1.jpg</code>, <code>pic2.jpg</code> 등등이라는 것을 기억해 두세요.</li> </ol> <h3 id="Adding_an_onclick_handler_to_each_thumbnail_image">onclick 핸들러를 각 섬네일 이미지에 추가하기</h3> -<p>각각의 반복에서, 당신은 <code>onclick</code> 핸들러를 현재의 <code>newImage</code>에 추가할 필요가 있습니다 — 이 핸들러는 현재 이미지의 <code>src</code> 어트리뷰트의 값을 찾아야만 합니다. <code>displayed-img <img></code>의 <code>src</code> 어트리뷰트 값을 매개변수로서 전달된 <code>src</code> 값으로 설정하세요.</p> +<p>각각의 반복에서, 여러분은 <code>onclick</code> 핸들러를 현재의 <code>newImage</code>에 추가할 필요가 있습니다 — 이 핸들러는 현재 이미지의 <code>src</code> 어트리뷰트의 값을 찾아야만 합니다. <code>displayed-img <img></code>의 <code>src</code> 어트리뷰트 값을 매개변수로서 전달된 <code>src</code> 값으로 설정하세요.</p> -<p>그 대신에, 당신은 섬네일 바에 하나의 이벤트 리스너를 추가할 수 있습니다.</p> +<p>그 대신에, 여러분은 섬네일 바에 하나의 이벤트 리스너를 추가할 수 있습니다.</p> <h3 id="Writing_a_handler_that_runs_the_darkenlighten_button">어두워지게/밝게 하는 버튼을 실행하는 핸들러 작성하기</h3> -<p>우리의 어두워지게/밝게 하는 <code><button></code>은 가만히 있습니다 — 우리는 이미 <code>btn</code> 상수에 <code><button></code>에 대한 참조를 저장하는 코드 라인을 제공했습니다. 당신은 다음을 수행하는 <code>onclick</code>을 추가할 필요가 있습니다:</p> +<p>우리의 어두워지게/밝게 하는 <code><button></code>은 가만히 있습니다 — 우리는 이미 <code>btn</code> 상수에 <code><button></code>에 대한 참조를 저장하는 코드 라인을 제공했습니다. 여러분은 다음을 수행하는 <code>onclick</code>을 추가할 필요가 있습니다:</p> <ol> - <li><code><button></code>에 설정된 현재 클래스명을 확인 — 당신은 다시 이것을 <code>getAttribute()</code>를 사용함으로써 달성할 수 있습니다.</li> - <li>만약 클래스명이 <code>"dark"</code>라면, <code><button></code> 클래스를 <code>"light"</code>로 (<code><a href="/ko/docs/Web/API/Element/setAttribute">setAttribute()</a></code>를 사용하여), 이것의 텍스트 콘텐츠를 "Lighten"으로, 그리고 덮어씌운 <code><div></code>의 {{cssxref("background-color")}}를 <code>"rgba(0,0,0,0.5)"</code>로 변경.</li> + <li><code><button></code>에 설정된 현재 클래스명을 확인 — 여러분은 다시 이것을 <code>getAttribute()</code>를 사용함으로써 달성할 수 있습니다.</li> + <li>만약 클래스명이 <code>"dark"</code>라면, <code><button></code> 클래스를 <code>"light"</code>로 (<code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>를 사용하여), 이것의 텍스트 콘텐츠를 "Lighten"으로, 그리고 덮어씌운 <code><div></code>의 {{cssxref("background-color")}}를 <code>"rgba(0,0,0,0.5)"</code>로 변경.</li> <li>만약 클래스명이 <code>"dark"</code>가 아니라면, <code><button></code> 클래스를 <code>"dark"</code>로, 이것의 텍스트 콘텐츠를 다시 "Darken"으로, 덮어씌운 <code><div></code>의 {{cssxref("background-color")}}를 <code>"rgba(0,0,0,0)"</code>로 변경.</li> </ol> @@ -119,34 +119,34 @@ overlay.style.backgroundColor = xxx;</pre> <h2 id="Hints_and_tips">힌트와 팁</h2> <ul> - <li>당신은 어떤 방법으로도 HTML 또는 CSS를 수정할 필요가 없습니다.</li> + <li>여러분은 어떤 방법으로도 HTML 또는 CSS를 수정할 필요가 없습니다.</li> </ul> <h2 id="Assessment_or_further_help">평가 혹은 추가적인 도움</h2> -<p>만약 당신의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> +<p>만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> <ol> - <li>당신의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a> 같은 온라인에서 공유 가능한 에디터에 올리세요.</li> - <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 당신의 글은 다음을 포함해야만 합니다: + <li>여러분의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a> 같은 온라인에서 공유 가능한 에디터에 올리세요.</li> + <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다: <ul> <li>"이미지 갤러리에 대한 평가 원함"과 같은 서술적인 제목.</li> - <li>당신이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명, 예를 들자면, 만약 당신이 막혀서 도움이 필요하거나, 평가를 원하거나.</li> - <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 당신이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 실천입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> - <li>우리가 당신이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> + <li>여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.</li> + <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> + <li>우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> </ul> </li> </ol> <p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">이 모듈에서는</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단 내리기 — 조건문</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> <li><strong>이미지 갤러리</strong></li> diff --git a/files/ko/learn/javascript/building_blocks/index.html b/files/ko/learn/javascript/building_blocks/index.html index 27e2a90cf5..175b46c6f0 100644 --- a/files/ko/learn/javascript/building_blocks/index.html +++ b/files/ko/learn/javascript/building_blocks/index.html @@ -12,38 +12,54 @@ translation_of: Learn/JavaScript/Building_blocks --- <div>{{LearnSidebar}}</div> -<p class="summary">이번 장에서는 조건문, 반복문, 함수, 이벤트 등 일반적으로 발생하는 코드 종류를 중심으로 JavaScript의 중요한 기본 기능에 대해 설명합니다. 지금까지의 과정을 지나면서 여기서 다룰 내용을 살짝 보셨겠지만 좀 더 심도있게 다루겠습니다.</p> +<p class="summary">이번 과정에서는 조건문, 반복문, 함수, 이벤트 등 일반적으로 발생하는 코드 종류를 중심으로 JavaScript의 중요한 기본 기능에 대해 설명합니다. 지금까지의 과정을 지나면서 여기서 다룰 내용을 살짝 보셨겠지만 좀 더 심도있게 다룰 것입니다.</p> -<h2 id="선행사항">선행사항</h2> +<div class="callout"> + <h4 id="Looking_to_become_a_front-end_web_developer">프론트엔드 웹 개발자가 되기를 생각해보고 계신가요?</h4> -<p>시작하기전에, 기본 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML</a>, <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS</a> 기본지식을 가지고 계신 것이 좋습니다. 그리고 <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫 걸음</a>을 꼭 진행하신후 오시기 바랍니다.</p> + <p>저희는 여러분의 목표를 향해 공부할 필요가 있는 모든 필수적인 정보를 담고 있는 코스를 준비해 놓았습니다.</p> + + <p><a href="/ko/docs/Learn/Front-end_web_developer"><strong>시작하기</strong></a></p> + +</div> + +<h2 id="Prerequisites">필요한 사전 지식</h2> + +<p>시작하기 전에, 기본적인 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML</a>과 <a href="/ko/docs/Learn/CSS/First_steps">CSS</a> 지식을 알고 계셔야 하고, 또한 지난 모듈인 <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>을 학습하셔야 합니다.</p> <div class="note"> -<p><strong>Note</strong>: 여기 나온 코드를 작성하고 실행해 볼 수 없는 환경이라면 (태블릿, 스마트폰, 기타장치) , <a href="http://jsbin.com/">JSBin</a>이나 <a href="https://glitch.com">Glitch</a>에서 대부분의 예제를 시험해 볼 수 있습니다.</p> +<p><strong>참고</strong>: 여기 나온 코드를 작성하고 실행해 볼 수 없는 환경이라면 (태블릿, 스마트폰, 기타 장치), <a href="http://jsbin.com/">JSBin</a>이나 <a href="https://glitch.com">Glitch</a>에서 대부분의 예제를 시험해 볼 수 있습니다.</p> </div> -<h2 id="가이드">가이드</h2> +<h2 id="Guides">가이드</h2> <dl> - <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></dt> - <dd>어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이 문서에서는 JavaScript에서 조건문이 작동하는 방법을 살펴 보겠습니다. </dd> + <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단 내리기 — 조건문</a></dt> + <dd>어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야 합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이 문서에서는 JavaScript에서 조건문이 작동하는 방법을 살펴 보겠습니다. </dd> <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></dt> - <dd>때로는 여러 반복 작업을 수행해야 할 때가 있습니다. 예를 들면 이름 목록을 살펴보는 것입니다. 프로그래밍에서 이런 반복 작업은 매우 적합합니다. JavaScript의 반복문 구조를 살펴봅니다.</dd> + <dd>때때로 한 번보다 많이 연이어 작업을 완료해야 할 필요가 있습니다. 예를 들자면, 이름 목록을 순회하는 것입니다. 프로그래밍에서, 반복문은 이 작업을 대단히 잘 수행합니다. 여기서 우리는 JavaScript에서의 반복문 구조를 살펴볼 것입니다.</dd> <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></dt> - <dd>코딩의 또 다른 핵심 개념은 <strong>함수</strong>입니다. <strong>함수</strong>를 사용하면 정의된 구간 안에 하나의 작업을 하는 코드를 저장한 후, 같은 코드를 여러 번 입력하지 않고도 짧은 명령어를 사용해 이 코드를 이용할 수 있습니다. 기본 문법, 함수, 범위 및 매개 변수를 호출하고 정의하는 방법과 같은 함수의 기본 개념을 살펴봅니다.</dd> + <dd>코딩에서의 또 다른 필수적인 개념은 <strong>함수</strong>입니다. <strong>함수</strong>를 사용하면 정의된 블록 안에 하나의 작업을 수행하는 코드 조각을 저장할 수 있고, 언제든지 그 코드 조각이 필요할 때 같은 코드를 여러번 입력하지 않고도 짧은 명령을 사용해 그 코드를 호출할 수 있습니다. 이 문서에서는 기본 문법, 어떻게 함수를 호출하고 정의하는지, 스코프, 그리고 매개변수와 같은 함수의 기본 개념을 탐사할 것입니다.</dd> <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></dt> - <dd>그동안 배운 이론을 활용해 실제 코드를 작성해봅니다. 사용자 정의 함수를 작성해 보고, 함수의 유용한 기능을 좀 더 알아봅니다.</dd> - <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수는 값을 반환한다</a></dt> - <dd>함수에 대해 알아야 할 마지막 필수 개념은 반환값입니다. 어떤 함수는 완료하면서 값을 반환하지 않지만, 반환하는 함수도 있습니다. 값이 무엇인지, 코드에서 어떻게 사용하는지, 여러분이 작성한 함수가 어떻게 값을 반환하는지 이해하는 것이 중요합니다.</dd> - <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></dt> - <dd>이벤트란 프로그래밍중인 시스템에서 발생하는 동작이나 발생을 말하며, 시스템에서 그에 대해 알려주므로 원하는 경우 사용자가 어떤 방식으로든 이에 응답 할 수 있습니다. 예를 들어 사용자가 웹 페이지에서 버튼을 클릭하면 정보 상자를 표시하여 해당 작업에 응답 할 수 있습니다. 이 마지막 문서에서는 이벤트를 둘러싼 몇 가지 중요한 개념에 대해 이야기하고 브라우저에서 어떻게 작동하는지 살펴 보겠습니다.</dd> + <dd>그동안 배운 이론을 활용해, 이 문서에서는 실용적인 경험을 제공합니다. 여기서 여러분은 사용자 정의 함수를 만드는 연습을 할 것입니다. 그 과정에서, 우리는 또한 함수를 다루는 데 있어 유용한 추가적인 세부 사항을 알아볼 것입니다.</dd> + <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></dt> + <dd>함수에 대해 알아야 할 마지막 필수 개념은 반환 값입니다. 어떤 함수는 완료 후에 중요한 값을 반환하지 않지만, 반환하는 함수도 있습니다. 그 값이 무엇인지, 어떻게 사용하는지, 그리고 어떻게 유용한 값들을 반환하는 사용자 정의 함수를 만드는지를 이해하는 것은 중요합니다.</dd> + <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></dt> + <dd>이벤트란 여러분이 프로그래밍하고 있는 시스템에서 발생하는 동작이나 발생인데, 이는 시스템이 여러분에게 알려주므로 만약 원한다면 어떠한 방식으로 이에 응답할 수 있습니다. 예를 들어 만약 사용자가 웹페이지의 버튼을 클릭한다면, 여러분은 그 동작에 응답하여 인포메이션 박스를 표시함으로써 응답하기를 원할지도 모릅니다. 이 자미가 문서에서 우리는 이벤트에 대한 중요한 개념을 논하고, 이벤트가 브라우저에서 어떻게 동작하는지 살펴볼 것입니다.</dd> </dl> -<h2 id="평가">평가</h2> +<h2 id="Assessments">평가</h2> + +<p>다음의 평가는 위의 가이드에서 다뤄진 기본 JavaScript에 대한 여러분의 이해를 테스트할 것입니다.</p> + +<dl> + <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></dt> + <dd>이제 JavaScript의 기본 구성 요소를 살펴 보았으므로, 많은 웹 사이트에서 볼 수 있는 상당히 공통적인 항목인 JavaScript 기반 이미지 갤러리를 구현하며 반복문, 함수, 조건문, 그리고 이벤트에 대한 여러분의 지식을 테스트할 것입니다.</dd> +</dl> -<p>여기에선 위에서 다룬 JavaScript 기본 사항에 대해 여러분이 얼마나 이해했는지 테스트해볼 수 있습니다..</p> +<h2 id="See_also">같이 보기</h2> <dl> - <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></dt> - <dd>이제 JavaScript의 기본 구성 요소를 살펴 보았으므로 많은 웹 사이트에서 볼 수있는 공통 항목인 JavaScript 기반 이미지 갤러리를 만들어 반복문, 함수, 조건문, 이벤트에 대한 지식을 테스트합니다.</dd> + <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> + <dd>웹 개발자가 되려는 분들에게 훌륭한 자원입니다 — Learn JavaScript는 자동화된 평가에 의해 가이드되며, 짧은 강의와 상호작용을 하는 테스트를 가진 대화형 환경입니다. 처음 40개의 강의는 무료이며, 전체 코스는 한 번의 작은 지불로 이용 가능합니다.</dd> </dl> diff --git a/files/ko/learn/javascript/building_blocks/looping_code/index.html b/files/ko/learn/javascript/building_blocks/looping_code/index.html index 86c1d5e1bf..29cced78d2 100644 --- a/files/ko/learn/javascript/building_blocks/looping_code/index.html +++ b/files/ko/learn/javascript/building_blocks/looping_code/index.html @@ -16,8 +16,8 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">선수 과목 :</th> - <td>기본적인 컴퓨터 활용 능력, HTML과 CSS, <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript</a>의 기본 이해.</td> + <th scope="row">필요한 사전 지식:</th> + <td>기본적인 컴퓨터 활용 능력, HTML과 CSS, <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>.</td> </tr> <tr> <th scope="row">목표:</th> @@ -33,7 +33,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <p>가족들이 일주일동안 먹을 식량이 충분한지 확신하기 위해 고민하는 농부의 상황을 봅시다. 그는 이것을 알기 위해 다음과 같은 반복을 사용할지도 모릅니다:</p> <p><br> - <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p> + <img alt="" src="loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p> <p>반복은 보통 다음 기능의 하나 또는 그 이상을 가집니다:</p> @@ -59,9 +59,9 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <h3 id="Why_bother">왜 굳이?</h3> -<p>이 시점에서, 당신은 아마도 반복문 뒤에 있는 고급 개념을 이해했을 것이지만, 당신은 아마도 "좋아, 훌륭하군, 하지만 어떻게 이게 내가 JavaScript 코드를 더 잘 짜게 도와준다는 거지?" 라고 생각할 것입니다. 앞서 말했듯이, <strong>반복문은 같은 것을 계속 그리고 계속 다시 하는 것에 모든 관련이 있는데</strong>, 이는 <strong>빠르게 반복적인 일을 완료</strong>하는 데 뛰어납니다.</p> +<p>이 시점에서, 여러분은 아마도 반복문 뒤에 있는 고급 개념을 이해했을 것이지만, 여러분은 아마도 "좋아, 훌륭하군, 하지만 어떻게 이게 내가 JavaScript 코드를 더 잘 짜게 도와준다는 거지?" 라고 생각할 것입니다. 앞서 말했듯이, <strong>반복문은 같은 것을 계속 그리고 계속 다시 하는 것에 모든 관련이 있는데</strong>, 이는 <strong>빠르게 반복적인 일을 완료</strong>하는 데 뛰어납니다.</p> -<p>종종, 코드는 반복문의 각각의 연이은 반복에서 조금 다를 것인데, 이는 당신이 비슷하지만 조금 다른 일더미를 완료할 수 있다는 것을 의미합니다; 만약 당신이 수행할 많은 다른 계산들을 가지고 있다면, 당신은 같은 것을 계속 그리고 계속 하는 것이 아니라, 각각의 다른 것을 하기를 원할 것입니다.</p> +<p>종종, 코드는 반복문의 각각의 연이은 반복에서 조금 다를 것인데, 이는 여러분이 비슷하지만 조금 다른 일더미를 완료할 수 있다는 것을 의미합니다; 만약 여러분이 수행할 많은 다른 계산들을 가지고 있다면, 여러분은 같은 것을 계속 그리고 계속 하는 것이 아니라, 각각의 다른 것을 하기를 원할 것입니다.</p> <p>왜 반복문이 그렇게 좋은 것인지를 완벽히 보여주는 예제를 봅시다. 우리가 {{htmlelement("canvas")}} 요소 위에 무작위의 원 100개를 그리고 싶다고 칩시다 (예제를 다시 실행하고, 다시 다른 무작위 집합들을 보기 위해 <em>Update</em>버튼을 누르세요):</p> @@ -164,7 +164,7 @@ ctx.fill();</pre> <h2 id="The_standard_for_loop">반복문의 표준</h2> -<p>몇몇 특정한 반복문 구조 탐구를 시작해 봅시다. 당신이 대부분의 경우에 사용하게 될, 첫번째는 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for">for</a> 반복문입니다. 이것은 다음의 문법(syntax)을 가지고 있습니다:</p> +<p>몇몇 특정한 반복문 구조 탐구를 시작해 봅시다. 여러분이 대부분의 경우에 사용하게 될, 첫번째는 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for">for</a> 반복문입니다. 이것은 다음의 문법(syntax)을 가지고 있습니다:</p> <pre class="notranslate">for (초기화식; 종료 조건; 증감식) { // 실행할 코드 @@ -235,7 +235,7 @@ para.textContent = info;</pre> <p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}</p> <div class="note"> -<p><strong>Note</strong>: 당신은 이 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">예제를 GitHub에서</a> 또한 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">see it running live</a>).</p> +<p><strong>참고</strong>: 여러분은 이 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">예제를 GitHub에서</a> 또한 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">실제로 작동하는 모습도 볼 수 있습니다</a>).</p> </div> <p>이것은 반복문이 배열 안의 요소들에 대해 반복하고 그 각각의 요소들과 무언가를 하기 위해 쓰였다는 것을 보여줍니다 — 이것은 JavaScript에서 아주 일반적인 패턴입니다. 여기서:</p> @@ -255,11 +255,11 @@ para.textContent = info;</pre> </ol> <div class="note"> -<p><strong>Note</strong>: 우리는 조건을 <code>i <= cats.length</code>이 아니라 <code>i < cats.length</code>로 만들었는데, 이는 컴퓨터는 카운트를 1부터가 아니라 0부터 세기 때문입니다 — 우리는 <code>i</code>를 0에서 시작했고, <code>i = 4</code>까지 갔습니다 (마지막 배열 원소의 인덱스). 배열에 5개의 원소가 있으므로, <code>cats.length</code>는 5를 반환하지만, 우리는 <code>i = 5</code>까지 가고 싶지는 않습니다. 왜냐하면 이는 마지막 원소에 대해 <code>undefined</code>를 반환할 것이기 때문입니다 (5의 인덱스를 가진 배열 원소는 없습니다). 그래서, 그러므로, 우리는 <code>cats.length</code>과 같은 데까지가 아니라 (<code>i <=</code>), <code>cats.length</code>보다 1 작은 데까지 가기를 원합니다 (<code>i <</code>).</p> +<p><strong>참고</strong>: 우리는 조건을 <code>i <= cats.length</code>이 아니라 <code>i < cats.length</code>로 만들었는데, 이는 컴퓨터는 카운트를 1부터가 아니라 0부터 세기 때문입니다 — 우리는 <code>i</code>를 0에서 시작했고, <code>i = 4</code>까지 갔습니다 (마지막 배열 원소의 인덱스). 배열에 5개의 원소가 있으므로, <code>cats.length</code>는 5를 반환하지만, 우리는 <code>i = 5</code>까지 가고 싶지는 않습니다. 왜냐하면 이는 마지막 원소에 대해 <code>undefined</code>를 반환할 것이기 때문입니다 (5의 인덱스를 가진 배열 원소는 없습니다). 그래서, 그러므로, 우리는 <code>cats.length</code>과 같은 데까지가 아니라 (<code>i <=</code>), <code>cats.length</code>보다 1 작은 데까지 가기를 원합니다 (<code>i <</code>).</p> </div> <div class="note"> -<p><strong>Note</strong>: 조건에 관련된 일반적인 실수는 "보다 작거나 같다(less than or equal to)" (<code><=</code>)가 아니라 "동등(equal to)" (<code>===</code>)을 사용하는 것입니다. 만약 우리가 반복문을 <code>i = 5</code>까지 실행하기를 원했다면, 종료 조건은 <code>i <= cats.length</code>일 필요가 있었을 것입니다. 만약 우리가 그것을 <code>i === cats.length</code>에 설정했다면, 첫 반복문 반복에서 <code>i</code>는 <code>5</code>와 같지 않아서, 반복문은 즉시 멈췄을 것이기 때문에 반복문은 전혀 실행되지 않을 것입니다.</p> +<p><strong>참고</strong>: 조건에 관련된 일반적인 실수는 "보다 작거나 같다(less than or equal to)" (<code><=</code>)가 아니라 "동등(equal to)" (<code>===</code>)을 사용하는 것입니다. 만약 우리가 반복문을 <code>i = 5</code>까지 실행하기를 원했다면, 종료 조건은 <code>i <= cats.length</code>일 필요가 있었을 것입니다. 만약 우리가 그것을 <code>i === cats.length</code>에 설정했다면, 첫 반복문 반복에서 <code>i</code>는 <code>5</code>와 같지 않아서, 반복문은 즉시 멈췄을 것이기 때문에 반복문은 전혀 실행되지 않을 것입니다.</p> </div> <p>우리는 마지막으로 출력되는 문장이 잘 만들어지지 않았다는 작은 문제를 가지고 있습니다:</p> @@ -279,7 +279,7 @@ para.textContent = info;</pre> }</pre> <div class="note"> -<p><strong>Note</strong>: 당신은 이 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">예제 코드를 Github</a>에서 또한 찾아볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">see it running live</a>).</p> +<p><strong>참고</strong>: 여러분은 이 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">예제 코드를 Github</a>에서 또한 찾아볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">실제로 작동하는 모습도 볼 수 있습니다</a>).</p> </div> <div class="warning"> @@ -288,7 +288,7 @@ para.textContent = info;</pre> <h2 id="Exiting_loops_with_break">break로 반복문 종료하기</h2> -<p>만약 당신이 모든 반복이 완료되기 전에 반복문을 종료하고 싶다면, 당신은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/break">break</a>문을 사용할 수 있습니다. 우리는 이미 이것을 지난 문서에서 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">switch문</a>을 살펴볼 때 만났습니다 — 입력 표현식과 일치하는 switch문에서 case가 충족되었을 때, <code>break</code>문은 즉시 switch문을 종료하고 switch문 다음에 있는 코드로 이동합니다.</p> +<p>만약 여러분이 모든 반복이 완료되기 전에 반복문을 종료하고 싶다면, 여러분은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/break">break</a>문을 사용할 수 있습니다. 우리는 이미 이것을 지난 문서에서 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">switch문</a>을 살펴볼 때 만났습니다 — 입력 표현식과 일치하는 switch문에서 case가 충족되었을 때, <code>break</code>문은 즉시 switch문을 종료하고 switch문 다음에 있는 코드로 이동합니다.</p> <p>이것은 반복문과 같은 것입니다 — <code>break</code>문은 즉시 반복문을 종료하고 브라우저가 반복문 뒤에 있는 코드로 이동하게 합니다.</p> @@ -387,7 +387,7 @@ btn.addEventListener('click', function() { </ol> <div class="note"> -<p>Note: 당신은 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">전체 소스 코드를 GitHub에서</a> 또한 볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">see it running live</a>).</p> +<p>참고: 여러분은 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">전체 소스 코드를 GitHub에서</a> 또한 볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">실제로 작동하는 모습도 볼 수 있습니다</a>).</p> </div> <h2 id="Skipping_iterations_with_continue">Continue로 반복 건너뛰기</h2> @@ -465,12 +465,12 @@ for (let i = 1; i <= num; i++) { </ol> <div class="note"> -<p><strong>Note</strong>: 당신은 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">전체 소스 코드를 GitHub에서</a> 또한 볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">see it running live</a>).</p> +<p><strong>참고</strong>: 여러분은 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">전체 소스 코드를 GitHub에서</a> 또한 볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">실제로 작동하는 모습도 볼 수 있습니다</a>).</p> </div> <h2 id="while_and_do_..._while">while 그리고 do ... while</h2> -<p><code>for</code> 는 JavaScript에서 사용할 수 있는 유일한 유형의 반복문이 아닙니다. 실제로 많은 다른 것들이 있고, 지금 이 모든 것을 이해할 필요는 없는 반면 당신이 약간 다른 방식으로 작업에서 같은 기능을 인식할 수 있도록 다른 두 개의 구조를 살펴 볼 가치가 있습니다.</p> +<p><code>for</code> 는 JavaScript에서 사용할 수 있는 유일한 유형의 반복문이 아닙니다. 실제로 많은 다른 것들이 있고, 지금 이 모든 것을 이해할 필요는 없는 반면 여러분이 약간 다른 방식으로 작업에서 같은 기능을 인식할 수 있도록 다른 두 개의 구조를 살펴 볼 가치가 있습니다.</p> <p>먼저 <a href="/ko/docs/Web/JavaScript/Reference/Statements/while">while</a> 반복문을 살펴봅시다. 이 반복문의 구문은 다음과 같습니다:</p> @@ -500,7 +500,7 @@ while (i < cats.length) { }</pre> <div class="note"> -<p><strong>Note</strong>: 예상한대로 이것은 여전히 똑같이 동작합니다 — 여기서 한 번 봐 보세요 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">running live on GitHub</a> (또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">전체 소스 코드</a>도 보세요).</p> +<p><strong>참고</strong>: 예상한 대로 이것은 여전히 똑같이 동작합니다 — 여기서 한 번 봐 보세요 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">running live on GitHub</a> (또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">전체 소스 코드</a>도 보세요).</p> </div> <p><a href="/ko/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> 반복문은 많이 비슷하지만 while 구조에 변형을 제공합니다:</p> @@ -531,38 +531,38 @@ do { } while (i < cats.length);</pre> <div class="note"> -<p><strong>Note</strong>: 다시 말하지만, 이것은 예상한 바와 같이 똑같이 동작합니다 — 한 번 봐 보세요 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">running live on GitHub</a> (또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">전체 소스 코드</a>도 보세요).</p> +<p><strong>참고</strong>: 다시 말하지만, 이것은 예상한 바와 같이 똑같이 동작합니다 — 한 번 봐 보세요 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">running live on GitHub</a> (또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">전체 소스 코드</a>도 보세요).</p> </div> <div class="warning"> <p><strong>중요</strong>: 모든 반복문과 마찬가지로 — while과 do...while문에서, 조건이 결국 false가 되도록, 경우에 따라, 초기화식이 증가되거나 감소되게 해야만 합니다.만약 그렇지 않다면, 반복문은 영원히 계속될 것이고, 브라우저가 강제로 멈추게 하거나, 브라우저가 멈출(crash) 것입니다. 이것은 <strong>무한 루프</strong>(infinite loop)라고 불립니다.</p> </div> -<h2 id="Active_learning_Launch_countdown!">활동 학습: 카운트 다운 시작!</h2> +<h2 id="Active_learning_Launch_countdown!">직접 해보기: 카운트 다운 시작!</h2> -<p>이 연습에서, 우리는 당신이 간단한 발사 카운트다운을, 10에서 발사까지, 출력 박스에 출력하기를 원합니다. 구체적으로 말하면, 우리는 당신이 다음을 하기를 원합니다:</p> +<p>이 연습에서, 우리는 여러분이 간단한 발사 카운트다운을, 10에서 발사까지, 출력 박스에 출력하기를 원합니다. 구체적으로 말하면, 우리는 여러분이 다음을 하기를 원합니다:</p> <ul> - <li>10에서 0까지 반복하세요. 우리는 당신에게 초기화식을 제공합니다 — <code>let i = 10;</code>.</li> - <li>각 반복마다, 새로운 단락을 만들고, 우리가 <code>const output = document.querySelector('.output');</code>를 사용해 선택한, 출력 <code><div></code>에 추가하세요. 주석에, 우리는 당신에게 반복문 내부 어딘가에서 사용될 필요가 있는 세 줄의 코드를 제공합니다. + <li>10에서 0까지 반복하세요. 우리는 여러분에게 초기화식을 제공합니다 — <code>let i = 10;</code>.</li> + <li>각 반복마다, 새로운 단락을 만들고, 우리가 <code>const output = document.querySelector('.output');</code>를 사용해 선택한, 출력 <code><div></code>에 추가하세요. 주석에, 우리는 여러분에게 반복문 내부 어딘가에서 사용될 필요가 있는 세 줄의 코드를 제공합니다. <ul> <li><code>const para = document.createElement('p');</code> — 새로운 단락을 만듭니다.</li> <li><code>output.appendChild(para);</code> — 단락을 출력 <code><div></code>에 추가합니다.</li> - <li><code>para.textContent =</code> — 등호 기호 이후에, 우항(right-hand side)에 당신이 입력한 것과 같은 텍스트를 단락 내부에 만듭니다.</li> + <li><code>para.textContent =</code> — 등호 기호 이후에, 우항(right-hand side)에 여러분이 입력한 것과 같은 텍스트를 단락 내부에 만듭니다.</li> </ul> </li> - <li>다른 반복 숫자는 그 반복에 대한 단락에 입력될 다른 텍스트를 요구합니다 (당신은 조건문과 다수의 <code>para.textContent =</code> 줄이 필요할 것입니다): + <li>다른 반복 숫자는 그 반복에 대한 단락에 입력될 다른 텍스트를 요구합니다 (여러분은 조건문과 다수의 <code>para.textContent =</code> 줄이 필요할 것입니다): <ul> <li>만약 숫자가 10이면, 단락에 "Countdown 10"을 출력하세요.</li> <li>만약 숫자가 0이면, "Blast off!"를 단락에 출력하세요.</li> <li>다른 숫자에 대해서는, 단지 단락에 그 숫자를 출력하세요.</li> </ul> </li> - <li>반복자를 포함하는 것을 잊지 마세요! 그러나, 이 예제에서는 우리는 각 반복마다 카운트를 위가 아니라 아래로 셉니다. 그러니 당신은 <code>i++</code>를 원하지 <strong>않을</strong> 것입니다 — 어떻게 아래로 반복하실 건가요?</li> + <li>반복자를 포함하는 것을 잊지 마세요! 그러나, 이 예제에서는 우리는 각 반복마다 카운트를 위가 아니라 아래로 셉니다. 그러니 여러분은 <code>i++</code>를 원하지 <strong>않을</strong> 것입니다 — 어떻게 아래로 반복하실 건가요?</li> </ul> <div class="note"> -<p><strong>Note</strong>: 만약 당신이 반복문을 타이핑하기 시작했다면 (예를 들어 (while(i>=0)), 아직 종료 조건을 입력하지 않았기 때문에 브라우저는 멈출(stuck) 지도 모릅니다. 그러니 조심하세요. 이 문제에 대처하기 위해 코드를 주석에 작성하고, 완성한 이후에 주석을 제거할 수 있습니다.</p> +<p><strong>참고</strong>: 만약 여러분이 반복문을 타이핑하기 시작했다면 (예를 들어 (while(i>=0)), 아직 종료 조건을 입력하지 않았기 때문에 브라우저는 멈출(stuck) 지도 모릅니다. 그러니 조심하세요. 이 문제에 대처하기 위해 코드를 주석에 작성하고, 완성한 이후에 주석을 제거할 수 있습니다.</p> </div> <p>만약 실수했다면, 언제나 예제를 "Reset" 버튼으로 리셋할 수 있습니다. 만약 정말로 막혔다면, 답을 보기 위해 "Show solution"을 누르세요.</p> @@ -710,14 +710,14 @@ textarea.onkeyup = function(){ <p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p> -<h2 id="Active_learning_Filling_in_a_guest_list">활동 학습: 손님 목록 작성</h2> +<h2 id="Active_learning_Filling_in_a_guest_list">직접 해보기: 손님 목록 작성</h2> -<p>이 연습에서, 우리는 당신이 배열에 저장된 이름 목록을 취하고 그것을 손님 명단에 넣기를 원합니다. 하지만 이것은 쉽지 않습니다 — Phil과 Lola는 탐욕스럽고 무례하고, 항상 모든 음식을 먹기 때문에 우리는 Phil과 Lola를 목록에 넣고 싶지 않습니다. 우리는 두 목록을 가지고 있는데, 하나는 승인할 손님들을 위한 것이고 하나는 거절할 손님들을 위한 것입니다.</p> +<p>이 연습에서, 우리는 여러분이 배열에 저장된 이름 목록을 취하고 그것을 손님 명단에 넣기를 원합니다. 하지만 이것은 쉽지 않습니다 — Phil과 Lola는 탐욕스럽고 무례하고, 항상 모든 음식을 먹기 때문에 우리는 Phil과 Lola를 목록에 넣고 싶지 않습니다. 우리는 두 목록을 가지고 있는데, 하나는 승인할 손님들을 위한 것이고 하나는 거절할 손님들을 위한 것입니다.</p> -<p>구체적으로, 우리는 당신이 다음을 하기를 원합니다:</p> +<p>구체적으로, 우리는 여러분이 다음을 하기를 원합니다:</p> <ul> - <li>0부터 <code>people</code> 배열의 길이까지 반복하는 반복문을 작성하세요. 당신은 초기화식 <code>let i = 0;</code>에서부터 시작할 필요가 있을 것이지만, 당신은 무슨 조건을 필요로 하나요?</li> + <li>0부터 <code>people</code> 배열의 길이까지 반복하는 반복문을 작성하세요. 여러분은 초기화식 <code>let i = 0;</code>에서부터 시작할 필요가 있을 것이지만, 여러분은 무슨 조건을 필요로 하나요?</li> <li>각 반복문 반복 동안에, 조건문을 사용하여 현재 배열 원소가 "Phil" 또는 "Lola"와 동일한지 검사하세요: <ul> <li>만약 그렇다면, 배열 원소를 <code>refused</code> 단락의 <code>textContent</code>의 끝에 콤마와 공백을 붙여 연결하세요.</li> @@ -726,7 +726,7 @@ textarea.onkeyup = function(){ </li> </ul> -<p>우리는 이미 당신에게 다음을 제공합니다:</p> +<p>우리는 이미 여러분에게 다음을 제공했습니다:</p> <ul> <li><code>let i = 0;</code> — 초기화식.</li> @@ -734,7 +734,7 @@ textarea.onkeyup = function(){ <li><code>admitted.textContent +=</code> — 무언가를 <code>admitted.textContent</code>의 끝에 연결할 줄의 시작.</li> </ul> -<p>추가 보너스 질문 — 위의 일을 성공적으로 완료한 이후에, 당신은 콤마로 나눠진 두 이름 목록을 가지고 있을 것이지만, 그것들은 단정치 못합니다 — 각 목록의 끝에 콤마가 있을 것입니다. 각 경우에 어떻게 마지막 콤마를 잘라낸 줄을 작성하고, 끝에 마침표를 추가할 지 알아내실 수 있으신가요? 도움을 위해 <a href="/ko/docs/Learn/JavaScript/First_steps/Useful_string_methods">유용한 문자열 메서드</a> 문서를 한 번 봐 보세요.</p> +<p>추가 보너스 질문 — 위의 일을 성공적으로 완료한 이후에, 여러분은 콤마로 나눠진 두 이름 목록을 가지고 있을 것이지만, 그것들은 단정치 못합니다 — 각 목록의 끝에 콤마가 있을 것입니다. 각 경우에 어떻게 마지막 콤마를 잘라낸 줄을 작성하고, 끝에 마침표를 추가할 지 알아내실 수 있으신가요? 도움을 위해 <a href="/ko/docs/Learn/JavaScript/First_steps/Useful_string_methods">유용한 문자열 메서드</a> 문서를 한 번 봐 보세요.</p> <p>만약 실수했다면, 언제나 예제를 "Reset" 버튼으로 리셋할 수 있습니다. 만약 정말로 막혔다면, 답을 보기 위해 "Show solution"을 누르세요.</p> @@ -888,7 +888,7 @@ textarea.onkeyup = function(){ <h2 id="Which_loop_type_should_you_use">어떤 반복문을 써야 할까?</h2> -<p>기본적 사용에 대해, <code>for</code>, <code>while</code>, 그리고 <code>do...while</code> 반복문들은 대체로 교체할 수 있습니다. 이것들은 같은 문제를 풀기 위해 모두 쓰여질 수 있고, 어떤 것을 사용할지는 주로 당신의 개인적인 선호에 달려 있습니다 — 어떤 것이 가장 기억하기 쉽거나 직관적이라고 생각하시나요. 이것들을 다시 살펴봅시다.</p> +<p>기본적 사용에 대해, <code>for</code>, <code>while</code>, 그리고 <code>do...while</code> 반복문들은 대체로 교체할 수 있습니다. 이것들은 같은 문제를 풀기 위해 모두 쓰여질 수 있고, 어떤 것을 사용할지는 주로 여러분의 개인적인 선호에 달려 있습니다 — 어떤 것이 가장 기억하기 쉽거나 직관적이라고 생각하시나요. 이것들을 다시 살펴봅시다.</p> <p>첫째로 <code>for</code>:</p> @@ -914,27 +914,27 @@ do { 증감식 } while (종료 조건)</pre> -<p>우리는, 적어도 시작하는 데, <code>for</code>를 추천합니다. 왜냐하면 이것은 아마도 모든 것을 기억하기 가장 쉽기 때문입니다 — 초기화식, 조건, 증감식 모두가 괄호 안에 깔끔하게 들어가야만 하므로, 이것들이 어디 있는지 보고 당신이 이것들을 놓치지 않았다는 것을 확인하기 쉽습니다.</p> +<p>우리는, 적어도 시작하는 데, <code>for</code>를 추천합니다. 왜냐하면 이것은 아마도 모든 것을 기억하기 가장 쉽기 때문입니다 — 초기화식, 조건, 증감식 모두가 괄호 안에 깔끔하게 들어가야만 하므로, 이것들이 어디 있는지 보고 여러분이 이것들을 놓치지 않았다는 것을 확인하기 쉽습니다.</p> <div class="note"> -<p><strong>Note</strong>: 다른 반복문 형태/기능 또한 있는데, 이는 고급/특수한 상황에서 유용하고 이 글의 범위 너머에 있습니다. 만약 반복문을 더 많이 배우고 싶다면, 고급 <a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration">반복문과 반복 가이드</a>를 읽어 보세요.</p> +<p><strong>참고</strong>: 다른 반복문 형태/기능 또한 있는데, 이는 고급/특수한 상황에서 유용하고 이 글의 범위 너머에 있습니다. 만약 반복문을 더 많이 배우고 싶다면, 고급 <a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration">반복문과 반복 가이드</a>를 읽어 보세요.</p> </div> -<h2 id="Test_your_skills!">당신의 실력을 평가해 보세요!</h2> +<h2 id="Test_your_skills!">실력을 평가해 보세요!</h2> <p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Loops">실력을 평가해 보세요: 반복문</a>.</p> -<h2 id="결론">결론</h2> +<h2 id="conclusion">결론</h2> -<p>이 문서는 당신에게 JavaScript에서의 반복문에 대한 기본 개념과 이용 가능한 다른 옵션들을 드러내 보였습니다. 당신은 이제 왜 반복문이 반복적인 코드를 다루는 데 좋은 메커니즘인지 확실히 이해하고, 당신만의 예제에서 그것들을 사용하고 싶어서 몸이 근질거려야만 합니다!</p> +<p>이 문서는 여러분에게 JavaScript에서의 반복문에 대한 기본 개념과 이용 가능한 다른 옵션들을 드러내 보였습니다. 여러분은 이제 왜 반복문이 반복적인 코드를 다루는 데 좋은 메커니즘인지 확실히 이해하고, 여러분만의 예제에서 그것들을 사용하고 싶어서 몸이 근질거리실 것입니다!</p> -<p>만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="/en-US/docs/Learn#contact_us">contact us</a>에서 도움을 요청해 보세요.</p> +<p>만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="/en-US/docs/Learn#contact_us">문의하기</a>에서 도움을 요청해 보세요.</p> -<h2 id="See_also">더 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li><a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration">반복문과 반복 자세히 알아보기</a></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/for">for 문 레퍼런스</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/for">for 문 참고서</a></li> <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/while">while</a> 과 <a href="/ko/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> 레퍼런스</li> <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/break">break</a> 과 <a href="/ko/docs/Web/JavaScript/Reference/Statements/continue">continue</a> 레퍼런스</li> <li> @@ -944,13 +944,13 @@ do { <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">이 모듈에서는</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단 내리기 — 조건문</a></li> + <li><strong>반복문</strong></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li> diff --git a/files/ko/learn/javascript/building_blocks/return_values/index.html b/files/ko/learn/javascript/building_blocks/return_values/index.html index b0896610c5..25bc6c7dbb 100644 --- a/files/ko/learn/javascript/building_blocks/return_values/index.html +++ b/files/ko/learn/javascript/building_blocks/return_values/index.html @@ -24,7 +24,7 @@ tags: <tr> <th scope="row">필요한 사전 지식:</th> <td> - 기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a>. + 기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a>. </td> </tr> <tr> @@ -103,7 +103,7 @@ console.log(newString); // Should print "The weather is warm" <p>함수 호출들이 먼저 실행되고, 줄 자체가 그리고서 실행되기 전에 함수의 반환 값이 함수 호출을 대신합니다.</p> -<h2 id="Active_learning_our_own_return_value_function">Active learning: 우리만의 반환 값 함수</h2> +<h2 id="Active_learning_our_own_return_value_function">직접 해보기: 우리만의 반환 값 함수</h2> <p>반환 값을 포함하는 우리만의 함수를 작성해 봅시다.</p> @@ -151,7 +151,7 @@ function factorial(num) { </ol> <div class="note"> -<p><strong>Note</strong>: 만약 이 예제를 작업하는 데 어려움이 있다면, 자유롭게 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">GitHub에 있는 완성된 버전</a>과 비교해 보거나 (<a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">실제로 작동하는 모습</a>도 보세요), 우리에게 도움을 요청해 보세요.</p> +<p><strong>참고</strong>: 만약 이 예제를 작업하는 데 어려움이 있다면, 자유롭게 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">GitHub에 있는 완성된 버전</a>과 비교해 보거나 (<a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">실제로 작동하는 모습</a>도 보세요), 우리에게 도움을 요청해 보세요.</p> </div> <h2 id="Now_its_your_turn!">이제 여러분의 차례입니다!</h2> @@ -173,9 +173,9 @@ function factorial(num) { <p>이제 끝났습니다 — 함수는 즐겁고, 아주 유용하고, 그리고 비록 함수의 문법과 기능성에 대해 이야기할 것들이 많지만, 그것들은 꽤 이해하기 쉽습니다.</p> -<p>만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="/ko/docs/Learn#contact_us">contact us</a>에서 도움을 요청해 보세요.</p> +<p>만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="/ko/docs/Learn#contact_us">문의하기</a>에서 도움을 요청해 보세요.</p> -<h2 id="See_also">더 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수 고급</a> — 더욱 고급의 함수에 관련된 정보를 다루는 자세한 가이드</li> @@ -184,13 +184,13 @@ function factorial(num) { <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">이 모듈에서는</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단 내리기 — 조건문</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></li> <li><strong>함수 반환 값</strong></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li> diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.html b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.html index 064f234689..b1a6851605 100644 --- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.html +++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.html @@ -9,30 +9,30 @@ tags: --- <div>{{learnsidebar}}</div> -<p>이 실력 평가의 목적은 당신이 <a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a> 문서를 잘 이해했는지 가늠하기 위함입니다.</p>. +<p>이 실력 평가의 목적은 여러분이 <a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a> 문서를 잘 이해했는지 평가하기 위함입니다.</p>. <div class="notecard note"> -<p><strong>Note</strong>: 당신은 정답을 아래의 인터랙티브 에디터에서 시도해 볼 수 있지만, 과제를 수행하기 위해 코드를 다운로드해서 다음과 같은 온라인 툴을 이용하는 것 또한 도움이 될 지도 모릅니다: <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a><br> +<p><strong>참고</strong>: 여러분은 정답을 아래의 인터랙티브 에디터에서 시도해 볼 수 있지만, 과제를 수행하기 위해 코드를 다운로드해서 다음과 같은 온라인 툴을 이용하는 것 또한 도움이 될 지도 모릅니다: <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a><br> <br> 정말로 막히면, 도움을 요청해 보세요 — 이 페이지 아래의 {{anch("Assessment or further help")}} 섹션을 확인해 보세요.</p> </div> <div class="notecard note"> -<p><strong>Note</strong>: 아래의 예제들에서, 만약 당신의 코드에 오류가 있다면, 답을 알아내려고 시도하는 것을 돕기 위해 페이지의 결과 패널에 (혹은 다운로드 버전의 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.</p> +<p><strong>참고</strong>: 아래의 예제들에서, 만약 여러분의 코드에 오류가 있다면, 답을 알아내려고 시도하는 것을 돕기 위해 페이지의 결과 패널에 (혹은 다운로드 버전의 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.</p> </div> <h2 id="Conditionals_1">조건문 1</h2> -<p>이 과제에서는 당신에게 두 변수가 주어집니다:</p> +<p>이 과제에서는 여러분에게 두 변수가 주어집니다:</p> <ul> <li><code>season</code> — 현재 계절이 무엇인지를 말하는 문자열을 포함합니다.</li> <li><code>response</code> — 초기화되지 않은 상태지만, 나중에 결과 패널에 출력될 대답을 저장하기 위해 쓰입니다.</li> </ul> -<p>우리는 당신이 <code>season</code>이 문자열 "summer"를 포함하는지를 확인하는 조건문을 작성하고, 만약 그렇다면 <code>response</code>에 계절에 대한 알맞은 메시지를 유저에게 주는 문자열을 할당하기를 원합니다. 만약 아니라면, <code>response</code>에 유저에게 우리는 무슨 계절인지 모른다고 말하는 일반적인 문자열을 할당해야만 합니다.</p> +<p>우리는 여러분이 <code>season</code>이 문자열 "summer"를 포함하는지를 확인하는 조건문을 작성하고, 만약 그렇다면 <code>response</code>에 계절에 대한 알맞은 메시지를 유저에게 주는 문자열을 할당하기를 원합니다. 만약 아니라면, <code>response</code>에 유저에게 우리는 무슨 계절인지 모른다고 말하는 일반적인 문자열을 할당해야만 합니다.</p> -<p>마치기 위해서, 당신은 그리고서 <code>season</code>가 문자열 "winter"를 포함하는지를 확인하는 다른 테스트를 추가하고, 다시 <code>response</code>에 적절한 문자열을 할당해야만 합니다.</p> +<p>마치기 위해서, 여러분은 그리고서 <code>season</code>가 문자열 "winter"를 포함하는지를 확인하는 다른 테스트를 추가하고, 다시 <code>response</code>에 적절한 문자열을 할당해야만 합니다.</p> <p>완성된 예제를 만들기 위해 아래의 라이브 코드를 업데이트해 보세요:</p> @@ -44,17 +44,17 @@ tags: <h2 id="Conditionals_2">조건문 2</h2> -<p>이 과제에 대해서 당신에게는 3개의 변수가 주어집니다:</p> +<p>이 과제에 대해서 여러분에게는 3개의 변수가 주어집니다:</p> <ul> <li><code>machineActive</code> — 대답 기계가 켜졌는지 꺼졌는지에 대한 지표를 포함합니다 (<code>true</code>/<code>false</code>)</li> - <li><code>score</code> — 가상 게임에서의 당신의 점수를 포함합니다. 이 점수는 대답 기계에 넣어지는데, 이는 당신이 얼마나 잘 했는지를 나타내는 대답을 제공합니다.</li> + <li><code>score</code> — 가상 게임에서의 여러분의 점수를 포함합니다. 이 점수는 대답 기계에 넣어지는데, 이는 여러분이 얼마나 잘 했는지를 나타내는 대답을 제공합니다.</li> <li><code>response</code> — 초기화되지 않은 상태지만, 나중에 결과 패널에 출력될 대답을 저장하기 위해 쓰입니다./li> </ul> -<p>당신은 기계가 켜졌는지 확인하고 <code>response</code> 변수에 메시지를 넣는 <code>if...else</code> 구조를 만들 필요가 있습니다. 만약 기계가 켜지지 않았다면, 유저에게 기계를 작동시키라고 말하세요.</p> +<p>여러분은 기계가 켜졌는지 확인하고 <code>response</code> 변수에 메시지를 넣는 <code>if...else</code> 구조를 만들 필요가 있습니다. 만약 기계가 켜지지 않았다면, 유저에게 기계를 작동시키라고 말하세요.</p> -<p>만약 기계가 켜져 있다면 — 첫번째 (<code>if...else</code>문) 내부에, 당신은 점수 값이 무엇인지에 따라 <code>response</code>에 적절한 메시지를 넣는 <code>if...else if...else</code>를 중첩할 필요가 있습니다. 다른 조건 테스트 (그리고 결과 대답)은 다음과 같습니다:</p> +<p>만약 기계가 켜져 있다면 — 첫번째 (<code>if...else</code>문) 내부에, 여러분은 점수 값이 무엇인지에 따라 <code>response</code>에 적절한 메시지를 넣는 <code>if...else if...else</code>를 중첩할 필요가 있습니다. 다른 조건 테스트 (그리고 결과 대답)은 다음과 같습니다:</p> <ul> <li>0보다 작거나 100보다 큰 점수 — "이것은 가능하지 않습니다, 오류가 발생했습니다."</li> @@ -75,7 +75,7 @@ tags: <h2 id="Conditionals_3">조건문 3</h2> -<p>이 과제에서 당신은 두번째 과제에서 작성했던 코드를 가져와서, 안쪽의 <code>if...else if...else</code>를 <code>switch</code> 문으로 대신 재작성할 필요가 있습니다.</p> +<p>이 과제에서 여러분은 두번째 과제에서 작성했던 코드를 가져와서, 안쪽의 <code>if...else if...else</code>를 <code>switch</code> 문으로 대신 재작성할 필요가 있습니다.</p> <p>완성된 예제를 만들기 위해 아래의 라이브 코드를 업데이트해 보세요:</p> @@ -87,7 +87,7 @@ tags: <h2 id="Conditionals_4">조건문 4</h2> -<p>마지막 과제에 대해서 당신에게는 4개의 변수가 주어집니다:</p> +<p>마지막 과제에 대해서 여러분에게는 4개의 변수가 주어집니다:</p> <ul> <li><code>machineActive</code> — 로그인 기계가 켜졌는지 꺼졌는지에 대한 지표를 포함합니다 (<code>true</code>/<code>false</code>).</li> @@ -96,9 +96,9 @@ tags: <li><code>pwdResult</code> — 초기화되지 않은 상태지만, 유저에게 로그인 시도가 성공적이였는지를 알게 하는, 나중에 결과 패널에 출력될 대답을 저장하기 위해 쓰입니다.</li> </ul> -<p>우리는 당신이 기계가 켜졌는지를 확인하고, 유저에게 기계가 켜졌는지 꺼졌는지를 말하는 <code>machineResult</code> 변수에 메시지를 넣는 <code>if...else</code> 구조를 만들기를 원합니다.</p> +<p>우리는 여러분이 기계가 켜졌는지를 확인하고, 유저에게 기계가 켜졌는지 꺼졌는지를 말하는 <code>machineResult</code> 변수에 메시지를 넣는 <code>if...else</code> 구조를 만들기를 원합니다.</p> -<p>만약 기계가 켜져 있으면, 우리는 또한 <code>pwd</code>이 <code>cheese</code>와 동일한지 확인하는 두번째 조건문을 원합니다. 만약 그렇다면, 그것은 <code>pwdResult</code>에 유저에게 성공적으로 로그인되었다고 말하는 문자열을 할당해야만 합니다. 만약 그렇지 않다면, <code>pwdResult</code>에 유저에게 로그인 시도가 성공적이지 않았다고 말하는 다른 문자열을 할당해야만 합니다. <code>if ... else</code> 구조가 아닌 무언가를 사용해서, 우리는 당신이 이것을 한 줄에서 하기를 원합니다.</p> +<p>만약 기계가 켜져 있으면, 우리는 또한 <code>pwd</code>이 <code>cheese</code>와 동일한지 확인하는 두번째 조건문을 원합니다. 만약 그렇다면, 그것은 <code>pwdResult</code>에 유저에게 성공적으로 로그인되었다고 말하는 문자열을 할당해야만 합니다. 만약 그렇지 않다면, <code>pwdResult</code>에 유저에게 로그인 시도가 성공적이지 않았다고 말하는 다른 문자열을 할당해야만 합니다. <code>if ... else</code> 구조가 아닌 무언가를 사용해서, 우리는 여러분이 이것을 한 줄에서 하기를 원합니다.</p> <p>완성된 예제를 만들기 위해 아래의 라이브 코드를 업데이트해 보세요:</p> @@ -110,18 +110,18 @@ tags: <h2 id="Assessment_or_further_help">평가 혹은 추가적인 도움</h2> -<p>당신은 이 예제들을 위의 인터랙티브 에디터에서 실습할 수 있습니다.</p> +<p>여러분은 이 예제들을 위의 인터랙티브 에디터에서 실습할 수 있습니다.</p> -<p>만약 당신의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> +<p>만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> <ol> - <li>당신의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a> 같은 온라인에서 공유 가능한 에디터에 올리세요. 당신은 직접 코드를 작성하거나, 위 섹션들에 링크된 시작점 파일을 사용할 수 있습니다.</li> - <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 당신의 글은 다음을 포함해야만 합니다: + <li>여러분의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a> 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 직접 코드를 작성하거나, 위 섹션들에 링크된 시작점 파일을 사용할 수 있습니다.</li> + <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다: <ul> <li>"조건문 1 실력 평가에 대한 평가 원함"과 같은 서술적인 제목.</li> - <li>당신이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명, 예를 들자면, 만약 당신이 막혀서 도움이 필요하거나, 평가를 원하거나.</li> - <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 당신이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 실천입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> - <li>우리가 당신이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> + <li>여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.</li> + <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> + <li>우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> </ul> </li> </ol> diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.html b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.html index ddf78af1cf..96ab0e6119 100644 --- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.html +++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.html @@ -10,27 +10,27 @@ tags: --- <div>{{learnsidebar}}</div> -<p>이 실력 테스트의 목적은 당신이 우리의 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a> 문서를 이해했는지 평가하기 위함입니다.</p> +<p>이 실력 테스트의 목적은 여러분이 우리의 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a> 문서를 이해했는지 평가하기 위함입니다.</p> <div class="notecard note"> -<p><strong>Note</strong>: 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.<br> +<p><strong>참고</strong>: 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.<br> <br> 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 {{anch("Assessment or further help")}} 섹션을 보세요.</p> </div> <div class="notecard note"> -<p><strong>Note</strong>: 아래의 예제들에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.</p> +<p><strong>참고</strong>: 아래의 예제들에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.</p> </div> <h2 id="DOM_manipulation_considered_useful">DOM 조작: 유용하다고 생각됨</h2> -<p>아래의 몇몇 문제들은 당신에게 문제 해결을 위해서 몇몇 <a href="/ko/docs/Glossary/DOM">DOM</a> 조작 코드를 작성하기를 요구합니다 — 새로운 HTML 요소 생성하기, 특정한 문자열 값과 동일한 텍스트 콘텐츠 설정하기, 그리고 페이지에 존재하는 요소 내부에 중첩하기와 같은 — 모두 JavaScript를 통해서.</p> +<p>아래의 몇몇 문제들은 여러분에게 문제 해결을 위해서 몇몇 <a href="/ko/docs/Glossary/DOM">DOM</a> 조작 코드를 작성하기를 요구합니다 — 새로운 HTML 요소 생성하기, 특정한 문자열 값과 동일한 텍스트 콘텐츠 설정하기, 그리고 페이지에 존재하는 요소 내부에 중첩하기와 같은 — 모두 JavaScript를 통해서.</p> -<p>우리는 이것을 아직 이 코스에서 분명하게 가르치지 않았지만, 당신은 이것을 사용하는 몇몇 예제를 보았고, 우리는 당신이 문제에 성공적으로 답하기 위해 어떤 DOM API들이 필요한지에 대해 검색하기를 원합니다. 좋은 시작점은 우리의 <a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">문서 조작하기</a>(Manipulating documents) 튜토리얼입니다.</p> +<p>우리는 이것을 아직 이 코스에서 분명하게 가르치지 않았지만, 여러분은 이것을 사용하는 몇몇 예제를 보았고, 우리는 여러분이 문제에 성공적으로 답하기 위해 어떤 DOM API들이 필요한지에 대해 검색하기를 원합니다. 좋은 시작점은 우리의 <a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">문서 조작하기</a>(Manipulating documents) 튜토리얼입니다.</p> <h2 id="Events_1">이벤트 1</h2> -<p>우리의 첫 번째 이벤트에 관계된 과제에서, 당신은 버튼 (<code>btn</code>) 내부의 텍스트가 버튼이 클릭되었을 때 바뀌고, 다시 클릭되었을 때 원상복귀되게 하는 간단한 이벤트 핸들러를 생성할 필요가 있습니다.</p> +<p>우리의 첫 번째 이벤트에 관계된 과제에서, 여러분은 버튼 (<code>btn</code>) 내부의 텍스트가 버튼이 클릭되었을 때 바뀌고, 다시 클릭되었을 때 원상복귀되게 하는 간단한 이벤트 핸들러를 생성할 필요가 있습니다.</p> <p>HTML은 변경되어서는 안 됩니다; JavaScript만 변경되어야 합니다.</p> @@ -39,12 +39,12 @@ tags: <p>{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/events/events1.html", '100%', 400)}}</p> <div class="notecard note"> -<p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events1-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> +<p>여러분의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events1-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> </div> <h2 id="Events_2">이벤트 2</h2> -<p>이제 우리는 키보드 이벤트를 살펴볼 것입니다. 이 평가를 통과하기 위해서 당신은 WASD 키가 키보드에서 눌렸을 때 원을 제공된 캔버스 주위에서 움직이는 이벤트 핸들러를 만들 필요가 있습니다. 원은 <code>drawCircle()</code> 함수로 그려지는데, 이는 다음의 입력을 매개변수로 취합니다.</p> +<p>이제 우리는 키보드 이벤트를 살펴볼 것입니다. 이 평가를 통과하기 위해서 여러분은 WASD 키가 키보드에서 눌렸을 때 원을 제공된 캔버스 주위에서 움직이는 이벤트 핸들러를 만들 필요가 있습니다. 원은 <code>drawCircle()</code> 함수로 그려지는데, 이는 다음의 입력을 매개변수로 취합니다.</p> <ul> <li><code>x</code> — 원의 x 좌표.</li> @@ -57,37 +57,37 @@ tags: <p>{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/events/events2.html", '100%', 400)}}</p> <div class="notecard note"> -<p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events2-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> +<p>여러분의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events2-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> </div> <h2 id="Events_3">이벤트 3</h2> -<p>우리의 마지막 이벤트에 관련된 과제에서, 당신은 <code><button></code>들의 부모 요소 (<code><div class="button-bar"> ... </div></code>)에 이벤트 핸들러를 설정할 필요가 있는데, 이는 버튼을 클릭해서 호출했을 때 <code>button-bar</code>의 배경색을 버튼의 <code>data-color</code> 어트리뷰트 안에 포함된 색으로 설정합니다.</p> +<p>우리의 마지막 이벤트에 관련된 과제에서, 여러분은 <code><button></code>들의 부모 요소 (<code><div class="button-bar"> ... </div></code>)에 이벤트 핸들러를 설정할 필요가 있는데, 이는 버튼을 클릭해서 호출했을 때 <code>button-bar</code>의 배경색을 버튼의 <code>data-color</code> 어트리뷰트 안에 포함된 색으로 설정합니다.</p> -<p>우리는 당신이 모든 버튼을 순회하고 각 버튼에 이벤트 리스너를 주지 않고 이것을 해결하기를 원합니다.</p> +<p>우리는 여러분이 모든 버튼을 순회하고 각 버튼에 이벤트 리스너를 주지 않고 이것을 해결하기를 원합니다.</p> <p>완성된 예제를 다시 만들기 위해 아래의 코드를 업데이트해 보세요:</p> <p>{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/events/events3.html", '100%', 400)}}</p> <div class="notecard note"> -<p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events3-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> +<p>여러분의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events3-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> </div> <h2 id="Assessment_or_further_help">평가 혹은 추가적인 도움</h2> -<p>당신은 이 예제들을 위의 인터랙티브 에디터에서 연습할 수 있습니다.</p> +<p>여러분은 이 예제들을 위의 인터랙티브 에디터에서 연습할 수 있습니다.</p> -<p>만약 당신의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> +<p>만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> <ol> - <li>당신의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인에서 공유 가능한 에디터에 올리세요. 당신은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.</li> - <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 당신의 글은 다음을 포함해야만 합니다: + <li>여러분의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.</li> + <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다: <ul> <li>"이벤트 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.</li> - <li>당신이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명, 예를 들자면, 만약 당신이 막혀서 도움이 필요하거나, 평가를 원하거나.</li> - <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 당신이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 실천입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> - <li>우리가 당신이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> + <li>여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.</li> + <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> + <li>우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> </ul> </li> </ol> diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html index 5436a09449..daf3a1316f 100644 --- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html +++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html @@ -10,16 +10,16 @@ tags: --- <div>{{learnsidebar}}</div> -<p>이 실력 테스트의 목적은 여러분이 우리의 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a>, 그리고 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a> 문서를 이해했는지 평가하기 위함입니다.</p> +<p>이 실력 테스트의 목적은 여러분이 우리의 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a>, 그리고 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a> 문서를 이해했는지 평가하기 위함입니다.</p> <div class="notecard note"> -<p><strong>Note</strong>: 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.<br> +<p><strong>참고</strong>: 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.<br> <br> 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 {{anch("Assessment or further help")}} 섹션을 보세요.</p> </div> <div class="notecard note"> -<p><strong>Note</strong>: 아래의 예제에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.</p> +<p><strong>참고</strong>: 아래의 예제에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.</p> </div> <h2 id="DOM_manipulation_considered_useful">DOM 조작: 유용하다고 생각됨</h2> @@ -84,7 +84,7 @@ tags: <p>여러분은 이 예제들을 위의 인터랙티브 에디터에서 연습할 수 있습니다.</p> -<p>만약 작업을 평가받고 싶거나 막혀서 도움을 요청하기를 원한다면:</p> +<p>만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> <ol> <li>여러분의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.</li> diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.html b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.html index 4867a45ddf..5e06f03304 100644 --- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.html +++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.html @@ -9,31 +9,31 @@ tags: --- <div>{{learnsidebar}}</div> -<p>이 실력 테스트의 목적은 당신이 우리의 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a> 문서를 이해했는지를 평가하기 위함입니다.</p> +<p>이 실력 테스트의 목적은 여러분이 우리의 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a> 문서를 이해했는지를 평가하기 위함입니다.</p> <div class="notecard note"> -<p><strong>Note</strong>: 당신은 코드를 다운로드하고, <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인 툴(tool)에 넣고, 그리고서 과제에 도전해 봄으로써 아래의 과제들에 대한 해답을 시도해볼 수 있습니다. 무한 루프를 만들고 평가 페이지를 멈추게 하는 위험 때문에 우리는 이 과제들에 대해 실시간으로 수정 가능한 에디터를 제공하지 않았습니다!<br> +<p><strong>참고</strong>: 여러분은 코드를 다운로드하고, <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인 툴(tool)에 넣고, 그리고서 과제에 도전해 봄으로써 아래의 과제들에 대한 해답을 시도해볼 수 있습니다. 무한 루프를 만들고 평가 페이지를 멈추게 하는 위험 때문에 우리는 이 과제들에 대해 실시간으로 수정 가능한 에디터를 제공하지 않았습니다!<br> <br> 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 {{anch("Assessment or further help")}} 섹션을 보세요.</p> </div> <h2 id="DOM_manipulation_considered_useful">DOM 조작: 유용하다고 생각됨</h2> -<p>아래의 몇몇 문제들은 당신에게 문제 해결을 위해서 몇몇 <a href="/ko/docs/Glossary/DOM">DOM</a> 조작 코드를 작성하기를 요구합니다 — 새로운 HTML 요소 생성하기, 특정한 문자열 값과 동일한 텍스트 콘텐츠 설정하기, 그리고 페이지에 존재하는 요소 내부에 중첩하기와 같은 — 모두 JavaScript를 통해서.</p> +<p>아래의 몇몇 문제들은 여러분에게 문제 해결을 위해서 몇몇 <a href="/ko/docs/Glossary/DOM">DOM</a> 조작 코드를 작성하기를 요구합니다 — 새로운 HTML 요소 생성하기, 특정한 문자열 값과 동일한 텍스트 콘텐츠 설정하기, 그리고 페이지에 존재하는 요소 내부에 중첩하기와 같은 — 모두 JavaScript를 통해서.</p> -<p>우리는 이것을 아직 이 코스에서 분명하게 가르치지 않았지만, 당신은 이것을 사용하는 몇몇 예제를 보았고, 우리는 당신이 문제에 성공적으로 답하기 위해 어떤 DOM API들이 필요한지에 대해 검색하기를 원합니다. 좋은 시작점은 우리의 <a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">문서 조작하기</a>(Manipulating documents) 튜토리얼입니다.</p> +<p>우리는 이것을 아직 이 코스에서 분명하게 가르치지 않았지만, 여러분은 이것을 사용하는 몇몇 예제를 보았고, 우리는 여러분이 문제에 성공적으로 답하기 위해 어떤 DOM API들이 필요한지에 대해 검색하기를 원합니다. 좋은 시작점은 우리의 <a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">문서 조작하기</a>(Manipulating documents) 튜토리얼입니다.</p> <h2 id="Loops_1">반복문 1</h2> -<p>우리의 첫 반복문 과제에서 우리는 당신이 제공된 <code>myArray</code> 내의 모든 요소를 순회하고, 제공된 <code>list</code>에 추가될 리스트 아이템 (예: <code><a href="/ko/docs/Web/HTML/Element/li"><li></a></code> 요소) 내에서 화면에 그것들을 출력하는 간단한 반복문을 만듦으로써 시작하기를 원합니다.</p> +<p>우리의 첫 반복문 과제에서 우리는 여러분이 제공된 <code>myArray</code> 내의 모든 요소를 순회하고, 제공된 <code>list</code>에 추가될 리스트 아이템 (예: <code><a href="/ko/docs/Web/HTML/Element/li"><li></a></code> 요소) 내에서 화면에 그것들을 출력하는 간단한 반복문을 만듦으로써 시작하기를 원합니다.</p> <div class="notecard note"> -<p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops1-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> +<p>여러분의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops1-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> </div> <h2 id="Loops_2">반복문 2</h2> -<p>이 다음 과제에서, 우리는 당신이, 이름이 주어지면 이름과 전화번호 (<code>phonebook</code>)를 포함하고 있는 객체 배열을 탐색하고, 만약 그 이름을 찾으면, 이름과 전화번호를 단락 (<code>para</code>)에 출력하고 그리고서 반복문이 다 실행되기 전에 반복문을 빠져나오는 간단한 프로그램을 작성하기를 원합니다.</p> +<p>이 다음 과제에서, 우리는 여러분이, 이름이 주어지면 이름과 전화번호 (<code>phonebook</code>)를 포함하고 있는 객체 배열을 탐색하고, 만약 그 이름을 찾으면, 이름과 전화번호를 단락 (<code>para</code>)에 출력하고 그리고서 반복문이 다 실행되기 전에 반복문을 빠져나오는 간단한 프로그램을 작성하기를 원합니다.</p> <p>3개의 변수가 주어집니다:</p> @@ -43,10 +43,10 @@ tags: <li><code>para</code> — 단락에 대한 참조를 포함하고 있는데, 결과를 보이기 위해 사용될 것입니다.</li> </ul> -<p>당신은 전 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.</p> +<p>여러분은 전 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.</p> <div class="notecard note"> -<p><p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops2-download.html">이 과제의 시작점을 다운로드</a>하세요.</p></p> +<p><p>여러분의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops2-download.html">이 과제의 시작점을 다운로드</a>하세요.</p></p> </div> <h2 id="Loops_3">반복문 3</h2> @@ -59,28 +59,26 @@ tags: <li><code>isPrime()</code> — 숫자가 전달되었을 때, 만약 숫자가 소수(prime number)면, <code>true</code>를 반환하고, 아니면 <code>false</code>를 반환하는 함수.</li> </ul> -<p>당신은 숫자 2에서 500까지 뒤로 가는 반복문을 사용하고 (1은 소수에 포함되지 않습니다), 제공된 <code>isPrime()</code> 함수를 그 숫자들에서 실행할 필요가 있습니다. 소수가 아닌 각 숫자에 대해서는, 다음 반복으로 계속하세요. 소수인 각 숫자에 대해서는, 그것을 단락의 <code>textContent</code>에 몇몇 종류의 분리자(separator)에 덧붙여 추가하세요.</p> +<p>여러분은 숫자 2에서 500까지 뒤로 가는 반복문을 사용하고 (1은 소수에 포함되지 않습니다), 제공된 <code>isPrime()</code> 함수를 그 숫자들에서 실행할 필요가 있습니다. 소수가 아닌 각 숫자에 대해서는, 다음 반복으로 계속하세요. 소수인 각 숫자에 대해서는, 그것을 단락의 <code>textContent</code>에 몇몇 종류의 분리자(separator)에 덧붙여 추가하세요.</p> -<p>당신은 이전의 두 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.</p> +<p>여러분은 이전의 두 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.</p> <div class="notecard note"> -<p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops3-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> +<p>여러분의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops3-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> </div> <h2 id="Assessment_or_further_help">평가 혹은 추가적인 도움</h2> -<p>당신은 이 예제들을 위의 인터랙티브 에디터에서 연습할 수 있습니다. (역자 주: 이 문서 상단의 노트에 나와있듯이 무한 루프의 위험 때문에 다른 평가들처럼 인터랙티브 에디터가 제공되지 않았다고 안내되었기 때문에, 이 문장은 잘못 들어가 있는 듯 합니다.)</p> - -<p>만약 당신의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> +<p>만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> <ol> - <li>당신의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인에서 공유 가능한 에디터에 올리세요. 당신은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.</li> - <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 당신의 글은 다음을 포함해야만 합니다: + <li>여러분의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.</li> + <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다: <ul> <li>"반복문 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.</li> - <li>당신이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명, 예를 들자면, 만약 당신이 막혀서 도움이 필요하거나, 평가를 원하거나.</li> - <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 당신이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 실천입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> - <li>우리가 당신이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> + <li>여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.</li> + <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> + <li>우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> </ul> </li> </ol> diff --git a/files/ko/learn/javascript/objects/basics/index.html b/files/ko/learn/javascript/objects/basics/index.html index 4220f9bafc..a31c5ed163 100644 --- a/files/ko/learn/javascript/objects/basics/index.html +++ b/files/ko/learn/javascript/objects/basics/index.html @@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/Objects/Basics </tbody> </table> -<h2 id="객체_기본">객체 기본</h2> +<h2 id="Object_basics">객체 기본</h2> <p>객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합입니다. 예제를 통해서 실제 객체가 무엇인지 알아보도록 합시다.</p> @@ -46,13 +46,16 @@ translation_of: Learn/JavaScript/Objects/Basics <pre class="brush: js">var person = {};</pre> -<p>이제 JS 콘솔에 <code>person</code> 을 입력하면 다음과 같은 결과를 보게됩니다.</p> +<p>이제 브라우저의 <a href="/ko/docs/Learn/Common_questions/What_are_browser_developer_tools#the_javascript_console">JavaScript 콘솔</a> 을 열고 <code>person</code>을 입력 한 다음 <kbd>Enter</kbd>/<kbd>Return</kbd>을 누르세요. 아래 줄 중 하나와 유사한 결과가 표시됩니다.</p> -<pre class="brush: js">[object Object]</pre> +<pre class="brush: js">[object Object] +Object { } +{ } +</pre> -<p>축하합니다, 여러분은 벌써 첫 번째 객체를 생성하였습니다. 하지만 텅 빈 객체여서 우린 이걸로 뭘 할 수는 없습니다. 자, 이제 이 오브젝트를 다음과 같이 고쳐봅시다.</p> +<p>축하합니다. 방금 첫번째 객체를 만들었습니다. 잘했어요! 그러나 이것은 빈 객체이므로 실제로 많은 것들을 할 수 없습니다. 파일에서 JavaScript 객체를 다음과 같이 업데이트 해보겠습니다.</p> -<pre class="brush: js">var person = { +<pre class="brush: js">const person = { name: ['Bob', 'Smith'], age: 32, gender: 'male', @@ -66,7 +69,7 @@ translation_of: Learn/JavaScript/Objects/Basics }; </pre> -<p>저장 후 리로드 한 다음에 아래의 내용을 브라우저 개발자 도구의 JavaScript 콘솔에 입력해보세요.</p> +<p>저장하고 새로 고침 한 후 브라우저 devtools의 JavaScript 콘솔에 다음 중 일부를 입력 해보세요.</p> <pre class="brush: js">person.name person.name[0] @@ -75,7 +78,7 @@ person.interests[1] person.bio() person.greeting()</pre> -<p>자, 이제 당신은 객체에 포함된 데이터와 함수를 갖게 되었으며, 이것들을 간단하고 멋진 문법을 통해 사용할 수 있게되었습니다!</p> +<p>이제 객체 내부에 몇 가지 데이터와 기능이 있으며 이제 멋진 간단한 구문으로 액세스 할 수 있습니다!</p> <div class="note"> <p><strong>Note</strong>: 만약 여기까지 진행하는데 어려움이 있다면, 제가 만들어놓은 파일과 비교해보세요 — <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (그리고 <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">실행되는 예제도 보세요</a>). Live 버전에서는 텅빈 화면만 보이겠지만, 그게 정상입니다 — 다시, 개발자도구를 열고 객체 구조를 들여다보기 위해 위에 언급된 명령어를 입력해보세요.</p> @@ -95,7 +98,7 @@ person.greeting()</pre> <p>객체 리터럴을 사용해서 객체를 생성하는 것은 연속된 구조체나 연관된 데이터를 일정한 방법으로 변환하고자 할 때 많이 쓰이는 방법입니다. 예를 들면 서버에게 주소를 데이터베이스에 넣어달라고 요청하는 경우입니다. 각 아이템들을 하나 하나 개별 전송하는 것보다, 하나의 객체를 전송하는 것이 훨씬 효율적입니다. 또 각 아이템들을 이름으로 구분해서 사용하기 원할 때도 배열을 사용하는 것보다 훨씬 쉽습니다.</p> -<h2 id="점_표기법">점 표기법</h2> +<h2 id="Dot_notation">점 표기법</h2> <p>위에서, 우리는 객체의 프로퍼티와 메소드를 <strong>점 표기법</strong>을 통해 접근했습니다. 객체 이름(person)은 <strong>네임스페이스</strong>처럼 동작합니다. 객체내에 <strong>캡슐화되어있는</strong>것에 접근하려면 먼저 점을 입력해야합니다. 그 다음 점을 찍고 접근하고자 하는 항목을 적습니다. 간단한 프로퍼티의 이름일 수도 있을 것이고, 배열의 일부이거나 객체의 메소드를 호출할 수도 있습니다.</p> @@ -103,7 +106,7 @@ person.greeting()</pre> person.interests[1] person.bio()</pre> -<h3 id="하위_namespaces">하위 namespaces</h3> +<h3 id="Sub-namespaces">하위 namespaces</h3> <p>다른 객체를 객체 멤버의 값으로 갖는 것도 가능합니다. 예를 들면, 다음과 같은 name 멤버를 </p> @@ -133,7 +136,7 @@ name.last</pre> <p>그렇지 않으면 기존 메소드는 더 이상 동작하지 않을 것입니다.</p> -<h2 id="괄호_표기법">괄호 표기법</h2> +<h2 id="Bracket_notation">괄호 표기법</h2> <p>객체의 프로퍼티에 접근하는 다른 방법으로 괄호 표기법을 사용하는 것이 있습니다. 다음과 같이 사용하는 대신</p> @@ -145,9 +148,9 @@ person.name.first</pre> <pre class="brush: js">person['age'] person['name']['first']</pre> -<p>이런 방식은 배열 속에 있는 항목에 접근하는 방법과 매우 유사해 보이는데 실제로도 이는 기본적으로 동일한 것입니다. 한 항목을 선택하기 위해 인덱스 숫자를 이용하는 대신에 각 멤버의 값들과 연결된 이름을 이용합니다. 객체가 간혹 <strong>연관배열 (associative arrays</strong>)이라고 불리는 것이 당연합니다. 연관배열은 배열이 숫자를 값에 연결하는 것과 같은 방법으로 스트링을 값에 매핑합니다.</p> +<p>이런 방식은 배열 속에 있는 항목에 접근하는 방법과 매우 유사해 보이는데 실제로도 이는 기본적으로 동일한 것입니다. 한 항목을 선택하기 위해 인덱스 숫자를 이용하는 대신에 각 멤버의 값들과 연결된 이름을 이용합니다. 객체가 간혹 <strong>연관배열 (associative arrays</strong>)이라고 불리는 것이 당연합니다. 연관배열은 배열이 숫자를 값에 연결하는 것과 같은 방법으로 문자열을 값에 매핑합니다.</p> -<h2 id="객체_멤버_설정하기">객체 멤버 설정하기</h2> +<h2 id="Setting_object_members">객체 멤버 설정하기</h2> <p>지금까지는 객체 멤버를 단순히 가져오기만(또는 <strong>반환</strong>) 했습니다. 설정할 멤버를 간단히 명시하여(점이나 대괄호 표기법을 사용) 객체 멤버의 값을 <strong>설정</strong>(갱신)하는 것도 물론 가능합니다.</p> @@ -190,7 +193,7 @@ person[myDataName] = myDataValue;</pre> <p>점 표기법으로는 위의 예제처럼 멤버의 이름을 동적으로 사용할 수 없고, 상수 값만을 사용해야 합니다.</p> -<h2 id="this_는_무엇인가">"this" 는 무엇인가?</h2> +<h2 id="What_is_this">"this" 는 무엇인가?</h2> <p>자, 우리가 이제 보게될 메소드가 좀 이상하게 보일 수도 있을겁니다. 예제를 한번 봐주세요</p> @@ -210,30 +213,30 @@ person[myDataName] = myDataValue;</pre> } var person2 = { - name: 'Brian', + name: 'Deepti', greeting: function() { alert('Hi! I\'m ' + this.name + '.'); } }</pre> -<p>이 예제에서, 메소드의 실제 코드는 완전히 동일하지만 <code>person1.greeting()</code> 은 "Hi! I'm Chris." 를 출력합니다. 반면 <code>person2.greeting()</code> 은 "Hi! I'm Brian." 을 출력하게 됩니다. 앞서 이야기한 것처럼, <code>this</code> 은 실행중인 코드가 속해있는 객체입니다. 객체 리터럴을 직접 지정해서 사용하는 경우라면 그리 유용하지 않겠지만, 동적으로 객체를 생성하는 경우(예를 들면 생성자를 사용하는 경우)에는 매우 유용합니다. 이 부분은 추후에 더 명확하게 이해가 될 겁니다.</p> +<p>이 예제에서, 메소드의 실제 코드는 완전히 동일하지만 <code>person1.greeting()</code> 은 "Hi! I'm Chris." 를 출력합니다. 반면 <code>person2.greeting()</code> 은 "Hi! I'm Deepti." 을 출력하게 됩니다. 앞서 이야기한 것처럼, <code>this</code> 은 실행중인 코드가 속해있는 객체입니다. 객체 리터럴을 직접 지정해서 사용하는 경우라면 그리 유용하지 않겠지만, 동적으로 객체를 생성하는 경우(예를 들면 생성자를 사용하는 경우)에는 매우 유용합니다. 이 부분은 추후에 더 명확하게 이해가 될 겁니다.</p> -<h2 id="객체를_줄곧_사용해_왔습니다">객체를 줄곧 사용해 왔습니다</h2> +<h2 id="Youve_been_using_objects_all_along">객체를 줄곧 사용해 왔습니다</h2> <p>예제코드를 따라하다보니, 이쯤 되면 슬슬 "점" 표기법을 사용하는 것이 꽤 자연스럽게 느껴질 것입니다. 물론 이 코스 내내 사용했기 때문입니다! 샘플에서 사용하였던 브라우저 내장 API 나 JavaScript 객체들은 실제로 우리가 공부했던 구조와 완전히 동일한 방법으로 구현된 것들입니다. 물론 우리가 봤던 예제보다 복잡하기는 합니다.</p> -<p>자, 다음과 같이 String의 메소드를 사용했다고 가정합시다.</p> +<p>자, 다음과 같이 문자열의 메소드를 사용했다고 가정합시다.</p> <pre class="brush: js">myString.split(',');</pre> -<p><code><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> 클래스의 인스턴스가 가진 메소드를 사용하고 있습니다. 코드에서 String 을 생성할 때 마다 <code>String</code> 의 인스턴스가 만들어지고, 그렇게 만들어진 인스턴스는 당연히 공통적으로 사용할 수 있는 메소드와 프러퍼티를 가집니다.</p> +<p><code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> 클래스의 인스턴스가 가진 메소드를 사용하고 있습니다. 코드에서 문자열을 생성할 때 마다 <code>String</code> 의 인스턴스가 만들어지고, 그렇게 만들어진 인스턴스는 당연히 공통적으로 사용할 수 있는 메소드와 프러퍼티를 가집니다.</p> <p>아래와 같이 도큐먼트 오브젝트 모델(DOM)에 접근할때면,</p> <pre class="brush: js">var myDiv = document.createElement('div'); var myVideo = document.querySelector('video');</pre> -<p><code><a href="https://developer.mozilla.org/ko/docs/Web/API/Document">Document</a></code> 클래스의 인스턴스를 통해 메소드를 사용하고 있는 것입니다. 각 웹페이지가 로딩될 때, <code>Document</code> 인스턴스가 만들어지고, 전체 웹 페이지 구조와 컨텐츠 그리고 URL같은 기능들을 제공하는 <code>document</code> 가 호출됩니다. 다시 말하지만 이건 여러 공통 메소드와 프로퍼티들이 이 인스턴스를 통해 사용가능하게 됩니다.</p> +<p><code><a href="/ko/docs/Web/API/Document">Document</a></code> 클래스의 인스턴스를 통해 메소드를 사용하고 있는 것입니다. 각 웹페이지가 로딩될 때, <code>Document</code> 인스턴스가 만들어지고, 전체 웹 페이지 구조와 컨텐츠 그리고 URL같은 기능들을 제공하는 <code>document</code> 가 호출됩니다. 다시 말하지만 이건 여러 공통 메소드와 프로퍼티들이 이 인스턴스를 통해 사용가능하게 됩니다.</p> <p>우리가 계속 사용해왔던 다른 내장 객체/API(<code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code> 등등)들도 마찬가지입니다</p> @@ -247,7 +250,12 @@ var myVideo = document.querySelector('video');</pre> <p><strong>Note</strong>: 객체간 통신은 <strong>message passing</strong> 방식을 사용한다고 생각하는게 좋습니다. 한 객체가 다른 객체에게 어떤 액션을 요청해야 하는 경우, 그 객체는 다른 객체가 가지고 있는 메소드를 통해서 메세지를 보내는 것이고, 응답을 기다리는 것입니다. 그 응답은 것이 우리가 알고 있는 return 값입니다.</p> </div> -<h2 id="요약">요약</h2> +<h2 id="Test_your_skills!">실력을 시험해보세요!</h2> + +<p>본문의 끝에 도달했지만 가장 중요한 정보를 기억할 수 있나요? 계속 진행하기전에 정보들을 잘 기억하고 있는지 확인하기 위한 몇 가지 추가 테스트를 찾을 수 있습니다. <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">기술 테스트 : 객체의 기본 사항</a>을 참조하세요.</p> + + +<h2 id="Summary">요약</h2> <p>축하합니다, 첫 번째 JavaScript 객체 설명 문서를 끝까지 읽으셨습니다. 이제 여러분은 JavaScript 객체를 어떻게 활용하는지 이해하게 되었습니다. 간단한 사용자 정의 객체를 만드는 방법을 포함해서요. 또 객체는 데이터와 연관된 함수를 저장하는데 매우 유용한 구조라는 것도 알게 되었습니다. 만약 <code>person</code> 객체가 가지고 있는 모든 프로퍼티와 메소드를 따로 따로 분리된 변수와 함수로 구현하려고 한다면 그것이야 말로 비효율적이고 끔찍한 일이 될 것입니다. 변수명과 함수명들이 중복된다거나 하는 일도 비일비재 할 것입니다. 객체는 고유의 패키지에 우리의 정보를 안전하게 정보를 보호해주는 역활을 합니다.</p> @@ -255,14 +263,14 @@ var myVideo = document.querySelector('video');</pre> <p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> -<h2 id="이_모듈_에서는">이 모듈 에서는</h2> +<h2 id="In_this_module">이 모듈 에서는</h2> <ul> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics">객체 기본</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS">입문자를위한 객체 지향 JavaScript</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes">객체 프로토타입</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Inheritance">JavaScript 에서의 상속</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON">JSON 데이터와 작업</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_building_practice">객체 생성 실습</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">bouncing balls demo 에 기능들 추가하기</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/Basics">객체 기본</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS">입문자를위한 객체 지향 JavaScript</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/Object_prototypes">객체 프로토타입</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/Inheritance">JavaScript 에서의 상속</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/JSON">JSON 데이터와 작업</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/Object_building_practice">객체 생성 실습</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">bouncing balls demo 에 기능들 추가하기</a></li> </ul> diff --git a/files/ko/web/api/analysernode/analysernode/index.html b/files/ko/web/api/analysernode/analysernode/index.html new file mode 100644 index 0000000000..dbec1b677e --- /dev/null +++ b/files/ko/web/api/analysernode/analysernode/index.html @@ -0,0 +1,59 @@ +--- +title: AnalyserNode() +slug: Web/API/AnalyserNode/AnalyserNode +tags: + - API + - AnalyserNode + - Audio + - Constructor + - Media + - Reference + - Web Audio API +browser-compat: api.AnalyserNode.AnalyserNode +--- +<p>{{APIRef("'Web Audio API'")}}</p> + +<p class="summary"><a href="/ko/docs/Web/API/Web_Audio_API">Web Audio API</a>의 <strong><code>AnalyserNode()</code></strong> 생성자는 새로운 {{domxref("AnalyserNode")}} 객체 인스턴스를 생성합니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var <var>analyserNode</var> = new AnalyserNode(<var>context</var>, ?<var>options</var>);</pre> + +<h3 id="Parameters">매개변수</h3> + +<p><em>{{domxref("AudioNodeOptions")}} dictionary로부터 매개변수를 상속받습니다.</em></p> + +<dl> + <dt><em>context</em></dt> + <dd>{{domxref("AudioContext")}} 또는 {{domxref("OfflineAudioContext")}}에의 참조.</dd> + <dt><em>options</em> {{optional_inline}}</dt> + <dd> + <ul> + <li><strong><code>fftSize</code></strong>: <a href="https://en.wikipedia.org/wiki/Frequency_domain">주파수 영역</a> 분석에 대한 <a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">FFT</a>의 원하는 초기 사이즈. <br> + 기본값은 <code>2048</code>입니다.</li> + <li><strong><code>maxDecibels</code></strong>: FFT 분석에 대한 <a href="https://en.wikipedia.org/wiki/Decibel">dB</a>단위로의 원하는 초기 최대 power.<br> + 기본값은 <code>-30</code>입니다.</li> + <li><strong><code>minDecibels</code></strong>: FFT 분석에 대한 dB단위로의 원하는 초기 최소 power.<br> + 기본값은 <code>-100</code>입니다.</li> + <li><strong><code>smoothingTimeConstant</code></strong>: FFT 분석에 대한 원하는 초기 smoothing 상수. 기본값은 <code>0.8</code>입니다.</li> + </ul> + </dd> +</dl> + +<h3 id="Return_value">반환 값</h3> + +<p>새로운 {{domxref("AnalyserNode")}} 객체 인스턴스.</p> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li>{{domxref("BaseAudioContext.createAnalyser()")}}, 동등한 팩토리 메서드</li> +</ul> diff --git a/files/ko/web/api/analysernode/fftsize/index.html b/files/ko/web/api/analysernode/fftsize/index.html new file mode 100644 index 0000000000..6033ba3892 --- /dev/null +++ b/files/ko/web/api/analysernode/fftsize/index.html @@ -0,0 +1,96 @@ +--- +title: AnalyserNode.fftSize +slug: Web/API/AnalyserNode/fftSize +tags: + - API + - AnalyserNode + - Property + - Reference + - Web Audio API + - fftSize +browser-compat: api.AnalyserNode.fftSize +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p class="summary">{{domxref("AnalyserNode")}} 인터페이스의 <strong><code>fftSize</code></strong> 속성은 unsigned long 값이고 주파수 영역 데이터를 얻기 위해 <a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">고속 푸리에 변환</a>(FFT)을 수행할 때 사용될 샘플에서의 window 사이즈를 나타냅니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var <em>curValue</em> = <em>analyserNode</em>.fftSize; +<em>analyserNode</em>.fftSize = <em>newValue</em>; +</pre> + +<h3 id="Value">값</h3> + +<p>FFT의 window 사이즈를 나타내는 샘플의 수로 주어지는 unsigned 정수입니다. 값이 높을수록 주파수 영역의 자세함이 커지는 결과를 낳으나 시간 영역에서의 자세함은 떨어집니다.</p> + +<p>반드시 <math><semantics><msup><mn>2</mn><mn>5</mn></msup><annotation encoding="TeX">2^5</annotation></semantics></math>와 <math><semantics><msup><mn>2</mn><mn>15</mn></msup><annotation encoding="TeX">2^15</annotation></semantics></math> 사이의 2의 제곱이여야만 합니다. 즉 다음 중 하나여야 합니다: <code>32</code>, <code>64</code>, <code>128</code>, <code>256</code>, <code>512</code>, <code>1024</code>, <code>2048</code>, <code>4096</code>, <code>8192</code>, <code>16384</code>, 그리고 <code>32768</code>. 기본값은 <code>2048</code>입니다.</p> + +<p class="note"><strong>참고</strong>: 만약 값이 2의 제곱이 아니거나 이 명시된 범위의 바깥에 있다면, <code>IndexSizeError</code>라는 이름의 {{domxref("DOMException")}}이 발생합니다.</p> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); + + ... + +analyser.fftSize = 2048; +var bufferLength = analyser.frequencyBinCount ; +var dataArray = new Uint8Array(bufferLength); +analyser.getByteTimeDomainData(dataArray); + +// 현재 오디오 소스의 오실로스코프를 그립니다 + +function draw() { + + drawVisual = requestAnimationFrame(draw); + + analyser.getByteTimeDomainData(dataArray); + + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + + canvasCtx.beginPath(); + + var sliceWidth = WIDTH * 1.0 / bufferLength; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + + var v = dataArray[i] / 128.0; + var y = v * HEIGHT/2; + + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); + }; + + draw();</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/frequencybincount/index.html b/files/ko/web/api/analysernode/frequencybincount/index.html new file mode 100644 index 0000000000..cd23d8edda --- /dev/null +++ b/files/ko/web/api/analysernode/frequencybincount/index.html @@ -0,0 +1,82 @@ +--- +title: AnalyserNode.frequencyBinCount +slug: Web/API/AnalyserNode/frequencyBinCount +tags: + - API + - AnalyserNode + - Property + - Reference + - Web Audio API + - frequencyBinCount +browser-compat: api.AnalyserNode.frequencyBinCount +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p class="summary">{{domxref("AnalyserNode")}} 인터페이스의 <strong><code>frequencyBinCount</code></strong> 읽기 전용 속성은 {{domxref("AnalyserNode.fftSize")}} 값의 절반인 unsigned 정수입니다. 이것은 일반적으로 시각화를 위해 사용할 데이터 값의 수와 동일시됩니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var <em>arrayLength</em> = <em>analyserNode</em>.frequencyBinCount; +</pre> + +<h3 id="Value">값</h3> + +<p>{{domxref("AnalyserNode.getByteFrequencyData()")}}와 {{domxref("AnalyserNode.getFloatFrequencyData()")}}가 제공된 <code>TypedArray</code>내로 복사하는 값의 수와 동일한 unsigned 정수.</p> + +<p><a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">고속 푸리에 변환</a>이 정의된 방법에 관계된 기술적인 이유로, 이것은 언제나 {{domxref("AnalyserNode.fftSize")}} 값의 절반입니다. 그러므로, 이것은 다음 중 하나입니다: <code>16</code>, <code>32</code>, <code>64</code>, <code>128</code>, <code>256</code>, <code>512</code>, <code>1024</code>, <code>2048</code>, <code>4096</code>, <code>8192</code>, 그리고 <code>16384</code>.</p> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; + + ... + +analyser.fftSize = 256; +var bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +var dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + var barWidth = (WIDTH / bufferLength) * 2.5 - 1; + var barHeight; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + + x += barWidth; + } +}; + +draw();</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/fttaudiodata_en.svg b/files/ko/web/api/analysernode/fttaudiodata_en.svg new file mode 100644 index 0000000000..b1c40a3868 --- /dev/null +++ b/files/ko/web/api/analysernode/fttaudiodata_en.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="692.929" height="206.323"><path fill="none" stroke="#010101" d="M25.556 31.667v59.458"/><path fill="#010101" d="M19.722 32.667l5.834-16.839 5.5 16.839zm210.915 51.914l16.839 5.834-16.839 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M25.722 53.167h36.667s4.167-14.333 9-11c0 0 2.333.417 7.333 14 0 0 2.917 10.583 8 8.167 0 0 3.333-.417 6.667-14.167 0 0 3.333-11.917 8.5-7.333 0 0 2.667 1.833 6.5 13.333 0 0 4 12 8.5 7.5 0 0 3.333-2.666 6.167-13.5 0 0 3.167-12.667 9-7.667 0 0 2.292.562 5.667 13.5 0 0 4.167 13.083 9.5 7.667 0 0 2.188-1.729 5-13.5 0 0 3.25-12.667 8.5-7.667 0 0 2.938 3.25 6.667 13.667 0 0 5.021 12.333 8.833 7.667 0 0 3.812-4.646 4.667-10.561h30"/><text transform="translate(252.055 94.834)" font-family="'ArialMT'" font-size="14">t</text><text transform="translate(23.222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan></text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M25.556 90.667h205.081"/><path fill="none" stroke="#010101" d="M431.556 31.667v59.458"/><path fill="#010101" d="M425.722 32.667l5.834-16.839 5.5 16.839zm210.914 51.914l16.84 5.834-16.84 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M431.722 53.167h36.666s4.167-14.333 9-11c0 0 2.334.417 7.334 14 0 0 2.916 10.583 8 8.167 0 0 3.334-.417 6.666-14.167 0 0 3.334-11.917 8.5-7.333 0 0 2.667 1.833 6.5 13.333 0 0 4 12 8.5 7.5 0 0 3.334-2.666 6.168-13.5 0 0 3.166-12.667 9-7.667 0 0 2.291.562 5.666 13.5 0 0 4.167 13.083 9.5 7.667 0 0 2.188-1.729 5-13.5 0 0 3.25-12.667 8.5-7.667 0 0 2.938 3.25 6.667 13.667 0 0 5.021 12.333 8.833 7.667 0 0 3.812-4.646 4.667-10.561h30"/><text transform="translate(658.055 94.834)" font-family="'ArialMT'" font-size="14">t</text><text transform="translate(429.222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan></text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M431.556 90.667h205.08"/><path fill="#010101" d="M401.636 47.489l16.84 5.834-16.84 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M273.555 53.576h128.081"/><path fill="#010101" d="M347.889 148.454l-5.834 16.84-5.5-16.84z"/><path fill="#719FD0" stroke="#010101" d="M299.222 35h86v96.5h-86z"/><text transform="translate(304.223 56.823)" font-family="'ArialMT'" font-size="11">AnalyserNode</text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M341.803 118v30.454"/><text transform="translate(331.889 106.333)" font-family="'Arial-BoldMT'" font-size="11">FFT</text><path fill="none" stroke="#2C2C76" stroke-miterlimit="10" d="M321.889 86.667h41l-8 29.333h-25.333z"/><g font-family="'ArialMT'" font-size="11"><text transform="translate(484.89 131.5)">unchanged output</text><text transform="translate(302.223 176.167)">frequency data</text></g></svg>
\ No newline at end of file diff --git a/files/ko/web/api/analysernode/getbytefrequencydata/index.html b/files/ko/web/api/analysernode/getbytefrequencydata/index.html new file mode 100644 index 0000000000..3d85f75ca5 --- /dev/null +++ b/files/ko/web/api/analysernode/getbytefrequencydata/index.html @@ -0,0 +1,102 @@ +--- +title: AnalyserNode.getByteFrequencyData() +slug: Web/API/AnalyserNode/getByteFrequencyData +tags: + - API + - AnalyserNode + - Method + - Reference + - Web Audio API +browser-compat: api.AnalyserNode.getByteFrequencyData +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p>{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>getByteFrequencyData()</code></strong> 메서드는 전달된 {{domxref("Uint8Array")}} (unsigned byte array) 내로 현재 주파수 데이터를 복사합니다.</p> + +<p>주파수 데이터는 0에서 255 스케일의 정수로 구성되어 있습니다.</p> + +<p>배열 내의 각 원소는 특정한 주파수에 대한 데시벨 값을 나타냅니다. 주파수들은 0에서 샘플 레이트의 1/2까지 선형적으로 퍼져 있습니다. 예를 들자면, <code>48000</code> 샘플 레이트에 대해서, 배열의 마지막 원소는 <code>24000</code> Hz에 대한 데시벨 값을 나타냅니다.</p> + +<p>만약 배열이 {{domxref("AnalyserNode.frequencyBinCount")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var audioCtx = new AudioContext(); +var analyser = audioCtx.createAnalyser(); +var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array는 frequencyBinCount와 같은 길이여야만 합니다 + +void <em>analyser</em>.getByteFrequencyData(dataArray); // getByteFrequencyData()로부터 반환된 데이터로 Uint8Array를 채웁니다 +</pre> + +<h3 id="Parameters">매개변수</h3> + +<dl> + <dt><code>array</code></dt> + <dd>주파수 영역 데이터가 복사될 {{domxref("Uint8Array")}}. 소리가 없는 모든 샘플에 대해서, 값은 <code>-<a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>입니다.<br> + 만약 배열이 {{domxref("AnalyserNode.frequencyBinCount")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</dd> +</dl> + +<h3 id="Return_value">반환 값</h3> + +<p>없음.</p> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); + + ... + +analyser.fftSize = 256; +var bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +var dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + var barWidth = (WIDTH / bufferLength) * 2.5; + var barHeight; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + + x += barWidth + 1; + } +}; + +draw();</pre> + +<h2 id="Parameters_2">매개변수</h2> + +<dl> + <dt>array</dt> + <dd>주파수 영역 데이터가 복사될 {{domxref("Uint8Array")}}.</dd> +</dl> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/getbytetimedomaindata/index.html b/files/ko/web/api/analysernode/getbytetimedomaindata/index.html new file mode 100644 index 0000000000..58c38f1288 --- /dev/null +++ b/files/ko/web/api/analysernode/getbytetimedomaindata/index.html @@ -0,0 +1,98 @@ +--- +title: AnalyserNode.getByteTimeDomainData() +slug: Web/API/AnalyserNode/getByteTimeDomainData +tags: + - API + - AnalyserNode + - Method + - Reference + - Web Audio API +browser-compat: api.AnalyserNode.getByteTimeDomainData +--- +<p>{{ APIRef("Mountain View APIRef Project") }}</p> + +<p>{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>getByteTimeDomainData()</code></strong> 메서드는 전달된 {{domxref("Uint8Array")}} (unsigned byte array) 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</p> + +<p>만약 배열이 {{domxref("AnalyserNode.fftSize")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">const audioCtx = new AudioContext(); +const analyser = audioCtx.createAnalyser(); +const dataArray = new Uint8Array(analyser.fftSize); // Uint8Array는 fftSize와 같은 길이여야만 합니다 +analyser.getByteTimeDomainData(dataArray); // getByteTimeDomainData()로부터 반환된 데이터로 Uint8Array를 채웁니다 +</pre> + +<h3 id="Parameters">매개변수</h3> + +<dl> + <dt><code>array</code></dt> + <dd>시간 영역 데이터가 복사될 {{domxref("Uint8Array")}}.<br> + 만약 배열이 {{domxref("AnalyserNode.fftSize")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</dd> +</dl> + +<h3 id="Return_value">반환 값</h3> + +<p><strong><code>void</code></strong> | 없음</p> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); + + ... + +analyser.fftSize = 2048; +const bufferLength = analyser.fftSize; +const dataArray = new Uint8Array(bufferLength); +analyser.getByteTimeDomainData(dataArray); + +// 현재 오디오 소스의 오실로스코프를 그립니다 +function draw() { + drawVisual = requestAnimationFrame(draw); + analyser.getByteTimeDomainData(dataArray); + + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + + const sliceWidth = WIDTH * 1.0 / bufferLength; + let x = 0; + + canvasCtx.beginPath(); + for(var i = 0; i < bufferLength; i++) { + const v = dataArray[i]/128.0; + const y = v * HEIGHT/2; + + if(i === 0) + canvasCtx.moveTo(x, y); + else + canvasCtx.lineTo(x, y); + + x += sliceWidth; + } + + canvasCtx.lineTo(WIDTH, HEIGHT/2); + canvasCtx.stroke(); +}; + +draw(); +</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/getfloatfrequencydata/index.html b/files/ko/web/api/analysernode/getfloatfrequencydata/index.html new file mode 100644 index 0000000000..ceef144941 --- /dev/null +++ b/files/ko/web/api/analysernode/getfloatfrequencydata/index.html @@ -0,0 +1,129 @@ +--- +title: AnalyserNode.getFloatFrequencyData() +slug: Web/API/AnalyserNode/getFloatFrequencyData +tags: + - API + - AnalyserNode + - Method + - Reference + - Web Audio API +browser-compat: api.AnalyserNode.getFloatFrequencyData +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p>{{domxref("AnalyserNode")}} 인터페이스의 <strong><code>getFloatFrequencyData()</code></strong> 메서드는 전달된 {{domxref("Float32Array")}} 배열 내로 현재 주파수 데이터를 복사합니다.</p> + +<p>배열 내의 각 원소는 특정한 주파수에 대한 데시벨 값을 나타냅니다. 주파수들은 0에서 샘플 레이트의 1/2까지 선형적으로 퍼져 있습니다. 예를 들자면, <code>48000</code> Hz 샘플 레이트에 대해서, 배열의 마지막 원소는 <code>24000</code> Hz에 대한 데시벨 값을 나타냅니다.</p> + +<p>만약 여러분이 더 높은 성능을 원하고 정밀성에 대해서는 상관하지 않는다면, {{domxref("AnalyserNode.getByteFrequencyData()")}}을 대신 사용할 수 있는데, 이는 {{domxref("Uint8Array")}}에서 동작합니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var audioCtx = new AudioContext(); +var analyser = audioCtx.createAnalyser(); +var dataArray = new Float32Array(analyser.frequencyBinCount); // Float32Array는 frequencyBinCount와 같은 길이여야만 합니다 + +void <em>analyser</em>.getFloatFrequencyData(dataArray); // getFloatFrequencyData()로부터 반환된 데이터로 Float32Array를 채웁니다 +</pre> + +<h3 id="Parameters">매개변수</h3> + +<dl> + <dt><code>array</code></dt> + <dd>주파수 영역 데이터가 복사될 {{domxref("Float32Array")}}. 소리가 없는 모든 샘플에 대해서, 값은 <code>-<a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>입니다.<br> + 만약 배열이 {{domxref("AnalyserNode.frequencyBinCount")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</dd> +</dl> + +<h3 id="Return_value">반환 값</h3> + +<p>없음.</p> + +<h2 id="Example">예제</h2> + +<pre class="brush: js">const audioCtx = new AudioContext(); +const analyser = audioCtx.createAnalyser(); +// Float32Array는 frequencyBinCount와 같은 길이여야만 합니다 +const myDataArray = new Float32Array(analyser.frequencyBinCount); +// getFloatFrequencyData()로부터 반환된 데이터로 Float32Array를 채웁니다 +analyser.getFloatFrequencyData(myDataArray); +</pre> + +<h3 id="Drawing_a_spectrum">스펙트럼 그리기</h3> + +<p>다음의 예제는 {{domxref("MediaElementAudioSourceNode")}}를 <code>AnalyserNode</code>에 연결하기 위한 {{domxref("AudioContext")}}의 기본 사용을 보여줍니다. 오디오가 재생되는 동안, 우리는 {{domxref("window.requestAnimationFrame()","requestAnimationFrame()")}}로 주파수 데이터를 반복적으로 수집하고 "winamp 막대그래프 스타일"을 {{htmlelement("canvas")}} 요소에 그립니다.</p> + +<p>더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> 데모를 확인하세요 (<a href="https://github.com/mdn/voice-change-o-matic-float-data">소스 코드</a>도 보세요).</p> + +<pre class="brush: html, highlight:[15, 17, 18, 41]"><!doctype html> +<body> +<script> +const audioCtx = new AudioContext(); + +//오디오 소스를 생성합니다 +//여기서, 우리는 오디오 파일을 사용하나, 이것은 또한 예를 들자면 마이크 입력도 될 수 있습니다 +const audioEle = new Audio(); +audioEle.src = 'my-audio.mp3';//파일명을 여기 삽입하세요 +audioEle.autoplay = true; +audioEle.preload = 'auto'; +const audioSourceNode = audioCtx.createMediaElementSource(audioEle); + +//analyser 노드를 생성합니다 +const analyserNode = audioCtx.createAnalyser(); +analyserNode.fftSize = 256; +const bufferLength = analyserNode.frequencyBinCount; +const dataArray = new Float32Array(bufferLength); + +//오디오 노드 네트워크를 설정합니다 +audioSourceNode.connect(analyserNode); +analyserNode.connect(audioCtx.destination); + +//2D canvas를 생성합니다 +const canvas = document.createElement('canvas'); +canvas.style.position = 'absolute'; +canvas.style.top = 0; +canvas.style.left = 0; +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; +document.body.appendChild(canvas); +const canvasCtx = canvas.getContext('2d'); +canvasCtx.clearRect(0, 0, canvas.width, canvas.height); + +function draw() { + //다음 draw를 예정시킵니다 + requestAnimationFrame(draw); + + //스펙트럼 데이터를 얻습니다 + analyserNode.getFloatFrequencyData(dataArray); + + //검은색 배경을 그립니다 + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, canvas.width, canvas.height); + + //스펙트럼을 그립니다 + const barWidth = (canvas.width / bufferLength) * 2.5; + let posX = 0; + for (let i = 0; i < bufferLength; i++) { + const barHeight = (dataArray[i] + 140) * 2; + canvasCtx.fillStyle = 'rgb(' + Math.floor(barHeight + 100) + ', 50, 50)'; + canvasCtx.fillRect(posX, canvas.height - barHeight / 2, barWidth, barHeight / 2); + posX += barWidth + 1; + } +}; + +draw(); +</script> +</body></pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/getfloattimedomaindata/index.html b/files/ko/web/api/analysernode/getfloattimedomaindata/index.html new file mode 100644 index 0000000000..ef85673388 --- /dev/null +++ b/files/ko/web/api/analysernode/getfloattimedomaindata/index.html @@ -0,0 +1,104 @@ +--- +title: AnalyserNode.getFloatTimeDomainData() +slug: Web/API/AnalyserNode/getFloatTimeDomainData +tags: + - API + - AnalyserNode + - Method + - Reference + - Web Audio API +browser-compat: api.AnalyserNode.getFloatTimeDomainData +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p>{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>getFloatTimeDomainData()</code></strong> 메서드는 전달된 {{domxref("Float32Array")}} 배열 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var audioCtx = new AudioContext(); +var analyser = audioCtx.createAnalyser(); +var dataArray = new Float32Array(analyser.fftSize); // Float32Array는 fftSize와 같은 길이일 필요가 있습니다 +analyser.getFloatTimeDomainData(dataArray); // getFloatTimeDomainData()로부터 반환된 데이터로 Float32Array를 채웁니다 +</pre> + + +<h3 id="Parameters">매개변수</h3> + +<dl> + <dt><code>array</code></dt> + <dd>시간 영역 데이터가 복사될 {{domxref("Float32Array")}}.<br> + 만약 배열이 {{domxref("AnalyserNode.frequencyBinCount")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</dd> +</dl> + +<h3 id="Return_value">반환 값</h3> + +<p>없음.</p> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> 데모를 확인하세요 (<a href="https://github.com/mdn/voice-change-o-matic-float-data">소스 코드</a>도 보세요). </p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); + + ... + +analyser.fftSize = 1024; +var bufferLength = analyser.fftSize; +console.log(bufferLength); +var dataArray = new Float32Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + analyser.getFloatTimeDomainData(dataArray); + + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + canvasCtx.beginPath(); + + var sliceWidth = WIDTH * 1.0 / bufferLength; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + var v = dataArray[i] * 200.0; + var y = HEIGHT/2 + v; + + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); +}; + +draw();</pre> + + +<h2 id="Parameters_2">매개변수</h2> + +<dl> + <dt>array</dt> + <dd>시간 영역 데이터가 복사될 {{domxref("Float32Array")}}.</dd> +</dl> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/index.html b/files/ko/web/api/analysernode/index.html index dcffff0050..9f02b456bb 100644 --- a/files/ko/web/api/analysernode/index.html +++ b/files/ko/web/api/analysernode/index.html @@ -3,35 +3,37 @@ title: AnalyserNode slug: Web/API/AnalyserNode tags: - API + - AnalyserNode + - Interface + - Reference - Web Audio API - - 오디오 -translation_of: Web/API/AnalyserNode +browser-compat: api.AnalyserNode --- <p>{{APIRef("Web Audio API")}}</p> -<p><strong><code>AnalyserNode</code></strong><strong> </strong>는 시간대 별로 실시간 주파수의 정보를 표현합니다. {{domxref("AudioNode")}} 를 통해 오디오 스트림정보가 그대로 입력되어 출력이 되지만 이를 통해 당신은 새로운 형태의 데이터를 생성하거나, 가공하고 오디오를 시각화 시키는 작업을 할 수 있습니다.</p> +<p><strong><code>AnalyserNode</code></strong> 인터페이스는 실시간 주파수와 시간 영역 분석 정보를 제공 가능한 노드를 표현합니다. 이것은 변경되지 않은 오디오 스트림을 입력에서 출력으로 전달하지만, 여러분은 생성된 데이터를 얻고, 그것을 처리하고, 오디오 시각화를 생성할 수 있습니다.</p> -<p><code>AnalyzerNode</code> 는 하나의 입력에 하나의 출력을 가집니다. 그리고 이 노드는 출력이 명시되지 않더라도 동작을 합니다.</p> +<p><code>AnalyserNode</code>는 정확히 하나의 입력과 하나의 출력을 가집니다. 이 노드는 출력이 연결되지 않았더라도 작동합니다.</p> -<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/9707/WebAudioFFT.png" style="height: 174px; width: 661px;"></p> +<p><img alt="오디오 스트림을 수정하지 않고, 이 노드는 FFT를 사용하여 이것에 관련된 주파수와 시간 영역의 데이터를 얻을 수 있게 합니다." src="fttaudiodata_en.svg"></p> <table class="properties"> <tbody> <tr> - <th scope="row">Number of inputs</th> + <th scope="row">입력의 수</th> <td><code>1</code></td> </tr> <tr> - <th scope="row">Number of outputs</th> - <td><code>1</code> (but may be left unconnected)</td> + <th scope="row">출력의 수</th> + <td><code>1</code> (그러나 연결되지 않은 채로 남아있을지도 모릅니다)</td> </tr> <tr> <th scope="row">Channel count mode</th> - <td><code>"explicit"</code></td> + <td><code>"max"</code></td> </tr> <tr> <th scope="row">Channel count</th> - <td><code>1</code></td> + <td><code>2</code></td> </tr> <tr> <th scope="row">Channel interpretation</th> @@ -40,125 +42,129 @@ translation_of: Web/API/AnalyserNode </tbody> </table> -<div class="note"> -<p><strong>Note</strong>: See the guide <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> for more information on creating audio visualizations.</p> -</div> +<h2 id="Inheritance">상속</h2> + +<p>이 인터페이스는 다음의 부모 인터페이스들로부터 상속받습니다:</p> -<h2 id="Properties">Properties</h2> +<p>{{InheritanceDiagram}}</p> -<p><em>{{domxref("AudioNode")}}</em> 를 부모로 가지는 프로퍼티.<em> </em></p> +<h2 id="Constructor">생성자</h2> <dl> - <dt><span id="cke_bm_91S" class="hidden"> </span>{{domxref("AnalyserNode.fftSize")}}</dt> - <dd>부호가 없는(unsigned long value) 주파수 영역에서의 전체 크기의 값을 나타내기 위한 푸리에 변환의 값의 크기를 나타낸다. (대략적으로 설명을 하면 해당 주파수영역을 보는데 얼마나 세밀하게 데이터를 볼것인지를 나타낸다. 클수록 세밀하지만 시간이 오래걸리고 작으면 빨리한다.)</dd> - <dt> </dt> + <dt>{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}</dt> + <dd><code>AnalyserNode</code> 객체의 새로운 인스턴스를 생성합니다.</dd> +</dl> + +<h2 id="Properties">속성</h2> + +<p><em>부모인 {{domxref("AudioNode")}}로부터 속성을 상속받습니다</em>.</p> + +<dl> + <dt>{{domxref("AnalyserNode.fftSize")}}</dt> + <dd>주파수 영역을 결정하는 데 사용될 FFT(<a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">Fast Fourier Transform</a>)의 사이즈를 나타내는 unsigned long 값입니다.</dd> <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt> - <dd>부호가 없는 푸리에변환 값의 절반을 나타낸다. 이 값은 일반적으로 데이터를 시각화 하기위해 사용되는 데이터의 수와 같다.</dd> + <dd>FFT 사이즈 값의 절반인 unsigned long 값입니다. 이것은 일반적으로 시각화를 위해 사용할 데이터 값의 수와 동일시됩니다.</dd> <dt>{{domxref("AnalyserNode.minDecibels")}}</dt> - <dd>double형 값으로 표현되는 FFT(푸리에 변환)로 분석된 데이터의 범위에서의 최소값을 나타낸다. 이는 부호가 없는 바이트 값으로 변환된다. 일반적으로 이 특정한 최소값은 <code>getByteFrequencyData()를 사용하여 얻은 결과값이다.</code></dd> + <dd>unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최소 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최소 값을 명시합니다.</dd> <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt> - <dd>double형 값으로 표현되는 FFT(푸리에 변환)로 분석된 데이터의 범위에서의 최대값을 나타낸다. 이는 부호가 없는 바이트 값으로 변환된다. 일반적으로 이 특정한 최대값은 <code>getByteFrequencyData()를 사용하여 얻은 결과값이다.</code></dd> + <dd>unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최대 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.</dd> <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt> - <dd>double형 값으로 마지막에 분석된 프레임의 평균 정수값을 나타낸다. 일반적으로 이 값을 통해 time smoother상의 값들을 변환하는데 사용된다.</dd> + <dd>마지막 분석 프레임의 에버리징(averaging) 상수를 나타내는 double 값입니다 — 기본적으로, 이것은 시간에 대한 값 사이의 전환을 더 매끄럽게 만듭니다.</dd> </dl> -<h2 id="Methods">Methods</h2> +<h2 id="Methods">메서드</h2> -<p><em>{{domxref("AudioNode")}} 을 상속하는 메서드.</em></p> +<p><em>부모인 {{domxref("AudioNode")}}로부터 메서드를 상속받습니다</em>.</p> <dl> <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt> - <dd>현재의 주파수 데이터를 <span style="line-height: 1.5;"> {{domxref("Float32Array")}} 로 복사해 전달한다.</span></dd> -</dl> - -<dl> + <dd>전달된 {{domxref("Float32Array")}} 배열 내로 현재 주파수 데이터를 복사합니다.</dd> <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt> - <dd>현재의 주파수 데이터를 <span style="line-height: 1.5;"> </span>{{domxref("Uint8Array")}} (unsigned byte array)<span style="line-height: 1.5;"> 로 복사해 전달한다.</span></dd> -</dl> - -<dl> + <dd>전달된 {{domxref("Uint8Array")}} (unsiged byte array) 내로 현재 주파수 데이터를 복사합니다.</dd> <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt> - <dd>현재 데이터의 파형, 또는 시간기반(time-domain) 데이터를 <span style="line-height: 1.5;"> {{domxref("Float32Array")}} 배열에 전달한다.</span></dd> + <dd>전달된 {{domxref("Float32Array")}} 배열 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</dd> <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt> - <dd>현재 데이터의 파형, 또는 시간기반(time-domain) 데이터를 {{domxref("Uint8Array")}} (unsigned byte array) 로 전달한다.</dd> + <dd>전달된 {{domxref("Uint8Array")}} (unsigned byte array) 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</dd> </dl> -<h2 id="Example">Example</h2> +<h2 id="Examples">예제</h2> -<p>이 예제는 {{domxref("AudioContext")}} 를 사용해 <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">AnalyserNode를 생성하여 사용하는 방법을 보여주고, </span><span style="line-height: 1.5;"> {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} 를 통해 반복적으로 시간기반(time-domain) 의 정보를 반복적으로 수집 및 </span><span style="line-height: 1.5;"> "oscilloscope style" 를 통해 입력된 오디오 정보를 시각화하여 보여주는 예제입니다. 더 많은 정보와 예제는 </span><span style="line-height: 1.5;"> </span><a href="http://mdn.github.io/voice-change-o-matic/" style="line-height: 1.5;">Voice-change-O-matic</a><span style="line-height: 1.5;"> demo (see </span><a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205" style="line-height: 1.5;">app.js lines 128–205</a><span style="line-height: 1.5;"> for relevant code)를 확인 하세요.</span></p> +<div class="note"> +<p><strong>참고</strong>: 오디오 시각화 생성하기에 대한 더 많은 정보를 보려면 <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Web Audio API 시각화</a> 가이드를 참고하세요.</p> +</div> + +<h3 id="Basic_usage">기본 사용</h3> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">var audioCtx = new(window.AudioContext || window.webkitAudioContext)(); + +// ... -<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var analyser = audioCtx.createAnalyser(); -// 새로운 <span style="font-family: courier new,andale mono,monospace;">AnalyserNode를 생성한다.</span> - ... +analyser.fftSize = 2048; + +var bufferLength = analyser.frequencyBinCount; +var dataArray = new Uint8Array(bufferLength); +analyser.getByteTimeDomainData(dataArray); + +// 분석될 소스에 연결합니다 +source.connect(analyser); -analyser.fftSize = 2048; // FFT의 크기를 2048로 한다. -var bufferLength = analyser.frequencyBinCount; // 시각화를 하기 위한 데이터의 갯수 -var dataArray = new Uint8Array(bufferLength); // 데이터를 담을 bufferLength 크기의 Unit8Array의 배열을 생성 -analyser.getByteTimeDomainData(dataArray); // 시간기반의 데이터를 Unit8Array배열로 전달 +// ID "oscilloscope"로 정의된 canvas를 얻습니다 +var canvas = document.getElementById("oscilloscope"); +var canvasCtx = canvas.getContext("2d"); -// 얻어진 데이터를 기반으로 시각화 작업을 한다. 캔버스를 이용한다. +// 현재 오디오 소스의 오실로스코프를 그립니다 function draw() { - drawVisual = requestAnimationFrame(draw); + requestAnimationFrame(draw); - analyser.getByteTimeDomainData(dataArray); + analyser.getByteTimeDomainData(dataArray); - canvasCtx.fillStyle = 'rgb(200, 200, 200)'; - canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillRect(0, 0, canvas.width, canvas.height); - canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = "rgb(0, 0, 0)"; - canvasCtx.beginPath(); + canvasCtx.beginPath(); - var sliceWidth = WIDTH * 1.0 / bufferLength; - var x = 0; + var sliceWidth = canvas.width * 1.0 / bufferLength; + var x = 0; - for(var i = 0; i < bufferLength; i++) { + for (var i = 0; i < bufferLength; i++) { - var v = dataArray[i] / 128.0; - var y = v * HEIGHT/2; + var v = dataArray[i] / 128.0; + var y = v * canvas.height / 2; - if(i === 0) { - canvasCtx.moveTo(x, y); - } else { - canvasCtx.lineTo(x, y); - } + if (i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } - x += sliceWidth; - } + x += sliceWidth; + } - canvasCtx.lineTo(canvas.width, canvas.height/2); - canvasCtx.stroke(); - }; + canvasCtx.lineTo(canvas.width, canvas.height / 2); + canvasCtx.stroke(); +} - draw();</pre> +draw(); +</pre> -<h2 id="Specifications">Specifications</h2> +<h2 id="Specifications">명세</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> -<p>{{Compat("api.AnalyserNode")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also">See also</h2> +<h2 id="See_also">같이 보기</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> </ul> diff --git a/files/ko/web/api/analysernode/maxdecibels/index.html b/files/ko/web/api/analysernode/maxdecibels/index.html new file mode 100644 index 0000000000..5961655b25 --- /dev/null +++ b/files/ko/web/api/analysernode/maxdecibels/index.html @@ -0,0 +1,85 @@ +--- +title: AnalyserNode.maxDecibels +slug: Web/API/AnalyserNode/maxDecibels +tags: + - API + - AnalyserNode + - Property + - Reference + - Web Audio API + - maxDecibels +browser-compat: api.AnalyserNode.maxDecibels +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p class="summary">{{domxref("AnalyserNode")}} 인터페이스의 <strong><code>maxDecibels</code></strong> 속성은 unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최대 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var <em>curValue</em> = <em>analyserNode</em>.maxDecibels; +<em>analyserNode</em>.maxDecibels = <em>newValue</em>; +</pre> + +<h3 id="Value">값</h3> + +<p>FFT 분석 데이터를 스케일링하는 것에 대한 최대 <a href="https://en.wikipedia.org/wiki/Decibel" title="Decibel on Wikipedia">데시벨</a> 값을 나타내는 double인데, <code>0</code> dB는 가능한 가장 큰 소리를 나타내고, <code>-10</code> dB는 그것의 10번째, 등등입니다. 기본 값은 <code>-30</code> dB입니다.</p> + +<p><code>getByteFrequencyData()</code>로부터 데이터를 얻을 때, <code>maxDecibels</code> 또는 더 높은 진폭을 가진 모든 주파수는 <code>255</code>로 반환됩니다.</p> + +<p class="note"><strong>참고</strong>: 만약 <code>AnalyserNode.minDecibels</code>보다 더 작거나 같은 값이 설정된다면, <code>IndexSizeError</code> 예외가 발생합니다.</p> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; + + ... + +analyser.fftSize = 256; +var bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +var dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + var barWidth = (WIDTH / bufferLength) * 2.5; + var barHeight; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + + x += barWidth + 1; + } +}; + +draw();</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/mindecibels/index.html b/files/ko/web/api/analysernode/mindecibels/index.html new file mode 100644 index 0000000000..95c51692e5 --- /dev/null +++ b/files/ko/web/api/analysernode/mindecibels/index.html @@ -0,0 +1,87 @@ +--- +title: AnalyserNode.minDecibels +slug: Web/API/AnalyserNode/minDecibels +tags: + - API + - AnalyserNode + - Property + - Reference + - Web Audio API + - minDecibels +browser-compat: api.AnalyserNode.minDecibels +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p class="summary">{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>minDecibels</code></strong> 속성은 unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최소 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최소 값을 명시합니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var <em>curValue</em> = <em>analyserNode</em>.minDecibels; +<em>analyserNode</em>.minDecibels = <em>newValue</em>; +</pre> + +<h3 id="Value">값</h3> + +<p>FFT 분석 데이터를 스케일링하는 것에 대한 최소 <a href="https://en.wikipedia.org/wiki/Decibel" title="Decibel on Wikipedia">데시벨</a> 값을 나타내는 double인데, <code>0</code> dB는 가능한 가장 큰 소리를 나타내고, <code>-10</code> dB는 그것의 10번째, 등등입니다. 기본 값은 <code>-100</code> dB입니다.</p> + +<p><code>getByteFrequencyData()</code>로부터 데이터를 얻을 때, <code>minDecibels</code> 또는 더 낮은 진폭을 가진 모든 주파수는 <code>0</code>으로 반환됩니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 만약 <code>AnalyserNode.maxDecibels</code>보다 더 큰 값이 설정된다면, <code>INDEX_SIZE_ERR</code> 예외가 발생합니다.</p> +</div> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; + + ... + +analyser.fftSize = 256; +var bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +var dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + var barWidth = (WIDTH / bufferLength) * 2.5; + var barHeight; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + + x += barWidth + 1; + } +}; + +draw();</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/smoothingtimeconstant/index.html b/files/ko/web/api/analysernode/smoothingtimeconstant/index.html new file mode 100644 index 0000000000..18d643160f --- /dev/null +++ b/files/ko/web/api/analysernode/smoothingtimeconstant/index.html @@ -0,0 +1,92 @@ +--- +title: AnalyserNode.smoothingTimeConstant +slug: Web/API/AnalyserNode/smoothingTimeConstant +tags: + - API + - AnalyserNode + - Property + - Reference + - Web Audio API + - smoothingTimeConstant +browser-compat: api.AnalyserNode.smoothingTimeConstant +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p class="summary">{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>smoothingTimeConstant</code></strong> 속성은 마지막 분석 프레임의 에버리징(averaging) 상수를 나타내는 double 값입니다. 이것은 기본적으로 현재 버퍼와 <code>AnalyserNode</code>가 처리한 마지막 버퍼 사이의 평균이고, 더욱 매끄러운 시간에 대한 값 변화의 집합을 결과로 낳습니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var <em>smoothValue</em> = <em>analyserNode</em>.smoothingTimeConstant; +<em>analyserNode</em>.smoothingTimeConstant = <em>newValue</em>; +</pre> + +<h3 id="Value">값</h3> + +<p><code>0</code>에서 <code>1</code>까지의 범위 내의 double (<code>0</code>은 시간 에버리징이 없음을 의미). 기본값은 <code>0.8</code>입니다.</p> + +<p>만약 0이 설정된다면, 완료된 에버리징이 없는 것이지만, 1의 값은 "값을 계산하는 동안 이전과 현재 버퍼를 많이 겹치기"를 의미하는데, 이는 근본적으로 {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}} 호출에 걸쳐 변화들을 매끄럽게 합니다.</p> + +<p>기술적인 측면에서, 우리는 <a href="https://webaudio.github.io/web-audio-api/#blackman-window">Blackman window</a>를 적용했고 값들을 시간에 대해 매끄럽게 합니다. 기본값은 대부분의 경우에 적합합니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 만약 범위 0-1 바깥의 값이 설정된다면, <code>INDEX_SIZE_ERR</code> 예외가 발생합니다.</p> +</div> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<p>만약 여러분이 <code>smoothingTimeConstant()</code>이 가진 영향에 대해 궁금하다면, 위의 예제를 복사해서 <code>analyser.smoothingTimeConstant = 0;</code>을 대신 설정해 보세요. 값 변화가 더욱 삐걱거리는 것을 인지하실 것입니다.</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; +analyser.smoothingTimeConstant = 0.85; + + ... + +analyser.fftSize = 256; +var bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +var dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + var barWidth = (WIDTH / bufferLength) * 2.5; + var barHeight; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + + x += barWidth + 1; + } +}; + +draw();</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/baseaudiocontext/createperiodicwave/index.html b/files/ko/web/api/baseaudiocontext/createperiodicwave/index.html index ac48d4576c..7cf934a807 100644 --- a/files/ko/web/api/baseaudiocontext/createperiodicwave/index.html +++ b/files/ko/web/api/baseaudiocontext/createperiodicwave/index.html @@ -17,7 +17,7 @@ browser-compat: api.BaseAudioContext.createPeriodicWave <p>{{ domxref("BaseAudioContext") }} 인터페이스의 <code>createPeriodicWave()</code> 메서드는 {{domxref("PeriodicWave")}}를 생성하기 위해 사용되는데, 이는 {{ domxref("OscillatorNode") }}의 출력을 형성하기 위해 사용될 수 있는 주기적인 파형을 정의하기 위해 사용됩니다.</p> -<h2 id="Syntax">문법</h2> +<h2 id="Syntax">구문</h2> <pre class="brush: js">var wave = <em>AudioContext</em>.createPeriodicWave(<em>real</em>, <em>imag</em>[, <em>constraints</em>]);</pre> @@ -137,13 +137,13 @@ osc.stop(2);</pre> <annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} </annotation> </semantics> - </math>etc.) 양이거나 음일 수 있습니다. 수동으로 이러한 계수들을 얻는 간단한 방법은 (최고의 방법은 아니지만) 그래프 계산기를 사용하는 것입니다.</p> + </math> 등) 양이거나 음일 수 있습니다. 수동으로 이러한 계수들을 얻는 간단한 방법은 (최고의 방법은 아니지만) 그래프 계산기를 사용하는 것입니다.</p> -<h2 id="Specifications">Specifications</h2> +<h2 id="Specifications">명세</h2> {{Specifications}} -<h2 id="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <p>{{Compat}}</p> diff --git a/files/ko/web/api/baseaudiocontext/index.html b/files/ko/web/api/baseaudiocontext/index.html new file mode 100644 index 0000000000..0c25a6dfd8 --- /dev/null +++ b/files/ko/web/api/baseaudiocontext/index.html @@ -0,0 +1,122 @@ +--- +title: BaseAudioContext +slug: Web/API/BaseAudioContext +tags: + - API + - Audio + - BaseAudioContext + - Context + - Interface + - Reference + - Web Audio API + - sound +browser-compat: api.BaseAudioContext +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p class="summary"><span class="seoSummary"><a href="/ko/docs/Web/API/Web_Audio_API">Web Audio API</a>의 <code>BaseAudioContext</code> 인터페이스는 {{domxref("AudioContext")}} 와 {{domxref("OfflineAudioContext")}}에 의해 표현되는 온라인과 오프라인 오디오 프로세싱 그래프에 대한 기본 정의로 작동합니다. <code>BaseAudioContext</code>는 직접적으로 사용될 수 없습니다. 대신 위에서 언급한 두 상속 인터페이스를 통해 <code>BaseAudioContext</code>의 기능을 사용할 수 있습니다.</p> + +<p><code>BaseAudioContext</code>는 이벤트의 타겟이 될 수 있는데, 따라서 이것은 {{domxref("EventTarget")}} 인터페이스를 구현합니다.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">속성</h2> + +<dl> + <dt>{{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}} {{securecontext_inline}}</dt> + <dd>{{domxref("AudioWorklet")}} 객체를 반환하는데, 이는 {{domxref("AudioWorkletProcessor")}} 인터페이스를 구현하는 JavaScript 코드가 오디오 데이터를 처리하기 위해 백그라운드에서 실행되는 {{domxref("AudioNode")}}들을 생성하고 관리하는 데 쓰일 수 있습니다.</dd> + <dt>{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}</dt> + <dd>스케쥴링에 사용되는 초 단위로 계속 증가하는 하드웨어 시간을 나타내는 double을 반환합니다. 이는 <code>0</code>에서 시작합니다.</dd> + <dt>{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}</dt> + <dd>컨텍스트 내의 모든 오디오의 최종 도착지를 나타내는 {{domxref("AudioDestinationNode")}}를 반환합니다. 이것은 오디오를 렌더링하는 장치로 생각될 수 있습니다.</dd> + <dt>{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}</dt> + <dd>3D 공간화에 사용되는 {{domxref("AudioListener")}} 객체를 반환합니다.</dd> + <dt>{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}</dt> + <dd>이 컨텍스트 내의 모든 노드에 의해 사용되는 샘플 레이트(초당 샘플)를 나타내는 float을 반환합니다. {{domxref("AudioContext")}}의 샘플 레이트는 변경될 수 없습니다.</dd> + <dt>{{domxref("BaseAudioContext.state")}} {{readonlyInline}}</dt> + <dd><code>AudioContext</code>의 현재 상태를 반환합니다.</dd> +</dl> + +<h3 id="Event_handlers">이벤트 처리기</h3> + +<dl> + <dt>{{domxref("BaseAudioContext.onstatechange")}}</dt> + <dd>{{event("statechange")}} 유형의 이벤트가 발생되었을 때 실행되는 이벤트 처리기입니다. 이것은 상태 변화 메서드({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, 또는 {{domxref("AudioContext.close")}}) 중 하나의 호출에 기인해 <code>AudioContext</code>의 상태가 변경되었을 때 발생됩니다.</dd> +</dl> + +<h2 id="Methods">메서드</h2> + +<p><em>또한 {{domxref("EventTarget")}} 인터페이스로부터의 메서드를 구현합니다.</em></p> + +<dl> + <dt>{{domxref("BaseAudioContext.createAnalyser()")}}</dt> + <dd>오디오 시간과 주파수 데이터를 드러내고 데이터 시각화를 생성하는 데 사용될 수 있는 {{domxref("AnalyserNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createBiquadFilter()")}}</dt> + <dd>high-pass, low-pass, band-pass와 같은 몇몇 다른 흔한 필터 유형으로 설정 가능한 2차 필터를 나타내는 {{domxref("BiquadFilterNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createBuffer()")}}</dt> + <dd>데이터를 넣거나 {{ domxref("AudioBufferSourceNode") }}를 통해 재생될 수 있는 새로운 빈 {{ domxref("AudioBuffer") }} 객체를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createBufferSource()")}}</dt> + <dd>{{ domxref("AudioBuffer") }} 객체 내부에 포함된 오디오 데이터를 재생하거나 조작하기 위해 사용될 수 있는 {{domxref("AudioBufferSourceNode")}}를 생성합니다. {{ domxref("AudioBuffer") }}들은 {{domxref("BaseAudioContext/createBuffer", "AudioContext.createBuffer()")}}를 사용해 생성되거나 성공적으로 오디오 트랙을 디코드했을 때 {{domxref("BaseAudioContext/decodeAudioData", "AudioContext.decodeAudioData()")}}에 의해 반환됩니다.</dd> + <dt>{{domxref("BaseAudioContext.createConstantSource()")}}</dt> + <dd>샘플이 모두 같은 값을 가지고 있는 모노럴의(한 채널의) 사운드 신호를 계속적으로 출력하는 오디오 소스인 {{domxref("ConstantSourceNode")}} 객체를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createChannelMerger()")}}</dt> + <dd>다수의 오디오 스트림으로부터 하나의 오디오 스트림에 채널을 결합하기 위해 사용되는 {{domxref("ChannelMergerNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createChannelSplitter()")}}</dt> + <dd>오디오 스트림의 각 채널에 접근하고 별도로 그것들을 처리하기 위해 사용되는 {{domxref("ChannelSplitterNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createConvolver()")}}</dt> + <dd>오디오 그래프에 잔향(reverberation) 효과와 같은 콘볼루션 이펙트를 적용하기 위해 사용될 수 있는 {{domxref("ConvolverNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createDelay()")}}</dt> + <dd>들어오는 오디오 신호를 지연시키기 위해 사용되는 {{domxref("DelayNode")}}를 생성합니다. 이 노드는 Web Audio API 그래프에서 피드백 루프를 생성하는 데 유용합니다.</dd> + <dt>{{domxref("BaseAudioContext.createDynamicsCompressor()")}}</dt> + <dd>음향 압축(acoustic compression)을 오디오 신호에 적용하기 위해 사용될 수 있는 {{domxref("DynamicsCompressorNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createGain()")}}</dt> + <dd>오디오 그래프의 전반적인 볼륨을 제어하기 위해 사용될 수 있는 {{domxref("GainNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createIIRFilter()")}}</dt> + <dd>몇몇 다른 흔한 필터 유형으로 설정 가능한 2차 필터를 나타내는 {{domxref("IIRFilterNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createOscillator()")}}</dt> + <dd>주기적인 파형을 나타내는 소스인 {{domxref("OscillatorNode")}}를 생성합니다. 이것은 기본적으로 음색을 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createPanner()")}}</dt> + <dd>들어오는 오디오 스트림을 3D 공간에서 공간화하기 위해 사용되는 {{domxref("PannerNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createPeriodicWave()")}}</dt> + <dd>{{ domxref("OscillatorNode") }}의 출력을 결정하기 위해 사용될 수 있는 주기적인 파형을 정의하는 데 쓰이는 {{domxref("PeriodicWave")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createScriptProcessor()")}} {{deprecated_inline}}</dt> + <dd>JavaScript를 통한 직접적인 오디오 프로세싱을 위해 사용될 수 있는 {{domxref("ScriptProcessorNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createStereoPanner()")}}</dt> + <dd>오디오 소스에 스테레오 패닝을 적용하기 위해 사용될 수 있는 {{domxref("StereoPannerNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createWaveShaper()")}}</dt> + <dd>비선형 변형(non-linear distortion) 효과를 구현하기 위해 사용되는 {{domxref("WaveShaperNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.decodeAudioData()")}}</dt> + <dd>비동기적으로 {{domxref("ArrayBuffer")}}에 포함된 오디오 파일 데이터를 디코드합니다. 이 경우, ArrayBuffer는 보통 <code>arraybuffer</code>에 <code>responseType</code>을 설정한 후 {{domxref("XMLHttpRequest")}}의 <code>response</code> 특성으로부터 로딩됩니다. 이 메서드는 오디오 파일의 조각이 아니라, 오직 완전한 파일에서만 작동합니다.</dd> +</dl> + +<h2 id="Examples">예제</h2> + +<p>기본적인 오디오 컨텍스트 선언</p> + +<pre class="brush: js">const audioContext = new AudioContext();</pre> + +<p>크로스 브라우저를 위한 다른 형태</p> + +<pre class="brush: js">const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioContext = new AudioContext(); + +const oscillatorNode = audioContext.createOscillator(); +const gainNode = audioContext.createGain(); +const finish = audioContext.destination; +</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> + <li>{{domxref("AudioContext")}}</li> + <li>{{domxref("OfflineAudioContext")}}</li> +</ul> diff --git a/files/ko/web/api/history/state/index.html b/files/ko/web/api/history/state/index.html index 0f889665c7..7aae615ba7 100644 --- a/files/ko/web/api/history/state/index.html +++ b/files/ko/web/api/history/state/index.html @@ -9,15 +9,15 @@ translation_of: Web/API/History/state <p>{{event("popstate")}} 이벤트가 트리거될때가 아닌 상태에서 state값을 볼 수 있는 방법입니다.</p> -<h2 id="문법">문법</h2> +<h2 id="syntax">구문</h2> <pre class="syntaxbox">const <em>currentState</em> = history.state</pre> -<h3 id="값">값</h3> +<h3 id="value">값</h3> <p>현 history에 위치한 값입니다. 이 값은 {{domxref("History.pushState","pushState()")}} 또는 {{domxref("History.replaceState","replaceState()")}}을 사용할때까지 {{jsxref("null")}} 값을 가집니다.</p> -<h2 id="예제">예제</h2> +<h2 id="examples">예제</h2> <p><code>history.state</code> 로 초기값을 보여준 후 {{domxref("History.pushState","pushState()")}}를 사용하여 State를 푸시합니다.</p> @@ -32,7 +32,7 @@ history.pushState({name: 'Example'}, "pushState example", 'page3.html'); // Now state has a value. console.log(`History.state after pushState: ${history.state}`);</pre> -<h2 id="SpecificationsE">Specifications<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Web/API/History$edit#Specifications" rel="nofollow, noindex"><span>E</span></a></h2> +<h2 id="Specifications">명세</h2> <table class="standard-table"> <tbody> @@ -54,13 +54,13 @@ console.log(`History.state after pushState: ${history.state}`);</pre> </tbody> </table> -<h2 id="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <p>{{Compat("api.History.state")}}</p> -<h2 id="See_also">See also</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li> diff --git a/files/ko/web/api/offlineaudiocontext/index.html b/files/ko/web/api/offlineaudiocontext/index.html new file mode 100644 index 0000000000..6ae837d718 --- /dev/null +++ b/files/ko/web/api/offlineaudiocontext/index.html @@ -0,0 +1,148 @@ +--- +title: OfflineAudioContext +slug: Web/API/OfflineAudioContext +tags: + - API + - Audio + - Interface + - OfflineAudioContext + - Reference + - Web Audio API +browser-compat: api.OfflineAudioContext +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p><code>OfflineAudioContext</code> 인터페이스는 함께 연결된 {{domxref("AudioNode")}}들로부터 만들어진 오디오 프로세싱 그래프를 나타내는 {{domxref("AudioContext")}} 인터페이스입니다. 표준 {{domxref("AudioContext")}}와는 대조적으로, <code>OfflineAudioContext</code>는 오디오를 장치 하드웨어로 렌더링하지 않습니다; 대신, 이것은 가능한 한 빨리 오디오를 생성하고, 그 결과를 {{domxref("AudioBuffer")}}에 출력합니다.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Constructor">생성자</h2> + +<dl> + <dt>{{domxref("OfflineAudioContext.OfflineAudioContext()")}}</dt> + <dd>새로운 <code>OfflineAudioContext</code> 인스턴스를 생성합니다.</dd> +</dl> + +<h2 id="Properties">속성</h2> + +<p><em>또한 부모 인터페이스인 {{domxref("BaseAudioContext")}}로부터 속성을 상속받습니다.</em></p> + +<dl> + <dt>{{domxref('OfflineAudioContext.length')}} {{readonlyinline}}</dt> + <dd>샘플 프레임의 버퍼 사이즈를 나타내는 정수.</dd> +</dl> + +<h3 id="Event_handlers">이벤트 처리기</h3> + +<dl> + <dt>{{domxref("OfflineAudioContext.oncomplete")}}</dt> + <dd>{{domxref("OfflineAudioContext.startRendering()")}}의 이벤트 기반 버전이 사용된 이후, 프로세싱이 종료되었을 때, 즉 ({{domxref("OfflineAudioCompletionEvent")}} 유형의) {{event("complete")}} 이벤트가 발생되었을 때 호출되는 <a href="/en-US/docs/Web/Events/Event_handlers">이벤트 처리기</a>입니다.</dd> +</dl> + +<h2 id="Methods">메서드</h2> + +<p><em>또한 부모 인터페이스인 {{domxref("BaseAudioContext")}}로부터 메서드를 상속받습니다.</em></p> + +<dl> + <dt>{{domxref("OfflineAudioContext.suspend()")}}</dt> + <dd>특정한 시간에서의 오디오 컨텍스트의 시간 진행의 연기를 스케쥴링하고 프로미스를 반환합니다.</dd> + <dt>{{domxref("OfflineAudioContext.startRendering()")}}</dt> + <dd>현재 연결과 현재 스케쥴링된 변화를 고려하며 오디오 렌더링을 시작합니다. 이 문서는 이벤트 기반 버전과 프로미스 기반 버전 모두를 다룹니다.</dd> +</dl> + +<h3 id="Deprecated_methods">더 이상 사용되지 않는 메서드</h3> + +<dl> + <dt>{{domxref("OfflineAudioContext.resume()")}}</dt> + <dd>이전에 연기된 오디오 컨텍스트에서의 시간 진행을 재개합니다.</dd> +</dl> + +<div class="note"> +<p><strong>참고</strong>: <code>resume()</code> 메서드는 여전히 사용 가능합니다 — 이것은 이제 {{domxref("BaseAudioContext")}} 인터페이스에 정의되었고 ({{domxref("AudioContext.resume")}}을 참조하세요) 따라서 {{domxref("AudioContext")}}와 {{domxref("OfflineAudioContext")}} 인터페이스 모두에서 접근 가능합니다.</p> +</div> + +<h2 id="Events">이벤트</h2> + +<p><code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>를 사용하거나 이벤트 수신기를 이 인터페이스의 <code>on<em>eventname</em></code> 속성에 부여함으로써 이 이벤트들을 수신하세요.</p> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/OfflineAudioContext/complete_event">complete</a></code></dt> + <dd>오프라인 오디오 컨텍스트의 렌더링이 완료되었을 때 발생됩니다.<br> + 또한 <code><a href="/en-US/docs/Web/API/OfflineAudioContext/oncomplete">oncomplete</a></code> 이벤트 처리기 속성을 사용하여 이용 가능합니다.</dd> +</dl> + +<h2 id="Examples">예제</h2> + +<p>이 간단한 예제에서, 우리는 {{domxref("AudioContext")}}와 <code>OfflineAudioContext</code> 객체 모두를 선언합니다. 우리는 <code>AudioContext</code>을 XHR({{domxref("BaseAudioContext.decodeAudioData")}})을 통해 오디오 트랙을 로드하기 위해 사용하고, 그리고 나서 <code>OfflineAudioContext</code>를 오디오를 {{domxref("AudioBufferSourceNode")}}에 렌더링하고 트랙을 재생하기 위해 사용합니다. 오프라인 오디오 그래프가 준비된 후, 여러분은 {{domxref("OfflineAudioContext.startRendering")}}을 사용하여 {{domxref("AudioBuffer")}}에 이것을 렌더링할 필요가 있습니다.</p> + +<p><code>startRendering()</code> 프로미스가 이행할 때, 렌더링은 완료되었고 <code>AudioBuffer</code> 출력은 프로미스에서 반환됩니다.</p> + +<p>이 시점에서 우리는 다른 오디오 컨텍스트를 생성하고, 그것의 내부에 {{domxref("AudioBufferSourceNode")}}를 생성하고, 그리고 이것의 버퍼를 <code>AudioBuffer</code> 프로미스와 같게 설정합니다. 이것은 그리고 나서 간단한 표준 오디오 그래프의 일부로 재생됩니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 작동하는 예제를 보려면 <a href="https://mdn.github.io/webaudio-examples/offline-audio-context-promise/">offline-audio-context-promise</a> GitHub 레포지토리를 참고하세요 (<a href="https://github.com/mdn/webaudio-examples/tree/master/offline-audio-context-promise">소스 코드</a>도 보세요.)</p> +</div> + +<pre class="brush: 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();</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/periodicwave/index.html b/files/ko/web/api/periodicwave/index.html new file mode 100644 index 0000000000..b976fd48d0 --- /dev/null +++ b/files/ko/web/api/periodicwave/index.html @@ -0,0 +1,55 @@ +--- +title: PeriodicWave +slug: Web/API/PeriodicWave +tags: + - API + - Audio + - Interface + - Media + - PeriodicWave + - Reference + - Web Audio + - Web Audio API + - waveform +browser-compat: api.PeriodicWave +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<div> +<p><strong><code>PeriodicWave</code></strong> 인터페이스는 {{domxref("OscillatorNode")}}의 출력을 형성하는데 사용될 수 있는 주기적인 파형을 정의합니다.</p> +</div> + +<p><code>PeriodicWave</code>에는 입력도 출력도 없습니다; 이것은 {{domxref("OscillatorNode.setPeriodicWave()")}}를 호출할 때 사용자 정의 oscillator를 정의하기 위해 쓰입니다. <code>PeriodicWave</code> 그 자체는 {{domxref("BaseAudioContext.createPeriodicWave")}}에 의해 생성/반환됩니다.</p> + +<h2 id="Constructor">생성자</h2> + +<dl> + <dt>{{domxref("PeriodicWave.PeriodicWave()")}}</dt> + <dd>모든 속성에 기본값을 사용하여 새로운 <code>PeriodicWave</code> 객체 인스턴스를 생성합니다. 만약 처음에 사용자 정의 속성 값을 설정하기를 원한다면, {{domxref("BaseAudioContext.createPeriodicWave")}} 팩토리 메서드를 대신 사용하세요.</dd> +</dl> + +<h2 id="Properties">속성</h2> + +<p><em>없습니다; 또한, <code>PeriodicWave</code>는 어떠한 속성도 상속받지 않습니다.</em></p> + +<h2 id="Methods">메서드</h2> + +<p><em>없습니다; 또한, <code>PeriodicWave</code>는 어떠한 메서드도 상속받지 않습니다.</em></p> + +<h2 id="Example">예제</h2> + +<p>간단한 사인파를 포함하는 <code>PeriodicWave</code> 객체를 어떻게 생성하는지 보여주는 간단한 예제 코드를 {{domxref("BaseAudioContext.createPeriodicWave")}}에서 확인해 보세요.</p> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/periodicwave/periodicwave/index.html b/files/ko/web/api/periodicwave/periodicwave/index.html new file mode 100644 index 0000000000..edeabac774 --- /dev/null +++ b/files/ko/web/api/periodicwave/periodicwave/index.html @@ -0,0 +1,70 @@ +--- +title: PeriodicWave() +slug: Web/API/PeriodicWave/PeriodicWave +tags: + - API + - Audio + - Constructor + - PeriodicWave + - Reference + - Web Audio API +browser-compat: api.PeriodicWave.PeriodicWave +--- +<p>{{APIRef("Web Audio API")}}</p> + +<p><a + href="/ko/docs/Web/API/Web_Audio_API">Web Audio API</a>의 <code><strong>PeriodicWave()</strong></code> 생성자는 새로운 {{domxref("PeriodicWave")}} 객체 인스턴스를 생성합니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre + class="brush: js">var <em>myWave</em> = new PeriodicWave(<em>context</em>, <em>options</em>);</pre> + +<h3 id="Parameters">매개변수</h3> + +<p><em>{{domxref("AudioNodeOptions")}} dictionary로부터 매개변수를 상속받습니다</em>.</p> + +<dl> + <dt><code>context</code></dt> + <dd>여러분이 노드가 관련되기를 바라는 오디오 컨텍스트를 나타내는 {{domxref("BaseAudioContext")}}</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>여러분이 <code>PeriodicWave</code>가 가지기를 바라는 속성들을 정의하는 <code><a href="https://webaudio.github.io/web-audio-api/#idl-def-PeriodicWaveOptions">PeriodicWaveOptions</a></code> dictionary 객체 (이것은 또한 <a + href="https://webaudio.github.io/web-audio-api/#idl-def-PeriodicWaveConstraints">PeriodicWaveConstraints</a> + dictionary에 정의된 옵션들도 상속받습니다.): + <ul> + <li><code>real</code>: 여러분이 파동을 형성하기 위해 사용하기를 원하는 코사인 항을 포함하는 {{domxref("Float32Array")}} ({{domxref("BaseAudioContext.createPeriodicWave")}}의 <code>real</code> 매개변수와 동일)</li> + <li><code>imag</code>: 여러분이 파동을 형성하기 위해 사용하기를 원하는 사인 항을 포함하는 {{domxref("Float32Array")}} ({{domxref("BaseAudioContext.createPeriodicWave")}}의 <code>imag</code> 매개변수와 동일)</li> + </ul> + </dd> +</dl> + +<h3 id="Return_value">반환 값</h3> + +<p>새로운 {{domxref("PeriodicWave")}} 객체 인스턴스.</p> + +<h2 id="Example">예제</h2> + +<pre class="brush: js">var real = new Float32Array(2); +var imag = new Float32Array(2); +var ac = new AudioContext(); + +real[0] = 0; +imag[0] = 0; +real[1] = 1; +imag[1] = 0; + +var options = { + real : real, + imag : imag, + disableNormalization : false +} + +var wave = new PeriodicWave(ac, options);</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> diff --git a/files/ko/web/api/streams_api/index.html b/files/ko/web/api/streams_api/index.html index 03bafe2e88..510d797db4 100644 --- a/files/ko/web/api/streams_api/index.html +++ b/files/ko/web/api/streams_api/index.html @@ -99,10 +99,10 @@ translation_of: Web/API/Streams_API <ul> <li><a href="http://mdn.github.io/dom-examples/streams/simple-pump/">Simple stream pump</a>: ReadableStream에서 어떻게 데이터를 읽어들여 다른 곳으로 전달하는지 보여줍니다.</li> - <li><a href="http://mdn.github.io/dom-examples/streams/grayscale-png/">Grayscale a PNG</a>: PNG file의 ReadableStream을 통해 grayscale로 변경하는 방법을 보여줍니다..</li> + <li><a href="http://mdn.github.io/dom-examples/streams/grayscale-png/">Grayscale a PNG</a>: PNG file의 ReadableStream을 통해 grayscale로 변경하는 방법을 보여줍니다.</li> <li><a href="http://mdn.github.io/dom-examples/streams/simple-random-stream/">Simple random stream</a>: 커스텀 스트림을 통해 무작위 문자열을 생성하고, 데이터 청크로 큐잉한 뒤, 다시 읽어들이는 방법에 대해 설명합니다.</li> <li><a href="http://mdn.github.io/dom-examples/streams/simple-tee-example/">Simple tee example</a>: 이 예제는 simple random stream 예제를 확장하여, 스트림을 분할하고 각 스트림이 독립적으로 데이터를 읽는 방법을 보여줍니다.</li> - <li><a href="http://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer</a>: Writable stream에 데이터를 쓰는 방법을 설명하고, 스트림 데이터를 디코드하여 UI로 표현하는 방법을 보옂부니다..</li> + <li><a href="http://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer</a>: Writable stream에 데이터를 쓰는 방법을 설명하고, 스트림 데이터를 디코드하여 UI로 표현하는 방법을 보여줍니다.</li> <li><a href="http://mdn.github.io/dom-examples/streams/png-transform-stream/">Unpack chunks of a PNG</a>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/pipeThrough"><code>pipeThrough()</code></a> 을 통해 PNG file을 PNG 청크 스트림으로 변환하는 방식으로 ReadableStream을 다른 데이터 타입 스트림으로 전환하는 방법을 설명합니다.</li> </ul> diff --git a/files/ko/web/api/web_audio_api/advanced_techniques/index.html b/files/ko/web/api/web_audio_api/advanced_techniques/index.html new file mode 100644 index 0000000000..d3ce7cd56d --- /dev/null +++ b/files/ko/web/api/web_audio_api/advanced_techniques/index.html @@ -0,0 +1,586 @@ +--- +title: 'Advanced techniques: Creating and sequencing audio' +slug: Web/API/Web_Audio_API/Advanced_techniques +tags: + - API + - Advanced + - Audio + - Guide + - Reference + - Web Audio API + - sequencer +--- +<div>{{DefaultAPISidebar("Web Audio API")}}</div> + +<p class="summary">In this tutorial, we're going to cover sound creation and modification, as well as timing and scheduling. We're going to introduce sample loading, envelopes, filters, wavetables, and frequency modulation. If you're familiar with these terms and you're looking for an introduction to their application within with the Web Audio API, you've come to the right place.</p> + +<h2 id="Demo">Demo</h2> + +<p>We're going to be looking at a very simple step sequencer:</p> + +<p><img alt="A sound sequencer application featuring play and BPM master controls, and 4 different voices with controls for each." src="sequencer.png"><br> + </p> + +<p>In practice this is easier to do with a library — the Web Audio API was built to be built upon. If you are about to embark on building something more complex, <a href="https://tonejs.github.io/">tone.js</a> would be a good place to start. However, we want to demonstrate how to build such a demo from first principles, as a learning exercise.</p> + +<div class="note"> +<p><strong>Note</strong>: You can find the source code on GitHub as <a href="https://github.com/mdn/webaudio-examples/tree/master/step-sequencer">step-sequencer</a>; see the <a href="https://mdn.github.io/webaudio-examples/step-sequencer/">step-sequencer running live</a> also.</p> +</div> + +<p>The interface consists of master controls, which allow us to play/stop the sequencer, and adjust the BPM (beats per minute) to speed up or slow down the "music".</p> + +<p>There are four different sounds, or voices, which can be played. Each voice has four buttons, which represent four beats in one bar of music. When they are enabled the note will sound. When the instrument plays, it will move across this set of beats and loop the bar.</p> + +<p>Each voice also has local controls, which allow you to manipulate the effects or parameters particular to each technique we are using to create those voices. The techniques we are using are:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Name of voice</th> + <th scope="col">Technique</th> + <th scope="col">Associated Web Audio API feature</th> + </tr> + </thead> + <tbody> + <tr> + <td>"Sweep"</td> + <td>Oscillator, periodic wave</td> + <td>{{domxref("OscillatorNode")}}, {{domxref("PeriodicWave")}}</td> + </tr> + <tr> + <td>"Pulse"</td> + <td>Multiple oscillators</td> + <td>{{domxref("OscillatorNode")}}</td> + </tr> + <tr> + <td>"Noise"</td> + <td>Random noise buffer, Biquad filter</td> + <td>{{domxref("AudioBuffer")}}, {{domxref("AudioBufferSourceNode")}}, {{domxref("BiquadFilterNode")}}</td> + </tr> + <tr> + <td>"Dial up"</td> + <td>Loading a sound sample to play</td> + <td>{{domxref("BaseAudioContext/decodeAudioData")}}, {{domxref("AudioBufferSourceNode")}}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: This instrument was not created to sound good, it was created to provide demonstration code and represents a <em>very</em> simplified version of such an instrument. The sounds are based on a dial-up modem. If you are unaware of how one sounds you can <a href="https://soundcloud.com/john-pemberton/modem-dialup">listen to one here</a>.</p> +</div> + +<h2 id="Creating_an_audio_context">Creating an audio context</h2> + +<p>As you should be used to by now, each Web Audio API app starts with an audio context:</p> + +<pre class="brush: js">// for cross browser compatibility +const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext();</pre> + +<h2 id="The_sweep_—_oscillators_periodic_waves_and_envelopes">The "sweep" — oscillators, periodic waves, and envelopes</h2> + +<p>For what we will call the "sweep" sound, that first noise you hear when you dial up, we're going to create an oscillator to generate the sound.</p> + +<p>The {{domxref("OscillatorNode")}} comes with basic waveforms out of the box — sine, square, triangle or sawtooth. However, instead of using the standard waves that come by default, we're going to create our own using the {{domxref("PeriodicWave")}} interface and values set in a wavetable. We can use the {{domxref("BaseAudioContext.createPeriodicWave")}} method to use this custom wave with an oscillator.</p> + +<h3 id="The_periodic_wave">The periodic wave</h3> + +<p>First of all, we'll create our periodic wave. To do so, We need to pass real and imaginary values into the {{domxref("BaseAudioContext.createPeriodicWave()")}} method.:</p> + +<pre class="brush: js">const wave = audioCtx.createPeriodicWave(wavetable.real, wavetable.imag); +</pre> + +<div class="note"> +<p><strong>Note</strong>: In our example the wavetable is held in a separate JavaScript file (<code>wavetable.js</code>), because there are <em>so</em> many values. It is taken from a <a href="https://github.com/GoogleChromeLabs/web-audio-samples/tree/main/archive/demos/wave-tables">repository of wavetables</a>, which can be found in the <a href="https://github.com/GoogleChromeLabs/web-audio-samples/">Web Audio API examples from Google Chrome Labs</a>.</p> +</div> + +<h3 id="The_Oscillator">The Oscillator</h3> + +<p>Now we can create an {{domxref("OscillatorNode")}} and set its wave to the one we've created:</p> + +<pre class="brush: js">function playSweep(time) { + const osc = audioCtx.createOscillator(); + osc.setPeriodicWave(wave); + osc.frequency.value = 440; + osc.connect(audioCtx.destination); + osc.start(time); + osc.stop(time + 1); +}</pre> + +<p>We pass in a time parameter to the function here, which we'll use later to schedule the sweep.</p> + +<h3 id="Controlling_amplitude">Controlling amplitude</h3> + +<p>This is great, but wouldn't it be nice if we had an amplitude envelope to go with it? Let's create a simple one so we get used to the methods we need to create an envelope with the Web Audio API.</p> + +<p>Let's say our envelope has attack and release. We can allow the user to control these using <a href="/en-US/docs/Web/HTML/Element/input/range">range inputs</a> on the interface:</p> + +<pre class="brush: html"><label for="attack">Attack</label> +<input name="attack" id="attack" type="range" min="0" max="1" value="0.2" step="0.1" /> + +<label for="release">Release</label> +<input name="release" id="release" type="range" min="0" max="1" value="0.5" step="0.1" /></pre> + +<p>Now we can create some variables over in JavaScript and have them change when the input values are updated:</p> + +<pre class="brush: js">let attackTime = 0.2; +const attackControl = document.querySelector('#attack'); +attackControl.addEventListener('input', function() { + attackTime = Number(this.value); +}, false); + +let releaseTime = 0.5; +const releaseControl = document.querySelector('#release'); +releaseControl.addEventListener('input', function() { + releaseTime = Number(this.value); +}, false);</pre> + +<h3 id="The_final_playSweep_function">The final playSweep() function</h3> + +<p>Now we can expand our <code>playSweep()</code> function. We need to add a {{domxref("GainNode")}} and connect that through our audio graph to actually apply amplitude variations to our sound. The gain node has one property: <code>gain</code>, which is of type {{domxref("AudioParam")}}.</p> + +<p>This is really useful — now we can start to harness the power of the audio param methods on the gain value. We can set a value at a certain time, or we can change it <em>over</em> time with methods such as {{domxref("AudioParam.linearRampToValueAtTime")}}.</p> + +<p>For our attack and release, we'll use the <code>linearRampToValueAtTime</code> method as mentioned above. It takes two parameters — the value you want to set the parameter you are changing to (in this case the gain) and when you want to do this. In our case <em>when</em> is controlled by our inputs. So in the example below the gain is being increased to 1, at a linear rate, over the time the attack range input has been set to. Similarly, for our release, the gain is being set to 0, at a linear rate, over the time the release input has been set to.</p> + +<pre class="brush: js">let sweepLength = 2; +function playSweep(time) { + let osc = audioCtx.createOscillator(); + osc.setPeriodicWave(wave); + osc.frequency.value = 440; + + let sweepEnv = audioCtx.createGain(); + sweepEnv.gain.cancelScheduledValues(time); + sweepEnv.gain.setValueAtTime(0, time); + // set our attack + sweepEnv.gain.linearRampToValueAtTime(1, time + attackTime); + // set our release + sweepEnv.gain.linearRampToValueAtTime(0, time + sweepLength - releaseTime); + + osc.connect(sweepEnv).connect(audioCtx.destination); + osc.start(time); + osc.stop(time + sweepLength); +}</pre> + +<h2 id="The_pulse_—_low_frequency_oscillator_modulation">The "pulse" — low frequency oscillator modulation</h2> + +<p>Great, now we've got our sweep! Let's move on and take a look at that nice pulse sound. We can achieve this with a basic oscillator, modulated with a second oscillator.</p> + +<h3 id="Initial_oscillator">Initial oscillator</h3> + +<p>We'll set up our first {{domxref("OscillatorNode")}} the same way as our sweep sound, except we won't use a wavetable to set a bespoke wave — we'll just use the default <code>sine</code> wave:</p> + +<pre class="brush: js">const osc = audioCtx.createOscillator(); +osc.type = 'sine'; +osc.frequency.value = 880;</pre> + +<p>Now we're going to create a {{domxref("GainNode")}}, as it's the <code>gain</code> value that we will oscillate with our second, low frequency oscillator:</p> + +<pre class="brush: js">const amp = audioCtx.createGain(); +amp.gain.setValueAtTime(1, audioCtx.currentTime);</pre> + +<h3 id="Creating_the_second_low_frequency_oscillator">Creating the second, low frequency, oscillator</h3> + +<p>We'll now create a second — <code>square</code> — wave (or pulse) oscillator, to alter the amplification of our first sine wave:</p> + +<pre class="brush: js">const lfo = audioCtx.createOscillator(); +lfo.type = 'square'; +lfo.frequency.value = 30;</pre> + +<h3 id="Connecting_the_graph">Connecting the graph</h3> + +<p>The key here is connecting the graph correctly, and also starting both oscillators:</p> + +<pre class="brush: js">lfo.connect(amp.gain); +osc.connect(amp).connect(audioCtx.destination); +lfo.start(); +osc.start(time); +osc.stop(time + pulseTime);</pre> + +<div class="note"> +<p><strong>Note</strong>: We also don't have to use the default wave types for either of these oscillators we're creating — we could use a wavetable and the periodic wave method as we did before. There is a multitude of possibilities with just a minimum of nodes.</p> +</div> + +<h3 id="Pulse_user_controls">Pulse user controls</h3> + +<p>For the UI controls, let's expose both frequencies of our oscillators, allowing them to be controlled via range inputs. One will change the tone and the other will change how the pulse modulates the first wave:</p> + +<pre class="brush: html"><label for="hz">Hz</label> +<input name="hz" id="hz" type="range" min="660" max="1320" value="880" step="1" /> +<label for="lfo">LFO</label> +<input name="lfo" id="lfo" type="range" min="20" max="40" value="30" step="1" /></pre> + +<p>As before, we'll vary the parameters when the range input values are changed by the user.</p> + +<pre class="brush: js">let pulseHz = 880; +const hzControl = document.querySelector('#hz'); +hzControl.addEventListener('input', function() { + pulseHz = Number(this.value); +}, false); + +let lfoHz = 30; +const lfoControl = document.querySelector('#lfo'); +lfoControl.addEventListener('input', function() { + lfoHz = Number(this.value); +}, false);</pre> + +<h3 id="The_final_playPulse_function">The final playPulse() function</h3> + +<p>Here's the entire <code>playPulse()</code> function:</p> + +<pre class="brush: js">let pulseTime = 1; +function playPulse(time) { + let osc = audioCtx.createOscillator(); + osc.type = 'sine'; + osc.frequency.value = pulseHz; + + let amp = audioCtx.createGain(); + amp.gain.value = 1; + + let lfo = audioCtx.createOscillator(); + lfo.type = 'square'; + lfo.frequency.value = lfoHz; + + lfo.connect(amp.gain); + osc.connect(amp).connect(audioCtx.destination); + lfo.start(); + osc.start(time); + osc.stop(time + pulseTime); +}</pre> + +<h2 id="The_noise_—_random_noise_buffer_with_biquad_filter">The "noise" — random noise buffer with biquad filter</h2> + +<p>Now we need to make some noise! All modems have noise. Noise is just random numbers when it comes to audio data, so is, therefore, a relatively straightforward thing to create with code.</p> + +<h3 id="Creating_an_audio_buffer">Creating an audio buffer</h3> + +<p>We need to create an empty container to put these numbers into, however, one that the Web Audio API understands. This is where {{domxref("AudioBuffer")}} objects come in. You can fetch a file and decode it into a buffer (we'll get to that later on in the tutorial), or you can create an empty buffer and fill it with your own data.</p> + +<p>For noise, let's do the latter. We first need to calculate the size of our buffer, to create it. We can use the {{domxref("BaseAudioContext.sampleRate")}} property for this:</p> + +<pre class="brush: js">const bufferSize = audioCtx.sampleRate * noiseLength; +const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);</pre> + +<p>Now we can fill it with random numbers between -1 and 1:</p> + +<pre class="brush: js">let data = buffer.getChannelData(0); // get data + +// fill the buffer with noise +for (let i = 0; i < bufferSize; i++) { + data[i] = Math.random() * 2 - 1; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: Why -1 to 1? When outputting sound to a file or speakers we need to have a number to represent 0db full scale — the numerical limit of the fixed point media or DAC. In floating point audio, 1 is a convenient number to map to "full scale" for mathematical operations on signals, so oscillators, noise generators and other sound sources typically output bipolar signals in the range -1 to 1. A browser will clamp values outside this range.</p> +</div> + +<h3 id="Creating_a_buffer_source">Creating a buffer source</h3> + +<p>Now we have the audio buffer and have filled it with data, we need a node to add to our graph that can use the buffer as a source. We'll create a {{domxref("AudioBufferSourceNode")}} for this, and pass in the data we've created:</p> + +<pre class="brush: js">let noise = audioCtx.createBufferSource(); +noise.buffer = buffer;</pre> + +<p>If we connect this through our audio graph and play it —</p> + +<pre class="brush: js">noise.connect(audioCtx.destination); +noise.start();</pre> + +<p>you'll notice that it's pretty hissy or tinny. We've created white noise, that's how it should be. Our values are running from -1 to 1, which means we have peaks of all frequencies, which in turn is actually quite dramatic and piercing. We <em>could</em> modify the function to run values from 0.5 to -0.5 or similar to take the peaks off and reduce the discomfort, however, where's the fun in that? Let's route the noise we've created through a filter.</p> + +<h3 id="Adding_a_biquad_filter_to_the_mix">Adding a biquad filter to the mix</h3> + +<p>We want something in the range of pink or brown noise. We want to cut off those high frequencies and possibly some of the lower ones. Let's pick a bandpass biquad filter for the job.</p> + +<div class="note"> +<p><strong>Note</strong>: The Web Audio API comes with two types of filter nodes: {{domxref("BiquadFilterNode")}} and {{domxref("IIRFilterNode")}}. For the most part a biquad filter will be good enough — it comes with different types such as lowpass, highpass, and bandpass. If you're looking to do something more bespoke, however, the IIR filter might be a good option — see <a href="/en-US/docs/Web/API/Web_Audio_API/Using_IIR_filters">Using IIR filters</a> for more information.</p> +</div> + +<p>Wiring this up is the same as we've seen before. We create the {{domxref("BiquadFilterNode")}}, configure the properties we want for it and connect it through our graph. Different types of biquad filters have different properties — for instance setting the frequency on a bandpass type adjusts the middle frequency, however on a lowpass it would set the top frequency.</p> + +<pre class="brush: js">let bandpass = audioCtx.createBiquadFilter(); +bandpass.type = 'bandpass'; +bandpass.frequency.value = 1000; + +// connect our graph +noise.connect(bandpass).connect(audioCtx.destination);</pre> + +<h3 id="Noise_user_controls">Noise user controls</h3> + +<p>On the UI we'll expose the noise duration and the frequency we want to band, allowing the user to adjust them via range inputs and event handlers just like in previous sections:</p> + +<pre class="brush: html"><label for="duration">Duration</label> +<input name="duration" id="duration" type="range" min="0" max="2" value="1" step="0.1" /> + +<label for="band">Band</label> +<input name="band" id="band" type="range" min="400" max="1200" value="1000" step="5" /> +</pre> + +<pre class="brush: js">let noiseDuration = 1; +const durControl = document.querySelector('#duration'); +durControl.addEventListener('input', function() { + noiseDuration = Number(this.value); +}, false); + +let bandHz = 1000; +const bandControl = document.querySelector('#band'); +bandControl.addEventListener('input', function() { + bandHz = Number(this.value); +}, false);</pre> + +<h3 id="The_final_playNoise_function">The final playNoise() function</h3> + +<p>Here's the entire <code>playNoise()</code> function:</p> + +<pre class="brush: js">function playNoise(time) { + const bufferSize = audioCtx.sampleRate * noiseDuration; // set the time of the note + const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate); // create an empty buffer + let data = buffer.getChannelData(0); // get data + + // fill the buffer with noise + for (let i = 0; i < bufferSize; i++) { + data[i] = Math.random() * 2 - 1; + } + + // create a buffer source for our created data + let noise = audioCtx.createBufferSource(); + noise.buffer = buffer; + + let bandpass = audioCtx.createBiquadFilter(); + bandpass.type = 'bandpass'; + bandpass.frequency.value = bandHz; + + // connect our graph + noise.connect(bandpass).connect(audioCtx.destination); + noise.start(time); +}</pre> + +<h2 id="Dial_up_—_loading_a_sound_sample">"Dial up" — loading a sound sample</h2> + +<p>It's straightforward enough to emulate phone dial (DTMF) sounds, by playing a couple of oscillators together using the methods we've already looked at, however, in this section, we'll load in a sample file instead so we can take a look at what's involved.</p> + +<h3 id="Loading_the_sample">Loading the sample</h3> + +<p>We want to make sure our file has loaded and been decoded into a buffer before we use it, so let's create an <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async</a></code> function to allow us to do this:</p> + +<pre class="brush: js">async function getFile(audioContext, filepath) { + const response = await fetch(filepath); + const arrayBuffer = await response.arrayBuffer(); + const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); + return audioBuffer; +}</pre> + +<p>We can then use the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> operator when calling this function, which ensures that we can only run subsequent code when it has finished executing.</p> + +<p>Let's create another <code>async</code> function to set up the sample — we can combine the two async functions in a nice promise pattern to perform further actions when this file is loaded and buffered:</p> + +<pre class="brush: js">async function setupSample() { + const filePath = 'dtmf.mp3'; + const sample = await getFile(audioCtx, filePath); + return sample; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: You can easily modify the above function to take an array of files and loop over them to load more than one sample. This would be very handy for more complex instruments, or gaming.</p> +</div> + +<p>We can now use <code>setupSample()</code> like so:</p> + +<pre class="brush: js">setupSample() + .then((sample) => { + // sample is our buffered file + // ... +});</pre> + +<p>When the sample is ready to play, the program sets up the UI so it is ready to go.</p> + +<h3 id="Playing_the_sample">Playing the sample</h3> + +<p>Let's create a <code>playSample()</code> function in a similar manner to how we did with the other sounds. This time it will create an {{domxref("AudioBufferSourceNode")}}, and put the buffer data we've fetched and decoded into it, and play it:</p> + +<pre class="brush: js">function playSample(audioContext, audioBuffer, time) { + const sampleSource = audioContext.createBufferSource(); + sampleSource.buffer = audioBuffer; + sampleSource.connect(audioContext.destination) + sampleSource.start(time); + return sampleSource; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: We can call <code>stop()</code> on an {{domxref("AudioBufferSourceNode")}}, however, this will happen automatically when the sample has finished playing.</p> +</div> + +<h3 id="Dial-up_user_controls">Dial-up user controls</h3> + +<p>The {{domxref("AudioBufferSourceNode")}} comes with a <code><a href="/en-US/docs/Web/API/AudioBufferSourceNode/playbackRate">playbackRate</a></code> property. Let's expose that to our UI, so we can speed up and slow down our sample. We'll do that in the same sort of way as before:</p> + +<pre class="brush: html"><label for="rate">Rate</label> +<input name="rate" id="rate" type="range" min="0.1" max="2" value="1" step="0.1" /></pre> + +<pre class="brush: js">let playbackRate = 1; +const rateControl = document.querySelector('#rate'); +rateControl.addEventListener('input', function() { + playbackRate = Number(this.value); +}, false);</pre> + +<h3 id="The_final_playSample_function">The final playSample() function</h3> + +<p>We'll then add a line to update the <code>playbackRate</code> property to our <code>playSample()</code> function. The final version looks like this:</p> + +<pre class="brush: js">function playSample(audioContext, audioBuffer, time) { + const sampleSource = audioContext.createBufferSource(); + sampleSource.buffer = audioBuffer; + sampleSource.playbackRate.value = playbackRate; + sampleSource.connect(audioContext.destination) + sampleSource.start(time); + return sampleSource; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: The sound file was <a href="http://soundbible.com/1573-DTMF-Tones.html">sourced from soundbible.com</a>.</p> +</div> + +<h2 id="Playing_the_audio_in_time">Playing the audio in time</h2> + +<p>A common problem with digital audio applications is getting the sounds to play in time so that the beat remains consistent, and things do not slip out of time.</p> + +<p>We could schedule our voices to play within a <code>for</code> loop, however the biggest problem with this is updating whilst it is playing, and we've already implemented UI controls to do so. Also, it would be really nice to consider an instrument-wide BPM control. The best way to get our voices to play on the beat is to create a scheduling system, whereby we look ahead at when the notes are going to play and push them into a queue. We can start them at a precise time with the currentTime property and also take into account any changes.</p> + +<div class="note"> +<p><strong>Note</strong>: This is a much stripped down version of <a href="https://www.html5rocks.com/en/tutorials/audio/scheduling/">Chris Wilson's A Tale Of Two Clocks</a> article, which goes into this method in much more detail. There's no point repeating it all here, but it's highly recommended to read this article and use this method. Much of the code here is taken from his <a href="https://github.com/cwilso/metronome/blob/master/js/metronome.js">metronome example</a>, which he references in the article.</p> +</div> + +<p>Let's start by setting up our default BPM (beats per minute), which will also be user-controllable via — you guessed it — another range input.</p> + +<pre class="brush: js">let tempo = 60.0; +const bpmControl = document.querySelector('#bpm'); +bpmControl.addEventListener('input', function() { + tempo = Number(this.value); +}, false);</pre> + +<p>Then we'll create variables to define how far ahead we want to look, and how far ahead we want to schedule:</p> + +<pre class="brush: js">const lookahead = 25.0; // How frequently to call scheduling function (in milliseconds) +const scheduleAheadTime = 0.1; // How far ahead to schedule audio (sec)</pre> + +<p>Let's create a function that moves the note forwards by one beat, and loops back to the first when it reaches the 4th (last) one:</p> + +<pre class="brush: js">let currentNote = 0; +let nextNoteTime = 0.0; // when the next note is due. + +function nextNote() { + const secondsPerBeat = 60.0 / tempo; + + nextNoteTime += secondsPerBeat; // Add beat length to last beat time + + // Advance the beat number, wrap to zero + currentNote++; + if (currentNote === 4) { + currentNote = 0; + } +}</pre> + +<p>We want to create a reference queue for the notes that are to be played, and the functionality to play them using the functions we've previously created:</p> + +<pre class="brush: js">const notesInQueue = []; + +function scheduleNote(beatNumber, time) { + + // push the note on the queue, even if we're not playing. + notesInQueue.push({ note: beatNumber, time: time }); + + if (pads[0].querySelectorAll('button')[beatNumber].getAttribute('aria-checked') === 'true') { + playSweep(time) + } + if (pads[1].querySelectorAll('button')[beatNumber].getAttribute('aria-checked') === 'true') { + playPulse(time) + } + if (pads[2].querySelectorAll('button')[beatNumber].getAttribute('aria-checked') === 'true') { + playNoise(time) + } + if (pads[3].querySelectorAll('button')[beatNumber].getAttribute('aria-checked') === 'true') { + playSample(audioCtx, dtmf, time); + } +}</pre> + +<p>Here we look at the current time and compare it to the time for the next note; when the two match it will call the previous two functions.</p> + +<p>{{domxref("AudioContext")}} object instances have a <code><a href="/en-US/docs/Web/API/BaseAudioContext/currentTime">currentTime</a></code> property, which allows us to retrieve the number of seconds after we first created the context. This is what we shall use for timing within our step sequencer — It's extremely accurate, returning a float value accurate to about 15 decimal places.</p> + +<pre class="brush: js">function scheduler() { + // while there are notes that will need to play before the next interval, schedule them and advance the pointer. + while (nextNoteTime < audioCtx.currentTime + scheduleAheadTime ) { + scheduleNote(currentNote, nextNoteTime); + nextNote(); + } + timerID = window.setTimeout(scheduler, lookahead); +}</pre> + +<p>We also need a draw function to update the UI, so we can see when the beat progresses.</p> + +<pre class="brush: js">let lastNoteDrawn = 3; + +function draw() { + let drawNote = lastNoteDrawn; + let currentTime = audioCtx.currentTime; + + while (notesInQueue.length && notesInQueue[0].time < currentTime) { + drawNote = notesInQueue[0].note; + notesInQueue.splice(0,1); // remove note from queue + } + + // We only need to draw if the note has moved. + if (lastNoteDrawn != drawNote) { + pads.forEach(function(el, i) { + el.children[lastNoteDrawn].style.borderColor = 'hsla(0, 0%, 10%, 1)'; + el.children[drawNote].style.borderColor = 'hsla(49, 99%, 50%, 1)'; + }); + + lastNoteDrawn = drawNote; + } + // set up to draw again + requestAnimationFrame(draw); +}</pre> + +<h2 id="Putting_it_all_together">Putting it all together</h2> + +<p>Now all that's left to do is make sure we've loaded the sample before we are able to <em>play</em> the instrument. We'll add a loading screen that disappears when the file has been fetched and decoded, then we can allow the scheduler to start using the play button click event.</p> + +<pre class="brush: js">// when the sample has loaded allow play +let loadingEl = document.querySelector('.loading'); +const playButton = document.querySelector('[data-playing]'); +let isPlaying = false; +setupSample() + .then((sample) => { + loadingEl.style.display = 'none'; // remove loading screen + + dtmf = sample; // to be used in our playSample function + + playButton.addEventListener('click', function() { + isPlaying = !isPlaying; + + if (isPlaying) { // start playing + + // check if context is in suspended state (autoplay policy) + if (audioCtx.state === 'suspended') { + audioCtx.resume(); + } + + currentNote = 0; + nextNoteTime = audioCtx.currentTime; + scheduler(); // kick off scheduling + requestAnimationFrame(draw); // start the drawing loop. + this.dataset.playing = 'true'; + + } else { + + window.clearTimeout(timerID); + this.dataset.playing = 'false'; + + } + }) + });</pre> + +<h2 id="Summary">Summary</h2> + +<p>We've now got an instrument inside our browser! Keep playing and experimenting — you can expand on any of these techniques to create something much more elaborate.</p> diff --git a/files/ko/web/api/web_audio_api/advanced_techniques/sequencer.png b/files/ko/web/api/web_audio_api/advanced_techniques/sequencer.png Binary files differnew file mode 100644 index 0000000000..63de8cb0de --- /dev/null +++ b/files/ko/web/api/web_audio_api/advanced_techniques/sequencer.png diff --git a/files/ko/web/api/web_audio_api/audio-context_.png b/files/ko/web/api/web_audio_api/audio-context_.png Binary files differnew file mode 100644 index 0000000000..36d0190052 --- /dev/null +++ b/files/ko/web/api/web_audio_api/audio-context_.png diff --git a/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html b/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html index 571c15684e..b45db93b23 100644 --- a/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html +++ b/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html @@ -1,5 +1,5 @@ --- -title: Basic concepts behind Web Audio API +title: Web Audio API의 기본 개념 slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API tags: - 가이드 @@ -12,110 +12,116 @@ tags: translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API --- <div class="summary"> -<p><span class="seoSummary">Web Audio API의 기능이 어떻게 동작하는지에 대한 오디오 이론에 대해서 설명합니다. 마스터 사운드 엔지니어가 될 수 는 없지만, Web Audio API가 왜 그렇게 작동하는지에 대해 이해할 수 있는 충분한 배경 지식을 제공해서 개발중에 더 나은 결정을 내릴 수 있게합니다. </span></p> +<p><span class="seoSummary">오디오가 어떻게 여러분의 앱을 통해서 전송(route)되는지를 설계하는 동안 여러분이 적절한 결정을 내리는 것을 돕기 위해, 이 문서는 Web Audio API의 기능이 어떻게 동작하는가를 뒷받침하는 얼마간의 오디오 이론을 설명합니다. 이 문서를 읽는다고 해서 여러분이 숙련된 사운드 엔지니어가 될 수는 없지만, 왜 Web Audio API가 이렇게 동작하는지를 이해하기에 충분한 배경지식을 줄 것입니다.</span></p> </div> -<h2 id="Audio_graphs">Audio graphs</h2> +<h2 id="Audio_graphs">오디오 그래프</h2> -<p>The Web Audio API involves handling audio operations inside an <strong>audio context</strong>, and has been designed to allow <strong>modular routing</strong>. Basic audio operations are performed with <strong>audio nodes</strong>, which are linked together to form an <strong>audio routing graph</strong>. Several sources — with different types of channel layout — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.</p> +<p><a href="/ko/docs/Web/API/Web_Audio_API">Web Audio API</a>는 <a href="/ko/docs/Web/API/AudioContext">오디오 컨텍스트</a>(audio context) 내의 오디오 연산을 다루는 것을 포함하고, <strong>모듈러 라우팅</strong>(modular routing)을 허용하도록 설계되었습니다. 기본적인 오디오 연산은 <strong>오디오 노드</strong>(audio node)와 함께 수행되는데, 이는 <strong>오디오 라우팅 그래프</strong>를 형성하기 위해 함께 연결되어 있습니다. 다른 유형의 채널 레이아웃을 가진 몇몇의 소스(source)들은 심지어 하나의 컨텍스트 내에서 지원됩니다. 이 모듈식의(modular) 디자인은 역동적인 효과를 가진 복잡한 오디오 기능을 만드는 데 있어 유연함을 제공합니다.</p> -<p>Audio nodes are linked via their inputs and outputs, forming a chain that starts with one or more sources, goes through one or more nodes, then ends up at a destination. Although, you don't have to provide a destination if you, say, just want to visualize some audio data. A simple, typical workflow for web audio would look something like this:</p> +<p>하나 또는 더 많은 소스에서 시작하고, 하나 또는 더 많은 노드를 통과하고, 그리고서 도착지(destination)에서 끝나는 체인(chain)을 형성하며, 오디오 노드는 입력과 출력을 통해 연결되어 있습니다. 그러나, 예를 들어 여러분이 단지 오디오 데이터를 시각화하기를 원한다면 도착지를 반드시 제공할 필요는 없습니다. 웹 오디오의 단순하고, 일반적인 작업 흐름은 다음과 같습니다:</p> <ol> - <li>Create audio context.</li> - <li>Inside the context, create sources — such as <code><audio></code>, oscillator, stream.</li> - <li>Create effects nodes, such as reverb, biquad filter, panner, compressor.</li> - <li>Choose final destination of audio, for example your system speakers.</li> - <li>Connect the sources up to the effects, and the effects to the destination.</li> + <li>오디오 컨텍스트를 생성합니다.</li> + <li>컨텍스트 내에서, 다음과 같이 소스를 생성합니다 — {{HTMLElement("audio")}}, oscillator, 또는 stream.</li> + <li>효과 노드를 생성하는데, 예를 들자면 reverb, biquad filter, panner, 또는 compressor가 있습니다.</li> + <li>사용자의 컴퓨터 스피커와 같이, 오디오의 최종 도착지를 선택합니다.</li> + <li>오디오 소스로부터 0 또는 더 많은 효과를 거쳐 연결(connection)을 확립하는데, 마지막으로는 앞서 선택된 도착지에서 끝납니다.</li> </ol> -<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12237/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p> +<div class="notecard note"> +<h4>채널 표기법</h4> -<p>Each input or output is composed of several <strong>channels, </strong>which represent a specific audio layout. Any discrete channel structure is supported, including <em>mono</em>, <em>stereo</em>, <em>quad</em>, <em>5.1</em>, and so on.</p> +<p>한 신호에서 사용 가능한 오디오 채널의 숫자는 종종 숫자 형식으로 표현되는데, 예를 들자면 2.0 또는 5.1과 같습니다. 이것은 <a href="https://en.wikipedia.org/wiki/Surround_sound#Channel_notation">채널 표기법</a>이라고 불립니다. 첫번째 숫자는 신호가 포함하는 전체 주파수 범위 오디오 채널의 숫자입니다. 마침표 뒤의 숫자는 저주파 효과(LFE) 출력에 대해 비축된 채널의 수를 나타냅니다; 이 숫자는 종종 <strong>서브 우퍼</strong>(subwoofer)로 불립니다.</p> +</div> + +<p><img alt="오디오 컨텍스트라고 써진 외부 상자와 소스, 효과, 목적지라고 써진 세 개의 내부 상자를 가진 하나의 간단한 도표. 세 개의 내부 상자는 좌에서 우를 향하는 화살표를 사이에 가지고 있는데, 이는 오디오 정보의 흐름을 나타냅니다." src="webaudioapi_en.svg" style="display: block; margin: 0px auto;"></p> + +<p>각각의 입력 또는 출력은 몇몇의 <strong>채널</strong>으로 구성되어 있는데, 이는 특정한 오디오 레이아웃을 나타냅니다. <em>모노</em>, <em>스테레오</em>, <em>quad</em>, <em>5.1</em> 등등을 포함하는, 어떠한 별개의 채널 구조든 지원됩니다.</p> -<p><img alt="Show the ability of AudioNodes to connect via their inputs and outputs and the channels inside these inputs/outputs." src="https://mdn.mozillademos.org/files/14179/mdn.png" style="display: block; height: 360px; margin: 0px auto; width: 630px;"></p> +<p><img alt="입력과 출력 그리고 이 입력/출력 내부의 채널을 통해 연결하는 AudioNode의 능력을 보여줍니다." src="mdn.png"></p> -<p>Audio sources can come from a variety of places:</p> +<p>오디오 소스는 다양한 방법으로 얻어질 수 있습니다:</p> <ul> - <li>Generated directly in JavaScript by an audio node (such as an oscillator).</li> - <li>Created from raw PCM data (the audio context has methods to decode supported audio formats).</li> - <li>Taken from HTML media elements (such as {{HTMLElement("video")}} or {{HTMLElement("audio")}}).</li> - <li>Taken directly from a <a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a> {{domxref("MediaStream")}} (such as a webcam or microphone).</li> + <li>소리는 JavaScript에서 (oscillator처럼) 오디오 노드에 의해 직접적으로 생성될 수 있습니다.</li> + <li>가공되지 않은(raw) PCM 데이터로부터 생성될 수 있습니다 (오디오 컨텍스트는 지원되는 오디오 포맷을 디코드하는 메서드를 가지고 있습니다).</li> + <li>({{HTMLElement("video")}} 또는 {{HTMLElement("audio")}}처럼) HTML 미디어 요소로부터 취해질 수 있습니다.</li> + <li>(웹캠이나 마이크처럼) <a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a> {{domxref("MediaStream")}}로부터 직접적으로 취해질 수 있습니다.</li> </ul> -<h2 id="Audio_data_what's_in_a_sample">Audio data: what's in a sample</h2> +<h2 id="Audio_data_whats_in_a_sample">오디오 데이터: 무엇이 샘플 속에 들어있는가</h2> -<p>When an audio signal is processed, <strong>sampling</strong> means the conversion of a <a href="https://en.wikipedia.org/wiki/Continuous_signal" title="Continuous signal">continuous signal</a> to a <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Discrete_signal" title="Discrete signal">discrete signal</a>; or put another way, a continuous sound wave, such as a band playing live, is converted to a sequence of samples (a discrete-time signal) that allow a computer to handle the audio in distinct blocks.</p> +<p>오디오 신호가 처리될 때, <strong>샘플링</strong>이란 <a href="https://en.wikipedia.org/wiki/Continuous_signal" title="Continuous signal">연속 신호</a>(continuous signal)의 <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Discrete_signal" title="Discrete signal">불연속 신호</a>(discrete signal)로의 전환을 의미합니다; 또는 달리 말하면, 라이브로 연주하고 있는 밴드와 같이, 연속적인 음파를 컴퓨터가 오디오를 구별되는 단위로 다룰 수 있게 허용하는 일련의 샘플들로 전환하는 것을 의미합니다.</p> -<p>A lot more information can be found on the Wikipedia page <a href="https://en.wikipedia.org/wiki/Sampling_%28signal_processing%29">Sampling (signal processing)</a>.</p> +<p>더 많은 정보는 위키피디아 문서 <a href="https://en.wikipedia.org/wiki/Sampling_%28signal_processing%29">샘플링 (신호 처리)</a>에서 찾을 수 있습니다.</p> -<h2 id="Audio_buffers_frames_samples_and_channels">Audio buffers: frames, samples and channels</h2> +<h2 id="Audio_buffers_frames_samples_and_channels">오디오 버퍼: 프레임, 샘플, 그리고 채널</h2> -<p>An {{ domxref("AudioBuffer") }} takes as its parameters a number of channels (1 for mono, 2 for stereo, etc), a length, meaning the number of sample frames inside the buffer, and a sample rate, which is the number of sample frames played per second.</p> +<p>{{ domxref("AudioBuffer") }}는 매개변수로서 채널의 수 (1은 모노, 2는 스테레오 등), 버퍼 내부의 샘플 프레임의 수를 의미하는 길이, 그리고 초당 재생되는 샘플 프레임의 수인 샘플 레이트를 취합니다.</p> -<p>A sample is a single float32 value that represents the value of the audio stream at each specific point in time, in a specific channel (left or right, if in the case of stereo). A frame, or sample frame, is the set of all values for all channels that will play at a specific point in time: all the samples of all the channels that play at the same time (two for a stereo sound, six for 5.1, etc.)</p> +<p>샘플은 특정한 채널(스테레오의 경우, 왼쪽 또는 오른쪽)에서, 각각의 특정한 시점에의 오디오 스트림의 값을 표현하는 단일의 float32 값입니다. 프레임 또는 샘플 프레임은, 특정한 시점에 재생될 모든 채널의 모든 값들의 집합입니다: 즉 같은 시간에 재생되는 모든 채널의 모든 샘플 (스테레오 사운드의 경우 2개, 5.1의 경우 6개 등)입니다.</p> -<p>The sample rate is the number of those samples (or frames, since all samples of a frame play at the same time) that will play in one second, measured in Hz. The higher the sample rate, the better the sound quality.</p> +<p>샘플 레이트는 Hz로 측정되는, 1초에 재생될 이 샘플들 (또는 프레임들, 왜냐하면 한 프레임의 모든 샘플들이 같은 시간에 재생되므로) 의 수입니다. 샘플 레이트가 높을수록 음질이 더 좋습니다.</p> -<p>Let's look at a Mono and a Stereo audio buffer, each is one second long, and playing at 44100Hz:</p> +<p>모노와 스테레오 오디오 버퍼를 살펴봅시다, 각각 1초 길이고, 44100Hz로 재생됩니다:</p> <ul> - <li>The Mono buffer will have 44100 samples, and 44100 frames. The <code>length</code> property will be 44100.</li> - <li>The Stereo buffer will have 88200 samples, but still 44100 frames. The <code>length</code> property will still be 44100 since it's equal to the number of frames.</li> + <li>모노 버퍼는 44100 샘플과, 44100 프레임을 가질 것입니다. <code>length</code> 프로퍼티는 44100이 될 것입니다.</li> + <li>스테레오 버퍼는 88200 샘플을 가질 것이나, 여전히 44100 프레임입니다. <code>length</code> 프로퍼티는 프레임의 수와 동일하므로 여전히 44100일 것입니다.</li> </ul> -<p><img alt="A diagram showing several frames in an audio buffer in a long line, each one containing two samples, as the buffer has two channels, it is stereo." src="https://mdn.mozillademos.org/files/14801/sampleframe-english.png" style="height: 150px; width: 853px;"></p> +<p><img alt="긴 줄에서 오디오 버퍼의 몇몇 프레임을 보여주는 도표인데, 각각은 두 개의 샘플을 포함하고 있습니다. 버퍼가 두 개의 채널을 가지고 있으므로, 이것은 스테레오입니다." src="sampleframe-english.png"></p> -<p>When a buffer plays, you will hear the left most sample frame, and then the one right next to it, etc. In the case of stereo, you will hear both channels at the same time. Sample frames are very useful, because they are independent of the number of channels, and represent time, in a useful way for doing precise audio manipulation.</p> +<p>버퍼가 재생될 때, 여러분은 제일 왼쪽의 샘플 프레임을 들을 것이고, 그리고서 다음에 있는 제일 오른쪽의 샘플 프레임 등등을 들을 것입니다. 스테레오의 경우에, 여러분은 양 채널을 동시에 들을 것입니다. 샘플 프레임은 대단히 유용한데, 왜냐하면 샘플 프레임은 채널의 수에 독립적이고, 정밀한 오디오 조작을 함에 있어 유용한 방법으로 시간을 나타내기 때문입니다.</p> <div class="note"> -<p><strong>Note</strong>: To get a time in seconds from a frame count, simply divide the number of frames by the sample rate. To get a number of frames from a number of samples, simply divide by the channel count.</p> +<p><strong>노트</strong>: 프레임 카운트로부터 초로 시간을 얻기 위해서는, 프레임의 수를 샘플 레이트로 나누십시오. 샘플의 수로부터 프레임의 수를 얻기 위해서는, 채널 카운트로 나누십시오.</p> </div> -<p>Here's a couple of simple trivial examples:</p> +<p>두 개의 간단한 예제입니다:</p> <pre class="brush: js">var context = new AudioContext(); var buffer = context.createBuffer(2, 22050, 44100);</pre> <div class="note"> -<p><strong>Note</strong>: In <a href="https://en.wikipedia.org/wiki/Digital_audio" title="Digital audio">digital audio</a>, <strong>44,100 <a href="https://en.wikipedia.org/wiki/Hertz" title="Hertz">Hz</a></strong> (alternately represented as <strong>44.1 kHz</strong>) is a common <a href="https://en.wikipedia.org/wiki/Sampling_frequency" title="Sampling frequency">sampling frequency</a>. Why 44.1kHz? <br> +<p><strong>노트</strong>: <a href="https://en.wikipedia.org/wiki/Digital_audio" title="Digital audio">디지털 오디오</a>에서, <strong>44,100 <a href="https://en.wikipedia.org/wiki/Hertz">Hz</a></strong> (또한 <strong>44.1 kHz</strong>로 표현되어짐) 은 일반적인 <a href="https://en.wikipedia.org/wiki/Sampling_frequency" title="Sampling frequency">샘플링 주파수</a>입니다. 왜 44.1kHz일까요? <br> <br> - Firstly, because the <a href="https://en.wikipedia.org/wiki/Hearing_range" title="Hearing range">hearing range</a> of human ears is roughly 20 Hz to 20,000 Hz. Via the <a href="https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem" title="Nyquist–Shannon sampling theorem">Nyquist–Shannon sampling theorem</a>, the sampling frequency must be greater than twice the maximum frequency one wishes to reproduce. Therefore, the sampling rate has to be greater than 40 kHz.<br> + 첫째로, 왜냐하면 인간의 <a href="https://en.wikipedia.org/wiki/Hearing_range" title="Hearing range">가청 범위</a>(hearing range)는 대략적으로 20 Hz에서 20,000 Hz이기 때문입니다. <a href="https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem" title="Nyquist–Shannon sampling theorem">표본화 정리</a>(Nyquist–Shannon sampling theorem)에 의하여, 샘플링 주파수는 반드시 재생하기를 원하는 최대 주파수의 2배보다 커야 합니다. 그러므로, 샘플링 레이트는 40 kHz보다 커야만 합니다.<br> <br> - Secondly, signals must be <a href="https://en.wikipedia.org/wiki/Low-pass_filter" title="Low-pass filter">low-pass filtered</a> before sampling, otherwise <a href="https://en.wikipedia.org/wiki/Aliasing" title="Aliasing">aliasing</a> occurs. While an ideal low-pass filter would perfectly pass frequencies below 20 kHz (without attenuating them) and perfectly cut off frequencies above 20 kHz, in practice a <a href="https://en.wikipedia.org/wiki/Transition_band" title="Transition band">transition band</a> is necessary, where frequencies are partly attenuated. The wider this transition band is, the easier and more economical it is to make an <a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter" title="Anti-aliasing filter">anti-aliasing filter</a>. The 44.1 kHz sampling frequency allows for a 2.05 kHz transition band.</p> + 둘째로, 신호는 반드시 샘플링 전에 <a href="https://en.wikipedia.org/wiki/Low-pass_filter" title="Low-pass filter">저주파 통과 필터</a>(low-pass filter)를 거쳐야만 합니다, 그렇지 않으면 <a href="https://en.wikipedia.org/wiki/Aliasing">에일리어싱</a>(aliasing)이 발생합니다. 이상적인 저주파 통과 필터는 완벽히 20 kHz 아래의 주파수들을 (약화시키는 일 없이) 통과시키고 완벽히 20 kHz 위의 주파수들을 잘라낼 것이지만, 실제로는 <a href="https://en.wikipedia.org/wiki/Transition_band" title="Transition band">천이 대역</a>(transition band)이 필수적인데, 여기서 주파수들은 부분적으로 약화됩니다. 천이 대역이 넓을수록, <a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter" title="Anti-aliasing filter">주파수 중복방지 필터</a>(anti-aliasing filter)를 만들기 쉽고 경제적입니다. 44.1 kHz 샘플링 주파수는 2.05 kHz 천이 대역을 감안합니다.</p> </div> -<p>If you use this call above, you will get a stereo buffer with two channels, that when played back on an AudioContext running at 44100Hz (very common, most normal sound cards run at this rate), will last for 0.5 seconds: 22050 frames/44100Hz = 0.5 seconds.</p> +<p>만약 위의 이 호출을 사용한다면, 여러분은 44100Hz (아주 일반적입니다, 대부분의 보통 사운드 카드는 이 레이트에서 실행됩니다) 에서 실행되는 AudioContext에서 재생될 때 0.5초동안 지속될 두 개의 채널을 가진 스테레오 버퍼를 얻을 것입니다. (22050 프레임 / 44100Hz = 0.5초)</p> <pre class="brush: js">var context = new AudioContext(); var buffer = context.createBuffer(1, 22050, 22050);</pre> -<p>If you use this call, you will get a mono buffer with just one channel), that when played back on an AudioContext running at 44100Hz, will be automatically <em>resampled</em> to 44100Hz (and therefore yield 44100 frames), and last for 1.0 second: 44100 frames/44100Hz = 1 second.</p> +<p>만약 이 호출을 사용한다면, 여러분은 44100Hz에서 실행되는 AudioContext에서 재생될 때 자동적으로 44100Hz로 <em>리샘플</em>(resample)되고 1.0초동안 지속될 단지 하나의 채널을 가진 모노 버퍼를 얻을 것입니다. (44100 프레임 / 44100Hz = 1초)</p> <div class="note"> -<p><strong>Note</strong>: audio resampling is very similar to image resizing. Say you've got a 16 x 16 image, but you want it to fill a 32x32 area. You resize (or resample) it. The result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, with the resized image taking up less space. Resampled audio is exactly the same: you save space, but in practice you will be unable to properly reproduce high frequency content, or treble sound.</p> +<p><strong>노트</strong>: 오디오 리샘플링은 이미지 리사이징과 몹시 유사합니다. 예를 들어 여러분이 16 x 16 이미지를 가지고 있지만 32 x 32 영역을 채우고 싶다고 가정해 봅시다. 당신은 리사이즈 (또는 리샘플) 합니다. 결과는 더 낮은 품질을 가지지만 (리사이징 알고리즘에 따라서, 흐릿하거나 각질 수 있습니다), 리사이즈된 이미지가 더 적은 공간을 차지한 채로 작동은 합니다. 리샘플된 오디오는 정확히 동일합니다: 여러분은 공간을 저장하지만, 실제로는 높은 주파수의 콘텐츠 또는 고음의 소리를 적절히 재생할 수 없을 것입니다.</p> </div> -<h3 id="Planar_versus_interleaved_buffers">Planar versus interleaved buffers</h3> +<h3 id="Planar_versus_interleaved_buffers">평면(planar) 대 인터리브(interleaved) 버퍼</h3> -<p>The Web Audio API uses a planar buffer format. The left and right channels are stored like this:</p> +<p>Web Audio API는 평면 버퍼 포맷을 사용합니다. 왼쪽과 오른쪽 채널은 다음과 같이 저장됩니다:</p> -<pre>LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (for a buffer of 16 frames)</pre> +<pre>LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (16 프레임의 버퍼에 대해)</pre> -<p>This is very common in audio processing: it makes it easy to process each channel independently.</p> +<p>이것은 오디오 프로세싱에서 아주 일반적입니다: 이것은 각 채널을 독립적으로 처리하기 쉽게 만들어줍니다.</p> -<p>The alternative is to use an interleaved buffer format:</p> +<p>대안은 인터리브 버퍼 포맷을 사용하는 것입니다:</p> -<pre>LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (for a buffer of 16 frames)</pre> +<pre>LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (16 프레임의 버퍼에 대해)</pre> -<p>This format is very common for storing and playing back audio without much processing, for example a decoded MP3 stream.<br> +<p>이 포맷은 많은 프로세싱 없이 오디오를 저장하고 재생하는 데 아주 일반적인데, 예를 들자면 디코드된 MP3 스트림이 있습니다.<br> <br> - The Web Audio API exposes <strong>only</strong> planar buffers, because it's made for processing. It works with planar, but converts the audio to interleaved when it is sent to the sound card for playback. Conversely, when an MP3 is decoded, it starts off in interleaved format, but is converted to planar for processing.</p> + Web Audio API는 <strong>오직</strong> 평면 버퍼만을 드러내는데, 왜냐하면 프로세싱을 위해 만들어졌기 때문입니다. 이것은 평면으로 동작하나, 오디오가 재생을 위해 사운드 카드에 전달되었을 때 인터리브로 전환합니다. 역으로, MP3가 디코드되었을 때, 이것은 인터리브 포맷으로 시작하나, 프로세싱을 위해 평면으로 전환됩니다.</p> -<h2 id="Audio_channels">Audio channels</h2> +<h2 id="Audio_channels">오디오 채널</h2> -<p>Different audio buffers contain different numbers of channels: from the more basic mono (only one channel) and stereo (left and right channels), to more complex sets like quad and 5.1, which have different sound samples contained in each channel, leading to a richer sound experience. The channels are usually represented by standard abbreviations detailed in the table below:</p> +<p>다른 오디오 버퍼는 다른 수의 채널을 포함합니다: 간단한 모노(오직 한 개의 채널)와 스테레오(왼쪽과 오른쪽 채널)에서부터, 각 채널에 포함된 다른 사운드 샘플을 가지고 있어 더욱 풍부한 소리 경험을 가능케 하는 quad와 5.1과 같은 더욱 복잡한 것들까지 있습니다. 채널들은 보통 아래의 테이블에 상세히 설명된 표준 약어에 의해 표현됩니다:</p> <table class="standard-table"> <tbody> @@ -147,34 +153,34 @@ var buffer = context.createBuffer(1, 22050, 22050);</pre> </tbody> </table> -<h3 id="Up-mixing_and_down-mixing">Up-mixing and down-mixing</h3> +<h3 id="Up-mixing_and_down-mixing">업믹싱(up-mixing)과 다운믹싱(down-mixing)</h3> -<p>When the number of channels doesn't match between an input and an output, up- or down-mixing happens according the following rules. This can be somewhat controlled by setting the {{domxref("AudioNode.channelInterpretation")}} property to <code>speakers</code> or <code>discrete</code>:</p> +<p>채널의 수가 입력과 출력 사이에서 맞지 않을 때, 업 또는 다운 믹싱이 다음의 규칙에 따라 발생합니다. 이는 {{domxref("AudioNode.channelInterpretation")}} 프로퍼티를 <code>speakers</code> 또는 <code>discrete</code>로 설정함으로써 어느 정도 제어될 수 있습니다.</p> <table class="standard-table"> <thead> <tr> - <th scope="row">Interpretation</th> - <th scope="col">Input channels</th> - <th scope="col">Output channels</th> - <th scope="col">Mixing rules</th> + <th scope="row">해석</th> + <th scope="col">입력 채널</th> + <th scope="col">출력 채널</th> + <th scope="col">믹싱 규칙</th> </tr> </thead> <tbody> <tr> - <th colspan="1" rowspan="13" scope="row"><code>speakers</code></th> + <th rowspan="13" scope="row"><code>스피커</code></th> <td><code>1</code> <em>(Mono)</em></td> <td><code>2</code> <em>(Stereo)</em></td> - <td><em>Up-mix from mono to stereo</em>.<br> - The <code>M</code> input channel is used for both output channels (<code>L</code> and <code>R</code>).<br> + <td><em>모노에서 스테레오로 업믹스</em><br> + <code>M</code> 입력 채널이 양 출력 채널 (<code>L</code>와 <code>R</code>)에 대해 사용됩니다.<br> <code>output.L = input.M<br> output.R = input.M</code></td> </tr> <tr> <td><code>1</code> <em>(Mono)</em></td> <td><code>4</code> <em>(Quad)</em></td> - <td><em>Up-mix from mono to quad.</em><br> - The <code>M</code> input channel is used for non-surround output channels (<code>L</code> and <code>R</code>). Surround output channels (<code>SL</code> and <code>SR</code>) are silent.<br> + <td><em>모노에서 quad로 업믹스</em><br> + <code>M</code> 입력 채널이 비 서라운드(non-surround) 출력 채널에 대해 사용됩니다 (<code>L</code> 과 <code>R</code>). 서라운드 출력 채널 (<code>SL</code> 과 <code>SR</code>)은 작동하지 않습니다(silent).<br> <code>output.L = input.M<br> output.R = input.M<br> output.SL = 0<br> @@ -183,8 +189,8 @@ var buffer = context.createBuffer(1, 22050, 22050);</pre> <tr> <td><code>1</code> <em>(Mono)</em></td> <td><code>6</code> <em>(5.1)</em></td> - <td><em>Up-mix from mono to 5.1.</em><br> - The <code>M</code> input channel is used for the center output channel (<code>C</code>). All the others (<code>L</code>, <code>R</code>, <code>LFE</code>, <code>SL</code>, and <code>SR</code>) are silent.<br> + <td><em>모노에서 5.1로 업믹스</em><br> + <code>M</code> 입력 채널이 센터 출력 채널 (<code>C</code>)에 대해 사용됩니다. 모든 다른 채널들(<code>L</code>, <code>R</code>, <code>LFE</code>, <code>SL</code>, 그리고 <code>SR</code>)은 작동하지 않습니다.<br> <code>output.L = 0<br> output.R = 0</code><br> <code>output.C = input.M<br> @@ -195,15 +201,15 @@ var buffer = context.createBuffer(1, 22050, 22050);</pre> <tr> <td><code>2</code> <em>(Stereo)</em></td> <td><code>1</code> <em>(Mono)</em></td> - <td><em>Down-mix from stereo to mono</em>.<br> - Both input channels (<code>L</code> and <code>R</code>) are equally combined to produce the unique output channel (<code>M</code>).<br> + <td><em>스테레오에서 모노로 다운믹스</em><br> + 양 출력 채널 (<code>L</code> 과 <code>R</code>)은 고유한 출력 채널 (<code>M</code>)을 생산하기 위해 동등하게 결합됩니다.<br> <code>output.M = 0.5 * (input.L + input.R)</code></td> </tr> <tr> <td><code>2</code> <em>(Stereo)</em></td> <td><code>4</code> <em>(Quad)</em></td> - <td><em>Up-mix from stereo to quad.</em><br> - The <code>L</code> and <code>R </code>input channels are used for their non-surround respective output channels (<code>L</code> and <code>R</code>). Surround output channels (<code>SL</code> and <code>SR</code>) are silent.<br> + <td><em>스테레오에서 quad로 업믹스</em><br> + <code>L</code> 과 <code>R </code> 입력 채널이 각자의 비 서라운드 출력 채널 (<code>L</code> 과 <code>R</code>)에 대해 사용됩니다. 서라운드 출력 채널 (<code>SL</code> 과 <code>SR</code>) 은 작동하지 않습니다.<br> <code>output.L = input.L<br> output.R = input.R<br> output.SL = 0<br> @@ -212,8 +218,8 @@ var buffer = context.createBuffer(1, 22050, 22050);</pre> <tr> <td><code>2</code> <em>(Stereo)</em></td> <td><code>6</code> <em>(5.1)</em></td> - <td><em>Up-mix from stereo to 5.1.</em><br> - The <code>L</code> and <code>R </code>input channels are used for their non-surround respective output channels (<code>L</code> and <code>R</code>). Surround output channels (<code>SL</code> and <code>SR</code>), as well as the center (<code>C</code>) and subwoofer (<code>LFE</code>) channels, are left silent.<br> + <td><em>스테레오에서 5.1로 업믹스</em><br> + <code>L</code> 과 <code>R </code> 입력 채널이 각자의 비 서라운드 출력 채널 (<code>L</code> 과 <code>R</code>) 에 대해 사용됩니다. 서라운드 출력 채널 (<code>SL</code> 과 <code>SR</code>), 그리고 센터 (<code>C</code>) 와 서브우퍼 (<code>LFE</code>) 채널은 작동하지 않습니다.<br> <code>output.L = input.L<br> output.R = input.R<br> output.C = 0<br> @@ -224,23 +230,23 @@ var buffer = context.createBuffer(1, 22050, 22050);</pre> <tr> <td><code>4</code> <em>(Quad)</em></td> <td><code>1</code> <em>(Mono)</em></td> - <td><em>Down-mix from quad to mono</em>.<br> - All four input channels (<code>L</code>, <code>R</code>, <code>SL</code>, and <code>SR</code>) are equally combined to produce the unique output channel (<code>M</code>).<br> + <td><em>quad에서 모노로 다운믹스</em><br> + 모든 네 개의 입력 채널 (<code>L</code>, <code>R</code>, <code>SL</code>, and <code>SR</code>) 이 고유한 출력 채널 (<code>M</code>)을 생산하기 위해 동등하게 결합됩니다.<br> <code>output.M = 0.25 * (input.L + input.R + </code><code>input.SL + input.SR</code><code>)</code></td> </tr> <tr> <td><code>4</code> <em>(Quad)</em></td> <td><code>2</code> <em>(Stereo)</em></td> - <td><em>Down-mix from quad to stereo</em>.<br> - Both left input channels (<code>L</code> and <code>SL</code>) are equally combined to produce the unique left output channel (<code>L</code>). And similarly, both right input channels (<code>R</code> and <code>SR</code>) are equally combined to produce the unique right output channel (<code>R</code>).<br> + <td><em>quad에서 스테레오로 다운믹스</em><br> + 왼쪽 입력 채널 (<code>L</code> 과 <code>SL</code>) 둘 다 고유한 왼쪽 출력 채널 (<code>L</code>)을 생산하기 위해 동등하게 결합됩니다. 그리고 유사하게, 오른쪽 입력 채널 (<code>R</code> 과 <code>SR</code>) 둘 다 고유한 오른쪽 출력 채널을 생산하기 위해 동등하게 결합됩니다.<br> <code>output.L = 0.5 * (input.L + input.SL</code><code>)</code><br> <code>output.R = 0.5 * (input.R + input.SR</code><code>)</code></td> </tr> <tr> <td><code>4</code> <em>(Quad)</em></td> <td><code>6</code> <em>(5.1)</em></td> - <td><em>Up-mix from quad to 5.1.</em><br> - The <code>L</code>, <code>R</code>, <code>SL</code>, and <code>SR</code> input channels are used for their respective output channels (<code>L</code> and <code>R</code>). Center (<code>C</code>) and subwoofer (<code>LFE</code>) channels are left silent.<br> + <td><em>quad에서 5.1로 업믹스</em><br> + <code>L</code>, <code>R</code>, <code>SL</code>, 그리고 <code>SR</code> 입력 채널이 각각의 출력 채널 (<code>L</code> 과 <code>R</code>)에 대해 사용됩니다. 센터 (<code>C</code>)와 서브우퍼 (<code>LFE</code>) 채널은 작동하지 않은 채로 남아있습니다.<br> <code>output.L = input.L<br> output.R = input.R<br> output.C = 0<br> @@ -251,104 +257,99 @@ var buffer = context.createBuffer(1, 22050, 22050);</pre> <tr> <td><code>6</code> <em>(5.1)</em></td> <td><code>1</code> <em>(Mono)</em></td> - <td><em>Down-mix from 5.1 to mono.</em><br> - The left (<code>L</code> and <code>SL</code>), right (<code>R</code> and <code>SR</code>) and central channels are all mixed together. The surround channels are slightly attenuated and the regular lateral channels are power-compensated to make them count as a single channel by multiplying by <code>√2/2</code>. The subwoofer (<code>LFE</code>) channel is lost.<br> + <td><em>5.1에서 모노로 다운믹스</em><br> + 왼쪽 (<code>L</code> 과 <code>SL</code>), 오른쪽 (<code>R</code> 과 <code>SR</code>) 그리고 중앙 채널이 모두 함께 믹스됩니다. 서라운드 채널은 약간 약화되고 regular lateral 채널은 하나의 채널로 카운트되도록 <code>√2/2</code>를 곱함으로써 파워가 보정(power-compensated)됩니다. 서브우퍼 (<code>LFE</code>) 채널은 손실됩니다.<br> <code>output.M = 0.7071 * (input.L + input.R) + input.C + 0.5 * (input.SL + input.SR)</code></td> </tr> <tr> <td><code>6</code> <em>(5.1)</em></td> <td><code>2</code> <em>(Stereo)</em></td> - <td><em>Down-mix from 5.1 to stereo.</em><br> - The central channel (<code>C</code>) is summed with each lateral surround channel (<code>SL</code> or <code>SR</code>) and mixed to each lateral channel. As it is mixed down to two channels, it is mixed at a lower power: in each case it is multiplied by <code>√2/2</code>. The subwoofer (<code>LFE</code>) channel is lost.<br> + <td><em>5.1에서 스테레오로 다운믹스</em><br> + 중앙 채널 (<code>C</code>)이 각각의 측면 서라운드 채널(<code>SL</code> 또는 <code>SR</code>)과 합계되고 각각의 측면 채널로 믹스됩니다. 두 개의 채널로 다운믹스되었으므로, 더 낮은 파워로 믹스되었습니다: 각각의 경우에 <code>√2/2</code>가 곱해집니다. 서브우퍼 (<code>LFE</code>) 채널은 손실됩니다.<br> <code>output.L = input.L + 0.7071 * (input.C + input.SL)<br> output.R = input.R </code><code>+ 0.7071 * (input.C + input.SR)</code></td> </tr> <tr> <td><code>6</code> <em>(5.1)</em></td> <td><code>4</code> <em>(Quad)</em></td> - <td><em>Down-mix from 5.1 to quad.</em><br> - The central (<code>C</code>) is mixed with the lateral non-surround channels (<code>L</code> and <code>R</code>). As it is mixed down to two channels, it is mixed at a lower power: in each case it is multiplied by <code>√2/2</code>. The surround channels are passed unchanged. The subwoofer (<code>LFE</code>) channel is lost.<br> + <td><em>5.1에서 quad로 다운믹스</em><br> + 중앙 (<code>C</code>) 채널이 측면의 비 서라운드 채널 (<code>L</code> 과 <code>R</code>)과 믹스됩니다. 두 채널로 다운믹스되었으므로, 더 낮은 파워로 믹스되었습니다: 각각의 경우에 <code>√2/2</code>가 곱해집니다. 서라운드 채널은 변경되지 않은 채로 전달됩니다. 서브우퍼 (<code>LFE</code>) 채널은 손실됩니다.<br> <code>output.L = input.L + 0.7071 * input.C<br> output.R = input.R + 0.7071 * input.C<br> - <code>output.SL = input.SL<br> - output.SR = input.SR</code></code></td> + output.SL = input.SL<br> + output.SR = input.SR</code></td> </tr> <tr> - <td colspan="2" rowspan="1">Other, non-standard layouts</td> - <td>Non-standard channel layouts are handled as if <code>channelInterpretation</code> is set to <code>discrete</code>.<br> - The specification explicitly allows the future definition of new speaker layouts. This fallback is therefore not future proof as the behavior of the browsers for a specific number of channels may change in the future.</td> + <td colspan="2">기타 비표준 레이아웃</td> + <td>비표준 채널 레이아웃은 <code>channelInterpretation</code>이 <code>discrete</code>로 설정된 것처럼 다뤄집니다.<br> + 사양(specification)은 분명히 새로운 스피커 레이아웃의 미래의 정의를 허용합니다. 특정한 수의 채널에 대한 브라우저의 행동이 미래에 달라질지도 모르므로 이 대비책은 그러므로 미래에도 사용할 수 있는 (future proof) 것이 아닙니다.</td> </tr> <tr> - <th colspan="1" rowspan="2" scope="row"><code>discrete</code></th> - <td rowspan="1">any (<code>x</code>)</td> - <td rowspan="1">any (<code>y</code>) where <code>x<y</code></td> - <td><em>Up-mix discrete channels.</em><br> - Fill each output channel with its input counterpart, that is the input channel with the same index. Channels with no corresponding input channels are left silent.</td> + <th rowspan="2" scope="row"><code>discrete</code></th> + <td>any (<code>x</code>)</td> + <td><code>x<y</code>인 any (<code>y</code>)</td> + <td><em>discrete 채널의 업믹스</em><br> + 대응하는 입력 채널을 가지고 있는 각각의 출력 채널을 채웁니다, 즉 같은 인덱스를 가진 입력 채널입니다. 해당하는 입력 채널이 없는 채널은 작동하지 않은 채로 남아있습니다.</td> </tr> <tr> - <td rowspan="1">any (<code>x</code>)</td> - <td rowspan="1">any (<code>y</code>) where <code>x>y</code></td> - <td><em>Down-mix discrete channels.</em><br> - Fill each output channel with its input counterpart, that is the input channel with the same index. Input channels with no corresponding output channels are dropped.</td> + <td>any (<code>x</code>)</td> + <td><code>x>y</code>인 any (<code>y</code>)</td> + <td><em>discrete 채널의 다운믹스</em><br> + 대응하는 입력 채널을 가지고 있는 각각의 출력 채널을 채웁니다, 즉 같은 인덱스를 가진 입력 채널입니다. 해당하는 출력 채널을 가지고 있지 않은 입력 채널은 탈락됩니다.</td> </tr> </tbody> </table> -<h2 id="Visualizations">Visualizations</h2> +<h2 id="Visualizations">시각화</h2> -<p>In general, audio visualizations are achieved by accessing an ouput of audio data over time, usually gain or frequency data, and then using a graphical technology to turn that into a visual output, such as a graph. The Web Audio API has an {{domxref("AnalyserNode")}} available that doesn't alter the audio signal passing through it. Instead it outputs audio data that can be passed to a visualization technology such as {{htmlelement("canvas")}}.</p> +<p>일반적으로, 오디오 시각화는 보통 진폭 이득(gain) 또는 주파수 데이터인, 시간에 대한 오디오 데이터의 출력에 접근함으로써, 그리고서 그것을 그래프와 같이 시각적 결과로 바꾸기 위해 그래픽 기술을 사용함으로써 성취됩니다. Web Audio API는 통과하는 오디오 신호를 변경하지 않는 {{domxref("AnalyserNode")}}를 가지고 있습니다. 대신 이것은 {{htmlelement("canvas")}}와 같은 시각화 기술로 전달될 수 있는 오디오 데이터를 출력합니다.</p> -<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/12521/fttaudiodata_en.svg" style="height: 206px; width: 693px;"></p> +<p><img alt="오디오 스트림을 수정하는 일 없이, FFT를 사용하여, 노드가 주파수와 그것에 관련된 시간 영역(time-domain) 데이터를 얻을 수 있게 허용합니다." src="fttaudiodata_en.svg"></p> -<p>You can grab data using the following methods:</p> +<p>여러분은 다음의 메서드들을 사용해 데이터를 얻을 수 있습니다:</p> <dl> <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt> - <dd>Copies the current frequency data into a {{domxref("Float32Array")}} array passed into it.</dd> -</dl> - -<dl> + <dd>현재 주파수 데이터를 이것 안으로 전달된 {{jsxref("Float32Array")}} 배열 안으로 복사합니다.</dd> <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt> - <dd>Copies the current frequency data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd> -</dl> - -<dl> + <dd>현재 주파수 데이터를 이것 안으로 전달된 {{jsxref("Uint8Array")}} (unsigned byte array) 안으로 복사합니다.</dd> <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt> - <dd>Copies the current waveform, or time-domain, data into a {{domxref("Float32Array")}} array passed into it.</dd> + <dd>현재 파형, 또는 시간 영역(time-domain), 데이터를 이것 안으로 전달된 {{jsxref("Float32Array")}} 안으로 복사합니다.</dd> <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt> - <dd>Copies the current waveform, or time-domain, data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd> + <dd>현재 파형, 또는 시간 영역, 데이터를 이것 안으로 전달된 {{jsxref("Uint8Array")}} (unsigned byte array) 안으로 복사합니다.</dd> </dl> <div class="note"> -<p><strong>Note</strong>: For more information, see our <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> article.</p> +<p><strong>노트</strong>: 더 많은 정보를 보시려면, <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Web Audio API로 시각화</a> 문서를 참조하세요.</p> </div> -<h2 id="Spatialisations">Spatialisations</h2> +<h2 id="Spatialisations">공간화</h2> <div> -<p>An audio spatialisation (handled by the {{domxref("PannerNode")}} and {{domxref("AudioListener")}} nodes in the Web Audio API) allows us to model the position and behavior of an audio signal at a certain point in space, and the listener hearing that audio.</p> +<p>(Web Audio API의 {{domxref("PannerNode")}} 와 {{domxref("AudioListener")}} 노드에 의해 다뤄지는) 오디오 공간화는 공간의 어떤 점에서의 오디오 신호의 위치와 행동을 나타내고(model), 청자(listener)가 그 오디오를 들을 수 있게 허용합니다.</p> -<p>The panner's position is described with right-hand Cartesian coordinates; its movement using a velocity vector, necessary for creating Doppler effects, and its directionality using a directionality cone.The cone can be very large, e.g. for omnidirectional sources.</p> +<p>panner의 위치는 right-hand 데카르트 좌표 (Cartesian coordinate)로 기술됩니다; 이것의 움직임은 도플러 효과를 생성하는데 필수적인 속도 벡터를 사용하고, 이것의 방향성(directionality)은 방향성 원뿔을 사용합니다. 이 원뿔은 아주 클 수 있는데, 예를 들자면 전방향의 소스(omnidirectional source)에 대한 것일 수 있습니다.</p> </div> -<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="https://mdn.mozillademos.org/files/12511/pannernode_en.svg" style="height: 340px; width: 799px;"></p> +<p><img alt="PannerNode는 공간 위치와 속도와 주어진 신호에 대한 방향성을 제공합니다." src="pannernode_en.svg"></p> <div> -<p>The listener's position is described using right-hand Cartesian coordinates; its movement using a velocity vector and the direction the listener's head is pointing using two direction vectors: up and front. These respectively define the direction of the top of the listener's head, and the direction the listener's nose is pointing, and are at right angles to one another.</p> +<p>청자의 위치는 right-hand 데카르트 좌표를 사용해 기술됩니다; 이것의 움직임은 속도 벡터를 사용하고 청자의 머리가 향하고 있는 방향은 위와 앞의 두 개의 방향 벡터를 사용합니다. 이것들은 각각 청자의 머리의 위의 방향과, 청자의 코가 가리키고 있는 방향을 정의하며, 서로 직각에 있습니다.</p> </div> -<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="https://mdn.mozillademos.org/files/12513/listener.svg" style="height: 249px; width: 720px;"></p> +<p><img alt="AudioListener의 위와 앞의 벡터 위치를 보고 있는데, 위와 앞 벡터는 서로 90°에 있습니다." src="webaudiolistenerreduced.png"></p> <div class="note"> -<p><strong>Note</strong>: For more information, see our <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a> article.</p> +<p><strong>노트</strong>: 더 많은 정보를 보시려면, <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio 공간화 기본</a> 문서를 참조하세요.</p> </div> -<h2 id="Fan-in_and_Fan-out">Fan-in and Fan-out</h2> +<h2 id="Fan-in_and_Fan-out">팬 인(fan-in)과 팬 아웃(fan-out)</h2> -<p>In audio terms, <strong>fan-in</strong> describes the process by which a {{domxref("ChannelMergerNode")}} takes a series of mono input sources and outputs a single multi-channel signal:</p> +<p> +오디오 용어에서, <strong>팬 인</strong>은 {{domxref("ChannelMergerNode")}}가 일련의 모노 입력 소스를 취하고 단일의 다수 채널 신호를 출력하는 과정을 설명합니다:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12517/fanin.svg" style="height: 258px; width: 325px;"></p> +<p><img alt="" src="fanin.svg"></p> -<p><strong>Fan-out</strong> describes the opposite process, whereby a {{domxref("ChannelSplitterNode")}} takes a multi-channel input source and outputs multiple mono output signals:</p> +<p><strong>팬 아웃</strong>은 반대 과정을 설명하는데, {{domxref("ChannelSplitterNode")}}가 다수 채널 입력 소스를 취하고 다수의 모노 출력 신호를 출력합니다.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12515/fanout.svg" style="height: 258px; width: 325px;"></p> +<p><img alt="" src="fanout.svg"></p> diff --git a/files/ko/web/api/web_audio_api/best_practices/index.html b/files/ko/web/api/web_audio_api/best_practices/index.html new file mode 100644 index 0000000000..784b3f1f3c --- /dev/null +++ b/files/ko/web/api/web_audio_api/best_practices/index.html @@ -0,0 +1,97 @@ +--- +title: Web Audio API best practices +slug: Web/API/Web_Audio_API/Best_practices +tags: + - Audio + - Best practices + - Guide + - Web Audio API +--- +<div>{{apiref("Web Audio API")}}</div> + +<p class="summary">There's no strict right or wrong way when writing creative code. As long as you consider security, performance, and accessibility, you can adapt to your own style. In this article, we'll share a number of <em>best practices</em> — guidelines, tips, and tricks for working with the Web Audio API.</p> + +<h2 id="Loading_soundsfiles">Loading sounds/files</h2> + +<p>There are four main ways to load sound with the Web Audio API and it can be a little confusing as to which one you should use.</p> + +<p>When working with files, you are looking at either the grabbing the file from an {{domxref("HTMLMediaElement")}} (i.e. an {{htmlelement("audio")}} or {{htmlelement("video")}} element), or you're looking to fetch the file and decode it into a buffer. Both are legitimate ways of working, however, it's more common to use the former when you are working with full-length tracks, and the latter when working with shorter, more sample-like tracks.</p> + +<p>Media elements have streaming support out of the box. The audio will start playing when the browser determines it can load the rest of the file before playing finishes. You can see an example of how to use this with the Web Audio API in the <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API tutorial</a>.</p> + +<p>You will, however, have more control if you use a buffer node. You have to request the file and wait for it to load (<a href="/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques#Dial_up_%E2%80%94_loading_a_sound_sample">this section of our advanced article</a> shows a good way to do it), but then you have access to the data directly, which means more precision, and more precise manipulation.</p> + +<p>If you're looking to work with audio from the user's camera or microphone you can access it via the <a href="/en-US/docs/Web/API/Media_Streams_API">Media Stream API</a> and the {{domxref("MediaStreamAudioSourceNode")}} interface. This is good for WebRTC and situations where you might want to record or possibly analyze audio.</p> + +<p>The last way is to generate your own sound, which can be done with either an {{domxref("OscillatorNode")}} or by creating a buffer and populating it with your own data. Check out the <a href="/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques">tutorial here for creating your own instrument</a> for information on creating sounds with oscillators and buffers.</p> + +<h2 id="Cross_browser_legacy_support">Cross browser & legacy support</h2> + +<p>The Web Audio API specification is constantly evolving and like most things on the web, there are some issues with it working consistently across browsers. Here we'll look at options for getting around cross-browser problems.</p> + +<p>There's the <a href="https://github.com/chrisguttandin/standardized-audio-context"><code>standardised-audio-context</code></a> npm package, which creates API functionality consistently across browsers, filling holes as they are found. It's constantly in development and endeavours to keep up with the current specification.</p> + +<p>There is also the option of libraries, of which there are a few depending on your use case. For a good all-rounder, <a href="https://howlerjs.com/">howler.js</a> is a good choice. It has cross-browser support and, provides a useful subset of functionality. Although it doesn't harness the full gamut of filters and other effects the Web Audio API comes with, you can do most of what you'd want to do.</p> + +<p>If you are looking for sound creation or a more instrument-based option, <a href="https://tonejs.github.io/">tone.js</a> is a great library. It provides advanced scheduling capabilities, synths, and effects, and intuitive musical abstractions built on top of the Web Audio API.</p> + +<p><a href="https://github.com/bbc/r-audio">R-audio</a>, from the <a href="https://medium.com/bbc-design-engineering/r-audio-declarative-reactive-and-flexible-web-audio-graphs-in-react-102c44a1c69c">BBC's Research & Development department</a>, is a library of React components aiming to provide a "more intuitive, declarative interface to Web Audio". If you're used to writing JSX it might be worth looking at.</p> + +<h2 id="Autoplay_policy">Autoplay policy</h2> + +<p>Browsers have started to implement an autoplay policy, which in general can be summed up as:</p> + +<blockquote> +<p>"Create or resume context from inside a user gesture".</p> +</blockquote> + +<p>But what does that mean in practice? A user gesture has been interpreted to mean a user-initiated event, normally a <code>click</code> event. Browser vendors decided that Web Audio contexts should not be allowed to automatically play audio; they should instead be started by a user. This is because autoplaying audio can be really annoying and obtrusive. But how do we handle this?</p> + +<p>When you create an audio context (either offline or online) it is created with a <code>state</code>, which can be <code>suspended</code>, <code>running</code>, or <code>closed</code>.</p> + +<p>When working with an {{domxref("AudioContext")}}, if you create the audio context from inside a <code>click</code> event the state should automatically be set to <code>running</code>. Here is a simple example of creating the context from inside a <code>click</code> event:</p> + +<pre class="brush: js">const button = document.querySelector('button'); +button.addEventListener('click', function() { + const audioCtx = new AudioContext(); +}, false); +</pre> + +<p>If however, you create the context outside of a user gesture, its state will be set to <code>suspended</code> and it will need to be started after user interaction. We can use the same click event example here, test for the state of the context and start it, if it is suspended, using the <a href="/en-US/docs/Web/API/BaseAudioContext/resume"><code>resume()</code></a> method.</p> + +<pre class="brush: js">const audioCtx = new AudioContext(); +const button = document.querySelector('button'); + +button.addEventListener('click', function() { + // check if context is in suspended state (autoplay policy) + if (audioCtx.state === 'suspended') { + audioCtx.resume(); + } +}, false); +</pre> + +<p>You might instead be working with an {{domxref("OfflineAudioContext")}}, in which case you can resume the suspended audio context with the <a href="/en-US/docs/Web/API/OfflineAudioContext/startRendering"><code>startRendering()</code></a> method.</p> + +<h2 id="User_control">User control</h2> + +<p>If your website or application contains sound, you should allow the user control over it, otherwise again, it will become annoying. This can be achieved by play/stop and volume/mute controls. The <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a> tutorial goes over how to do this.</p> + +<p>If you have buttons that switch audio on and off, using the ARIA <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role"><code>role="switch"</code></a> attribute on them is a good option for signalling to assistive technology what the button's exact purpose is, and therefore making the app more accessible. There's a <a href="https://codepen.io/Wilto/pen/ZoGoQm?editors=1100">demo of how to use it here</a>.</p> + +<p>As you work with a lot of changing values within the Web Audio API and will want to provide users with control over these, the <a href="/en-US/docs/Web/HTML/Element/input/range"><code>range input</code></a> is often a good choice of control to use. It's a good option as you can set minimum and maximum values, as well as increments with the <a href="/en-US/docs/Web/HTML/Element/input#attr-step"><code>step</code></a> attribute.</p> + +<h2 id="Setting_AudioParam_values">Setting AudioParam values</h2> + +<p>There are two ways to manipulate {{domxref("AudioNode")}} values, which are themselves objects of type {{domxref("AudioParam")}} interface. The first is to set the value directly via the property. So for instance if we want to change the <code>gain</code> value of a {{domxref("GainNode")}} we would do so thus:</p> + +<pre class="brush: js">gainNode.gain.value = 0.5; +</pre> + +<p>This will set our volume to half. However, if you're using any of the <code>AudioParam</code>'s defined methods to set these values, they will take precedence over the above property setting. If for example, you want the <code>gain</code> value to be raised to 1 in 2 seconds time, you can do this:</p> + +<pre class="brush: js">gainNode.gain.setValueAtTime(1, audioCtx.currentTime + 2); +</pre> + +<p>It will override the previous example (as it should), even if it were to come later in your code.</p> + +<p>Bearing this in mind, if your website or application requires timing and scheduling, it's best to stick with the {{domxref("AudioParam")}} methods for setting values. If you're sure it doesn't, setting it with the <code>value</code> property is fine.</p> diff --git a/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/customsourcenode-as-splitter.svg b/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/customsourcenode-as-splitter.svg new file mode 100644 index 0000000000..0490cddbe5 --- /dev/null +++ b/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/customsourcenode-as-splitter.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="7 7 580 346" width="580pt" height="346pt"><defs><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="a" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="#000"><path d="M4.8 0 0-1.8v3.6z" fill="currentColor" stroke="currentColor"/></marker></defs><g fill="none"><path fill="#867fff" d="M207 99h180v45H207z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M207 99h180v45H207z"/><text transform="translate(212 113)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x="9.388" y="14" textLength="151.225">ConstantSourceNode</tspan></text><path fill="#867fff" d="M9 216h180v45H9z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M9 216h180v45H9z"/><text transform="translate(14 230)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x="51.395" y="14" textLength="67.211">GainNode</tspan></text><path fill="#867fff" d="M405 216h180v45H405z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M405 216h180v45H405z"/><text transform="translate(410 230)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x="51.395" y="14" textLength="67.211">GainNode</tspan></text><path fill="#867fff" d="M207 216h180v45H207z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M207 216h180v45H207z"/><text transform="translate(212 230)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x="17.789" y="14" textLength="134.422">StereoPannerNode</tspan></text><path d="M252 144v27H99v32.1M297 144v59.1m45-59.1v27h153v32.1" marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><text transform="translate(55.876 192.447)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x=".197" y="14" textLength="33.605">gain</tspan></text><text transform="translate(258.64 192.854)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x=".398" y="14" textLength="25.204">pan</tspan></text><text transform="translate(504.37 193.347)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x=".197" y="14" textLength="33.605">gain</tspan></text><path marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M297 54v32.1"/><path d="M243 9h144l-36 45H207z" fill="#fff"/><path d="M243 9h144l-36 45H207z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><text transform="translate(248 22)" fill="#000"><tspan font-family="Arial" font-size="16" font-weight="500" x="17.734" y="15" textLength="52.93">input = </tspan><tspan font-family="Courier" font-size="16" font-style="italic" font-weight="500" x="70.664" y="15" textLength="9.602">N</tspan></text><path d="M243 306h144l-36 45H207z" fill="#fff"/><path d="M243 306h144l-36 45H207z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><text transform="translate(248 319)" fill="#000"><tspan font-family="Arial" font-size="16" font-weight="500" x="12.84" y="15" textLength="62.719">output = </tspan><tspan font-family="Courier" font-size="16" font-style="italic" font-weight="500" x="75.559" y="15" textLength="9.602">N</tspan></text><path marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m296.5 261 .357 32.101"/><path d="M441 306h144l-36 45H405z" fill="#fff"/><path d="M441 306h144l-36 45H405z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><text transform="translate(446 319)" fill="#000"><tspan font-family="Arial" font-size="16" font-weight="500" x="12.84" y="15" textLength="62.719">output = </tspan><tspan font-family="Courier" font-size="16" font-style="italic" font-weight="500" x="75.559" y="15" textLength="9.602">N</tspan></text><path marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M495 261v32.1"/><path d="M45 306h144l-36 45H9z" fill="#fff"/><path d="M45 306h144l-36 45H9z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><text transform="translate(50 319)" fill="#000"><tspan font-family="Arial" font-size="16" font-weight="500" x="12.84" y="15" textLength="62.719">output = </tspan><tspan font-family="Courier" font-size="16" font-style="italic" font-weight="500" x="75.559" y="15" textLength="9.602">N</tspan></text><path marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M99 261v32.1"/></g></svg>
\ No newline at end of file diff --git a/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.html b/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.html new file mode 100644 index 0000000000..5fdd188213 --- /dev/null +++ b/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.html @@ -0,0 +1,284 @@ +--- +title: Controlling multiple parameters with ConstantSourceNode +slug: Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode +tags: + - Audio + - Example + - Guide + - Intermediate + - Media + - Tutorial + - Web Audio + - Web Audio API +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p><span class="seoSummary">This article demonstrates how to use a {{domxref("ConstantSourceNode")}} to link multiple parameters together so they share the same value, which can be changed by setting the value of the {{domxref("ConstantSourceNode.offset")}} parameter.</span></p> + +<p>You may have times when you want to have multiple audio parameters be linked so they share the same value even while being changed in some way. For example, perhaps you have a set of oscillators, and two of them need to share the same, configurable volume, or you have a filter that's been applied to certain inputs but not to all of them. You could use a loop and change the value of each affected {{domxref("AudioParam")}} one at a time, but there are two drawbacks to doing it that way: first, that's extra code that, as you're about to see, you don't have to write; and second, that loop uses valuable CPU time on your thread (likely the main thread), and there's a way to offload all that work to the audio rendering thread, which is optimized for this kind of work and may run at a more appropriate priority level than your code.</p> + +<p>The solution is simple, and it involves using an audio node type which, at first glance, doesn't look all that useful: {{domxref("ConstantSourceNode")}}.</p> + +<h2 id="The_technique">The technique</h2> + +<p>This is actually a really easy way to do something that sounds like it might be hard to do. You need to create a {{domxref("ConstantSourceNode")}} and connect it to all of the {{domxref("AudioParam")}}s whose values should be linked to always match each other. Since <code>ConstantSourceNode</code>'s {{domxref("ConstantSourceNode.offset", "offset")}} value is sent straight through to all of its outputs, it acts as a splitter for that value, sending it to each connected parameter.</p> + +<p>The diagram below shows how this works; an input value, <code>N</code>, is set as the value of the {{domxref("ConstantSourceNode.offset")}} property. The <code>ConstantSourceNode</code> can have as many outputs as necessary; in this case, we've connected it to three nodes: two {{domxref("GainNode")}}s and a {{domxref("StereoPannerNode")}}. So <code>N</code> becomes the value of the specified parameter ({{domxref("GainNode.gain", "gain")}} for the {{domxref("GainNode")}}s and pan for the {{domxref("StereoPannerNode")}}.</p> + +<p><img alt="Dagram in SVG showing how ConstantSourceNode can be used to split an input parameter to share it with multiple nodes." src="customsourcenode-as-splitter.svg"></p> + +<p>As a result, every time you change <code>N</code> (the value of the input {{domxref("AudioParam")}}, the values of the two <code>GainNode</code>s' <code>gain</code> properties and the value of the <code>StereoPannerNode</code>'s <code>pan</code> propertry are all set to <code>N</code> as well.</p> + +<h2 id="Example">Example</h2> + +<p>Let's take a look at this technique in action. In this simple example, we create three {{domxref("OscillatorNode")}}s. Two of them have adjustable gain, controlled using a shared input control. The other oscillator has a fixed volume.</p> + +<h3 id="HTML">HTML</h3> + +<p>The HTML content for this example is primarily a button to toggle the oscillator tones on and off and an {{HTMLElement("input")}} element of type <code>range</code> to control the volume of two of the three oscillators.</p> + +<pre class="brush: html"><div class="controls"> + <div class="left"> + <div id="playButton" class="button"> + ▶️ + </div> + </div> + <div class="right"> + <span>Volume: </span> + <input type="range" min="0.0" max="1.0" step="0.01" + value="0.8" name="volume" id="volumeControl"> + </div> +</div> + +<p>Use the button above to start and stop the tones, and the volume control to +change the volume of the notes E and G in the chord.</p></pre> + +<div class="hidden"> +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.controls { + width: 400px; + position: relative; + vertical-align: middle; + height: 44px; +} + +.button { + font-size: 32px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + -o-user-select: none; +} + +.right { + width: 50%; + font: 14px "Open Sans", "Lucida Grande", "Arial", sans-serif; + position: absolute; + right: 0; + display: table-cell; + vertical-align: middle; +} + +.right span { + vertical-align: middle; +} + +.right input { + vertical-align: baseline; +} + +.left { + width: 50%; + position: absolute; + left: 0; + display: table-cell; + vertical-align: middle; +} + +.left span, .left input { + vertical-align: middle; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<p>Now let's take a look at the JavaScript code, a piece at a time.</p> + +<h4 id="Setting_up">Setting up</h4> + +<p>Let's start by looking at the global variable initialization.</p> + +<pre class="brush: js">let context = null; + +let playButton = null; +let volumeControl = null; + +let oscNode1 = null; +let oscNode2 = null; +let oscNode3 = null; +let constantNode = null; +let gainNode1 = null; +let gainNode2 = null; +let gainNode3 = null; + +let playing = false;</pre> + +<p>These variables are:</p> + +<dl> + <dt><code>context</code></dt> + <dd>The {{domxref("AudioContext")}} in which all the audio nodes live.</dd> + <dt><code>playButton</code> and <code>volumeControl</code></dt> + <dd>References to the play button and volume control elements.</dd> + <dt><code>oscNode1</code>, <code>oscNode2</code>, and <code>oscNode3</code></dt> + <dd>The three {{domxref("OscillatorNode")}}s used to generate the chord.</dd> + <dt><code>gainNode1</code>, <code>gainNode2</code>, and <code>gainNode3</code></dt> + <dd>The three {{domxref("GainNode")}} instances which provide the volume levels for each of the three oscillators. <code>gainNode2</code> and <code>gainNode3</code> will be linked together to have the same, adjustable, value using the {{domxref("ConstantSourceNode")}}.</dd> + <dt><code>constantNode</code></dt> + <dd>The {{domxref("ConstantSourceNode")}} used to control the values of <code>gainNode2</code> and <code>gainNode3</code> together.</dd> + <dt><code>playing</code></dt> + <dd>A {{jsxref("Boolean")}} that we'll use to keep track of whether or not we're currently playing the tones.</dd> +</dl> + +<p>Now let's look at the <code>setup()</code> function, which is our handler for the window's {{event("load")}} event; it handles all the initialization tasks that require the DOM to be in place.</p> + +<pre class="brush: js">function setup() { + context = new (window.AudioContext || window.webkitAudioContext)(); + + playButton = document.querySelector("#playButton"); + volumeControl = document.querySelector("#volumeControl"); + + playButton.addEventListener("click", togglePlay, false); + volumeControl.addEventListener("input", changeVolume, false); + + gainNode1 = context.createGain(); + gainNode1.gain.value = 0.5; + + gainNode2 = context.createGain(); + gainNode3 = context.createGain(); + gainNode2.gain.value = gainNode1.gain.value; + gainNode3.gain.value = gainNode1.gain.value; + volumeControl.value = gainNode1.gain.value; + + constantNode = context.createConstantSource(); + constantNode.connect(gainNode2.gain); + constantNode.connect(gainNode3.gain); + constantNode.start(); + + gainNode1.connect(context.destination); + gainNode2.connect(context.destination); + gainNode3.connect(context.destination); +} + +window.addEventListener("load", setup, false); +</pre> + +<p>First, we get access to the window's {{domxref("AudioContext")}}, stashing the reference in <code>context</code>. Then we get references to the control widgets, setting <code>playButton</code> to reference the play button and <code>volumeControl</code> to reference the slider control that the user will use to adjust the gain on the linked pair of oscillators.</p> + +<p>Then we assign a handler for the play button's {{event("click")}} event (see {{anch("Toggling the oscillators on and off")}} for more on the <code>togglePlay()</code> method), and for the volume slider's {{event("input")}} event (see {{anch("Controlling the linked oscillators")}} to see the very short <code>changeVolume()</code> method).</p> + +<p>Next, the {{domxref("GainNode")}} <code>gainNode1</code> is created to handle the volume for the non-linked oscillator (<code>oscNode1</code>). We set that gain to 0.5. We also create <code>gainNode2</code> and <code>gainNode3</code>, setting their values to match <code>gainNode1</code>, then set the value of the volume slider to the same value, so it is synchronized with the gain level it controls.</p> + +<p>Once all the gain nodes are created, we create the {{domxref("ConstantSourceNode")}}, <code>constantNode</code>. We connect its output to the <code>gain</code> {{domxref("AudioParam")}} on both <code>gainNode2</code> and <code>gainNode3</code>, and we start the constant node running by calling its {{domxref("AudioScheduledSourceNode/start", "start()")}} method; now it's sending the value 0.5 to the two gain nodes' values, and any change to {{domxref("ConstantSourceNode.offset", "constantNode.offset")}} will automatically set the gain of both <code>gainNode2</code> and <code>gainNode3</code> (affecting their audio inputs as expected).</p> + +<p>Finally, we connect all the gain nodes to the {{domxref("AudioContext")}}'s {{domxref("BaseAudioContext/destination", "destination")}}, so that any sound delivered to the gain nodes will reach the output, whether that output be speakers, headphones, a recording stream, or any other destination type.</p> + +<p>After setting the window's {{event("load")}} event handler to be the <code>setup()</code> function, the stage is set. Let's see how the action plays out.</p> + +<h4 id="Toggling_the_oscillators_on_and_off">Toggling the oscillators on and off</h4> + +<p>Because {{domxref("OscillatorNode")}} doesn't support the notion of being in a paused state, we have to simulate it by terminating the oscillators and starting them again when the play button is clicked again to toggle them back on. Let's look at the code.</p> + +<pre class="brush: js">function togglePlay(event) { + if (playing) { + playButton.textContent = "▶️"; + stopOscillators(); + } else { + playButton.textContent = "⏸"; + startOscillators(); + } +}</pre> + +<p>If the <code>playing</code> variable indicates we're already playing the oscillators, we change the <code>playButton</code>'s content to be the Unicode character "right-pointing triangle" (▶️) and call <code>stopOscillators()</code> to shut down the oscillators. See {{anch("Stopping the oscillators")}} below for that code.</p> + +<p>If <code>playing</code> is false, indicating that we're currently paused, we change the play button's content to be the Unicode character "pause symbol" (⏸) and call <code>startOscillators()</code> to start the oscillators playing their tones. That code is covered under {{anch("Starting the oscillators")}} below.</p> + +<h4 id="Controlling_the_linked_oscillators">Controlling the linked oscillators</h4> + +<p>The <code>changeVolume()</code> function—the event handler for the slider control for the gain on the linked oscillator pair—looks like this:</p> + +<pre class="brush: js">function changeVolume(event) { + constantNode.offset.value = volumeControl.value; +}</pre> + +<p>That simple function controls the gain on both nodes. All we have to do is set the value of the {{domxref("ConstantSourceNode")}}'s {{domxref("ConstantSourceNode.offset", "offset")}} parameter. That value becomes the node's constant output value, which is fed into all of its outputs, which are, as set above, <code>gainNode2</code> and <code>gainNode3</code>.</p> + +<p>While this is an extremely simple example, imagine having a 32 oscillator synthesizer with multiple linked parameters in play across a number of patched nodes. Being able to shorten the number of operations to adjust them all will prove invaluable for code size and performance both.</p> + +<h4 id="Starting_the_oscillators">Starting the oscillators</h4> + +<p>When the user clicks the play/pause toggle button while the oscillators aren't playing, the <code>startOscillators()</code> function gets called.</p> + +<pre class="brush: js">function startOscillators() { + oscNode1 = context.createOscillator(); + oscNode1.type = "sine"; + oscNode1.frequency.value = 261.625565300598634; // middle C + oscNode1.connect(gainNode1); + + oscNode2 = context.createOscillator(); + oscNode2.type = "sine"; + oscNode2.frequency.value = 329.627556912869929; // E + oscNode2.connect(gainNode2); + + oscNode3 = context.createOscillator(); + oscNode3.type = "sine"; + oscNode3.frequency.value = 391.995435981749294 // G + oscNode3.connect(gainNode3); + + oscNode1.start(); + oscNode2.start(); + oscNode3.start(); + + playing = true; +}</pre> + +<p>Each of the three oscillators is set up the same way:</p> + +<ol> + <li>Create the {{domxref("OscillatorNode")}} by calling {{domxref("BaseAudioContext.createOscillator")}}.</li> + <li>Set the oscillator's type to <code>"sine"</code> to use a sine wave as the audio waveform.</li> + <li>Set the oscillator's frequency to the desired value; in this case, <code>oscNode1</code> is set to a middle C, while <code>oscNode2</code> and <code>oscNode3</code> round out the chord by playing the E and G notes.</li> + <li>Connect the new oscillator to the corresponding gain node.</li> +</ol> + +<p>Once all three oscillators have been created, they're started by calling each one's {{domxref("AudioScheduledSourceNode.start", "ConstantSourceNode.start()")}} method in turn, and <code>playing</code> is set to <code>true</code> to track that the tones are playing.</p> + +<h4 id="Stopping_the_oscillators">Stopping the oscillators</h4> + +<p>Stopping the oscillators when the user toggles the play state to pause the tones is as simple as stopping each node.</p> + +<pre class="brush: js">function stopOscillators() { + oscNode1.stop(); + oscNode2.stop(); + oscNode3.stop(); + playing = false; +}</pre> + +<p>Each node is stopped by calling its {{domxref("AudioScheduledSourceNode.stop", "ConstantSourceNode.stop()")}} method, then <code>playing</code> is set to <code>false</code>.</p> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Example', 600, 200) }}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Simple_synth">Simple synth keyboard</a> (example)</li> + <li>{{domxref("OscillatorNode")}}</li> + <li>{{domxref("ConstantSourceNode")}}</li> +</ul> diff --git a/files/ko/web/api/web_audio_api/index.html b/files/ko/web/api/web_audio_api/index.html index a6f2a443d1..1ccd2526b3 100644 --- a/files/ko/web/api/web_audio_api/index.html +++ b/files/ko/web/api/web_audio_api/index.html @@ -3,11 +3,11 @@ title: Web Audio API slug: Web/API/Web_Audio_API translation_of: Web/API/Web_Audio_API --- -<div> +<div>{{DefaultAPISidebar("Web Audio API")}}</div> + <p>Web Audio API는 웹에서 오디오를 제어하기 위한 강력하고 다양한 기능을 제공합니다. Web Audio API를 이용하면 오디오 소스를 선택할 수 있도록 하거나, 오디오에 이펙트를 추가하거나, 오디오를 시각화하거나, 패닝과 같은 공간 이펙트를 적용시키는 등의 작업이 가능합니다.</p> -</div> -<h2 id="Web_audio의_개념과_사용법">Web audio의 개념과 사용법</h2> +<h2 id="Web_audio_concepts_and_usage">Web audio의 개념과 사용법</h2> <p>Web Audio API는 <strong>오디오 컨텍스트</strong> 내부의 오디오 조작을 핸들링하는 것을 포함하며, <strong>모듈러 라우팅</strong>을 허용하도록 설계되어 있습니다. 기본적인 오디오 연산은 <strong>오디오 노드</strong>를 통해 수행되며, <strong>오디오 노드</strong>는 서로 연결되어 <strong>오디오 라우팅 그래프</strong>를 형성합니다. 서로 다른 타입의 채널 레이아웃을 포함한 다수의 오디오 소스는 단일 컨텍스트 내에서도 지원됩니다. 이 모듈식 설계는 역동적이고 복합적인 오디오 기능 생성을 위한 유연성을 제공합니다.</p> @@ -18,24 +18,24 @@ translation_of: Web/API/Web_Audio_API <p>웹 오디오의 간단하고 일반적인 작업 흐름은 다음과 같습니다 :</p> <ol> - <li>오디오 컨텍스트를 생성합니다.</li> - <li>컨텍스트 내에 소스를 생성합니다.(ex - <audio>, 발진기, 스트림)</li> - <li>이펙트 노드를 생성합니다. (ex - 잔향 효과, 바이쿼드 필터, 패너, 컴프레서 등)</li> - <li>오디오의 최종 목적지를 선택합니다. (ex - 시스템 스피커)</li> - <li>사운드를 이펙트에 연결하고, 이펙트를 목적지에 연결합니다.</li> + <li>오디오 컨텍스트를 생성합니다.</li> + <li>컨텍스트 내에 소스를 생성합니다.(ex - <audio>, 발진기, 스트림)</li> + <li>이펙트 노드를 생성합니다. (ex - 잔향 효과, 바이쿼드 필터, 패너, 컴프레서 등)</li> + <li>오디오의 최종 목적지를 선택합니다. (ex - 시스템 스피커)</li> + <li>사운드를 이펙트에 연결하고, 이펙트를 목적지에 연결합니다.</li> </ol> -<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12241/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p> +<p><img alt="오디오 컨텍스트라고 쓰여진 외부 박스와, 소스, 이펙트, 목적지라고 쓰여진 세 개의 내부 박스를 가진 간단한 박스 다이어그램. 세 개의 내부 박스는 사이에 좌에서 우를 가리키는 화살표를 가지고 있는데, 이는 오디오 정보의 흐름을 나타냅니다." src="audio-context_.png"></p> <p>높은 정확도와 적은 지연시간을 가진 타이밍 계산 덕분에, 개발자는 높은 샘플 레이트에서도 특정 샘플을 대상으로 이벤트에 정확하게 응답하는 코드를 작성할 수 있습니다. 따라서 드럼 머신이나 시퀀서 등의 어플리케이션은 충분히 구현 가능합니다.</p> <p>Web Audio API는 오디오가 어떻게 <em>공간화</em>될지 컨트롤할 수 있도록 합니다. <em>소스-리스너 모델</em>을 기반으로 하는 시스템을 사용하면 <em>패닝 모델</em>과 <em>거리-유도 감쇄</em> 혹은 움직이는 소스(혹은 움직이는 청자)를 통해 유발된 <em>도플러 시프트</em> 컨트롤이 가능합니다.</p> <div class="note"> -<p><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a> 아티클에서 Web Audio API 이론에 대한 더 자세한 내용을 읽을 수 있습니다.</p> +<p><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Web Audio API의 기본 개념</a> 문서에서 Web Audio API 이론에 대한 더 자세한 내용을 읽을 수 있습니다.</p> </div> -<h2 id="Web_Audio_API_타겟_사용자층">Web Audio API 타겟 사용자층</h2> +<h2 id="Web_Audio_API_target_audience">Web Audio API 타겟 사용자층</h2> <p>오디오나 음악 용어에 익숙하지 않은 사람은 Web Audio API가 막막하게 느껴질 수 있습니다. 또한 Web Audio API가 굉장히 다양한 기능을 제공하는 만큼 개발자로서는 시작하기 어렵게 느껴질 수 있습니다.</p> @@ -47,74 +47,80 @@ translation_of: Web/API/Web_Audio_API <p>코드를 작성하는 것은 카드 게임과 비슷합니다. 규칙을 배우고, 플레이합니다. 모르겠는 규칙은 다시 공부하고, 다시 새로운 판을 합니다. 마찬가지로, 이 문서와 첫 튜토리얼에서 설명하는 것만으로 부족하다고 느끼신다면 첫 튜토리얼의 내용을 보충하는 동시에 여러 테크닉을 이용하여 스텝 시퀀서를 만드는 법을 설명하는 <a href="/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques">상급자용 튜토리얼</a>을 읽어보시는 것을 추천합니다.</p> -<p>그 외에도 이 페이지의 사이드바에서 API의 모든 기능을 설명하는 참고자료와 다양한 튜토리얼을 찾아 보실 수 있습니다.</p> +<p>그 외에도 이 페이지의 사이드바에서 API의 모든 기능을 설명하는 참고자료와 다양한 자습서를 찾아 보실 수 있습니다.</p> <p>만약에 프로그래밍보다는 음악이 친숙하고, 음악 이론에 익숙하며, 악기를 만들고 싶으시다면 바로 상급자용 튜토리얼부터 시작하여 여러가지를 만들기 시작하시면 됩니다. 위의 튜토리얼은 음표를 배치하는 법, 저주파 발진기 등 맞춤형 Oscillator(발진기)와 Envelope를 설계하는 법 등을 설명하고 있으니, 이를 읽으며 사이드바의 자료를 참고하시면 될 것입니다.</p> <p>프로그래밍에 전혀 익숙하지 않으시다면 자바스크립트 기초 튜토리얼을 먼저 읽고 이 문서를 다시 읽으시는 게 나을 수도 있습니다. 모질라의 <a href="/en-US/docs/Learn/JavaScript">자바스크립트 기초</a>만큼 좋은 자료도 몇 없죠.</p> -<h2 id="Web_Audio_API_Interfaces">Web Audio API Interfaces</h2> +<h2 id="Web_Audio_API_Interfaces">Web Audio API 인터페이스</h2> <p>Web Audio API는 다양한 인터페이스와 연관 이벤트를 가지고 있으며, 이는 9가지의 기능적 범주로 나뉩니다.</p> -<h3 id="일반_오디오_그래프_정의">일반 오디오 그래프 정의</h3> +<h3 id="General_audio_graph_definition">일반 오디오 그래프 정의</h3> <p>Web Audio API 사용범위 내에서 오디오 그래프를 형성하는 일반적인 컨테이너와 정의입니다.</p> <dl> - <dt>{{domxref("AudioContext")}}</dt> - <dd><strong><code>AudioContext</code></strong> 인터페이스는 오디오 모듈이 서로 연결되어 구성된 오디오 프로세싱 그래프를 표현하며, 각각의 그래프는 {{domxref("AudioNode")}}로 표현됩니다. <code>AudioContext</code>는 자신이 가지고 있는 노드의 생성과 오디오 프로세싱 혹은 디코딩의 실행을 제어합니다. 어떤 작업이든 시작하기 전에 <code>AudioContext</code>를 생성해야 합니다. 모든 작업은 컨텍스트 내에서 이루어집니다.</dd> - <dt>{{domxref("AudioNode")}}</dt> - <dd><strong><code>AudioNode</code></strong><strong> </strong>인터페이스는 오디오 소스({{HTMLElement("audio")}}나 {{HTMLElement("video")}}엘리먼트), 오디오 목적지, 중간 처리 모듈({{domxref("BiquadFilterNode")}}이나 {{domxref("GainNode")}})과 같은 오디오 처리 모듈을 나타냅니다.</dd> - <dt>{{domxref("AudioParam")}}</dt> - <dd><strong><code>AudioParam</code></strong> 인터페이스는 {{domxref("AudioNode")}}중 하나와 같은 오디오 관련 파라미터를 나타냅니다. 이는 특정 값 또는 값 변경으로 세팅되거나, 특정 시간에 발생하고 특정 패턴을 따르도록 스케쥴링할 수 있습니다.</dd> - <dt>The {{event("ended")}} event</dt> - <dd> - <p><strong><code>ended</code></strong> 이벤트는 미디어의 끝에 도달하여 재생이 정지되면 호출됩니다.</p> - </dd> + <dt>{{domxref("AudioContext")}}</dt> + <dd><strong><code>AudioContext</code></strong> 인터페이스는 오디오 모듈이 서로 연결되어 구성된 오디오 프로세싱 그래프를 표현하며, 각각의 그래프는 {{domxref("AudioNode")}}로 표현됩니다. <code>AudioContext</code>는 자신이 가지고 있는 노드의 생성과 오디오 프로세싱 혹은 디코딩의 실행을 제어합니다. 어떤 작업이든 시작하기 전에 <code>AudioContext</code>를 생성해야 합니다. 모든 작업은 컨텍스트 내에서 이루어집니다.</dd> + <dt>{{domxref("AudioNode")}}</dt> + <dd><strong><code>AudioNode</code></strong><strong> </strong>인터페이스는 오디오 소스({{HTMLElement("audio")}}나 {{HTMLElement("video")}} 요소), 오디오 목적지, 중간 처리 모듈({{domxref("BiquadFilterNode")}}이나 {{domxref("GainNode")}})과 같은 오디오 처리 모듈을 나타냅니다.</dd> + <dt>{{domxref("AudioParam")}}</dt> + <dd><strong><code>AudioParam</code></strong> 인터페이스는 {{domxref("AudioNode")}}중 하나와 같은 오디오 관련 파라미터를 나타냅니다. 이는 특정 값 또는 값 변경으로 세팅되거나, 특정 시간에 발생하고 특정 패턴을 따르도록 스케쥴링할 수 있습니다.</dd> + <dt>{{domxref("AudioParamMap")}}</dt> + <dd>{{domxref("AudioParam")}} 인터페이스 그룹에 maplike 인터페이스를 제공하는데, 이는 <code>forEach()</code>, <code>get()</code>, <code>has()</code>, <code>keys()</code>, <code>values()</code> 메서드와 <code>size</code> 속성이 제공된다는 것을 의미합니다.</dd> + <dt>{{domxref("BaseAudioContext")}}</dt> + <dd><strong><code>BaseAudioContext</code></strong> 인터페이스는 온라인과 오프라인 오디오 프로세싱 그래프에 대한 기본 정의로서 동작하는데, 이는 각각 {{domxref("AudioContext")}} 와 {{domxref("OfflineAudioContext")}}로 대표됩니다. <code>BaseAudioContext</code>는 직접 쓰여질 수 없습니다 — 이 두 가지 상속되는 인터페이스 중 하나를 통해 이것의 기능을 사용할 수 있습니다.</dd> + <dt>The {{event("ended")}} event</dt> + <dd><p><strong><code>ended</code></strong> 이벤트는 미디어의 끝에 도달하여 재생이 정지되면 호출됩니다.</p></dd> </dl> -<h3 id="오디오_소스_정의하기">오디오 소스 정의하기</h3> +<h3 id="Defining_audio_sources">오디오 소스 정의하기</h3> <p>Web Audio API에서 사용하기 위한 오디오 소스를 정의하는 인터페이스입니다.</p> <dl> - <dt>{{domxref("OscillatorNode")}}</dt> - <dd><strong><code style="font-size: 14px;">OscillatorNode</code></strong> 인터페이스는 삼각파 또는 사인파와 같은 주기적 파형을 나타냅니다. 이것은 주어진 주파수의 파동을 생성하는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다.</dd> - <dt>{{domxref("AudioBuffer")}}</dt> - <dd><strong><code>AudioBuffer</code></strong> 인터페이스는 {{ domxref("AudioContext.decodeAudioData()") }}메소드를 사용해 오디오 파일에서 생성되거나 {{ domxref("AudioContext.createBuffer()") }}를 사용해 로우 데이터로부터 생성된 메모리상에 적재되는 짧은 오디오 자원을 나타냅니다. 이 형식으로 디코딩된 오디오는 {{ domxref("AudioBufferSourceNode") }}에 삽입될 수 있습니다.</dd> - <dt>{{domxref("AudioBufferSourceNode")}}</dt> - <dd><strong><code>AudioBufferSourceNode</code></strong> 인터페이스는 {{domxref("AudioBuffer")}}에 저장된 메모리상의 오디오 데이터로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> - <dt>{{domxref("MediaElementAudioSourceNode")}}</dt> - <dd><code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> 인터페이스는 {{ htmlelement("audio") }} 나 {{ htmlelement("video") }} HTML 엘리먼트로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> - <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt> - <dd><code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> 인터페이스는 <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}}(웹캡, 마이크 혹은 원격 컴퓨터에서 전송된 스트림)으로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> + <dt>{{domxref("AudioScheduledSourceNode")}}</dt> + <dd><strong><code>AudioScheduledSourceNode</code></strong>는 오디오 소스 노드 인터페이스의 몇 가지 유형에 대한 부모 인터페이스입니다. 이것은 {{domxref("AudioNode")}}입니다.</dd> + <dt>{{domxref("OscillatorNode")}}</dt> + <dd><strong><code style="font-size: 14px;">OscillatorNode</code></strong> 인터페이스는 삼각파 또는 사인파와 같은 주기적 파형을 나타냅니다. 이것은 주어진 주파수의 파동을 생성하는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다.</dd> + <dt>{{domxref("AudioBuffer")}}</dt> + <dd><strong><code>AudioBuffer</code></strong> 인터페이스는 {{ domxref("AudioContext.decodeAudioData()") }}메소드를 사용해 오디오 파일에서 생성되거나 {{ domxref("AudioContext.createBuffer()") }}를 사용해 로우 데이터로부터 생성된 메모리상에 적재되는 짧은 오디오 자원을 나타냅니다. 이 형식으로 디코딩된 오디오는 {{ domxref("AudioBufferSourceNode") }}에 삽입될 수 있습니다.</dd> + <dt>{{domxref("AudioBufferSourceNode")}}</dt> + <dd><strong><code>AudioBufferSourceNode</code></strong> 인터페이스는 {{domxref("AudioBuffer")}}에 저장된 메모리상의 오디오 데이터로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> + <dt>{{domxref("MediaElementAudioSourceNode")}}</dt> + <dd><code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> 인터페이스는 {{ htmlelement("audio") }} 나 {{ htmlelement("video") }} HTML 엘리먼트로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> + <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt> + <dd><code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> 인터페이스는 <a href="/en-US/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}}(웹캠, 마이크 혹은 원격 컴퓨터에서 전송된 스트림)으로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> + <dt>{{domxref("MediaStreamTrackAudioSourceNode")}}</dt> + <dd>{{domxref("MediaStreamTrackAudioSourceNode")}} 유형의 노드는 데이터가 {{domxref("MediaStreamTrack")}}로부터 오는 오디오 소스를 표현합니다. 이 노드를 생성하기 위해 {{domxref("AudioContext.createMediaStreamTrackSource", "createMediaStreamTrackSource()")}} 메서드를 사용하여 이 노드를 생성할 때, 여러분은 어떤 트랙을 사용할 지 명시합니다. 이것은 <code>MediaStreamAudioSourceNode</code>보다 더 많은 제어를 제공합니다.</dd> </dl> -<h3 id="오디오_이펙트_필터_정의하기">오디오 이펙트 필터 정의하기</h3> +<h3 id="Defining_audio_effects_filters">오디오 이펙트 필터 정의하기</h3> <p>오디오 소스에 적용할 이펙트를 정의하는 인터페이스입니다.</p> <dl> - <dt>{{domxref("BiquadFilterNode")}}</dt> - <dd><strong><code>BiquadFilterNode</code></strong> 인터페이스는 간단한 하위 필터를 나타냅니다. 이것은 여러 종류의 필터나 톤 제어 장치 혹은 그래픽 이퀄라이저를 나타낼 수 있는 {{domxref("AudioNode")}}입니다. <code>BiquadFilterNode</code>는 항상 단 하나의 입력과 출력만을 가집니다. </dd> - <dt>{{domxref("ConvolverNode")}}</dt> - <dd><code><strong>Convolver</strong></code><strong><code>Node</code></strong><span style="line-height: 1.5;"> 인터페이스는 주어진 {{domxref("AudioBuffer")}}에 선형 콘볼루션을 수행하는 {{domxref("AudioNode")}}이며, 리버브 이펙트를 얻기 위해 자주 사용됩니다. </span></dd> - <dt>{{domxref("DelayNode")}}</dt> - <dd><strong><code>DelayNode</code></strong> 인터페이스는 지연선을 나타냅니다. 지연선은 입력 데이터가 출력에 전달되기까지의 사이에 딜레이를 발생시키는 {{domxref("AudioNode")}} 오디오 처리 모듈입니다.</dd> - <dt>{{domxref("DynamicsCompressorNode")}}</dt> - <dd><strong><code>DynamicsCompressorNode</code></strong> 인터페이스는 압축 이펙트를 제공합니다, 이는 신호의 가장 큰 부분의 볼륨을 낮추어 여러 사운드를 동시에 재생할 때 발생할 수 있는 클리핑 및 왜곡을 방지합니다.</dd> - <dt>{{domxref("GainNode")}}</dt> - <dd><strong><code>GainNode</code></strong> 인터페이스는 음량의 변경을 나타냅니다. 이는 출력에 전달되기 전의 입력 데이터에 주어진 음량 조정을 적용하기 위한 {{domxref("AudioNode")}} 오디오 모듈입니다.</dd> - <dt>{{domxref("StereoPannerNode")}}</dt> - <dd><code><strong>StereoPannerNode</strong></code> 인터페이스는 오디오 스트림을 좌우로 편향시키는데 사용될 수 있는 간단한 스테레오 패너 노드를 나타냅니다.</dd> - <dt>{{domxref("WaveShaperNode")}}</dt> - <dd><strong><code>WaveShaperNode</code></strong> 인터페이스는 비선형 왜곡을 나타냅니다. 이는 곡선을 사용하여 신호의 파형 형성에 왜곡을 적용하는 {{domxref("AudioNode")}}입니다. 분명한 왜곡 이펙트 외에도 신호에 따뜻한 느낌을 더하는데 자주 사용됩니다.</dd> - <dt>{{domxref("PeriodicWave")}}</dt> - <dd>{{domxref("OscillatorNode")}}의 출력을 형성하는데 사용될 수 있는 주기적 파형을 설명합니다.</dd> + <dt>{{domxref("BiquadFilterNode")}}</dt> + <dd><strong><code>BiquadFilterNode</code></strong> 인터페이스는 간단한 하위 필터를 나타냅니다. 이것은 여러 종류의 필터나 톤 제어 장치 혹은 그래픽 이퀄라이저를 나타낼 수 있는 {{domxref("AudioNode")}}입니다. <code>BiquadFilterNode</code>는 항상 단 하나의 입력과 출력만을 가집니다. </dd> + <dt>{{domxref("ConvolverNode")}}</dt> + <dd><code><strong>Convolver</strong></code><strong><code>Node</code></strong><span style="line-height: 1.5;"> 인터페이스는 주어진 {{domxref("AudioBuffer")}}에 선형 콘볼루션을 수행하는 {{domxref("AudioNode")}}이며, 리버브 이펙트를 얻기 위해 자주 사용됩니다. </span></dd> + <dt>{{domxref("DelayNode")}}</dt> + <dd><strong><code>DelayNode</code></strong> 인터페이스는 지연선을 나타냅니다. 지연선은 입력 데이터가 출력에 전달되기까지의 사이에 딜레이를 발생시키는 {{domxref("AudioNode")}} 오디오 처리 모듈입니다.</dd> + <dt>{{domxref("DynamicsCompressorNode")}}</dt> + <dd><strong><code>DynamicsCompressorNode</code></strong> 인터페이스는 압축 이펙트를 제공합니다, 이는 신호의 가장 큰 부분의 볼륨을 낮추어 여러 사운드를 동시에 재생할 때 발생할 수 있는 클리핑 및 왜곡을 방지합니다.</dd> + <dt>{{domxref("GainNode")}}</dt> + <dd><strong><code>GainNode</code></strong> 인터페이스는 음량의 변경을 나타냅니다. 이는 출력에 전달되기 전의 입력 데이터에 주어진 음량 조정을 적용하기 위한 {{domxref("AudioNode")}} 오디오 모듈입니다.</dd> + <dt>{{domxref("WaveShaperNode")}}</dt> + <dd><strong><code>WaveShaperNode</code></strong> 인터페이스는 비선형 왜곡을 나타냅니다. 이는 곡선을 사용하여 신호의 파형 형성에 왜곡을 적용하는 {{domxref("AudioNode")}}입니다. 분명한 왜곡 이펙트 외에도 신호에 따뜻한 느낌을 더하는데 자주 사용됩니다.</dd> + <dt>{{domxref("PeriodicWave")}}</dt> + <dd>{{domxref("OscillatorNode")}}의 출력을 형성하는데 사용될 수 있는 주기적 파형을 설명합니다.</dd> + <dt>{{domxref("IIRFilterNode")}}</dt> + <dd>일반적인 <strong><a class="external external-icon" href="https://en.wikipedia.org/wiki/infinite%20impulse%20response" title="infinite impulse response">infinite impulse response</a></strong> (IIR) 필터를 구현합니다; 이 유형의 필터는 음색 제어 장치와 그래픽 이퀄라이저를 구현하는 데 사용될 수 있습니다.</dd> </dl> -<h3 id="오디오_목적지_정의하기">오디오 목적지 정의하기</h3> +<h3 id="Defining_audio_destinations">오디오 목적지 정의하기</h3> <p>처리된 오디오를 어디에 출력할지 정의하는 인터페이스입니다.</p> @@ -122,347 +128,152 @@ translation_of: Web/API/Web_Audio_API <dt>{{domxref("AudioDestinationNode")}}</dt> <dd><strong><code>AudioDestinationNode</code></strong> 인터페이스는 주어진 컨텍스트 내의 오디오 소스의 최종 목적지를 나타냅니다. 주로 기기의 스피커로 출력할 때 사용됩니다.</dd> <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt> - <dd><code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> 인터페이스는 단일 <code>AudioMediaStreamTrack</code> 을 가진 <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}}로 구성된 오디오 목적지를 나타내며, 이는 {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}에서 얻은 {{domxref("MediaStream")}}과 비슷한 방식으로 사용할 수 있습니다. 이것은 오디오 목적지 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> + <dd><code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> 인터페이스는 단일 <code>AudioMediaStreamTrack</code> 을 가진 <a href="/en-US/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}}로 구성된 오디오 목적지를 나타내며, 이는 {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}에서 얻은 {{domxref("MediaStream")}}과 비슷한 방식으로 사용할 수 있습니다. 이것은 오디오 목적지 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> </dl> -<h3 id="데이터_분석_및_시각화">데이터 분석 및 시각화</h3> +<h3 id="Data_analysis_and_visualization">데이터 분석 및 시각화</h3> <p>오디오에서 재생시간이나 주파수 등의 데이터를 추출하기 위한 인터페이스입니다.</p> <dl> - <dt>{{domxref("AnalyserNode")}}</dt> - <dd><strong><code>AnalyserNode</code></strong> 인터페이스는 데이터를 분석하고 시각화하기 위한 실시간 주파수와 시간영역 분석 정보를 제공하는 노드를 나타냅니다.</dd> + <dt>{{domxref("AnalyserNode")}}</dt> + <dd><strong><code>AnalyserNode</code></strong> 인터페이스는 데이터를 분석하고 시각화하기 위한 실시간 주파수와 시간영역 분석 정보를 제공하는 노드를 나타냅니다.</dd> </dl> -<h3 id="오디오_채널을_분리하고_병합하기">오디오 채널을 분리하고 병합하기</h3> +<h3 id="Splitting_and_merging_audio_channels">오디오 채널을 분리하고 병합하기</h3> <p>오디오 채널들을 분리하거나 병합하기 위한 인터페이스입니다.</p> <dl> - <dt>{{domxref("ChannelSplitterNode")}}</dt> - <dd><code><strong>ChannelSplitterNode</strong></code> 인터페이스는 오디오 소스의 여러 채널을 모노 출력 셋으로 분리합니다.</dd> - <dt>{{domxref("ChannelMergerNode")}}</dt> - <dd><code><strong>ChannelMergerNode</strong></code> 인터페이스는 여러 모노 입력을 하나의 출력으로 재결합합니다. 각 입력은 출력의 채널을 채우는데 사용될 것입니다.</dd> + <dt>{{domxref("ChannelSplitterNode")}}</dt> + <dd><code><strong>ChannelSplitterNode</strong></code> 인터페이스는 오디오 소스의 여러 채널을 모노 출력 셋으로 분리합니다.</dd> + <dt>{{domxref("ChannelMergerNode")}}</dt> + <dd><code><strong>ChannelMergerNode</strong></code> 인터페이스는 여러 모노 입력을 하나의 출력으로 재결합합니다. 각 입력은 출력의 채널을 채우는데 사용될 것입니다.</dd> </dl> -<h3 id="오디오_공간화">오디오 공간화</h3> +<h3 id="Audio_spatialization">오디오 공간화</h3> <p>오디오 소스에 오디오 공간화 패닝 이펙트를 추가하는 인터페이스입니다.</p> <dl> - <dt>{{domxref("AudioListener")}}</dt> - <dd><strong><code>AudioListener</code></strong> 인터페이스는 오디오 공간화에 사용되는 오디오 장면을 청취하는 고유한 시청자의 위치와 방향을 나타냅니다.</dd> - <dt>{{domxref("PannerNode")}}</dt> - <dd><strong><code>PannerNode</code></strong> 인터페이스는 공간 내의 신호 양식을 나타냅니다. 이것은 자신의 오른손 직교 좌표 내의 포지션과, 속도 벡터를 이용한 움직임과, 방향성 원뿔을 이용한 방향을 서술하는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다.</dd> -</dl> - -<h3 id="자바스크립트에서_오디오_처리하기">자바스크립트에서 오디오 처리하기</h3> - -<p>자바스크립트에서 오디오 데이터를 처리하기 위한 코드를 작성할 수 있습니다. 이렇게 하려면 아래에 나열된 인터페이스와 이벤트를 사용하세요.</p> - -<div class="note"> -<p>이것은 Web Audio API 2014년 8월 29일의 스펙입니다. 이 기능은 지원이 중단되고 {{ anch("Audio_Workers") }}로 대체될 예정입니다.</p> -</div> - -<dl> - <dt>{{domxref("ScriptProcessorNode")}}</dt> - <dd><strong><code>ScriptProcessorNode</code></strong> 인터페이스는 자바스크립트를 이용한 오디오 생성, 처리, 분석 기능을 제공합니다. 이것은 현재 입력 버퍼와 출력 버퍼, 총 두 개의 버퍼에 연결되는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다. {{domxref("AudioProcessingEvent")}}인터페이스를 구현하는 이벤트는 입력 버퍼에 새로운 데이터가 들어올 때마다 객체로 전달되고, 출력 버퍼가 데이터로 채워지면 이벤트 핸들러가 종료됩니다.</dd> - <dt>{{event("audioprocess")}} (event)</dt> - <dd><strong><code>audioprocess</code></strong> 이벤트는 Web Audio API {{domxref("ScriptProcessorNode")}}의 입력 버퍼가 처리될 준비가 되었을 때 발생합니다.</dd> - <dt>{{domxref("AudioProcessingEvent")}}</dt> - <dd><a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> <strong><code>AudioProcessingEvent</code></strong> 는 {{domxref("ScriptProcessorNode")}} 입력 버퍼가 처리될 준비가 되었을 때 발생하는 이벤트를 나타냅니다.</dd> + <dt>{{domxref("AudioListener")}}</dt> + <dd><strong><code>AudioListener</code></strong> 인터페이스는 오디오 공간화에 사용되는 오디오 장면을 청취하는 고유한 시청자의 위치와 방향을 나타냅니다.</dd> + <dt>{{domxref("PannerNode")}}</dt> + <dd><strong><code>PannerNode</code></strong> 인터페이스는 공간 내의 신호 양식을 나타냅니다. 이것은 자신의 오른손 직교 좌표 내의 포지션과, 속도 벡터를 이용한 움직임과, 방향성 원뿔을 이용한 방향을 서술하는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다.</dd> + <dt>{{domxref("StereoPannerNode")}}</dt> + <dd><code><strong>StereoPannerNode</strong></code> 인터페이스는 오디오 스트림을 좌우로 편향시키는데 사용될 수 있는 간단한 스테레오 패너 노드를 나타냅니다.</dd> </dl> -<h3 id="오프라인백그라운드_오디오_처리하기">오프라인/백그라운드 오디오 처리하기</h3> +<h3 id="Audio_processing_in_JavaScript">JavaScript에서의 오디오 프로세싱</h3> -<p>다음을 이용해 백그라운드(장치의 스피커가 아닌 {{domxref("AudioBuffer")}}으로 렌더링)에서 오디오 그래프를 신속하게 처리/렌더링 할수 있습니다.</p> +<p>오디오 worklet을 사용하여, 여러분은 JavaScript 또는 <a href="/en-US/docs/WebAssembly">WebAssembly</a>로 작성된 사용자 정의 오디오 노드를 정의할 수 있습니다. 오디오 worklet은 {{domxref("Worklet")}} 인터페이스를 구현하는데, 이는 {{domxref("Worker")}} 인터페이스의 가벼운 버전입니다.</p> <dl> - <dt>{{domxref("OfflineAudioContext")}}</dt> - <dd><strong><code>OfflineAudioContext</code></strong> 인터페이스는 {{domxref("AudioNode")}}로 연결되어 구성된 오디오 프로세싱 그래프를 나타내는 {{domxref("AudioContext")}} 인터페이스입니다. 표준 <strong><code>AudioContext</code></strong> 와 대조적으로, <strong><code>OfflineAudioContext</code></strong> 는 실제로 오디오를 렌더링하지 않고 가능한 빨리 버퍼 내에서 생성합니다. </dd> - <dt>{{event("complete")}} (event)</dt> - <dd><strong><code>complete</code></strong> 이벤트는 {{domxref("OfflineAudioContext")}}의 렌더링이 종료될때 발생합니다.</dd> - <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt> - <dd><strong><code>OfflineAudioCompletionEvent</code></strong> 이벤트는 {{domxref("OfflineAudioContext")}} 의 처리가 종료될 때 발생하는 이벤트를 나타냅니다. {{event("complete")}} 이벤트는 이 이벤트를 구현합니다.</dd> + <dt>{{domxref("AudioWorklet")}}</dt> + <dd><code>AudioWorklet</code> 인터페이스는 {{domxref("AudioContext")}} 객체의 {{domxref("BaseAudioContext.audioWorklet", "audioWorklet")}}을 통하여 사용 가능하고, 메인 스레드를 실행할 오디오 worklet에 모듈을 추가할 수 있게 합니다.</dd> + <dt>{{domxref("AudioWorkletNode")}}</dt> + <dd><code>AudioWorkletNode</code> 인터페이스는 오디오 그래프에 임베드된 {{domxref("AudioNode")}}을 나타내고 해당하는 <code>AudioWorkletProcessor</code>에 메시지를 전달할 수 있습니다.</dd> + <dt>{{domxref("AudioWorkletProcessor")}}</dt> + <dd><code>AudioWorkletProcessor</code> 인터페이스는 오디오를 직접 생성하거나, 처리하거나, 또는 분석하는 <code>AudioWorkletGlobalScope</code>에서 실행되는 오디오 프로세싱 코드를 나타내고, 해당하는 <code>AudioWorkletNode</code>에 메시지를 전달할 수 있습니다.</dd> + <dt>{{domxref("AudioWorkletGlobalScope")}}</dt> + <dd><code>AudioWorkletGlobalScope</code> 인터페이스는 오디오 프로세싱 스크립트가 실행되는 워커 컨텍스트를 나타내는 파생된 객체인 <code>WorkletGlobalScope</code>입니다; 이것은 메인 스레드가 아닌 worklet 스레드에서 JavaScript를 사용하여 직접적으로 오디오 데이터의 생성, 처리, 분석을 가능하게 하도록 설계되었습니다.</dd> </dl> -<h3 id="Audio_Workers" name="Audio_Workers">오디오 워커</h3> +<h4 id="Obsolete_script_processor_nodes">안 쓰임: 스크립트 프로세서 노드</h4> -<p>오디오 워커는 <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a> 컨텍스트 내에서 스크립팅된 오디오 처리를 관리하기 위한 기능을 제공하며, 두어가지 인터페이스로 정의되어 있습니다(2014년 8월 29일 새로운 기능이 추가되었습니다). 이는 아직 모든 브라우저에서 구현되지 않았습니다. 구현된 브라우저에서는 <a href="#Audio_processing_via_JavaScript">Audio processing in JavaScript</a>에서 설명된 {{domxref("ScriptProcessorNode")}}를 포함한 다른 기능을 대체합니다.</p> +<p>오디오 worklet이 정의되기 전에, Web Audio API는 JavaScript 기반의 오디오 프로세싱을 위해 <code>ScriptProcessorNode</code>를 사용했습니다. 코드가 메인 스레드에서 실행되기 때문에, 나쁜 성능을 가지고 있었습니다. <code>ScriptProcessorNode</code>는 역사적인 이유로 보존되나 deprecated되었습니다.</p> <dl> - <dt>{{domxref("AudioWorkerNode")}}</dt> - <dd><strong><code>AudioWorkerNode</code></strong> 인터페이스는 워커 쓰레드와 상호작용하여 오디오를 직접 생성, 처리, 분석하는 {{domxref("AudioNode")}}를 나타냅니다. </dd> - <dt>{{domxref("AudioWorkerGlobalScope")}}</dt> - <dd><strong><code>AudioWorkerGlobalScope</code></strong> 인터페이스는 <strong><code>DedicatedWorkerGlobalScope</code></strong> 에서 파생된 오디오 처리 스크립트가 실행되는 워커 컨텍스트를 나타내는 객체입니다. 이것은 워커 쓰레드 내에서 자바스크립트를 이용하여 직접 오디오 데이터를 생성, 처리, 분석할 수 있도록 설계되었습니다.</dd> - <dt>{{domxref("AudioProcessEvent")}}</dt> - <dd>이것은 처리를 수행하기 위해 {{domxref("AudioWorkerGlobalScope")}} 오브젝트로 전달되는 <code>Event</code> 오브젝트입니다.</dd> + <dt>{{domxref("ScriptProcessorNode")}} {{deprecated_inline}}</dt> + <dd><strong><code>ScriptProcessorNode</code></strong> 인터페이스는 자바스크립트를 이용한 오디오 생성, 처리, 분석 기능을 제공합니다. 이것은 현재 입력 버퍼와 출력 버퍼, 총 두 개의 버퍼에 연결되는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다. {{domxref("AudioProcessingEvent")}} 인터페이스를 구현하는 이벤트는 입력 버퍼에 새로운 데이터가 들어올 때마다 객체로 전달되고, 출력 버퍼가 데이터로 채워지면 이벤트 핸들러가 종료됩니다.</dd> + <dt>{{event("audioprocess")}} (event) {{deprecated_inline}}</dt> + <dd><code>audioprocess</code> 이벤트는 Web Audio API {{domxref("ScriptProcessorNode")}}의 입력 버퍼가 처리될 준비가 되었을 때 발생합니다.</dd> + <dt>{{domxref("AudioProcessingEvent")}} {{deprecated_inline}}</dt> + <dd><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> <code>AudioProcessingEvent</code>는 {{domxref("ScriptProcessorNode")}} 입력 버퍼가 처리될 준비가 되었을 때 발생하는 이벤트를 나타냅니다.</dd> </dl> -<h2 id="Example" name="Example">Obsolete interfaces</h2> +<h3 id="Offlinebackground_audio_processing">오프라인/백그라운드 오디오 처리하기</h3> -<p>The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.</p> +<p>다음을 이용해 백그라운드(장치의 스피커가 아닌 {{domxref("AudioBuffer")}}으로 렌더링)에서 오디오 그래프를 신속하게 처리/렌더링 할수 있습니다.</p> <dl> - <dt>{{domxref("JavaScriptNode")}}</dt> - <dd>Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.</dd> - <dt>{{domxref("WaveTableNode")}}</dt> - <dd>Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.</dd> + <dt>{{domxref("OfflineAudioContext")}}</dt> + <dd><strong><code>OfflineAudioContext</code></strong> 인터페이스는 {{domxref("AudioNode")}}로 연결되어 구성된 오디오 프로세싱 그래프를 나타내는 {{domxref("AudioContext")}} 인터페이스입니다. 표준 <strong><code>AudioContext</code></strong> 와 대조적으로, <strong><code>OfflineAudioContext</code></strong> 는 실제로 오디오를 렌더링하지 않고 가능한 빨리 버퍼 내에서 생성합니다. </dd> + <dt>{{event("complete")}} (event)</dt> + <dd><strong><code>complete</code></strong> 이벤트는 {{domxref("OfflineAudioContext")}}의 렌더링이 종료될때 발생합니다.</dd> + <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt> + <dd><strong><code>OfflineAudioCompletionEvent</code></strong> 이벤트는 {{domxref("OfflineAudioContext")}} 의 처리가 종료될 때 발생하는 이벤트를 나타냅니다. {{event("complete")}} 이벤트는 이 이벤트를 구현합니다.</dd> </dl> -<h2 id="Example" name="Example">Example</h2> - -<p>This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> demo (also check out the <a href="https://github.com/mdn/voice-change-o-matic">full source code at Github</a>) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!</p> - -<p>The Web Audio API lines are highlighted; if you want to find out more about what the different methods, etc. do, have a search around the reference pages.</p> - -<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151] notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context -// Webkit/blink browsers need prefix, Safari won't work without window. - -var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options -var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options -var mute = document.querySelector('.mute'); // mute button -var drawVisual; // requestAnimationFrame - -var analyser = audioCtx.createAnalyser(); -var distortion = audioCtx.createWaveShaper(); -var gainNode = audioCtx.createGain(); -var biquadFilter = audioCtx.createBiquadFilter(); - -function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use - var k = typeof amount === 'number' ? amount : 50, - n_samples = 44100, - curve = new Float32Array(n_samples), - deg = Math.PI / 180, - i = 0, - x; - for ( ; i < n_samples; ++i ) { - x = i * 2 / n_samples - 1; - curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) ); - } - return curve; -}; - -navigator.getUserMedia ( - // constraints - only audio needed for this app - { - audio: true - }, - - // Success callback - function(stream) { - source = audioCtx.createMediaStreamSource(stream); - source.connect(analyser); - analyser.connect(distortion); - distortion.connect(biquadFilter); - biquadFilter.connect(gainNode); - gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together - - visualize(stream); - voiceChange(); - - }, - - // Error callback - function(err) { - console.log('The following gUM error occured: ' + err); - } -); - -function visualize(stream) { - WIDTH = canvas.width; - HEIGHT = canvas.height; - - var visualSetting = visualSelect.value; - console.log(visualSetting); - - if(visualSetting == "sinewave") { - analyser.fftSize = 2048; - var bufferLength = analyser.frequencyBinCount; // half the FFT value - var dataArray = new Uint8Array(bufferLength); // create an array to store the data +<h2 id="Guides_and_tutorials">가이드와 자습서</h2> - canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); +<p>{{LandingPageListSubpages}}</p> - function draw() { +<h2 id="Examples">예제</h2> - drawVisual = requestAnimationFrame(draw); +<p>여러분은 GitHub의 <a href="https://github.com/mdn/webaudio-examples/">webaudio-example 레포지토리</a>에서 몇 개의 예제를 찾을 수 있습니다.</p> - analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above +<h2 id="Specifications">명세</h2> - canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas - canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); - - canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; - - canvasCtx.beginPath(); - - var sliceWidth = WIDTH * 1.0 / bufferLength; - var x = 0; - - for(var i = 0; i < bufferLength; i++) { - - var v = dataArray[i] / 128.0; - var y = v * HEIGHT/2; - - if(i === 0) { - canvasCtx.moveTo(x, y); - } else { - canvasCtx.lineTo(x, y); - } - - x += sliceWidth; - } - - canvasCtx.lineTo(canvas.width, canvas.height/2); - canvasCtx.stroke(); - }; - - draw(); - - } else if(visualSetting == "off") { - canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); - canvasCtx.fillStyle = "red"; - canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); - } - -} - -function voiceChange() { - distortion.curve = new Float32Array; - biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run - - var voiceSetting = voiceSelect.value; - console.log(voiceSetting); - - if(voiceSetting == "distortion") { - distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node - } else if(voiceSetting == "biquad") { - biquadFilter.type = "lowshelf"; - biquadFilter.frequency.value = 1000; - biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad - } else if(voiceSetting == "off") { - console.log("Voice settings turned off"); // do nothing, as off option was chosen - } - -} - -// event listeners to change visualize and voice settings +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td></td> + </tr> + </tbody> +</table> -visualSelect.onchange = function() { - window.cancelAnimationFrame(drawVisual); - visualize(stream); -} +<h2 id="Browser_compatibility">브라우저 호환성</h2> -voiceSelect.onchange = function() { - voiceChange(); -} +<div> +<h3 id="AudioContext">AudioContext</h3> -mute.onclick = voiceMute; +<div> -function voiceMute() { // toggle to mute and unmute sound - if(mute.id == "") { - gainNode.gain.value = 0; // gain set to 0 to mute sound - mute.id = "activated"; - mute.innerHTML = "Unmute"; - } else { - gainNode.gain.value = 1; // gain set to 1 to unmute sound - mute.id = ""; - mute.innerHTML = "Mute"; - } -} -</pre> +<p>{{Compat("api.AudioContext", 0)}}</p> +</div> +</div> -<h2 id="Specifications">Specifications</h2> +<h2 id="See_also">같이 보기</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td></td> - </tr> - </tbody> -</table> +<h3 id="Tutorialsguides">자습서/가이드</h3> -<h2 id="Browser_compatibility">Browser compatibility</h2> +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Web Audio API의 기본 개념</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques">고급 기술: 소리 생성, 시퀸싱, 타이밍, 스케쥴링</a></li> + <li><a href="/en-US/docs/Web/Media/Autoplay_guide">미디어와 Web Audio API에 대한 자동 재생 가이드</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_IIR_filters">IIR 필터 사용하기</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Web Audio API 시각화</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio 공간화 기초</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">ConstantSourceNode로 다수의 매개변수 제어하기</a></li> + <li><a href="https://www.html5rocks.com/tutorials/webaudio/positional_audio/">positional audio와 WebGL 같이 사용하기</a></li> + <li><a href="https://www.html5rocks.com/tutorials/webaudio/games/">Web Audio API로 게임 오디오 개발하기</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Migrating_from_webkitAudioContext">webkitAudioContext 코드를 AudioContext 기반 표준에 포팅하기</a></li> +</ul> -<p>{{Compat("api.AudioContext", 0)}}</p> - -<h2 id="See_also">See also</h2> +<h3 id="Libraries">라이브러리</h3> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li> - <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li> - <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li> - <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li> - <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> - <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li> - <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li> - <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li> + <li><a href="https://github.com/bit101/tones">Tones</a>: Web Audio API를 사용하여 특정한 음색/음을 재생하는 간단한 라이브러리</li> + <li><a href="https://tonejs.github.io/">Tone.js</a>: 브라우저에서 상호작용을 하는 음악을 생성하기 위한 프레임워크</li> + <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: 다른 유용한 기능들을 제공할 뿐만 아니라, <a href="https://webaudio.github.io/web-audio-api/">Web Audio API</a>을 기본으로 하고 <a href="https://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>에 대안을 제공하는 JS 오디오 라이브러리</li> + <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery 스타일의 AudioNode 체이닝, mixer 스타일의 전송/반환, 등등</li> + <li><a href="https://korilakkuma.github.io/XSound/">XSound</a>: 신시사이저, 이펙트, 시각화, 레코딩 등을 위한 Web Audio API 라이브러리</li> + <li><a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: 다른 소스로부터 하나의 파일에 비디오와 오디오를 레코드하고 결합시키기 위한 Web Audio API를 사용하는 HTML5 비디오 language lab 웹 애플리케이션 (<a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">GitHub에 있는 소스</a>)</li> + <li><a href="https://ptsjs.org/">Pts.js</a>: 웹 오디오 시각화를 단순화합니다 (<a href="https://ptsjs.org/guide/sound-0800">가이드</a>)</li> </ul> -<section id="Quick_Links"> -<h3 id="Quicklinks">Quicklinks</h3> +<h3 id="Related_topics">관련 주제</h3> -<ol> - <li data-default-state="open"><strong><a href="#">Guides</a></strong> - - <ol> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> - </ol> - </li> - <li data-default-state="open"><strong><a href="#">Examples</a></strong> - <ol> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Simple_synth">Simple synth keyboard</a></li> - <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li> - <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li> - </ol> - </li> - <li data-default-state="open"><strong><a href="#">Interfaces</a></strong> - <ol> - <li>{{domxref("AnalyserNode")}}</li> - <li>{{domxref("AudioBuffer")}}</li> - <li>{{domxref("AudioBufferSourceNode")}}</li> - <li>{{domxref("AudioContext")}}</li> - <li>{{domxref("AudioDestinationNode")}}</li> - <li>{{domxref("AudioListener")}}</li> - <li>{{domxref("AudioNode")}}</li> - <li>{{domxref("AudioParam")}}</li> - <li>{{event("audioprocess")}} (event)</li> - <li>{{domxref("AudioProcessingEvent")}}</li> - <li>{{domxref("BiquadFilterNode")}}</li> - <li>{{domxref("ChannelMergerNode")}}</li> - <li>{{domxref("ChannelSplitterNode")}}</li> - <li>{{event("complete")}} (event)</li> - <li>{{domxref("ConvolverNode")}}</li> - <li>{{domxref("DelayNode")}}</li> - <li>{{domxref("DynamicsCompressorNode")}}</li> - <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li> - <li>{{domxref("GainNode")}}</li> - <li>{{domxref("MediaElementAudioSourceNode")}}</li> - <li>{{domxref("MediaStreamAudioDestinationNode")}}</li> - <li>{{domxref("MediaStreamAudioSourceNode")}}</li> - <li>{{domxref("OfflineAudioCompletionEvent")}}</li> - <li>{{domxref("OfflineAudioContext")}}</li> - <li>{{domxref("OscillatorNode")}}</li> - <li>{{domxref("PannerNode")}}</li> - <li>{{domxref("PeriodicWave")}}</li> - <li>{{domxref("ScriptProcessorNode")}}</li> - <li>{{domxref("WaveShaperNode")}}</li> - </ol> - </li> -</ol> -</section> +<ul> + <li><a href="/en-US/docs/Web/Media">웹 미디어 기술</a></li> + <li><a href="/en-US/docs/Web/Media/Formats">웹에서의 미디어 타입과 포맷에 대한 가이드</a></li> +</ul> diff --git a/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.html b/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.html new file mode 100644 index 0000000000..260a26a090 --- /dev/null +++ b/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.html @@ -0,0 +1,381 @@ +--- +title: Migrating from webkitAudioContext +slug: Web/API/Web_Audio_API/Migrating_from_webkitAudioContext +tags: + - API + - Audio + - Guide + - Migrating + - Migration + - Updating + - Web Audio API + - porting + - webkitAudioContext +--- +<p>The Web Audio API went through many iterations before reaching its current state. It was first implemented in WebKit, and some of its older parts were not immediately removed as they were replaced in the specification, leading to many sites using non-compatible code. <span class="seoSummary">In this article, we cover the differences in Web Audio API since it was first implemented in WebKit and how to update your code to use the modern Web Audio API.</span></p> + +<p>The Web Audio standard was first implemented in <a href="http://webkit.org/">WebKit</a>, and the implementation was built in parallel with the work on the <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">specification</a> of the API. As the specification evolved and changes were made to the spec, some of the old implementation pieces were not removed from the WebKit (and Blink) implementations due to backwards compatibility reasons.</p> + +<p>New engines implementing the Web Audio spec (such as Gecko) will only implement the official, final version of the specification, which means that code using <code>webkitAudioContext</code> or old naming conventions in the Web Audio specification may not immediately work out of the box in a compliant Web Audio implementation. This article attempts to summarize the areas where developers are likely to encounter these problems and provide examples on how to port such code to standards based {{domxref("AudioContext")}}, which will work across different browser engines.</p> + +<div class="note"> +<p><strong>Note</strong>: There is a library called <a href="https://github.com/cwilso/webkitAudioContext-MonkeyPatch">webkitAudioContext monkeypatch</a>, which automatically fixes some of these changes to make most code targeting <code>webkitAudioContext</code> to work on the standards based <code>AudioContext</code> out of the box, but it currently doesn't handle all of the cases below. Please consult the <a href="https://github.com/cwilso/webkitAudioContext-MonkeyPatch/blob/gh-pages/README.md">README file</a> for that library to see a list of APIs that are automatically handled by it.</p> +</div> + +<h2 id="Changes_to_the_creator_methods">Changes to the creator methods</h2> + +<p>Three of the creator methods on <code>webkitAudioContext</code> have been renamed in {{domxref("AudioContext")}}.</p> + +<ul> + <li><code>createGainNode()</code> has been renamed to {{domxref("createGain")}}.</li> + <li><code>createDelayNode()</code> has been renamed to {{domxref("createDelay")}}.</li> + <li><code>createJavaScriptNode()</code> has been renamed to {{domxref("createScriptProcessor")}}.</li> +</ul> + +<p>These are simple renames that were made in order to improve the consistency of these method names on {{domxref("AudioContext")}}. If your code uses either of these names, like in the example below :</p> + +<pre class="brush: js">// Old method names +var gain = context.createGainNode(); +var delay = context.createDelayNode(); +var js = context.createJavascriptNode(1024); +</pre> + +<p>you can rename the methods to look like this:</p> + +<pre class="brush: js">// New method names +var gain = context.createGain(); +var delay = context.createDelay(); +var js = context.createScriptProcessor(1024); +</pre> + +<p>The semantics of these methods remain the same in the renamed versions.</p> + +<h2 id="Changes_to_starting_and_stopping_nodes">Changes to starting and stopping nodes</h2> + +<p>In <code>webkitAudioContext</code>, there are two ways to start and stop {{domxref("AudioBufferSourceNode")}} and {{domxref("OscillatorNode")}}: the <code>noteOn()</code> and <code>noteOff()</code> methods, and the <code>start()</code> and <code>stop()</code> methods. ({{domxref("AudioBufferSourceNode ")}}has yet another way of starting output: the <code>noteGrainOn()</code> method.) The <code>noteOn()</code>/<code>noteGrainOn()</code>/<code>noteOff()</code> methods were the original way to start/stop output in these nodes, and in the newer versions of the specification, the <code>noteOn()</code> and <code>noteGrainOn()</code> methods were consolidated into a single <code>start()</code> method, and the <code>noteOff()</code> method was renamed to the <code>stop()</code> method.</p> + +<p>In order to port your code, you can just rename the method that you're using. For example, if you have code like the below:</p> + +<pre class="brush: js">var osc = context.createOscillator(); +osc.noteOn(1); +osc.noteOff(1.5); + +var src = context.createBufferSource(); +src.noteGrainOn(1, 0.25); +src.noteOff(2); +</pre> + +<p>you can change it like this in order to port it to the standard AudioContext API:</p> + +<pre class="brush: js">var osc = context.createOscillator(); +osc.start(1); +osc.stop(1.5); + +var src = context.createBufferSource(); +src.start(1, 0.25); +src.stop(2);</pre> + +<h2 id="Remove_synchronous_buffer_creation">Remove synchronous buffer creation</h2> + +<p>In the old WebKit implementation of Web Audio, there were two versions of <code>createBuffer()</code>, one which created an initially empty buffer, and one which took an existing {{domxref("ArrayBuffer")}} containing encoded audio, decoded it and returned the result in the form of an {{domxref("AudioBuffer")}}. The latter version of <code>createBuffer()</code> was potentially expensive, because it had to decode the audio buffer synchronously, and with the buffer being arbitrarily large, it could take a lot of time for this method to complete its work, and no other part of your web page's code could execute in the mean time.</p> + +<p>Because of these problems, this version of the <code>createBuffer()</code> method has been removed, and you should use the asynchronous <code>decodeAudioData()</code> method instead.</p> + +<p>The example below shows old code which downloads an audio file over the network, and then decoded it using <code>createBuffer()</code>:</p> + +<pre class="brush: js">var xhr = new XMLHttpRequest(); +xhr.open("GET", "/path/to/audio.ogg", true); +xhr.responseType = "arraybuffer"; +xhr.send(); +xhr.onload = function() { + var decodedBuffer = context.createBuffer(xhr.response, false); + if (decodedBuffer) { + // Decoding was successful, do something useful with the audio buffer + } else { + alert("Decoding the audio buffer failed"); + } +}; +</pre> + +<p>Converting this code to use <code>decodeAudioData()</code> is relatively simple, as can be seen below:</p> + +<pre class="brush: js">var xhr = new XMLHttpRequest(); +xhr.open("GET", "/path/to/audio.ogg", true); +xhr.responseType = "arraybuffer"; +xhr.send(); +xhr.onload = function() { + context.decodeAudioData(xhr.response, function onSuccess(decodedBuffer) { + // Decoding was successful, do something useful with the audio buffer + }, function onFailure() { + alert("Decoding the audio buffer failed"); + }); +};</pre> + +<p>Note that the <code>decodeAudioData()</code> method is asynchronous, which means that it will return immediately, and then when the decoding finishes, one of the success or failure callback functions will get called depending on whether the audio decoding was successful. This means that you may need to restructure your code to run the part which happened after the <code>createBuffer()</code> call in the success callback, as you can see in the example above.</p> + +<h2 id="Renaming_of_AudioParam.setTargetValueAtTime">Renaming of AudioParam.setTargetValueAtTime</h2> + +<p>The <code>setTargetValueAtTime()</code> method on the {{domxref("AudioParam")}} interface has been renamed to <code>setTargetAtTime()</code>. This is also a simple rename to improve the understandability of the API, and the semantics of the method are the same. If your code is using <code>setTargetValueAtTime()</code>, you can rename it to use <code>setTargetAtTime()</code>. For example, if we have code that looks like this:</p> + +<pre class="brush: js"> var gainNode = context.createGain(); + gainNode.gain.setTargetValueAtTime(0.0, 10.0, 1.0); +</pre> + +<p>you can rename the method, and be compliant with the standard, like so:</p> + +<pre class="brush: js"> var gainNode = context.createGain(); + gainNode.gain.setTargetAtTime(0.0, 10.0, 1.0); +</pre> + +<h2 id="Enumerated_values_that_changed">Enumerated values that changed</h2> + +<p>The original <code>webkitAudioContext</code> API used C-style number based enumerated values in the API. Those values have since been changed to use the Web IDL based enumerated values, which should be familiar because they are similar to things like the {{domxref("HTMLInputElement")}} property {{domxref("HTMLInputElement.type", "type")}}.</p> + +<h3 id="OscillatorNode.type">OscillatorNode.type</h3> + +<p>{{domxref("OscillatorNode")}}'s type property has been changed to use Web IDL enums. Old code using <code>webkitAudioContext</code> can be ported to standards based {{domxref("AudioContext")}} like below:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var osc = context.createOscillator(); +osc.type = osc.SINE; // sine waveform +osc.type = osc.SQUARE; // square waveform +osc.type = osc.SAWTOOTH; // sawtooth waveform +osc.type = osc.TRIANGLE; // triangle waveform +osc.setWaveTable(table); +var isCustom = (osc.type == osc.CUSTOM); // isCustom will be true + +// New standard AudioContext code: +var osc = context.createOscillator(); +osc.type = "sine"; // sine waveform +osc.type = "square"; // square waveform +osc.type = "sawtooth"; // sawtooth waveform +osc.type = "triangle"; // triangle waveform +osc.setPeriodicWave(table); // Note: setWaveTable has been renamed to setPeriodicWave! +var isCustom = (osc.type == "custom"); // isCustom will be true +</pre> + +<h3 id="BiquadFilterNode.type">BiquadFilterNode.type</h3> + +<p>{{domxref("BiquadFilterNode")}}'s type property has been changed to use Web IDL enums. Old code using <code>webkitAudioContext</code> can be ported to standards based {{domxref("AudioContext")}} like below:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var filter = context.createBiquadFilter(); +filter.type = filter.LOWPASS; // lowpass filter +filter.type = filter.HIGHPASS; // highpass filter +filter.type = filter.BANDPASS; // bandpass filter +filter.type = filter.LOWSHELF; // lowshelf filter +filter.type = filter.HIGHSHELF; // highshelf filter +filter.type = filter.PEAKING; // peaking filter +filter.type = filter.NOTCH; // notch filter +filter.type = filter.ALLPASS; // allpass filter + +// New standard AudioContext code: +var filter = context.createBiquadFilter(); +filter.type = "lowpass"; // lowpass filter +filter.type = "highpass"; // highpass filter +filter.type = "bandpass"; // bandpass filter +filter.type = "lowshelf"; // lowshelf filter +filter.type = "highshelf"; // highshelf filter +filter.type = "peaking"; // peaking filter +filter.type = "notch"; // notch filter +filter.type = "allpass"; // allpass filter +</pre> + +<h3 id="PannerNode.panningModel">PannerNode.panningModel</h3> + +<p>{{domxref("PannerNode")}}'s panningModel property has been changed to use Web IDL enums. Old code using <code>webkitAudioContext</code> can be ported to standards based {{domxref("AudioContext")}} like below:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var panner = context.createPanner(); +panner.panningModel = panner.EQUALPOWER; // equalpower panning +panner.panningModel = panner.HRTF; // HRTF panning + +// New standard AudioContext code: +var panner = context.createPanner(); +panner.panningModel = "equalpower"; // equalpower panning +panner.panningModel = "HRTF"; // HRTF panning +</pre> + +<h3 id="PannerNode.distanceModel">PannerNode.distanceModel</h3> + +<p>{{domxref("PannerNode")}}'s <code>distanceModel</code> property has been changed to use Web IDL enums. Old code using <code>webkitAudioContext</code> can be ported to standards based {{domxref("AudioContext")}} like below:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var panner = context.createPanner(); +panner.distanceModel = panner.LINEAR_DISTANCE; // linear distance model +panner.distanceModel = panner.INVERSE_DISTANCE; // inverse distance model +panner.distanceModel = panner.EXPONENTIAL_DISTANCE; // exponential distance model + +// Mew standard AudioContext code: +var panner = context.createPanner(); +panner.distanceModel = "linear"; // linear distance model +panner.distanceModel = "inverse"; // inverse distance model +panner.distanceModel = "exponential"; // exponential distance model +</pre> + +<h2 id="Gain_control_moved_to_its_own_node_type">Gain control moved to its own node type</h2> + +<p>The Web Audio standard now controls all gain using the {{domxref("GainNode")}}. Instead of setting a <code>gain</code> property directly on an audio source, you connect the source to a gain node and then control the gain using that node's <code>gain</code> parameter.</p> + +<h3 id="AudioBufferSourceNode">AudioBufferSourceNode</h3> + +<p>The <code>gain</code> attribute of {{domxref("AudioBufferSourceNode")}} has been removed. The same functionality can be achieved by connecting the {{domxref("AudioBufferSourceNode")}} to a gain node. See the following example:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var src = context.createBufferSource(); +src.buffer = someBuffer; +src.gain.value = 0.5; +src.connect(context.destination); +src.noteOn(0); + +// New standard AudioContext code: +var src = context.createBufferSource(); +src.buffer = someBuffer; +var gain = context.createGain(); +src.connect(gain); +gain.gain.value = 0.5; +gain.connect(context.destination); +src.start(0); +</pre> + +<h3 id="AudioBuffer">AudioBuffer</h3> + +<p>The <code>gain</code> attribute of {{domxref("AudioBuffer")}} has been removed. The same functionality can be achieved by connecting the {{domxref("AudioBufferSourceNode")}} that owns the buffer to a gain node. See the following example:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var src = context.createBufferSource(); +src.buffer = someBuffer; +src.buffer.gain = 0.5; +src.connect(context.destination); +src.noteOn(0); + +// New standard AudioContext code: +var src = context.createBufferSource(); +src.buffer = someBuffer; +var gain = context.createGain(); +src.connect(gain); +gain.gain.value = 0.5; +gain.connect(context.destination); +src.start(0); +</pre> + +<h2 id="Removal_of_AudioBufferSourceNode.looping">Removal of AudioBufferSourceNode.looping</h2> + +<p>The <code>looping</code> attribute of {{domxref("AudioBufferSourceNode")}} has been removed. This attribute was an alias of the <code>loop</code> attribute, so you can just use the <code>loop</code> attribute instead. Instead of having code like this:</p> + +<pre class="brush: js">var source = context.createBufferSource(); +source.looping = true; +</pre> + +<p>you can change it to respect the last version of the specification:</p> + +<pre class="brush: js">var source = context.createBufferSource(); +source.loop = true; +</pre> + +<p>Note, the <code>loopStart</code> and <code>loopEnd</code> attributes are not supported in <code>webkitAudioContext</code>.</p> + +<h2 id="Changes_to_determining_playback_state">Changes to determining playback state</h2> + +<p>The <code>playbackState</code> attribute of {{domxref("AudioBufferSourceNode")}} and {{domxref("OscillatorNode")}} has been removed. Depending on why you used this attribute, you can use the following techniques to get the same information:</p> + +<ul> + <li>If you need to compare this attribute to <code>UNSCHEDULED_STATE</code>, you can basically remember whether you've called <code>start()</code> on the node or not.</li> + <li>If you need to compare this attribute to <code>SCHEDULED_STATE</code>, you can basically remember whether you've called <code>start()</code> on the node or not. You can compare the value of {{domxref("AudioContext.currentTime")}} to the first argument passed to <code>start()</code> to know whether playback has started or not.</li> + <li>If you need to compare this attribute to <code>PLAYING_STATE</code>, you can compare the value of {{domxref("AudioContext.currentTime")}} to the first argument passed to <code>start()</code> to know whether playback has started or not.</li> + <li>If you need to know when playback of the node is finished (which is the most significant use case of <code>playbackState</code>), there is a new ended event which you can use to know when playback is finished. Please see this code example:</li> +</ul> + +<pre class="brush: js">// Old webkitAudioContext code: +var src = context.createBufferSource(); +// Some time later... +var isFinished = (src.playbackState == src.FINISHED_STATE); + +// New AudioContext code: +var src = context.createBufferSource(); +function endedHandler(event) { + isFinished = true; +} +var isFinished = false; +src.onended = endedHandler; +</pre> + +<p>The exact same changes have been applied to both {{domxref("AudioBufferSourceNode")}} and {{domxref("OscillatorNode")}}, so you can apply the same techniques to both kinds of nodes.</p> + +<h2 id="Removal_of_AudioContext.activeSourceCount">Removal of AudioContext.activeSourceCount</h2> + +<p>The <code>activeSourceCount</code> attribute has been removed from {{domxref("AudioContext")}}. If you need to count the number of playing source nodes, you can maintain the count by handling the ended event on the source nodes, as shown above.</p> + +<p>Code using the <code>activeSourceCount</code> attribute of the {{domxref("AudioContext")}}, like this snippet:</p> + +<pre class="brush: js"> var src0 = context.createBufferSource(); + var src1 = context.createBufferSource(); + // Set buffers and other parameters... + src0.start(0); + src1.start(0); + // Some time later... + console.log(context.activeSourceCount); +</pre> + +<p>could be rewritten like that:</p> + +<pre class="brush: js"> // Array to track the playing source nodes: + var sources = []; + // When starting the source, put it at the end of the array, + // and set a handler to make sure it gets removed when the + // AudioBufferSourceNode reaches its end. + // First argument is the AudioBufferSourceNode to start, other arguments are + // the argument to the |start()| method of the AudioBufferSourceNode. + function startSource() { + var src = arguments[0]; + var startArgs = Array.prototype.slice.call(arguments, 1); + src.onended = function() { + sources.splice(sources.indexOf(src), 1); + } + sources.push(src); + src.start.apply(src, startArgs); + } + function activeSources() { + return sources.length; + } + var src0 = context.createBufferSource(); + var src0 = context.createBufferSource(); + // Set buffers and other parameters... + startSource(src0, 0); + startSource(src1, 0); + // Some time later, query the number of sources... + console.log(activeSources()); +</pre> + +<h2 id="Renaming_of_WaveTable">Renaming of WaveTable</h2> + +<p>The {{domxref("WaveTable")}} interface has been renamed to {{domxref("PeriodicWave")}}. Here is how you can port old code using <code>WaveTable</code> to the standard AudioContext API:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var osc = context.createOscillator(); +var table = context.createWaveTable(realArray, imaginaryArray); +osc.setWaveTable(table); + +// New standard AudioContext code: +var osc = context.createOscillator(); +var table = context.createPeriodicWave(realArray, imaginaryArray); +osc.setPeriodicWave(table); +</pre> + +<h2 id="Removal_of_some_of_the_AudioParam_read-only_attributes">Removal of some of the AudioParam read-only attributes</h2> + +<p>The following read-only attributes have been removed from AudioParam: <code>name</code>, <code>units</code>, <code>minValue</code>, and <code>maxValue</code>. These used to be informational attributes. Here is some information on how you can get these values if you need them:</p> + +<ul> + <li>The <code>name</code> attribute is a string representing the name of the {{domxref("AudioParam")}} object. For example, the name of {{domxref("GainNode.gain")}} is <code>"gain"</code>. You can track where the {{domxref("AudioParam")}} object is coming from in your code if you need this information.</li> + <li>The <code>minValue</code> and <code>maxValue</code> attributes are read-only values representing the nominal range for the {{domxref("AudioParam")}}. For example, for {{domxref("GainNode") }}, these values are 0 and 1, respectively. Note that these bounds are not enforced by the engine, and are merely used for informational purposes. As an example, it's perfectly valid to set a gain value to 2, or even -1. In order to find out these nominal values, you can consult the <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">specification</a>.</li> + <li>The <code>units</code> attribute as implemented in <code>webkitAudioContext</code> implementations is unused, and always returns 0. There is no reason why you should need this attribute.</li> +</ul> + +<h2 id="Removal_of_MediaElementAudioSourceNode.mediaElement">Removal of MediaElementAudioSourceNode.mediaElement</h2> + +<p>The <code>mediaElement</code> attribute of {{domxref("MediaElementAudioSourceNode")}} has been removed. You can keep a reference to the media element used to create this node if you need to access it later.</p> + +<h2 id="Removal_of_MediaStreamAudioSourceNode.mediaStream">Removal of MediaStreamAudioSourceNode.mediaStream</h2> + +<p>The <code>mediaStream</code> attribute of {{domxref("MediaStreamAudioSourceNode")}} has been removed. You can keep a reference to the media stream used to create this node if you need to access it later.</p> diff --git a/files/ko/web/api/web_audio_api/simple_synth/index.html b/files/ko/web/api/web_audio_api/simple_synth/index.html new file mode 100644 index 0000000000..2ac3a7cf14 --- /dev/null +++ b/files/ko/web/api/web_audio_api/simple_synth/index.html @@ -0,0 +1,578 @@ +--- +title: '예제와 튜토리얼: 간단한 신시사이저 키보드' +slug: Web/API/Web_Audio_API/Simple_synth +tags: + - Audio + - Example + - Guide + - Media + - Oscillator + - Piano + - Synthesizer + - Tutorial + - Web Audio API +--- +<div>{{DefaultAPISidebar("Web Audio API")}}</div> + +<p>이 문서는 마우스를 사용해 플레이할 수 있는 비디오 키보드의 데모와 코드를 보여줍니다. 이 키보드는 표준 파형들과 사용자 정의 파형 중에서 선택할 수 있는 기능을 제공하고, 키보드 아래에 있는 볼륨 슬라이더를 사용하여 메인 gain을 제어할 수 있습니다. 이 예제는 다음의 Web API 인터페이스를 사용합니다: {{domxref("AudioContext")}}, {{domxref("OscillatorNode")}}, {{domxref("PeriodicWave")}}, 그리고 {{domxref("GainNode")}}.</p> + +<p>{{domxref("OscillatorNode")}}가 {{domxref("AudioScheduledSourceNode")}}에 기반하기 때문에, 이것은 또한 얼마간 그것에 대한 예제이기도 합니다.</p> + +<h2 id="The_video_keyboard">비디오 키보드</h2> + +<h3 id="HTML">HTML</h3> + +<p>이 가상 키보드의 디스플레이에는 세 가지 주요한 컴포넌트가 있습니다. 첫번째는 뮤지컬 키보드 그 자체입니다. 우리는 이것을 중첩된 {{HTMLElement("div")}} 요소의 쌍으로 그려 만약 모든 건반이 화면에 맞지 않으면 그것들이 줄바꿈되는 일 없이 키보드를 가로로 스크롤할 수 있게 되도록 만들 것입니다.</p> + +<h4 id="The_keyboard">키보드</h4> + +<p>첫째로, 키보드를 넣을 공간을 만듭니다. 우리는 프로그래밍적으로 키보드를 구성할 것인데, 왜냐하면 그렇게 하는 것은 우리에게 해당하는 음에 대한 적절한 데이터를 결정하면서 각각의 건반을 설정하는 유연성을 주기 때문입니다. 우리의 경우, 우리는 표로부터 각 음의 주파수를 얻지만, 이것은 또한 알고리즘적으로도 계산될 수 있습니다.</p> + +<pre class="brush: html"><div class="container"> + <div class="keyboard"></div> +</div> +</pre> + +<p><code>"container"</code>라는 이름의 {{HTMLElement("div")}}는 만약 이것이 이용 가능한 공간에 대해 너무 넓으면 가로로 스크롤될 수 있는 박스입니다. 건반들 자체는 <code>"keyboard"</code> 클래스의 블록 안으로 삽입될 것입니다.</p> + +<h4 id="The_settings_bar">설정 바</h4> + +<p>키보드 아래에, 우리는 레이어를 설정하기 위한 조종 장치를 놓을 것입니다. 우선은, 우리는 두 조종 장치를 가지고 있습니다: 하나는 메인 볼륨을 설정하기 위한 것이고 나머지 하나는 노트를 생성할 때 어떤 주기적인 파형을 사용할 지 고르기 위한 것입니다.</p> + +<h5 id="The_volume_control">볼륨 컨트롤</h5> + +<p>첫째로 우리는 필요한 대로 스타일될 수 있도록, 설정 바를 포함하는 <code><div></code>를 생성합니다. 그리고 나서 바의 좌측에 나타날 박스를 생성하고 라벨과 <code>"range"</code> 유형의 {{HTMLElement("input")}} 요소를 배치합니다. range 요소는 보통 슬라이더로 표현됩니다; 각 위치마다 0.01만큼 움직이며 0.0과 1.0 사이의 모든 값을 허용하게 설정합니다.</p> + +<pre class="brush: html"><div class="settingsBar"> + <div class="left"> + <span>Volume: </span> + <input type="range" min="0.0" max="1.0" step="0.01" + value="0.5" list="volumes" name="volume"> + <datalist id="volumes"> + <option value="0.0" label="Mute"> + <option value="1.0" label="100%"> + </datalist> + </div> +</pre> + +<p>우리는 기본값을 0.5로 명시하고, ID가 맞는 옵션 목록을 찾기 위해 {{htmlattrxref("name")}} 특성을 사용하여 range에 연결된 {{HTMLElement("datalist")}} 요소를 제공합니다; 이 경우, 데이터셋은 <code>"volume"</code>이라는 이름입니다. 이는 우리로 하여금 브라우저가 옵션적으로 어떤 방식으로 디스플레이하기를 선택할지도 모르는 특별한 문자열과 일반적인 값의 집합을 제공하게 합니다; 우리는 값 0.0 ("무음")과 1.0 ("100%")에 대해 이름을 제공합니다.</p> + +<h5 id="The_waveform_picker">파형 선택기</h5> + +<p>세팅 바의 우측에, 우리는 라벨과 이용 가능한 파형에 부합하는 옵션을 가지고 있는 <code>"waveform"</code>라는 이름의 {{HTMLElement("select")}} 요소를 배치합니다.</p> + +<pre class="brush: html"> <div class="right"> + <span>Current waveform: </span> + <select name="waveform"> + <option value="sine">Sine</option> + <option value="square" selected>Square</option> + <option value="sawtooth">Sawtooth</option> + <option value="triangle">Triangle</option> + <option value="custom">Custom</option> + </select> + </div> +</div></pre> + +<div class="hidden"> +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.container { + overflow-x: scroll; + overflow-y: hidden; + width: 660px; + height: 110px; + white-space: nowrap; + margin: 10px; +} + +.keyboard { + width: auto; + padding: 0; + margin: 0; +} + +.key { + cursor: pointer; + font: 16px "Open Sans", "Lucida Grande", "Arial", sans-serif; + border: 1px solid black; + border-radius: 5px; + width: 20px; + height: 80px; + text-align: center; + box-shadow: 2px 2px darkgray; + display: inline-block; + position: relative; + margin-right: 3px; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} + +.key div { + position: absolute; + bottom: 0; + text-align: center; + width: 100%; + pointer-events: none; +} + +.key div sub { + font-size: 10px; + pointer-events: none; +} + +.key:hover { + background-color: #eef; +} + +.key:active { + background-color: #000; + color: #fff; +} + +.octave { + display: inline-block; + padding: 0 6px 0 0; +} + +.settingsBar { + padding-top: 8px; + font: 14px "Open Sans", "Lucida Grande", "Arial", sans-serif; + position: relative; + vertical-align: middle; + width: 100%; + height: 30px; +} + +.left { + width: 50%; + position: absolute; + left: 0; + display: table-cell; + vertical-align: middle; +} + +.left span, .left input { + vertical-align: middle; +} + +.right { + width: 50%; + position: absolute; + right: 0; + display: table-cell; + vertical-align: middle; +} + +.right span { + vertical-align: middle; +} + +.right input { + vertical-align: baseline; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<p>JavaScript 코드는 몇 개의 변수를 초기화함으로써 시작합니다.</p> + +<pre class="brush: js">let audioContext = new (window.AudioContext || window.webkitAudioContext)(); +let oscList = []; +let mainGainNode = null; +</pre> + +<ol> + <li><code>audioContext</code>는 전역 {{domxref("AudioContext")}} 객체를 (또는 필요하다면 <code>webkitAudioContext</code>를) 참조하기 위해 설정되었습니다.</li> + <li><code>oscList</code>는 현재 재생되고 있는 모든 oscillator를 포함할 준비가 되기 위해 설정되었습니다. 이것은 빈 상태로 시작하는데, 왜냐하면 아직 어떤 것도 재생되고 있지 않기 때문입니다.</li> + <li><code>mainGainNode</code>은 null로 설정되었습니다; 설정 과정 중에, 이것은 재생되는 모든 oscillator가 연결되고 슬라이더를 사용해 전체 볼륨이 제어되도록 하는 {{domxref("GainNode")}}를 포함하도록 설정될 것입니다.</li> +</ol> + +<pre class="brush: js">let keyboard = document.querySelector(".keyboard"); +let wavePicker = document.querySelector("select[name='waveform']"); +let volumeControl = document.querySelector("input[name='volume']"); +</pre> + +<p>접근이 필요한 요소들에의 참조는 위와 같이 얻어집니다:</p> + +<ul> + <li><code>keyboard</code>는 건반이 배치될 컨테이너입니다.</li> + <li><code>wavePicker</code>는 음에 대해 사용할 파형을 선택하는 데 사용되는 {{HTMLElement("select")}} 요소입니다.</li> + <li><code>volumeControl</code>는 메인 오디오 볼륨을 제어하기 위해 사용되는 (<code>"range"</code> 유형의) {{HTMLElement("input")}} 요소입니다.</li> +</ul> + +<pre class="brush: js">let noteFreq = null; +let customWaveform = null; +let sineTerms = null; +let cosineTerms = null; +</pre> + +<p>마지막으로, 파형을 생성할 때 사용될 전역 변수들이 생성됩니다:</p> + +<ul> + <li><code>noteFreq</code>는 배열들의 배열입니다; 각 배열은 하나의 옥타브를 나타내는데, 그 옥타브에 있는 각 음에 대한 항목을 포함합니다. 각각에 대한 값은 음의 음색을 나타내는 헤르츠로 표현되는 주파수입니다.</li> + <li><code>customWaveform</code>는 사용자가 "Custom"을 파형 선택기에서 선택했을 때 사용할 파형을 기술하는 {{domxref("PeriodicWave")}}로 설정될 것입니다.</li> + <li><code>sineTerms</code> 와 <code>cosineTerms</code>는 파형을 생성하기 위한 데이터를 저장하기 위해 사용될 것입니다; 각각은 사용자가 "Custom"을 선택했을 때 생성되는 배열을 포함할 것입니다.</li> +</ul> + +<h3 id="Creating_the_note_table">음 테이블 생성하기</h3> + +<p><code>createNoteTable()</code> 함수는 각 옥타브를 나타내는 객체의 배열을 포함하는 <code>noteFreq</code> 배열을 만듭니다. 차례로 각 옥타브는 그 옥타브에 있는 각 음에 대한 하나의 지정된 속성을 가집니다; 그 속성의 이름은 음의 이름입니다 (예를 들자면 C-sharp는 "C#"로 표현됩니다), 그리고 값은 헤르츠로 표현되는 그 음의 주파수입니다.</p> + +<pre class="brush: js">function createNoteTable() { + let noteFreq = []; + for (let i=0; i< 9; i++) { + noteFreq[i] = []; + } + + noteFreq[0]["A"] = 27.500000000000000; + noteFreq[0]["A#"] = 29.135235094880619; + noteFreq[0]["B"] = 30.867706328507756; + + noteFreq[1]["C"] = 32.703195662574829; + noteFreq[1]["C#"] = 34.647828872109012; + noteFreq[1]["D"] = 36.708095989675945; + noteFreq[1]["D#"] = 38.890872965260113; + noteFreq[1]["E"] = 41.203444614108741; + noteFreq[1]["F"] = 43.653528929125485; + noteFreq[1]["F#"] = 46.249302838954299; + noteFreq[1]["G"] = 48.999429497718661; + noteFreq[1]["G#"] = 51.913087197493142; + noteFreq[1]["A"] = 55.000000000000000; + noteFreq[1]["A#"] = 58.270470189761239; + noteFreq[1]["B"] = 61.735412657015513; +</pre> + +<p>... 간결성을 위해 몇몇 옥타브는 생략되었습니다 ...</p> + +<div class="hidden"> +<pre class="brush: js"> noteFreq[2]["C"] = 65.406391325149658; + noteFreq[2]["C#"] = 69.295657744218024; + noteFreq[2]["D"] = 73.416191979351890; + noteFreq[2]["D#"] = 77.781745930520227; + noteFreq[2]["E"] = 82.406889228217482; + noteFreq[2]["F"] = 87.307057858250971; + noteFreq[2]["F#"] = 92.498605677908599; + noteFreq[2]["G"] = 97.998858995437323; + noteFreq[2]["G#"] = 103.826174394986284; + noteFreq[2]["A"] = 110.000000000000000; + noteFreq[2]["A#"] = 116.540940379522479; + noteFreq[2]["B"] = 123.470825314031027; + + noteFreq[3]["C"] = 130.812782650299317; + noteFreq[3]["C#"] = 138.591315488436048; + noteFreq[3]["D"] = 146.832383958703780; + noteFreq[3]["D#"] = 155.563491861040455; + noteFreq[3]["E"] = 164.813778456434964; + noteFreq[3]["F"] = 174.614115716501942; + noteFreq[3]["F#"] = 184.997211355817199; + noteFreq[3]["G"] = 195.997717990874647; + noteFreq[3]["G#"] = 207.652348789972569; + noteFreq[3]["A"] = 220.000000000000000; + noteFreq[3]["A#"] = 233.081880759044958; + noteFreq[3]["B"] = 246.941650628062055; + + noteFreq[4]["C"] = 261.625565300598634; + noteFreq[4]["C#"] = 277.182630976872096; + noteFreq[4]["D"] = 293.664767917407560; + noteFreq[4]["D#"] = 311.126983722080910; + noteFreq[4]["E"] = 329.627556912869929; + noteFreq[4]["F"] = 349.228231433003884; + noteFreq[4]["F#"] = 369.994422711634398; + noteFreq[4]["G"] = 391.995435981749294; + noteFreq[4]["G#"] = 415.304697579945138; + noteFreq[4]["A"] = 440.000000000000000; + noteFreq[4]["A#"] = 466.163761518089916; + noteFreq[4]["B"] = 493.883301256124111; + + noteFreq[5]["C"] = 523.251130601197269; + noteFreq[5]["C#"] = 554.365261953744192; + noteFreq[5]["D"] = 587.329535834815120; + noteFreq[5]["D#"] = 622.253967444161821; + noteFreq[5]["E"] = 659.255113825739859; + noteFreq[5]["F"] = 698.456462866007768; + noteFreq[5]["F#"] = 739.988845423268797; + noteFreq[5]["G"] = 783.990871963498588; + noteFreq[5]["G#"] = 830.609395159890277; + noteFreq[5]["A"] = 880.000000000000000; + noteFreq[5]["A#"] = 932.327523036179832; + noteFreq[5]["B"] = 987.766602512248223; + + noteFreq[6]["C"] = 1046.502261202394538; + noteFreq[6]["C#"] = 1108.730523907488384; + noteFreq[6]["D"] = 1174.659071669630241; + noteFreq[6]["D#"] = 1244.507934888323642; + noteFreq[6]["E"] = 1318.510227651479718; + noteFreq[6]["F"] = 1396.912925732015537; + noteFreq[6]["F#"] = 1479.977690846537595; + noteFreq[6]["G"] = 1567.981743926997176; + noteFreq[6]["G#"] = 1661.218790319780554; + noteFreq[6]["A"] = 1760.000000000000000; + noteFreq[6]["A#"] = 1864.655046072359665; + noteFreq[6]["B"] = 1975.533205024496447; +</pre> +</div> + +<pre class="brush: js"> noteFreq[7]["C"] = 2093.004522404789077; + noteFreq[7]["C#"] = 2217.461047814976769; + noteFreq[7]["D"] = 2349.318143339260482; + noteFreq[7]["D#"] = 2489.015869776647285; + noteFreq[7]["E"] = 2637.020455302959437; + noteFreq[7]["F"] = 2793.825851464031075; + noteFreq[7]["F#"] = 2959.955381693075191; + noteFreq[7]["G"] = 3135.963487853994352; + noteFreq[7]["G#"] = 3322.437580639561108; + noteFreq[7]["A"] = 3520.000000000000000; + noteFreq[7]["A#"] = 3729.310092144719331; + noteFreq[7]["B"] = 3951.066410048992894; + + noteFreq[8]["C"] = 4186.009044809578154; + return noteFreq; +} +</pre> + +<p>결과는 <code>noteFreq</code> 배열인데, 이는 각 옥타브에 대한 객체를 가지고 있습니다. 각 옥타브 객체는 속성 이름이 음의 이름이고 (예를 들자면 C-sharp는 "C#"로 표현됩니다) 속성의 값은 헤르츠로 표현되는 음의 주파수인 지정된 속성들을 가지고 있습니다. 부분적으로는, 결과 객체는 다음과 같이 보입니다:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">옥타브</th> + <td colspan="8">음</td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <th scope="row">0</th> + <td>"A" ⇒ 27.5</td> + <td>"A#" ⇒ 29.14</td> + <td>"B" ⇒ 30.87</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <th scope="row">1</th> + <td>"C" ⇒ 32.70</td> + <td>"C#" ⇒ 34.65</td> + <td>"D" ⇒ 36.71</td> + <td>"D#" ⇒ 38.89</td> + <td>"E" ⇒ 41.20</td> + <td>"F" ⇒ 43.65</td> + <td>"F#" ⇒ 46.25</td> + <td>"G" ⇒ 49</td> + <td>"G#" ⇒ 51.9</td> + <td>"A" ⇒ 55</td> + <td>"A#" ⇒ 58.27</td> + <td>"B" ⇒ 61.74</td> + </tr> + <tr> + <th scope="row">2</th> + <td colspan="12">. . .</td> + </tr> + </tbody> +</table> + +<p>준비된 이 표를 가지고, 우리는 특정한 옥타브에 있는 주어진 음에 대한 주파수를 꽤 쉽게 찾을 수 있습니다. 만약 우리가 옥타브 1의 G# 음의 주파수를 원한다면, 우리는 <code>noteFreq[1]["G#"]</code>을 사용하여 결과로 51.9의 값을 얻습니다.</p> + +<div class="note"> +<p>위의 예시 표의 값들은 소숫점 둘째 자리까지 반올림되었습니다.</p> +</div> + +<div class="hidden"> +<p>This polyfill stands in when <code>Object.entries()</code> doesn't exist.</p> + +<pre class="brush: js">if (!Object.entries) { + Object.entries = function entries(O) { + return reduce(keys(O), (e, k) => concat(e, typeof k === 'string' && isEnumerable(O, k) ? [[k, O[k]]] : []), []); + }; +} +</pre> +</div> + +<h3 id="Building_the_keyboard">키보드 만들기</h3> + +<p><code>setup()</code> 함수의 역할은 키보드를 만들고 앱이 음악을 재생하도록 준비하는 것입니다.</p> + +<pre class="brush: js">function setup() { + noteFreq = createNoteTable(); + + volumeControl.addEventListener("change", changeVolume, false); + + mainGainNode = audioContext.createGain(); + mainGainNode.connect(audioContext.destination); + mainGainNode.gain.value = volumeControl.value; + + // Create the keys; skip any that are sharp or flat; for + // our purposes we don't need them. Each octave is inserted + // into a <div> of class "octave". + + noteFreq.forEach(function(keys, idx) { + let keyList = Object.entries(keys); + let octaveElem = document.createElement("div"); + octaveElem.className = "octave"; + + keyList.forEach(function(key) { + if (key[0].length == 1) { + octaveElem.appendChild(createKey(key[0], idx, key[1])); + } + }); + + keyboard.appendChild(octaveElem); + }); + + document.querySelector("div[data-note='B'][data-octave='5']").scrollIntoView(false); + + sineTerms = new Float32Array([0, 0, 1, 0, 1]); + cosineTerms = new Float32Array(sineTerms.length); + customWaveform = audioContext.createPeriodicWave(cosineTerms, sineTerms); + + for (i=0; i<9; i++) { + oscList[i] = {}; + } +} + +setup();</pre> + +<ol> + <li>음의 이름과 옥타브를 주파수에 대응(map)시키는 표는 <code>createNoteTable()</code>를 호출함으로써 생성됩니다.</li> + <li>메인 gain 제어에서 {{event("change")}} 이벤트를 다루기 위해 {{domxref("EventTarget.addEventListener", "addEventListener()")}}를 호출함으로써 이벤트 핸들러가 생성되었습니다. 이것은 메인 gain 노드의 음량을 제어의 새 값으로 업데이트 합니다.</li> + <li>다음으로, 음 주파수 표에 있는 각 옥타브에 대해 순회합니다. 각 옥타브에 대해, 우리는 그 옥타브에 있는 음들의 목록을 얻기 위해 {{jsxref("Object.entries()")}}를 사용합니다.</li> + <li>그 옥타브의 음들을 포함하는 {{HTMLElement("div")}}를 생성하고 (이렇게 함으로써 우리는 옥타브들 사이에 약간의 공간을 가질 수 있습니다), 이것의 클래스명을 "octave"로 설정합니다.</li> + <li>옥타브에 있는 각 건반에 대해, 우리는 음의 이름이 한 문자보다 많은지 검사합니다. 우리는 이것을 생략하는데, 왜냐하면 우리는 이 예제에서 샤프(#) 음들을 무시하기 때문입니다. 만약 음의 이름이 단지 한 문자라면, 우리는 <code>createKey()</code>를 호출하는데, 이는 음의 문자열, 옥타브, 그리고 주파수를 명시합니다. 이 반환된 요소는 단계 4에서 생성된 옥타브 요소에 추가됩니다.</li> + <li>각 옥타브 요소가 생성되었을 때, 키보드에 추가됩니다.</li> + <li>키보드가 생성되고 나면, 옥타브 5의 "B" 음이 보이도록 스크롤합니다; 이것은 주변 건반들을 따라 중앙 '다' 음이 보이도록 하는 효과를 가지고 있습니다.</li> + <li>그리고 나서 새로운 사용자 정의 파형이 {{domxref("AudioContext.createPeriodicWave()")}}를 사용하여 생성됩니다. 이 파형은 언제든지 사용자가 파형 선택기에서 "Custom"을 선택했을 때 사용될 것입니다.</li> + <li>마지막으로, oscillator 목록이 어떤 oscillator가 어떤 건반과 연관되어 있는지를 식별하는 정보를 받기 위한 준비가 되었다는 것을 보장하도록 초기화됩니다.</li> +</ol> + +<h4 id="Creating_a_key">건반 생성하기</h4> + +<p><code>createKey()</code> 함수는 가상 키보드에 표시하기를 원하는 각각의 건반에 대해 한 번 호출됩니다. 이것은 건반과 건반의 라벨으로 구성되는 요소를 생성하고, 추후의 사용을 위해 그 요소에 데이터 특성을 추가하고, 그리고 우리가 관심을 가지고 있는 이벤트에 대한 이벤트 핸들러를 부여합니다.</p> + +<pre class="brush: js">function createKey(note, octave, freq) { + let keyElement = document.createElement("div"); + let labelElement = document.createElement("div"); + + keyElement.className = "key"; + keyElement.dataset["octave"] = octave; + keyElement.dataset["note"] = note; + keyElement.dataset["frequency"] = freq; + + labelElement.innerHTML = note + "<sub>" + octave + "</sub>"; + keyElement.appendChild(labelElement); + + keyElement.addEventListener("mousedown", notePressed, false); + keyElement.addEventListener("mouseup", noteReleased, false); + keyElement.addEventListener("mouseover", notePressed, false); + keyElement.addEventListener("mouseleave", noteReleased, false); + + return keyElement; +} +</pre> + +<p>건반과 건반의 라벨을 표현할 요소를 생성한 이후, 건반의 클래스를 (외양을 설정하는) "key"로 설정함으로써 건반의 요소를 설정합니다. 그리고 나서 건반의 옥타브(<code>data-octave</code> 특성), 재생할 음을 표현하는 문자열(<code>data-note</code> 특성), 헤르츠로 표현되는 주파수(<code>data-frequency</code> 특성)를 포함하는 {{htmlattrxref("data-*")}} 특성을 추가합니다. 이것은 우리로 하여금 이벤트를 다룰 때 필요한 경우 쉽게 이 정보를 가져올 수 있도록 할 것입니다.</p> + +<h3 id="Making_music">음악 만들기</h3> + +<h4 id="Playing_a_tone">음 재생하기</h4> + +<p><code>playTone()</code> 함수의 역할은 주어진 주파수의 음을 재생하는 것입니다. 이것은 적절한 음을 재생하는 키보드 건반의 이벤트 핸들러에 의해 사용될 것입니다.</p> + +<pre class="brush: js">function playTone(freq) { + let osc = audioContext.createOscillator(); + osc.connect(mainGainNode); + + let type = wavePicker.options[wavePicker.selectedIndex].value; + + if (type == "custom") { + osc.setPeriodicWave(customWaveform); + } else { + osc.type = type; + } + + osc.frequency.value = freq; + osc.start(); + + return osc; +} +</pre> + +<p><code>playTone()</code>은 {{domxref("AudioContext.createOscillator()")}} 메서드를 호출하여 새로운 {{domxref("OscillatorNode")}}를 생성함으로써 시작합니다. 그리고 나서 우리는 이것을 메인 gain 노드에 새로운 oscillator의 {{domxref("OscillatorNode.connect()")}} 메서드를 호출함으로써 연결하는데, 이는 oscillator에게 이것의 결과를 어디로 보낼지 알려줍니다. 이렇게 함으로써, 메인 gain 노드의 gain을 변경하는 것은 생성되는 모든 음의 볼륨에 영향을 미칠 것입니다.</p> + +<p>그리고 나서 우리는 사용할 파형의 유형을 세팅 바의 파형 선택기의 값을 검사함으로써 얻습니다. 만약 사용자가 이것을 <code>"custom"</code>으로 설정했다면, 우리는 사용자 정의 파형을 사용할 oscillator를 설정하기 위하여 {{domxref("OscillatorNode.setPeriodicWave()")}}를 호출합니다. 이를 하는 것은 자동적으로 oscillator의 {{domxref("OscillatorNode.type", "type")}}을 <code>custom</code>으로 설정합니다. 만약 파형 선택기에서 다른 파형이 선택되었다면, 우리는 oscillator의 유형을 선택기의 값으로 설정합니다; 그 값은 <code>sine</code>, <code>square</code>, <code>triangle</code>, 그리고 <code>sawtooth</code> 중 하나일 것입니다.</p> + +<p>oscillator의 주파수는 {{domxref("Oscillator.frequency")}} {{domxref("AudioParam")}} 객체의 값을 설정함으로써 <code>freq</code> 파라미터에 명시된 값으로 설정됩니다. 그리고서, 마침내, oscillator는 상속된 {{domxref("AudioScheduledSourceNode.start()")}} 메서드를 호출하여 소리를 생성하도록 시작됩니다.</p> + +<h4 id="Playing_a_tone_2">음 재생하기</h4> + +<p>{{event("mousedown")}} 이나 {{domxref("mouseover")}} 이벤트가 건반에서 발생했을 때, 우리는 대응하는 음을 재생하기를 원합니다. <code>notePressed()</code> 함수는 이 이벤트들에 대한 이벤트 핸들러로 사용됩니다.</p> + +<pre class="brush: js">function notePressed(event) { + if (event.buttons & 1) { + let dataset = event.target.dataset; + + if (!dataset["pressed"]) { + let octave = +dataset["octave"]; + oscList[octave][dataset["note"]] = playTone(dataset["frequency"]); + dataset["pressed"] = "yes"; + } + } +} +</pre> + +<p>두 가지 이유로, 우리는 주요 마우스 버튼이 눌러졌는지를 확인함으로써 시작합니다. 첫째로, 우리는 오직 주요 마우스 버튼이 노트 재생을 할 수 있게 허용하기를 원합니다. 둘째로, 그리고 더욱 중요하게, 우리는 유저가 음에서 음으로 드래그하는 경우에 대해 {{event("mouseover")}}를 다루기 위해 이것을 사용하고, 우리는 오직 마우스가 요소에 들어왔을 때 눌러졌다면 노트를 재생하기를 원합니다.</p> + +<p>만약 마우스 버튼이 실제로 눌러졌다면, 우리는 눌러진 건반의 {{htmlattrxref("dataset")}} 특성을 얻습니다; 이는 요소의 사용자 정의 데이터 특성에 접근하는 것을 쉽게 해 줍니다. 우리는 <code>data-pressed</code> 특성을 찾습니다; 만약 (음이 이미 재생되고 있지 않다는 것을 나타내는) 그것이 없다면, 요소의 <code>data-frequency</code> 특성 값을 전달하며, 우리는 음을 재생하기 위해 <code>playTone()</code>을 호출합니다. 반환된 oscillator는 <code>oscList</code>에 미래의 참조를 위해 저장되고, <code>data-pressed</code>는 음이 재생되고 있다는 것을 나타내기 위해 <code>yes</code>로 설정되어 다음 번에 이것이 호출되었을 때 이것을 다시 시작하지 않습니다.</p> + +<h4 id="Stopping_a_tone">음 멈추기</h4> + +<p><code>noteReleased()</code> 함수는 사용자가 마우스 버튼을 떼거나 마우스를 현재 재생되고 있는 건반 밖으로 이동시켰을 때 호출되는 이벤트 핸들러입니다.</p> + +<pre class="brush: js">function noteReleased(event) { + let dataset = event.target.dataset; + + if (dataset && dataset["pressed"]) { + let octave = +dataset["octave"]; + oscList[octave][dataset["note"]].stop(); + delete oscList[octave][dataset["note"]]; + delete dataset["pressed"]; + } +} +</pre> + +<p><code>noteReleased()</code>는 사용자 정의 <code>data-octave</code>와 <code>data-note</code> 특성을 건반의 oscillator를 찾아보기 위해 사용하고, 그리고 나서 음 재생을 멈추기 위해 oscillator의 상속된 {{domxref("AudioScheduledSourceNode.stop", "stop()")}} 메서드를 호출합니다. 마지막으로, 음이 현재 재생되고 있지 않다는 것을 나타내기 위해, 음에 대한 <code>oscList</code> 항목은 지워지고 <code>data-pressed</code> 특성은 ({{domxref("event.target")}}에 의해 식별된) 건반 요소로부터 제거됩니다.</p> + +<h4 id="main">메인 볼륨 변경하기</h4> + +<p>세팅 바의 볼륨 슬라이더는 메인 gain 노드의 gain 값을 변경하기 위한 간단한 인터페이스를 제공하는데, 이로써 재생되는 모든 음의 세기를 변경합니다. <code>changeVolume()</code> 메서드는 슬라이더의 {{event("change")}} 이벤트에 대한 핸들러입니다.</p> + +<pre class="brush: js">function changeVolume(event) { + mainGainNode.gain.value = volumeControl.value +} +</pre> + +<p>이것은 메인 gain 노드의 <code>gain</code> {{domxref("AudioParam")}}의 값을 슬라이더의 새로운 값으로 설정합니다.</p> + +<h3 id="Result">결과</h3> + +<p>이를 모두 합하면, 결과는 간단하지만 작동하는 마우스로 이용 가능한 뮤지컬 키보드입니다.</p> + +<p>{{ EmbedLiveSample('The_video_keyboard', 680, 200) }}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li>{{domxref("OscillatorNode")}}</li> + <li>{{domxref("GainNode")}}</li> + <li>{{domxref("AudioContext")}}</li> +</ul> diff --git a/files/ko/web/api/web_audio_api/tools/index.html b/files/ko/web/api/web_audio_api/tools/index.html new file mode 100644 index 0000000000..beee9d6fb4 --- /dev/null +++ b/files/ko/web/api/web_audio_api/tools/index.html @@ -0,0 +1,41 @@ +--- +title: Tools for analyzing Web Audio usage +slug: Web/API/Web_Audio_API/Tools +tags: + - API + - Audio + - Debugging + - Media + - Tools + - Web + - Web Audio + - Web Audio API + - sound +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p>While working on your Web Audio API code, you may find that you need tools to analyze the graph of nodes you create or to otherwise debug your work. This article discusses tools available to help you do that.</p> + +<h2 id="Chrome">Chrome</h2> + +<p>A handy web audio inspector can be found in the <a href="https://chrome.google.com/webstore/detail/web-audio-inspector/cmhomipkklckpomafalojobppmmidlgl">Chrome Web Store</a>.</p> + +<h2 id="Edge">Edge</h2> + +<p><em>Add information for developers using Microsoft Edge.</em></p> + +<h2 id="Firefox">Firefox</h2> + +<p>Firefox offers a native <a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a>.</p> + +<h2 id="Safari">Safari</h2> + +<p><em>Add information for developers working in Safari.</em></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Web_Audio_API_cross_browser">Writing Web Audio API code that works in every browser</a></li> +</ul> diff --git a/files/ko/web/api/web_audio_api/using_audioworklet/index.html b/files/ko/web/api/web_audio_api/using_audioworklet/index.html new file mode 100644 index 0000000000..b103225f09 --- /dev/null +++ b/files/ko/web/api/web_audio_api/using_audioworklet/index.html @@ -0,0 +1,325 @@ +--- +title: Background audio processing using AudioWorklet +slug: Web/API/Web_Audio_API/Using_AudioWorklet +tags: + - API + - Audio + - AudioWorklet + - Background + - Examples + - Guide + - Processing + - Web Audio + - Web Audio API + - WebAudio API + - sound +--- +<p>{{APIRef("Web Audio API")}}</p> + +<p>When the Web Audio API was first introduced to browsers, it included the ability to use JavaScript code to create custom audio processors that would be invoked to perform real-time audio manipulations. The drawback to <code>ScriptProcessorNode</code> was simple: it ran on the main thread, thus blocking everything else going on until it completed execution. This was far less than ideal, especially for something that can be as computationally expensive as audio processing.</p> + +<p>Enter {{domxref("AudioWorklet")}}. An audio context's audio worklet is a {{domxref("Worklet")}} which runs off the main thread, executing audio processing code added to it by calling the context's {{domxref("Worklet.addModule", "audioWorklet.addModule()")}} method. Calling <code>addModule()</code> loads the specified JavaScript file, which should contain the implementation of the audio processor. With the processor registered, you can create a new {{domxref("AudioWorkletNode")}} which passes the audio through the processor's code when the node is linked into the chain of audio nodes along with any other audio nodes.</p> + +<p><span class="seoSummary">The process of creating an audio processor using JavaScript, establishing it as an audio worklet processor, and then using that processor within a Web Audio application is the topic of this article.</span></p> + +<p>It's worth noting that because audio processing can often involve substantial computation, your processor may benefit greatly from being built using <a href="/en-US/docs/WebAssembly">WebAssembly</a>, which brings near-native or fully native performance to web apps. Implementing your audio processing algorithm using WebAssembly can make it perform markedly better.</p> + +<h2 id="High_level_overview">High level overview</h2> + +<p>Before we start looking at the use of AudioWorklet on a step-by-step basis, let's start with a brief high-level overview of what's involved.</p> + +<ol> + <li>Create module that defines a audio worklet processor class, based on {{domxref("AudioWorkletProcessor")}} which takes audio from one or more incoming sources, performs its operation on the data, and outputs the resulting audio data.</li> + <li>Access the audio context's {{domxref("AudioWorklet")}} through its {{domxref("BaseAudioContext.audioWorklet", "audioWorklet")}} property, and call the audio worklet's {{domxref("Worklet.addModule", "addModule()")}} method to install the audio worklet processor module.</li> + <li>As needed, create audio processing nodes by passing the processor's name (which is defined by the module) to the {{domxref("AudioWorkletNode.AudioWorkletNode", "AudioWorkletNode()")}} constructor.</li> + <li>Set up any audio parameters the {{domxref("AudioWorkletNode")}} needs, or that you wish to configure. These are defined in the audio worklet processor module.</li> + <li>Connect the created <code>AudioWorkletNode</code>s into your audio processing pipeline as you would any other node, then use your audio pipeline as usual.</li> +</ol> + +<p>Throughout the remainder of this article, we'll look at these steps in more detail, with examples (including working examples you can try out on your own).</p> + +<p>The example code found on this page is derived from <a href="https://mdn.github.io/webaudio-examples/audioworklet/">this working example</a> which is part of MDN's <a href="https://github.com/mdn/webaudio-examples/">GitHub repository of Web Audio examples</a>. The example creates an oscillator node and adds white noise to it using an {{domxref("AudioWorkletNode")}} before playing the resulting sound out. Slider controls are available to allow controlling the gain of both the oscillator and the audio worklet's output.</p> + +<p><a href="https://github.com/mdn/webaudio-examples/tree/master/audioworklet"><strong>See the code</strong></a></p> + +<p><a href="https://mdn.github.io/webaudio-examples/audioworklet/"><strong>Try it live</strong></a></p> + +<h2 id="Creating_an_audio_worklet_processor">Creating an audio worklet processor</h2> + +<p>Fundamentally, an audio worklet processor (which we'll refer to usually as either an "audio processor" or as a "processor" because otherwise this article will be about twice as long) is implemented using a JavaScript module that defines and installs the custom audio processor class.</p> + +<h3 id="Structure_of_an_audio_worklet_processor">Structure of an audio worklet processor</h3> + +<p>An audio worklet processor is a JavaScript module which consists of the following:</p> + +<ul> + <li>A JavaScript class which defines the audio processor. This class extends the {{domxref("AudioWorkletProcessor")}} class.</li> + <li>The audio processor class must implement a {{domxref("AudioWorkletProcessor.process", "process()")}} method, which receives incoming audio data and writes back out the data as manipulated by the processor.</li> + <li>The module installs the new audio worklet processor class by calling {{domxref("AudioWorkletGlobalScope.registerProcessor", "registerProcessor()")}}, specifying a name for the audio processor and the class that defines the processor.</li> +</ul> + +<p>A single audio worklet processor module may define multiple processor classes, registering each of them with individual calls to <code>registerProcessor()</code>. As long as each has its own unique name, this will work just fine. It's also more efficient than loading multiple modules from over the network or even the user's local disk.</p> + +<h3 id="Basic_code_framework">Basic code framework</h3> + +<p>The barest framework of an audio processor class looks like this:</p> + +<pre class="brush: js">class MyAudioProcessor extends AudioWorkletProcessor { + constructor() { + super(); + } + + process(inputList, outputList, parameters) { + /* using the inputs (or not, as needed), write the output + into each of the outputs */ + + return true; + } +}; + +registerProcessor("my-audio-processor", MyAudioProcessor); +</pre> + +<p>After the implementation of the processor comes a call to the global function {{domxref("AudioWorkletGlobalScope.registerProcessor", "registerProcessor()")}}, which is only available within the scope of the audio context's {{domxref("AudioWorklet")}}, which is the invoker of the processor script as a result of your call to {{domxref("Worklet.addModule", "audioWorklet.addModule()")}}. This call to <code>registerProcessor()</code> registers your class as the basis for any {{domxref("AudioWorkletProcessor")}}s created when {{domxref("AudioWorkletNode")}}s are set up.</p> + +<p>This is the barest framework and actually has no effect until code is added into <code>process()</code> to do something with those inputs and outputs. Which brings us to talking about those inputs and outputs.</p> + +<h3 id="The_input_and_output_lists">The input and output lists</h3> + +<p>The lists of inputs and outputs can be a little confusing at first, even though they're actually very simple once you realize what's going on.</p> + +<p>Let's start at the inside and work our way out. Fundamentally, the audio for a single audio channel (such as the left speaker or the subwoofer, for example) is represented as a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array">Float32Array</a></code> whose values are the individual audio samples. By specification, each block of audio your <code>process()</code> function receives contains 128 frames (that is, 128 samples for each channel), but it is planned that <em>this value will change in the future</em>, and may in fact vary depending on circumstances, so you should <em>always</em> check the array's <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/length">length</a></code> rather than assuming a particular size. It is, however, guaranteed that the inputs and outputs will have the same block length.</p> + +<p>Each input can have a number of channels. A mono input has a single channel; stereo input has two channels. Surround sound might have six or more channels. So each input is, in turn, an array of channels. That is, an array of <code>Float32Array</code> objects.</p> + +<p>Then, there can be multiple inputs, so the <code>inputList</code> is an array of arrays of <code>Float32Array</code> objects. Each input may have a different number of channels, and each channel has its own array of samples.</p> + +<p>Thus, given the input list <code>inputList</code>:</p> + +<pre class="brush: js">const numberOfInputs = inputList.length; +const firstInput = inputList[0]; + +const firstInputChannelCount = firstInput.length; +const firstInputFirstChannel = firstInput[0]; // (or inputList[0][0]) + +const firstChannelByteCount = firstInputFirstChannel.length; +const firstByteOfFirstChannel = firstInputFirstChannel[0]; // (or inputList[0][0][0]) +</pre> + +<p>The output list is structured in exactly the same way; it's an array of outputs, each of which is an array of channels, each of which is an array of <code>Float32Array</code> objects, which contain the samples for that channel.</p> + +<p>How you use the inputs and how you generate the outputs depends very much on your processor. If your processor is just a generator, it can ignore the inputs and just replace the contents of the outputs with the generated data. Or you can process each input independently, applying an algorithm to the incoming data on each channel of each input and writing the results into the corresponding outputs' channels (keeping in mind that the number of inputs and outputs may differ, and the channel counts on those inputs and outputs may also differ). Or you can take all the inputs and perform mixing or other computations that result in a single output being filled with data (or all the outputs being filled with the same data).</p> + +<p>It's entirely up to you. This is a very powerful tool in your audio programming toolkit.</p> + +<h3 id="Processing_multiple_inputs">Processing multiple inputs</h3> + +<p>Let's take a look at an implementation of <code>process()</code> that can process multiple inputs, with each input being used to generate the corresponding output. Any excess inputs are ignored.</p> + +<pre class="brush: js">process(inputList, outputList, parameters) { + const sourceLimit = Math.min(inputList.length, outputList.length); + + for (let inputNum = 0; inputNum < sourceLimit; inputNum++) { + let input = inputList[inputNum]; + let output = outputList[inputNum]; + let channelCount = Math.min(input.length, output.length); + + for (let channelNum = 0; channelNum < channelCount; channelNum++) { + let sampleCount = input[channelNum].length; + + for (let i = 0; i < sampleCount; i++) { + let sample = input[channelNum][i]; + + /* Manipulate the sample */ + + output[channelNum][i] = sample; + } + } + }; + + return true; +} +</pre> + +<p>Note that when determining the number of sources to process and send through to the corresponding outputs, we use <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min">Math.min()</a></code> to ensure that we only process as many channels as we have room for in the output list. The same check is performed when determining how many channels to process in the current input; we only process as many as there are room for in the destination output. This avoids errors due to overrunning these arrays.</p> + +<h3 id="Mixing_inputs">Mixing inputs</h3> + +<p>Many nodes perform <strong>mixing</strong> operations, where the inputs are combined in some way into a single output. This is demonstrated in the following example.</p> + +<pre class="brush: js">process(inputList, outputList, parameters) { + const sourceLimit = Math.min(inputList.length, outputList.length); + for (let inputNum = 0; inputNum < sourceLimit; inputNum++) { + let input = inputList[inputNum]; + let output = outputList[0]; + let channelCount = Math.min(input.length, output.length); + + for (let channelNum = 0; channelNum < channelCount; channelNum++) { + let sampleCount = input[channelNum].length; + + for (let i = 0; i < sampleCount; i++) { + let sample = output[channelNum][i] + input[channelNum][i]; + + if (sample > 1.0) { + sample = 1.0; + } else if (sample < -1.0) { + sample = -1.0; + } + + output[channelNum][i] = sample; + } + } + }; + + return true; +} +</pre> + +<p>This is similar code to the previous sample in many ways, but only the first output—<code>outputList[0]</code>—is altered. Each sample is added to the corresponding sample in the output buffer, with a simple code fragment in place to prevent the samples from exceeding the legal range of -1.0 to 1.0 by capping the values; there are other ways to avoid clipping that are perhaps less prone to distortion, but this is a simple example that's better than nothing.</p> + +<h2 id="Lifetime_of_an_audio_worklet_processor">Lifetime of an audio worklet processor</h2> + +<p>The only means by which you can influence the lifespan of your audio worklet processor is through the value returned by <code>process()</code>, which should be a Boolean value indicating whether or not to override the {{Glossary("user agent")}}'s decision-making as to whether or not your node is still in use.</p> + +<p>In general, the lifetime policy of any audio node is simple: if the node is still considered to be actively processing audio, it will continue to be used. In the case of an {{domxref("AudioWorkletNode")}}, the node is considered to be active if its <code>process()</code> function returns <code>true</code> <em>and</em> the node is either generating content as a source for audio data, or is receiving data from one or more inputs.</p> + +<p>Specifying a value of <code>true</code> as the result from your <code>process()</code> function in essence tells the Web Audio API that your processor needs to keep being called even if the API doesn't think there's anything left for you to do. In other words, <code>true</code> overrides the API's logic and gives you control over your processor's lifetime policy, keeping the processor's owning {{domxref("AudioWorkletNode")}} running even when it would otherwise decide to shut down the node.</p> + +<p>Returning <code>false</code> from the <code>process()</code> method tells the API that it should follow its normal logic and shut down your processor node if it deems it appropriate to do so. If the API determines that your node is no longer needed, <code>process()</code> will not be called again.</p> + +<div class="notecard note"> +<p><strong>Note:</strong> At this time, unfortunately, Chrome does not implement this algorithm in a manner that matches the current standard. Instead, it keeps the node alive if you return <code>true</code> and shuts it down if you return <code>false</code>. Thus for compatibility reasons you must always return <code>true</code> from <code>process()</code>, at least on Chrome. However, once <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=921354">this Chrome issue</a> is fixed, you will want to change this behavior if possible as it may have a slight negative impact on performance.</p> +</div> + +<h2 id="Creating_an_audio_processor_worklet_node">Creating an audio processor worklet node</h2> + +<p>To create an audio node that pumps blocks of audio data through an {{domxref("AudioWorkletProcessor")}}, you need to follow these simple steps:</p> + +<ol> + <li>Load and install the audio processor module</li> + <li>Create an {{domxref("AudioWorkletNode")}}, specifying the audio processor module to use by its name</li> + <li>Connect inputs to the <code>AudioWorkletNode</code> and its outputs to appropriate destinations (either other nodes or to the {{domxref("AudioContext")}} object's {{domxref("AudioContext.destination", "destination")}} property.</li> +</ol> + +<p>To use an audio worklet processor, you can use code similar to the following:</p> + +<pre class="brush: js">let audioContext = null; + +async function createMyAudioProcessor() { + if (!audioContext) { + try { + audioContext = new AudioContext(); + await audioContext.resume(); + await audioContext.audioWorklet.addModule("module-url/module.js"); + } catch(e) { + return null; + } + } + + return new AudioWorkletNode(audioContext, "processor-name"); +} +</pre> + +<p>This <code>createMyAudioProcessor()</code> function creates and returns a new instance of {{domxref("AudioWorkletNode")}} configured to use your audio processor. It also handles creating the audio context if it hasn't already been done.</p> + +<p>In order to ensure the context is usable, this starts by creating the context if it's not already available, then adds the module containing the processor to the worklet. Once that's done, it instantiates and returns a new <code>AudioWorkletNode</code>. Once you have that in hand, you connect it to other nodes and otherwise use it just like any other node.</p> + +<p>You can then create a new audio processor node by doing this:</p> + +<pre class="brush: js">let newProcessorNode = createMyAudioProcessor();</pre> + +<p>If the returned value, <code>newProcessorNode</code>, is non-<code>null</code>, we have a valid audio context with its hiss processor node in place and ready to use.</p> + +<h2 id="Supporting_audio_parameters">Supporting audio parameters</h2> + +<p>Just like any other Web Audio node, {{domxref("AudioWorkletNode")}} supports parameters, which are shared with the {{domxref("AudioWorkletProcessor")}} that does the actual work.</p> + +<h3 id="Adding_parameter_support_to_the_processor">Adding parameter support to the processor</h3> + +<p>To add parameters to an {{domxref("AudioWorkletNode")}}, you need to define them within your {{domxref("AudioWorkletProcessor")}}-based processor class in your module. This is done by adding the static getter {{domxref("AudioWorkletProcessor.parameterDescriptors", "parameterDescriptors")}} to your class. This function should return an array of {{domxref("AudioParam")}} objects, one for each parameter supported by the processor.</p> + +<p>In the following implementation of <code>parameterDescriptors()</code>, the returned array has two <code>AudioParam</code> objects. The first defines <code>gain</code> as a value between 0 and 1, with a default value of 0.5. The second parameter is named <code>frequency</code> and defaults to 440.0, with a range from 27.5 to 4186.009, inclusively.</p> + +<pre class="brush: js">static get parameterDescriptors() { + return [ + { + name: "gain", + defaultValue: 0.5, + minValue: 0, + maxValue: 1 + }, + { + name: "frequency", + defaultValue: 440.0; + minValue: 27.5, + maxValue: 4186.009 + } + ]; +}</pre> + +<p>Accessing your processor node's parameters is as simple as looking them up in the <code>parameters</code> object passed into your implementation of {{domxref("AudioWorkletProcessor.process", "process()")}}. Within the <code>parameters</code> object are arrays, one for each of your parameters, and sharing the same names as your parameters.</p> + +<dl> + <dt>A-rate parameters</dt> + <dd>For a-rate parameters—parameters whose values automatically change over time—the parameter's entry in the <code>parameters</code> object is an array of {{domxref("AudioParam")}} objects, one for each frame in the block being processed. These values are to be applied to the corresponding frames.</dd> + <dt>K-rate parameters</dt> + <dd>K-rate parameters, on the other hand, can only change once per block, so the parameter's array has only a single entry. Use that value for every frame in the block.</dd> +</dl> + +<p>In the code below, we see a <code>process()</code> function that handles a <code>gain</code> parameter which can be used as either an a-rate or k-rate parameter. Our node only supports one input, so it just takes the first input in the list, applies the gain to it, and writes the resulting data to the first output's buffer.</p> + +<pre class="brush: js">process(inputList, outputList, parameters) { + const input = inputList[0]; + const output = outputList[0]; + const gain = parameters.gain; + + for (let channelNum = 0; channelNum < input.length; channel++) { + const inputChannel = input[channel]; + const outputChannel = output[channel]; + + // If gain.length is 1, it's a k-rate parameter, so apply + // the first entry to every frame. Otherwise, apply each + // entry to the corresponding frame. + + if (gain.length === 1) { + for (let i = 0; i < inputChannel.length; i++) { + outputChannel[i] = inputChannel[i] * gain[0]; + } + } else { + for (let i = 0; i < inputChannel.length; i++) { + outputChannel[i] = inputChannel[i] * gain[i]; + } + } + } + + return true; +} +</pre> + +<p>Here, if <code>gain.length</code> indicates that there's only a single value in the <code>gain</code> parameter's array of values, the first entry in the array is applied to every frame in the block. Otherwise, for each frame in the block, the corresponding entry in <code>gain[]</code> is applied.</p> + +<h3 id="Accessing_parameters_from_the_main_thread_script">Accessing parameters from the main thread script</h3> + +<p>Your main thread script can access the parameters just like it can any other node. To do so, first you need to get a reference to the parameter by calling the {{domxref("AudioWorkletNode")}}'s {{domxref("AudioWorkletNode.parameters", "parameters")}} property's {{domxref("AudioParamMap.get", "get()")}} method:</p> + +<pre class="brush: js">let gainParam = myAudioWorkletNode.parameters.get("gain"); +</pre> + +<p>The value returned and stored in <code>gainParam</code> is the {{domxref("AudioParam")}} used to store the <code>gain</code> parameter. You can then change its value effective at a given time using the {{domxref("AudioParam")}} method {{domxref("AudioParam.setValueAtTime", "setValueAtTime()")}}.</p> + +<p>Here, for example, we set the value to <code>newValue</code>, effective immediately.</p> + +<pre class="brush: js">gainParam.setValueAtTime(newValue, audioContext.currentTime);</pre> + +<p>You can similarly use any of the other methods in the {{domxref("AudioParam")}} interface to apply changes over time, to cancel scheduled changes, and so forth.</p> + +<p>Reading the value of a parameter is as simple as looking at its {{domxref("AudioParam.value", "value")}} property:</p> + +<pre class="brush: js">let currentGain = gainParam.value;</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li><a href="https://developers.google.com/web/updates/2017/12/audio-worklet">Enter Audio Worklet</a> (Google Developers blog)</li> +</ul> diff --git a/files/ko/web/api/web_audio_api/using_iir_filters/iir-filter-demo.png b/files/ko/web/api/web_audio_api/using_iir_filters/iir-filter-demo.png Binary files differnew file mode 100644 index 0000000000..0e701a2b6a --- /dev/null +++ b/files/ko/web/api/web_audio_api/using_iir_filters/iir-filter-demo.png diff --git a/files/ko/web/api/web_audio_api/using_iir_filters/index.html b/files/ko/web/api/web_audio_api/using_iir_filters/index.html new file mode 100644 index 0000000000..0c48b1096c --- /dev/null +++ b/files/ko/web/api/web_audio_api/using_iir_filters/index.html @@ -0,0 +1,198 @@ +--- +title: Using IIR filters +slug: Web/API/Web_Audio_API/Using_IIR_filters +tags: + - API + - Audio + - Guide + - IIRFilter + - Using + - Web Audio API +--- +<div>{{DefaultAPISidebar("Web Audio API")}}</div> + +<p class="summary">The <strong><code>IIRFilterNode</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> is an {{domxref("AudioNode")}} processor that implements a general <a href="https://en.wikipedia.org/wiki/infinite%20impulse%20response">infinite impulse response</a> (IIR) filter; this type of filter can be used to implement tone control devices and graphic equalizers, and the filter response parameters can be specified, so that it can be tuned as needed. This article looks at how to implement one, and use it in a simple example.</p> + +<h2 id="Demo">Demo</h2> + +<p>Our simple example for this guide provides a play/pause button that starts and pauses audio play, and a toggle that turns an IIR filter on and off, altering the tone of the sound. It also provides a canvas on which is drawn the frequency response of the audio, so you can see what effect the IIR filter has.</p> + +<p><img alt="A demo featuring a play button, and toggle to turn a filter on and off, and a line graph showing the filter frequencies returned after the filter has been applied." src="iir-filter-demo.png"></p> + +<p>You can check out the <a href="https://codepen.io/Rumyra/pen/oPxvYB/">full demo here on Codepen</a>. Also see the <a href="https://github.com/mdn/webaudio-examples/tree/master/iirfilter-node">source code on GitHub</a>. It includes some different coefficient values for different lowpass frequencies — you can change the value of the <code>filterNumber</code> constant to a value between 0 and 3 to check out the different available effects.</p> + +<h2 id="Browser_support">Browser support</h2> + +<p><a href="/en-US/docs/Web/API/IIRFilterNode">IIR filters</a> are supported well across modern browsers, although they have been implemented more recently than some of the more longstanding Web Audio API features, like <a href="/en-US/docs/Web/API/BiquadFilterNode">Biquad filters</a>.</p> + +<h2 id="The_IIRFilterNode">The IIRFilterNode</h2> + +<p>The Web Audio API now comes with an {{domxref("IIRFilterNode")}} interface. But what is this and how does it differ from the {{domxref("BiquadFilterNode")}} we have already?</p> + +<p>An IIR filter is a <strong>infinite impulse response filter</strong>. It's one of two primary types of filters used in audio and digital signal processing. The other type is FIR — <strong>finite impulse response filter</strong>. There's a really good overview to <a href="https://dspguru.com/dsp/faqs/iir/basics/">IIF filters and FIR filters here</a>.</p> + +<p>A biquad filter is actually a <em>specific type</em> of infinite impulse response filter. It's a commonly-used type and we already have it as a node in the Web Audio API. If you choose this node the hard work is done for you. For instance, if you want to filter lower frequencies from your sound, you can set the <a href="/en-US/docs/Web/API/BiquadFilterNode/type">type</a> to <code>highpass</code> and then set which frequency to filter from (or cut off). <a href="http://www.earlevel.com/main/2003/02/28/biquads/">There's more information on how biquad filters work here</a>.</p> + +<p>When you are using an {{domxref("IIRFilterNode")}} instead of a {{domxref("BiquadFilterNode")}} you are creating the filter yourself, rather than just choosing a pre-programmed type. So you can create a highpass filter, or a lowpass filter, or a more bespoke one. And this is where the IIR filter node is useful — you can create your own if none of the alaready available settings is right for what you want. As well as this, if your audio graph needed a highpass and a bandpass filter within it, you could just use one IIR filter node in place of the two biquad filter nodes you would otherwise need for this.</p> + +<p>With the IIRFIlter node it's up to you to set what <code>feedforward</code> and <code>feedback</code> values the filter needs — this determines the characteristics of the filter. The downside is that this involves some complex maths.</p> + +<p>If you are looking to learn more there's some <a href="http://ece.uccs.edu/~mwickert/ece2610/lecture_notes/ece2610_chap8.pdf">information about the maths behind IIR filters here</a>. This enters the realms of signal processing theory — don't worry if you look at it and feel like it's not for you.</p> + +<p>If you want to play with the IIR filter node and need some values to help along the way, there's <a href="http://www.dspguide.com/CH20.PDF">a table of already calculated values here</a>; on pages 4 & 5 of the linked PDF the a<em>n</em> values refer to the <code>feedForward</code> values and the b<em>n</em> values refer to the <code>feedback</code>. <a href="http://musicdsp.org/">musicdsp.org</a> is also a great resource if you want to read more about different filters and how they are implemented digitally.</p> + +<p>With that all in mind, let's take a look at the code to create an IIR filter with the Web Audio API.</p> + +<h2 id="Setting_our_IIRFilter_co-efficients">Setting our IIRFilter co-efficients</h2> + +<p>When creating an IIR filter, we pass in the <code>feedforward</code> and <code>feedback</code> coefficients as options (coefficients is how we describe the values). Both of these parameters are arrays, neither of which can be larger than 20 items.</p> + +<p>When setting our coefficients, the <code>feedforward</code> values can't all be set to zero, otherwise nothing would be sent to the filter. Something like this is acceptable:</p> + +<pre class="brush: js">let feedForward = [0.00020298, 0.0004059599, 0.00020298]; +</pre> + +<p>Our <code>feedback</code> values cannot start with zero, otherwise on the first pass nothing would be sent back:</p> + +<pre class="brush: js">let feedBackward = [1.0126964558, -1.9991880801, 0.9873035442]; +</pre> + +<div class="note"> +<p><strong>Note</strong>: These values are calculated based on the lowpass filter specified in the <a href="https://webaudio.github.io/web-audio-api/#filters-characteristics">filter characteristics of the Web Audio API specification</a>. As this filter node gains more popularity we should be able to collate more coefficient values.</p> +</div> + +<h2 id="Using_an_IIRFilter_in_an_audio_graph">Using an IIRFilter in an audio graph</h2> + +<p>Let's create our context and our filter node:</p> + +<pre class="brush: js">const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext(); + +const iirFilter = audioCtx.createIIRFilter(feedForward, feedBack); +</pre> + +<p>We need a sound source to play. We set this up using a custom function, <code>playSoundNode()</code>, which <a href="/en-US/docs/Web/API/BaseAudioContext/createBufferSource">creates a buffer source</a> from an existing {{domxref("AudioBuffer")}}, attaches it to the default destination, starts it playing, and returns it:</p> + +<pre class="brush: js">function playSourceNode(audioContext, audioBuffer) { + const soundSource = audioContext.createBufferSource(); + soundSource.buffer = audioBuffer; + soundSource.connect(audioContext.destination); + soundSource.start(); + return soundSource; +}</pre> + +<p>This function is called when the play button is pressed. The play button HTML looks like this:</p> + +<pre class="brush: html"><button class="button-play" role="switch" data-playing="false" aria-pressed="false">Play</button></pre> + +<p>And the <code>click</code> event listener starts like so:</p> + +<pre class="brush: js">playButton.addEventListener('click', function() { + if (this.dataset.playing === 'false') { + srcNode = playSourceNode(audioCtx, sample); + ... +}, false);</pre> + +<p>The toggle that turns the IIR filter on and off is set up in the similar way. First, the HTML:</p> + +<pre><button class="button-filter" role="switch" data-filteron="false" aria-pressed="false" aria-describedby="label" disabled></button></pre> + +<p>The filter button's <code>click</code> handler then connects the <code>IIRFilter</code> up to the graph, between the source and the detination:</p> + +<pre class="brush: js">filterButton.addEventListener('click', function() { + if (this.dataset.filteron === 'false') { + srcNode.disconnect(audioCtx.destination); + srcNode.connect(iirfilter).connect(audioCtx.destination); + ... +}, false);</pre> + +<h3 id="Frequency_response">Frequency response</h3> + +<p>We only have one method available on {{domxref("IIRFilterNode")}} instances, <code>getFrequencyResponse()</code>, this allows us to see what is happening to the frequencies of the audio being passed into the filter.</p> + +<p>Let's draw a frequency plot of the filter we've created with the data we get back from this method.</p> + +<p>We need to create three arrays. One of frequency values for which we want to receive the magnitude response and phase response for, and two empty arrays to receive the data. All three of these have to be of type <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array"><code>float32array</code></a> and all be of the same size.</p> + +<pre class="brush: js">// arrays for our frequency response +const totalArrayItems = 30; +let myFrequencyArray = new Float32Array(totalArrayItems); +let magResponseOutput = new Float32Array(totalArrayItems); +let phaseResponseOutput = new Float32Array(totalArrayItems); +</pre> + +<p>Let's fill our first array with frequency values we want data to be returned on:</p> + +<pre class="brush: js">myFrequencyArray = myFrequencyArray.map(function(item, index) { + return Math.pow(1.4, index); +}); +</pre> + +<p>We could go for a linear approach, but it's far better when working with frequencies to take a log approach, so let's fill our array with frequency values that get larger further on in the array items.</p> + +<p>Now let's get our response data:</p> + +<pre class="brush: js">iirFilter.getFrequencyResponse(myFrequencyArray, magResponseOutput, phaseResponseOutput); +</pre> + +<p>We can use this data to draw a filter frequency plot. We'll do so on a 2d canvas context.</p> + +<pre class="brush: js">// create a canvas element and append it to our dom +const canvasContainer = document.querySelector('.filter-graph'); +const canvasEl = document.createElement('canvas'); +canvasContainer.appendChild(canvasEl); + +// set 2d context and set dimesions +const canvasCtx = canvasEl.getContext('2d'); +const width = canvasContainer.offsetWidth; +const height = canvasContainer.offsetHeight; +canvasEl.width = width; +canvasEl.height = height; + +// set background fill +canvasCtx.fillStyle = 'white'; +canvasCtx.fillRect(0, 0, width, height); + +// set up some spacing based on size +const spacing = width/16; +const fontSize = Math.floor(spacing/1.5); + +// draw our axis +canvasCtx.lineWidth = 2; +canvasCtx.strokeStyle = 'grey'; + +canvasCtx.beginPath(); +canvasCtx.moveTo(spacing, spacing); +canvasCtx.lineTo(spacing, height-spacing); +canvasCtx.lineTo(width-spacing, height-spacing); +canvasCtx.stroke(); + +// axis is gain by frequency -> make labels +canvasCtx.font = fontSize+'px sans-serif'; +canvasCtx.fillStyle = 'grey'; +canvasCtx.fillText('1', spacing-fontSize, spacing+fontSize); +canvasCtx.fillText('g', spacing-fontSize, (height-spacing+fontSize)/2); +canvasCtx.fillText('0', spacing-fontSize, height-spacing+fontSize); +canvasCtx.fillText('Hz', width/2, height-spacing+fontSize); +canvasCtx.fillText('20k', width-spacing, height-spacing+fontSize); + +// loop over our magnitude response data and plot our filter + +canvasCtx.beginPath(); + +for(let i = 0; i < magResponseOutput.length; i++) { + + if (i === 0) { + canvasCtx.moveTo(spacing, height-(magResponseOutput[i]*100)-spacing ); + } else { + canvasCtx.lineTo((width/totalArrayItems)*i, height-(magResponseOutput[i]*100)-spacing ); + } + +} + +canvasCtx.stroke(); +</pre> + +<h2 id="Summary">Summary</h2> + +<p>That's it for our IIRFilter demo. This should have shown you how to use the basics, and helped you to understand what it's useful for and how it works.</p> diff --git a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/bar-graph.png b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/bar-graph.png Binary files differnew file mode 100644 index 0000000000..a31829c5d1 --- /dev/null +++ b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/bar-graph.png diff --git a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.html new file mode 100644 index 0000000000..c0dd84ee68 --- /dev/null +++ b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.html @@ -0,0 +1,189 @@ +--- +title: Visualizations with Web Audio API +slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API +tags: + - API + - Web Audio API + - analyser + - fft + - visualisation + - visualization + - waveform +--- +<div class="summary"> +<p>One of the most interesting features of the Web Audio API is the ability to extract frequency, waveform, and other data from your audio source, which can then be used to create visualizations. This article explains how, and provides a couple of basic use cases.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You can find working examples of all the code snippets in our <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> demo.</p> +</div> + +<h2 id="Basic_concepts">Basic concepts</h2> + +<p>To extract data from your audio source, you need an {{ domxref("AnalyserNode") }}, which is created using the {{ domxref("BaseAudioContext.createAnalyser") }} method, for example:</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); +</pre> + +<p>This node is then connected to your audio source at some point between your source and your destination, for example:</p> + +<pre class="brush: js">source = audioCtx.createMediaStreamSource(stream); +source.connect(analyser); +analyser.connect(distortion); +distortion.connect(audioCtx.destination);</pre> + +<div class="note"> +<p><strong>Note</strong>: you don't need to connect the analyser's output to another node for it to work, as long as the input is connected to the source, either directly or via another node.</p> +</div> + +<p>The analyser node will then capture audio data using a Fast Fourier Transform (fft) in a certain frequency domain, depending on what you specify as the {{ domxref("AnalyserNode.fftSize") }} property value (if no value is specified, the default is 2048.)</p> + +<div class="note"> +<p><strong>Note</strong>: You can also specify a minimum and maximum power value for the fft data scaling range, using {{ domxref("AnalyserNode.minDecibels") }} and {{ domxref("AnalyserNode.maxDecibels") }}, and different data averaging constants using {{ domxref("AnalyserNode.smoothingTimeConstant") }}. Read those pages to get more information on how to use them.</p> +</div> + +<p>To capture data, you need to use the methods {{ domxref("AnalyserNode.getFloatFrequencyData()") }} and {{ domxref("AnalyserNode.getByteFrequencyData()") }} to capture frequency data, and {{ domxref("AnalyserNode.getByteTimeDomainData()") }} and {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} to capture waveform data.</p> + +<p>These methods copy data into a specified array, so you need to create a new array to receive the data before invoking one. The first one produces 32-bit floating point numbers, and the second and third ones produce 8-bit unsigned integers, therefore a standard JavaScript array won't do — you need to use a {{ domxref("Float32Array") }} or {{ domxref("Uint8Array") }} array, depending on what data you are handling.</p> + +<p>So for example, say we are dealing with an fft size of 2048. We return the {{ domxref("AnalyserNode.frequencyBinCount") }} value, which is half the fft, then call Uint8Array() with the frequencyBinCount as its length argument — this is how many data points we will be collecting, for that fft size.</p> + +<pre class="brush: js">analyser.fftSize = 2048; +var bufferLength = analyser.frequencyBinCount; +var dataArray = new Uint8Array(bufferLength);</pre> + +<p>To actually retrieve the data and copy it into our array, we then call the data collection method we want, with the array passed as it's argument. For example:</p> + +<pre class="brush: js">analyser.getByteTimeDomainData(dataArray);</pre> + +<p>We now have the audio data for that moment in time captured in our array, and can proceed to visualize it however we like, for example by plotting it onto an HTML5 {{ htmlelement("canvas") }}.</p> + +<p>Let's go on to look at some specific examples.</p> + +<h2 id="Creating_a_waveformoscilloscope">Creating a waveform/oscilloscope</h2> + +<p>To create the oscilloscope visualisation (hat tip to <a href="http://soledadpenades.com/">Soledad Penadés</a> for the original code in <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L123-L167">Voice-change-O-matic</a>), we first follow the standard pattern described in the previous section to set up the buffer:</p> + +<pre class="brush: js">analyser.fftSize = 2048; +var bufferLength = analyser.frequencyBinCount; +var dataArray = new Uint8Array(bufferLength);</pre> + +<p>Next, we clear the canvas of what had been drawn on it before to get ready for the new visualization display:</p> + +<pre class="brush: js">canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre> + +<p>We now define the <code>draw()</code> function:</p> + +<pre class="brush: js">function draw() {</pre> + +<p>In here, we use <code>requestAnimationFrame()</code> to keep looping the drawing function once it has been started:</p> + +<pre class="brush: js">var drawVisual = requestAnimationFrame(draw);</pre> + +<p>Next, we grab the time domain data and copy it into our array</p> + +<pre class="brush: js">analyser.getByteTimeDomainData(dataArray);</pre> + +<p>Next, fill the canvas with a solid color to start</p> + +<pre class="brush: js">canvasCtx.fillStyle = 'rgb(200, 200, 200)'; +canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre> + +<p>Set a line width and stroke color for the wave we will draw, then begin drawing a path</p> + +<pre class="brush: js">canvasCtx.lineWidth = 2; +canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; +canvasCtx.beginPath();</pre> + +<p>Determine the width of each segment of the line to be drawn by dividing the canvas width by the array length (equal to the FrequencyBinCount, as defined earlier on), then define an x variable to define the position to move to for drawing each segment of the line.</p> + +<pre class="brush: js">var sliceWidth = WIDTH * 1.0 / bufferLength; +var x = 0;</pre> + +<p>Now we run through a loop, defining the position of a small segment of the wave for each point in the buffer at a certain height based on the data point value form the array, then moving the line across to the place where the next wave segment should be drawn:</p> + +<pre class="brush: js"> for(var i = 0; i < bufferLength; i++) { + + var v = dataArray[i] / 128.0; + var y = v * HEIGHT/2; + + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + }</pre> + +<p>Finally, we finish the line in the middle of the right hand side of the canvas, then draw the stroke we've defined:</p> + +<pre class="brush: js"> canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); + };</pre> + +<p>At the end of this section of code, we invoke the <code>draw()</code> function to start off the whole process:</p> + +<pre class="brush: js"> draw();</pre> + +<p>This gives us a nice waveform display that updates several times a second:</p> + +<p><img alt="a black oscilloscope line, showing the waveform of an audio signal" src="wave.png"></p> + +<h2 id="Creating_a_frequency_bar_graph">Creating a frequency bar graph</h2> + +<p>Another nice little sound visualization to create is one of those Winamp-style frequency bar graphs. We have one available in Voice-change-O-matic; let's look at how it's done.</p> + +<p>First, we again set up our analyser and data array, then clear the current canvas display with <code>clearRect()</code>. The only difference from before is that we have set the fft size to be much smaller; this is so that each bar in the graph is big enough to actually look like a bar rather than a thin strand.</p> + +<pre class="brush: js">analyser.fftSize = 256; +var bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +var dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre> + +<p>Next, we start our <code>draw()</code> function off, again setting up a loop with <code>requestAnimationFrame()</code> so that the displayed data keeps updating, and clearing the display with each animation frame.</p> + +<pre class="brush: js"> function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre> + +<p>Now we set our <code>barWidth</code> to be equal to the canvas width divided by the number of bars (the buffer length). However, we are also multiplying that width by 2.5, because most of the frequencies will come back as having no audio in them, as most of the sounds we hear every day are in a certain lower frequency range. We don't want to display loads of empty bars, therefore we shift the ones that will display regularly at a noticeable height across so they fill the canvas display.</p> + +<p>We also set a <code>barHeight</code> variable, and an <code>x</code> variable to record how far across the screen to draw the current bar.</p> + +<pre class="brush: js">var barWidth = (WIDTH / bufferLength) * 2.5; +var barHeight; +var x = 0;</pre> + +<p>As before, we now start a for loop and cycle through each value in the <code>dataArray</code>. For each one, we make the <code>barHeight</code> equal to the array value, set a fill color based on the <code>barHeight</code> (taller bars are brighter), and draw a bar at <code>x</code> pixels across the canvas, which is <code>barWidth</code> wide and <code>barHeight/2</code> tall (we eventually decided to cut each bar in half so they would all fit on the canvas better.)</p> + +<p>The one value that needs explaining is the vertical offset position we are drawing each bar at: <code>HEIGHT-barHeight/2</code>. I am doing this because I want each bar to stick up from the bottom of the canvas, not down from the top, as it would if we set the vertical position to 0. Therefore, we instead set the vertical position each time to the height of the canvas minus <code>barHeight/2</code>, so therefore each bar will be drawn from partway down the canvas, down to the bottom.</p> + +<pre class="brush: js"> for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]/2; + + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight); + + x += barWidth + 1; + } + };</pre> + +<p>Again, at the end of the code we invoke the draw() function to set the whole process in motion.</p> + +<pre class="brush: js">draw();</pre> + +<p>This code gives us a result like the following:</p> + +<p><img alt="a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal" src="bar-graph.png"></p> + +<div class="note"> +<p><strong>Note</strong>: The examples listed in this article have shown usage of {{ domxref("AnalyserNode.getByteFrequencyData()") }} and {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. For working examples showing {{ domxref("AnalyserNode.getFloatFrequencyData()") }} and {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}, refer to our <a href="https://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> demo (see the <a href="https://github.com/mdn/voice-change-o-matic-float-data">source code</a> too) — this is exactly the same as the original <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>, except that it uses Float data, not unsigned byte data.</p> +</div> diff --git a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/wave.png b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/wave.png Binary files differnew file mode 100644 index 0000000000..9254829d23 --- /dev/null +++ b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/wave.png diff --git a/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.html b/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.html new file mode 100644 index 0000000000..2846d45d6c --- /dev/null +++ b/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.html @@ -0,0 +1,467 @@ +--- +title: Web audio spatialization basics +slug: Web/API/Web_Audio_API/Web_audio_spatialization_basics +tags: + - PannerNode + - Web Audio API + - panning +--- +<div>{{DefaultAPISidebar("Web Audio API")}}</div> + +<div class="summary"> +<p><span class="seoSummary">As if its extensive variety of sound processing (and other) options wasn't enough, the Web Audio API also includes facilities to allow you to emulate the difference in sound as a listener moves around a sound source, for example panning as you move around a sound source inside a 3D game. The official term for this is <strong>spatialization</strong>, and this article will cover the basics of how to implement such a system.</span></p> +</div> + +<h2 id="Basics_of_spatialization">Basics of spatialization</h2> + +<p>In Web Audio, complex 3D spatializations are created using the {{domxref("PannerNode")}}, which in layman's terms is basically a whole lotta cool maths to make audio appear in 3D space. Think sounds flying over you, creeping up behind you, moving across in front of you. That sort of thing.</p> + +<p>It's really useful for WebXR and gaming. In 3D spaces, it's the only way to achieve realistic audio. Libraries like <a href="https://threejs.org/">three.js</a> and <a href="https://aframe.io/">A-frame</a> harness its potential when dealing with sound. It's worth noting that you don't <em>have</em> to move sound within a full 3D space either — you could stick with just a 2D plane, so if you were planning a 2D game, this would still be the node you were looking for.</p> + +<div class="note"> +<p><strong>Note</strong>: There's also a {{domxref("StereoPannerNode")}} designed to deal with the common use case of creating simple left and right stereo panning effects. This is much simpler to use, but obviously nowhere near as versatile. If you just want a simple stereo panning effect, our <a href="https://mdn.github.io/webaudio-examples/stereo-panner-node/">StereoPannerNode example</a> (<a href="https://github.com/mdn/webaudio-examples/tree/master/stereo-panner-node">see source code</a>) should give you everything you need.</p> +</div> + +<h2 id="3D_boombox_demo">3D boombox demo</h2> + +<p>To demonstrate 3D spatialization we've created a modified version of the boombox demo we created in our basic <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a> guide. see the <a href="https://mdn.github.io/webaudio-examples/spacialization/">3D spatialization demo live</a> (and see the <a href="https://github.com/mdn/webaudio-examples/tree/master/spacialization">source code</a> also).</p> + +<p><img alt="A simple UI with a rotated boombox and controls to move it left and right and in and out, and rotate it." src="web-audio-spatialization.png"></p> + +<p>The boombox sits inside a room (defined by the edges of the browser viewport), and in this demo, we can move and rotate it with the provided controls. When we move the boombox, the sound it produces changes accordingly, panning as it moves to the left or right of the room, or becoming quieter as it is moved away from the user or is rotated so the speakers are facing away from them, etc. This is done by setting the different properties of the <code>PannerNode</code> object instance in relation to that movement, to emulate spacialization.</p> + +<div class="note"> +<p><strong>Note</strong>: The experience is much better if you use headphones, or have some kind of surround sound system to plug your computer into.</p> +</div> + +<h2 id="Creating_an_audio_listener">Creating an audio listener</h2> + +<p>So let's begin! The {{domxref("BaseAudioContext")}} (the interface the {{domxref("AudioContext")}} is extended from) has a <code><a href="/en-US/docs/Web/API/BaseAudioContext/listener">listener</a></code> property that returns an {{domxref("AudioListener")}} object. This represents the listener of the scene, usually your user. You can define where they are in space and in which direction they are facing. They remain static. The <code>pannerNode</code> can then calculate its sound position relative to the position of the listener.</p> + +<p>Let's create our context and listener and set the listener's position to emulate a person looking into our room:</p> + +<pre class="brush: js">const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext(); +const listener = audioCtx.listener; + +const posX = window.innerWidth/2; +const posY = window.innerHeight/2; +const posZ = 300; + +listener.positionX.value = posX; +listener.positionY.value = posY; +listener.positionZ.value = posZ-5; +</pre> + +<p>We could move the listener left or right using <code>positionX</code>, up or down using <code>positionY</code>, or in or out of the room using <code>positionZ</code>. Here we are setting the listener to be in the middle of the viewport and slightly in front of our boombox. We can also set the direction the listener is facing. The default values for these work well:</p> + +<pre class="brush: js">listener.forwardX.value = 0; +listener.forwardY.value = 0; +listener.forwardZ.value = -1; +listener.upX.value = 0; +listener.upY.value = 1; +listener.upZ.value = 0; +</pre> + +<p>The forward properties represent the 3D coordinate position of the listener's forward direction (e.g. the direction they are facing in), while the up properties represent the 3D coordinate position of the top of the listener's head. These two together can nicely set the direction.</p> + +<h2 id="Creating_a_panner_node">Creating a panner node</h2> + +<p>Let's create our {{domxref("PannerNode")}}. This has a whole bunch of properties associated with it. Let's take a look at each of them:</p> + +<p>To start we can set the <a href="/en-US/docs/Web/API/PannerNode/panningModel"><code>panningModel</code></a>. This is the spacialization algorithm that's used to position the audio in 3D space. We can set this to:</p> + +<p><code>equalpower</code> — The default and the general way panning is figured out</p> + +<p><code>HRTF</code> — This stands for 'Head-related transfer function' and looks to take into account the human head when figuring out where the sound is.</p> + +<p>Pretty clever stuff. Let's use the <code>HRTF</code> model!</p> + +<pre class="brush: js">const pannerModel = 'HRTF'; +</pre> + +<p>The <a href="/en-US/docs/Web/API/PannerNode/coneInnerAngle"><code>coneInnerAngle</code></a> and <a href="/en-US/docs/Web/API/PannerNode/coneOuterAngle"><code>coneOuterAngle</code></a> properties specify where the volume emanates from. By default, both are 360 degrees. Our boombox speakers will have smaller cones, which we can define. The inner cone is where gain (volume) is always emulated at a maximum and the outer cone is where the gain starts to drop away. The gain is reduced by the value of the <a href="/en-US/docs/Web/API/PannerNode/coneOuterGain"><code>coneOuterGain</code></a> value. Let's create constants that store the values we'll use for these parameters later on:</p> + +<pre class="brush: js">const innerCone = 60; +const outerCone = 90; +const outerGain = 0.3; +</pre> + +<p>The next parameter is <a href="/en-US/docs/Web/API/PannerNode/distanceModel"><code>distanceModel</code></a> — this can only be set to <code>linear</code>, <code>inverse</code>, or <code>exponential</code>. These are different algorithms, which are used to reduce the volume of the audio source as it moves away from the listener. We'll use <code>linear</code>, as it is simple:</p> + +<pre class="brush: js">const distanceModel = 'linear'; +</pre> + +<p>We can set a maximum distance (<a href="/en-US/docs/Web/API/PannerNode/maxDistance"><code>maxDistance</code></a>) between the source and the listener — the volume will not be reduced anymore if the source moves further away from this point. This can be useful, as you may find you want to emulate distance, but volume can drop out and that's actually not what you want. By default, it's 10,000 (a unitless relative value). We can keep it as this:</p> + +<pre class="brush: js">const maxDistance = 10000; +</pre> + +<p>There's also a reference distance (<code><a href="/en-US/docs/Web/API/PannerNode/refDistance">refDistance</a></code>), which is used by the distance models. We can keep that at the default value of <code>1</code> as well:</p> + +<pre class="brush: js">const refDistance = 1; +</pre> + +<p>Then there's the roll-off factor (<a href="/en-US/docs/Web/API/PannerNode/rolloffFactor"><code>rolloffFactor</code></a>) — how quickly does the volume reduce as the panner moves away from the listener. The default value is 1; let's make that a bit bigger to exaggerate our movements.</p> + +<pre class="brush: js">const rollOff = 10; +</pre> + +<p>Now we can start setting our position and orientation of our boombox. This is a lot like how we did it with our listener. These are also the parameters we're going to change when the controls on our interface are used.</p> + +<pre class="brush: js">const positionX = posX; +const positionY = posY; +const positionZ = posZ; + +const orientationX = 0.0; +const orientationY = 0.0; +const orientationZ = -1.0; +</pre> + +<p>Note the minus value on our z orientation — this sets the boombox to face us. A positive value would set the sound source facing away from us.</p> + +<p>Let's use the relevant constructor for creating our panner node and pass in all those parameters we set above:</p> + +<pre class="brush: js">const panner = new PannerNode(audioCtx, { + panningModel: pannerModel, + distanceModel: distanceModel, + positionX: positionX, + positionY: positionY, + positionZ: positionZ, + orientationX: orientationX, + orientationY: orientationY, + orientationZ: orientationZ, + refDistance: refDistance, + maxDistance: maxDistance, + rolloffFactor: rollOff, + coneInnerAngle: innerCone, + coneOuterAngle: outerCone, + coneOuterGain: outerGain +}) +</pre> + +<h2 id="Moving_the_boombox">Moving the boombox</h2> + +<p>Now we're going to move our boombox around our 'room'. We've got some controls set up to do this. We can move it left and right, up and down, and back and forth; we can also rotate it. The sound direction is coming from the boombox speaker at the front, so when we rotate it, we can alter the sound's direction — i.e. make it project to the back when the boombox is rotated 180 degrees and facing away from us.</p> + +<p>We need to set up a few things for the interface. First, we'll get references to the elements we want to move, then we'll store references to the values we'll change when we set up <a href="/en-US/docs/Web/CSS/CSS_Transforms">CSS transforms</a> to actually do the movement. Finally, we'll set some bounds so our boombox doesn't move too far in any direction:</p> + +<pre class="brush: js">const moveControls = document.querySelector('#move-controls').querySelectorAll('button'); +const boombox = document.querySelector('.boombox-body'); + +// the values for our css transforms +let transform = { + xAxis: 0, + yAxis: 0, + zAxis: 0.8, + rotateX: 0, + rotateY: 0 +} + +// set our bounds +const topBound = -posY; +const bottomBound = posY; +const rightBound = posX; +const leftBound = -posX; +const innerBound = 0.1; +const outerBound = 1.5; +</pre> + +<p>Let's create a function that takes the direction we want to move as a parameter, and both modifies the CSS transform and updates the position and orientation values of our panner node properties to change the sound as appropriate.</p> + +<p>To start with let's take a look at our left, right, up and down values as these are pretty straightforward. We'll move the boombox along these axis and update the appropriate position.</p> + +<pre class="brush: js">function moveBoombox(direction) { + switch (direction) { + case 'left': + if (transform.xAxis > leftBound) { + transform.xAxis -= 5; + panner.positionX.value -= 0.1; + } + break; + case 'up': + if (transform.yAxis > topBound) { + transform.yAxis -= 5; + panner.positionY.value -= 0.3; + } + break; + case 'right': + if (transform.xAxis < rightBound) { + transform.xAxis += 5; + panner.positionX.value += 0.1; + } + break; + case 'down': + if (transform.yAxis < bottomBound) { + transform.yAxis += 5; + panner.positionY.value += 0.3; + } + break; + } +} +</pre> + +<p>It's a similar story for our move in and out values too:</p> + +<pre class="brush: js">case 'back': + if (transform.zAxis > innerBound) { + transform.zAxis -= 0.01; + panner.positionZ.value += 40; + } +break; +case 'forward': + if (transform.zAxis < outerBound) { + transform.zAxis += 0.01; + panner.positionZ.value -= 40; + } +break; +</pre> + +<p>Our rotation values are a little more involved, however, as we need to move the sound <em>around</em>. Not only do we have to update two axis values (e.g. if you rotate an object around the x-axis, you update the y and z coordinates for that object), but we also need to do some more maths for this. The rotation is a circle and we need <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin">Math.sin</a></code> and <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos">Math.cos</a></code> to help us draw that circle.</p> + +<p>Let's set up a rotation rate, which we'll convert into a radian range value for use in <code>Math.sin</code> and <code>Math.cos</code> later, when we want to figure out the new coordinates when we're rotating our boombox:</p> + +<pre class="brush: js">// set up rotation constants +const rotationRate = 60; // bigger number equals slower sound rotation + +const q = Math.PI/rotationRate; //rotation increment in radians +</pre> + +<p>We can also use this to work out degrees rotated, which will help with the CSS transforms we will have to create (note we need both an x and y-axis for the CSS transforms):</p> + +<pre class="brush: js">// get degrees for css +const degreesX = (q * 180)/Math.PI; +const degreesY = (q * 180)/Math.PI; +</pre> + +<p>Let's take a look at our left rotation as an example. We need to change the x orientation and the z orientation of the panner coordinates, to move around the y-axis for our left rotation:</p> + +<pre class="brush: js">case 'rotate-left': + transform.rotateY -= degreesY; + + // 'left' is rotation about y-axis with negative angle increment + z = panner.orientationZ.value*Math.cos(q) - panner.orientationX.value*Math.sin(q); + x = panner.orientationZ.value*Math.sin(q) + panner.orientationX.value*Math.cos(q); + y = panner.orientationY.value; + + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; +break; +</pre> + +<p>This <em>is</em> a little confusing, but what we're doing is using sin and cos to help us work out the circular motion the coordinates need for the rotation of the boombox.</p> + +<p>We can do this for all the axes. We just need to choose the right orientations to update and whether we want a positive or negative increment.</p> + +<pre class="brush: js">case 'rotate-right': + transform.rotateY += degreesY; + // 'right' is rotation about y-axis with positive angle increment + z = panner.orientationZ.value*Math.cos(-q) - panner.orientationX.value*Math.sin(-q); + x = panner.orientationZ.value*Math.sin(-q) + panner.orientationX.value*Math.cos(-q); + y = panner.orientationY.value; + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; +break; +case 'rotate-up': + transform.rotateX += degreesX; + // 'up' is rotation about x-axis with negative angle increment + z = panner.orientationZ.value*Math.cos(-q) - panner.orientationY.value*Math.sin(-q); + y = panner.orientationZ.value*Math.sin(-q) + panner.orientationY.value*Math.cos(-q); + x = panner.orientationX.value; + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; +break; +case 'rotate-down': + transform.rotateX -= degreesX; + // 'down' is rotation about x-axis with positive angle increment + z = panner.orientationZ.value*Math.cos(q) - panner.orientationY.value*Math.sin(q); + y = panner.orientationZ.value*Math.sin(q) + panner.orientationY.value*Math.cos(q); + x = panner.orientationX.value; + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; +break; +</pre> + +<p>One last thing — we need to update the CSS and keep a reference of the last move for the mouse event. Here's the final <code>moveBoombox</code> function.</p> + +<pre class="brush: js">function moveBoombox(direction, prevMove) { + switch (direction) { + case 'left': + if (transform.xAxis > leftBound) { + transform.xAxis -= 5; + panner.positionX.value -= 0.1; + } + break; + case 'up': + if (transform.yAxis > topBound) { + transform.yAxis -= 5; + panner.positionY.value -= 0.3; + } + break; + case 'right': + if (transform.xAxis < rightBound) { + transform.xAxis += 5; + panner.positionX.value += 0.1; + } + break; + case 'down': + if (transform.yAxis < bottomBound) { + transform.yAxis += 5; + panner.positionY.value += 0.3; + } + break; + case 'back': + if (transform.zAxis > innerBound) { + transform.zAxis -= 0.01; + panner.positionZ.value += 40; + } + break; + case 'forward': + if (transform.zAxis < outerBound) { + transform.zAxis += 0.01; + panner.positionZ.value -= 40; + } + break; + case 'rotate-left': + transform.rotateY -= degreesY; + + // 'left' is rotation about y-axis with negative angle increment + z = panner.orientationZ.value*Math.cos(q) - panner.orientationX.value*Math.sin(q); + x = panner.orientationZ.value*Math.sin(q) + panner.orientationX.value*Math.cos(q); + y = panner.orientationY.value; + + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; + break; + case 'rotate-right': + transform.rotateY += degreesY; + // 'right' is rotation about y-axis with positive angle increment + z = panner.orientationZ.value*Math.cos(-q) - panner.orientationX.value*Math.sin(-q); + x = panner.orientationZ.value*Math.sin(-q) + panner.orientationX.value*Math.cos(-q); + y = panner.orientationY.value; + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; + break; + case 'rotate-up': + transform.rotateX += degreesX; + // 'up' is rotation about x-axis with negative angle increment + z = panner.orientationZ.value*Math.cos(-q) - panner.orientationY.value*Math.sin(-q); + y = panner.orientationZ.value*Math.sin(-q) + panner.orientationY.value*Math.cos(-q); + x = panner.orientationX.value; + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; + break; + case 'rotate-down': + transform.rotateX -= degreesX; + // 'down' is rotation about x-axis with positive angle increment + z = panner.orientationZ.value*Math.cos(q) - panner.orientationY.value*Math.sin(q); + y = panner.orientationZ.value*Math.sin(q) + panner.orientationY.value*Math.cos(q); + x = panner.orientationX.value; + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; + break; + } + + boombox.style.transform = 'translateX('+transform.xAxis+'px) translateY('+transform.yAxis+'px) scale('+transform.zAxis+') rotateY('+transform.rotateY+'deg) rotateX('+transform.rotateX+'deg)'; + + const move = prevMove || {}; + move.frameId = requestAnimationFrame(() => moveBoombox(direction, move)); + return move; +} +</pre> + +<h2 id="Wiring_up_our_controls">Wiring up our controls</h2> + +<p>Wiring up out control buttons is comparatively simple — now we can listen for a mouse event on our controls and run this function, as well as stop it when the mouse is released:</p> + +<pre class="brush: js">// for each of our controls, move the boombox and change the position values +moveControls.forEach(function(el) { + + let moving; + el.addEventListener('mousedown', function() { + + let direction = this.dataset.control; + if (moving && moving.frameId) { + window.cancelAnimationFrame(moving.frameId); + } + moving = moveBoombox(direction); + + }, false); + + window.addEventListener('mouseup', function() { + if (moving && moving.frameId) { + window.cancelAnimationFrame(moving.frameId); + } + }, false) + +}) +</pre> + +<h2 id="Connecting_Our_Graph">Connecting Our Graph</h2> + +<p>Our HTML contains the audio element we want to be affected by the panner node.</p> + +<pre class="brush: html"><audio src="myCoolTrack.mp3"></audio></pre> + +<p>We need to grab the source from that element and pipe it into the Web Audio API using the {{domxref('AudioContext.createMediaElementSource')}}.</p> + +<pre class="brush: js">// get the audio element +const audioElement = document.querySelector('audio'); + +// pass it into the audio context +const track = audioContext.createMediaElementSource(audioElement); +</pre> + +<p>Next we have to connect our audio graph. We connect our input (the track) to our modification node (the panner) to our destination (in this case the speakers).</p> + +<pre class="brush: js">track.connect(panner).connect(audioCtx.destination); +</pre> + +<p>Let's create a play button, that when clicked will play or pause the audio depending on the current state.</p> + +<pre class="brush: html"><button data-playing="false" role="switch">Play/Pause</button> +</pre> + +<pre class="brush: js">// select our play button +const playButton = document.querySelector('button'); + +playButton.addEventListener('click', function() { + +// check if context is in suspended state (autoplay policy) +if (audioContext.state === 'suspended') { +audioContext.resume(); +} + +// play or pause track depending on state +if (this.dataset.playing === 'false') { +audioElement.play(); +this.dataset.playing = 'true'; +} else if (this.dataset.playing === 'true') { +audioElement.pause(); +this.dataset.playing = 'false'; +} + +}, false); +</pre> + +<p>For a more in depth look at playing/controlling audio and audio graphs check out <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using The Web Audio API.</a></p> + +<h2 id="Summary">Summary</h2> + +<p>Hopefully, this article has given you an insight into how Web Audio spatialization works, and what each of the {{domxref("PannerNode")}} properties do (there are quite a few of them). The values can be hard to manipulate sometimes and depending on your use case it can take some time to get them right.</p> + +<div class="note"> +<p><strong>Note</strong>: There are slight differences in the way the audio spatialization sounds across different browsers. The panner node does some very involved maths under the hood; there are a <a href="https://wpt.fyi/results/webaudio/the-audio-api/the-pannernode-interface?label=stable&aligned=true">number of tests here</a> so you can keep track of the status of the inner workings of this node across different platforms.</p> +</div> + +<p>Again, you can <a href="https://mdn.github.io/webaudio-examples/spacialization/">check out the final demo here</a>, and the <a href="https://github.com/mdn/webaudio-examples/tree/master/spacialization">final source code is here</a>. There is also a <a href="https://codepen.io/Rumyra/pen/MqayoK?editors=0100">Codepen demo too</a>.</p> + +<p>If you are working with 3D games and/or WebXR it's a good idea to harness a 3D library to create such functionality, rather than trying to do this all yourself from first principles. We rolled our own in this article to give you an idea of how it works, but you'll save a lot of time by taking advantage of work others have done before you.</p> diff --git a/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/web-audio-spatialization.png b/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/web-audio-spatialization.png Binary files differnew file mode 100644 index 0000000000..18a359e5c1 --- /dev/null +++ b/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/web-audio-spatialization.png diff --git a/files/ko/web/http/cors/index.html b/files/ko/web/http/cors/index.html index fe96ed2ea2..95199b794f 100644 --- a/files/ko/web/http/cors/index.html +++ b/files/ko/web/http/cors/index.html @@ -6,7 +6,7 @@ tags: - HTTP - Same-origin policy - Security - - 'l10n:priority' + - l10n:priority - 교차 출처 - 동일 출처 translation_of: Web/HTTP/CORS @@ -17,7 +17,7 @@ translation_of: Web/HTTP/CORS <p>교차 출처 요청의 예시: <code>https://domain-a.com</code>의 프론트 엔드 JavaScript 코드가 {{domxref("XMLHttpRequest")}}를 사용하여 <code>https://domain-b.com/data.json</code>을 요청하는 경우.</p> -<p>보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, <code>XMLHttpRequest</code>와 <a href="/ko/docs/Web/API/Fetch_API">Fetch API</a>는 <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 정책</a>을 따릅니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.<img src="https://mdn.mozillademos.org/files/14295/CORS_principle.png"></p> +<p>보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, <code>XMLHttpRequest</code>와 <a href="/ko/docs/Web/API/Fetch_API">Fetch API</a>는 <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 정책</a>을 따릅니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.<img src="cors_principle.png"></p> <p>CORS 체제는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원합니다. 최신 브라우저는 <code>XMLHttpRequest</code> 또는 <a href="/ko/docs/Web/API/Fetch_API">Fetch</a>와 같은 API에서 CORS를 사용하여 교차 출처 HTTP 요청의 위험을 완화합니다.</p> @@ -25,7 +25,7 @@ translation_of: Web/HTTP/CORS <p>모든 사람이요, 진짜로.</p> -<p>명확히 말하자면, 이 글은 <strong>웹 관리자</strong>, <strong>서버 개발자 </strong>그리고 <strong>프론트엔드 개발자</strong>를 위한 것입니다. 최신 브라우저는 헤더와 정책 집행을 포함한 클라이언트 측 교차 출처 공유를 처리합니다. 그러나 CORS 표준에 맞춘다는 것은 서버에서도 새로운 요청과 응답 헤더를 처리해야 한다는 것입니다. 서버 개발자에게는 <a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">(PHP 코드 조각과 함께 하는) 서버 관점의 교차 출처 공유</a>를 다루고 있는 다른 글로 보충하면 도움이 될 것입니다.</p> +<p>명확히 말하자면, 이 글은 <strong>웹 관리자</strong>, <strong>서버 개발자 </strong>그리고 <strong>프론트엔드 개발자</strong>를 위한 것입니다. 최신 브라우저는 헤더와 정책 집행을 포함한 클라이언트 측 교차 출처 공유를 처리합니다. 그러나 CORS 표준에 맞춘다는 것은 서버에서도 새로운 요청과 응답 헤더를 처리해야 한다는 것입니다. 서버 개발자에게는 <a href="/en-US/docs/Web/HTTP/CORS">(PHP 코드 조각과 함께 하는) 서버 관점의 교차 출처 공유</a>를 다루고 있는 다른 글로 보충하면 도움이 될 것입니다.</p> <h2 id="어떤_요청이_CORS를_사용하나요">어떤 요청이 CORS를 사용하나요?</h2> @@ -53,7 +53,7 @@ translation_of: Web/HTTP/CORS <p>교차 출처 리소스 공유가 동작하는 방식을 보여주는 세 가지 시나리오를 제시하겠습니다. 모든 예제는 지원하는 브라우저에서 교차 출처 요청을 생성할 수 있는 {{domxref("XMLHttpRequest")}}를 사용합니다.</p> -<p>서버 관점의 교차 출처 리소스 공유에 대한 논의는 (PHP 코드와 함께 하는) <a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">서버 사이드 접근 제어 (CORS)</a> 문서에서 확인할 수 있습니다.</p> +<p>서버 관점의 교차 출처 리소스 공유에 대한 논의는 (PHP 코드와 함께 하는) <a href="/en-US/docs/Web/HTTP/CORS">서버 사이드 접근 제어 (CORS)</a> 문서에서 확인할 수 있습니다.</p> <h3 id="단순_요청Simple_requests">단순 요청(Simple requests)</h3> @@ -111,7 +111,7 @@ xhr.send();</code></pre> <p>클라이언트와 서버간에 간단한 통신을 하고, CORS 헤더를 사용하여 권한을 처리합니다.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/17214/simple-req-updated.png" style="height: 490px; width: 1023px;"></p> +<p><img alt="" src="simple-req-updated.png"></p> <p>이 경우 브라우저가 서버로 전송하는 내용을 살펴보고, 서버의 응답을 확인합니다.</p> @@ -158,7 +158,7 @@ xhr.send('<person><name>Arun</name></person>');</code></ <p>위의 예제는 <code>POST</code> 요청과 함께 함께 보낼 XML body를 만듭니다. 또한 비표준 HTTP <code>Ping-Other</code> 요청 헤더가 설정됩니다. 이러한 헤더는 HTTP/1.1의 일부가 아니지만 일반적으로 웹 응용 프로그램에 유용합니다. Content-Type 이 <code>application/xml</code>이고, 사용자 정의 헤더가 설정되었기 때문에 이 요청은 preflighted 처리됩니다.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16753/preflight_correct.png"></p> +<p><img alt="" src="preflight_correct.png"></p> <p>(참고: 아래 설명 된 것처럼 실제 <code>POST</code> 요청에는 <code>Access-Control-Request-*</code> 헤더가 포함되지 않습니다. <code>OPTIONS</code> 요청에만 필요합니다.)</p> @@ -290,7 +290,7 @@ function callOtherDomain() { <p>7행은 쿠키와 함께 호출하기위한 {{domxref("XMLHttpRequest")}} 의 플래그를 보여줍니다. 이 플래그는 <code>withCredentials</code> 라고 불리며 부울 값을 갖습니다. 기본적으로 호출은 쿠키 없이 이루어집니다. 이것은 simple <code>GET</code> request이기 때문에 preflighted 되지 않습니다. 그러나 브라우저는 {{HTTPHeader("Access-Control-Allow-Credentials")}}: <code>true</code> 헤더가 없는 응답을 <strong>거부합니다</strong>.<strong> </strong>따라서 호출된 웹 컨텐츠에 응답을 제공하지 <strong>않습니다</strong>.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/17213/cred-req-updated.png" style="height: 490px; width: 1023px;"></p> +<p><img alt="" src="cred-req-updated.png"></p> <p>클라이언트와 서버간의 통신 예제는 다음과 같습니다.</p> @@ -326,9 +326,19 @@ Content-Type: text/plain <p>10행에는 <code>http://bar.other</code>의 컨텐츠를 대상으로 하는 쿠키가 포함되어 있습니다. 하지만 17행의 {{HTTPHeader("Access-Control-Allow-Credentials")}}: <code>true</code> 로 응답하지 않으면, 응답은 무시되고 웹 컨텐츠는 제공되지 않습니다.</p> -<h4 id="자격증명_요청_및_와일드카드Credentialed_requests_and_wildcards">자격증명 요청 및 와일드카드(Credentialed requests and wildcards)</h4> +<h4 id="Preflight_requests_and_credentials">실행 전 요청 및 자격 증명</h4> -<p>credentialed request 에 응답할 때 서버는 <code>Access-Control-Allow-Origin</code> 헤더 "<code>*</code>" 와일드카드를 사용하는 대신에 <strong>반드시</strong> 에 값을 지정해야 합니다.</p> +<p>CORS 실행 전 요청에는 자격 증명이 포함되지 않아야 합니다. 실행 전 요청에 대한 <em>응답</em>은 <code>Access-Control-Allow-Credentials: true</code>를 지정하여 자격 증명으로 실제 요청을 수행할 수 있음을 나타내야 합니다.</p> + +<div class="notecard note"> + <h4>참고</h4> + <p>일부 엔터프라이즈 인증 서비스는 {{SpecName("Fetch","#cors-protocol-and-credentials")}} 사양을 위반하여 실행 전 요청에서 TLS 클라이언트 인증서를 보내도록 요구합니다.</p> + <p>Firefox 87에서는 기본 설정을 지정하여 이 비준수 동작을 활성화할 수 있습니다: <code>network.cors_preflight.allow_client_cert</code>을 <code>true</code>로 설정 ({{bug(1511151)}}). Chromium 기반 브라우저는 현재 항상 CORS 실행 전 요청에서 TLS 클라이언트 인증서를 보냅니다(<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=775438">Chrome bug 775438</a>).</p> +</div> + +<h4 id="Credentialed_requests_and_wildcards">자격증명 요청 및 와일드카드(Credentialed requests and wildcards)</h4> + +<p>자격 증명 요청에 응답할 때 서버는 <strong>반드시</strong> "<code>*</code>" 와일드카드를 지정하는 대신 <code>Access-Control-Allow-Origin</code> 헤더 값에 출처를 지정해야 합니다.</p> <p>위 예제의 요청 헤더에 <code>Cookie</code> 헤더가 포함되어 있기 때문에 <code>Access-Control-Allow-Origin</code> 헤더의 값이 "*"인 경우 요청이 실패합니다. 위 요청은 <code>Access-Control-Allow-Origin</code> 헤더가 "<code>*</code>" 와일드 카드가 아니라 "<code>http://foo.example</code>" 본래 주소이기 때문에 자격증명 인식 컨텐츠는 웹 호출 컨텐츠로 리턴됩니다.</p> @@ -338,7 +348,7 @@ Content-Type: text/plain <p>CORS 응답에 설정된 쿠키에는 일반적인 third-party cookie 정책이 적용됩니다. 위의 예제는 <code>foo.example</code>에서 페이지를 불러지만 20행의 쿠키는 <code>bar.other</code> 가 전송합니다. 때문에 사용자의 브라우저 설정이 모든 third-party cookies를 거부하도록 되어 있다면, 이 쿠키는 저장되지 않습니다.</p> -<h2 id="HTTP_응답_헤더">HTTP 응답 헤더</h2> +<h2 id="The_HTTP_response_headers">HTTP 응답 헤더</h2> <p>이 섹션에서는 Cross-Origin 리소스 공유 명세에 정의된 대로 서버가 접근 제어 요청을 위해 보내는 HTTP 응답 헤더가 나열되어 있습니다. The previous section gives an overview of these in action.</p> diff --git a/files/ko/web/http/headers/referer/index.html b/files/ko/web/http/headers/referer/index.html index 2d21792ee5..a625c13ad5 100644 --- a/files/ko/web/http/headers/referer/index.html +++ b/files/ko/web/http/headers/referer/index.html @@ -1,40 +1,42 @@ --- title: Referer slug: Web/HTTP/Headers/Referer +tags: + - HTTP + - Reference + - header + - referer + - referrer translation_of: Web/HTTP/Headers/Referer +browser-compat: http.headers.Referer --- <div>{{HTTPSidebar}}</div> -<p><code><strong>Referer</strong></code> 요청 헤더는 현재 요청된 페이지의 링크 이전의 웹 페이지 주소를 포함합니다. <code>Referer</code> 헤더는 사람들이 어디로부터 와서 방문 중인지를 인식할 수 있도록 해주며 해당 데이터는 예를 들어, 분석, 로깅, 혹은 캐싱 최적화에 사용될 수도 있습니다.</p> +<p><code><strong>Referer</strong></code> 요청 헤더는 현재 요청을 보낸 페이지의 절대 혹은 부분 주소를 포함합니다. 만약 링크를 타고 들어왔다면 해당 링크를 포함하고 있는 페이지의 주소가, 다른 도메인에 리소스 요청을 보내는 경우라면 해당 리소스를 사용하는 페이지의 주소가 이 헤더에 포함됩니다.<code>Referer</code> 헤더는 사람들이 어디로부터 와서 방문 중인지를 인식할 수 있도록 해주며 해당 데이터는 예를 들어, 분석, 로깅, 혹은 캐싱 최적화에 사용될 수도 있습니다.</p> -<p>referer는 실제로 단어 "referrer"에서 철자를 빼먹은 것입니다. 자세한 내용은 {{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}을 참고하세요.</p> +<p><code>Referer</code> 헤더는 URL 프래그먼트 (예 : "#section") 또는 "username : password" 정보를 포함 할 수 없습니다. <em>origin</em>, <em>경로</em>, 및 <em>쿼리 문자열</em>을 포함 할 수는 있습니다. 전송되는 내용은 요청에 대한 referrer 정책에 따라 다릅니다. 정보 및 예제는 Referrer-Policy를 참조하십시오. <a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy#directives">정보</a> 와 <a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy#examples">예시</a>는 이곳 {{HTTPHeader("Referrer-Policy")}}을 참고하세요. +<div class="notecard note"> + <h4>Note</h4> + <p><p>referer는 단어 "referrer"의 잘못된 철자입니다. 자세한 내용은 {{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}을 참고하세요.</p> + </div> <div class="warning"> -<p><code>Referer</code> 헤더는 사생활과 관련된 브라우징 히스토리에 관한 정보를 노출할 가능성이 있습니다.</p> -</div> - -<p><code>Referer</code> 헤더는 다음과 같은 경우 브라우저에 의해 전송되지 않습니다:</p> + <h4>Warning</h4> +<p><code>Referer</code> 헤더는 사생활과 관련된 브라우징 히스토리에 관한 정보를 노출할 가능성이 있습니다. 더 많은 정보는 <a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer header: privacy and security concerns</a> 이곳을 참조하세요.</p> -<ul> - <li>참조되는 리소스가 로컬 "파일" 혹은 "데이터"의 URI인 경우,</li> - <li> - <p>안전하지 않은 HTTP 요청이 사용되고 참조 페이지가 보안 프로토콜(HTTPS)로 수신된 경우.</p> - </li> -</ul> +</div> <table class="properties"> - <tbody> - <tr> - <th scope="row">Header type</th> - <td>{{Glossary("Request header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>yes</td> - </tr> - </tbody> -</table> - + <tbody> + <tr> + <th scope="row">Header type</th> + <td>{{Glossary("Request header")}}</td> + </tr> + <tr> + </tr> + </tbody> + </table> + <h2 id="문법">문법</h2> <pre class="syntaxbox">Referer: <url> @@ -44,12 +46,16 @@ translation_of: Web/HTTP/Headers/Referer <dl> <dt><url></dt> - <dd>현재 요청된 페이지의 링크 이전의 웹 페이지의 절대 혹은 부분 주소. URL 프래그먼트(예를 들어, "#section")는 포함되지 않습니다.</dd> + <dd>현재 요청된 페이지의 링크 이전의 웹 페이지의 절대 혹은 부분 주소. URL 프래그먼트(예를 들어, "#section")나 사용자 정보(예를 들어 "https://username:password@example.com/foo/bar/" 에서 "username:password")는 포함되지 않습니다. 오리진, 패쓰, 쿼리스트링은 <a href="/ko/docs/Web/HTTP/Headers/Referrer-Policy#directives">referrer 정책</a>에 따라 포함될 수 있습니다.</dd> </dl> -<h2 id="예제">예제</h2> +<h2 id="Exapmels">예제</h2> -<pre>Referer: https://developer.mozilla.org/en-US/docs/Web/JavaScript</pre> +<pre> +Referer: https://developer.mozilla.org/en-US/docs/Web/JavaScript +Referer: https://example.com/page?q=123 +Referer: https://example.com/ +</pre> <h2 id="명세서">명세서</h2> @@ -66,12 +72,17 @@ translation_of: Web/HTTP/Headers/Referer </tbody> </table> -<h2 id="브라우저_호환성">브라우저 호환성</h2> +<h2 id="Browser_compatibility">브라우저 호완성</h2> -<p>{{Compat("http.headers.Referer")}}</p> +<p>{{Compat}}</p> -<h2 id="함께_참고할_내용">함께 참고할 내용</h2> +<h2 id="See_also">같이 보기</h2> <ul> - <li>{{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}</li> + <li>{{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}</li> + <li><a href="/ko/docs/Web/API/Fetch_API">Fetch</a>: {{domxref("Request.referrerPolicy")}}</li> + <li>outdated 된 {{HTTPHeader("Content-Security-Policy")}} {{HTTPHeader("Content-Security-Policy/referrer", "referrer")}} {{deprecated_inline}} 디렉티브</li> + <li><a href="/ko/docs/Web/Security/Same-origin_policy">Same-origin policy</a></li> + <li><a href="https://blog.mozilla.org/security/2015/01/21/meta-referrer/">Tighter Control Over Your Referrers – Mozilla Security Blog</a></li> </ul> + diff --git a/files/ko/web/javascript/a_re-introduction_to_javascript/index.html b/files/ko/web/javascript/a_re-introduction_to_javascript/index.html deleted file mode 100644 index 36950fca58..0000000000 --- a/files/ko/web/javascript/a_re-introduction_to_javascript/index.html +++ /dev/null @@ -1,1037 +0,0 @@ ---- -title: JavaScript 재입문하기 (JS 튜토리얼) -slug: Web/JavaScript/A_re-introduction_to_JavaScript -tags: - - CodingScripting - - Intermediate - - Intro - - JavaScript - - Learn - - Tutorial -translation_of: Web/JavaScript/A_re-introduction_to_JavaScript -original_slug: A_re-introduction_to_JavaScript ---- -<div>{{jsSidebar}}</div> - -<p>어째서 재입문일까요? 왜냐하면, <a href="/ko/docs/Glossary/JavaScript">JavaScript</a>는 <a class="external" href="http://javascript.crockford.com/javascript.html">세계에서 가장 오해받고 있는 프로그래밍 언어</a>로 악명이 높기 때문입니다. 종종 장난감같다고 조롱당하기도했지만, 이 거짓말같은 단순함 아래에는 몇 가지의 강력한 언어 기능이 숨어 있습니다. Javascript는 현재 엄청나게 많은, 요즘 가장 뜨고있는 애플리케이션들에 사용되고 있어서, 웹 또는 모바일 개발자 누구에게라도 이 기술에 대한 깊은 지식이 중요한 기량이 된다는 것을 보여주고 있습니다.</p> - -<p>이 이야기를 이해하는데는 이 언어의 역사를 먼저 보는 것이 도움이 됩니다. JavaScript는 1995년 Netscape의 엔지니어 Brendan Eich에 의해 만들어졌고, 1996년 초에 Netscape 2와 함께 처음 릴리즈 되었습니다. 이것은 원래 LiveScript로 불리기로 되어 있었습니다만 Sun Microsystem의 Java 언어의 성공에 편승해보려고 -두 언어 사이의 공통점이 매우 적음에도 불구하고- 불행이 예견된 마케팅 결정에 따라 이름이 바뀌게 됩니다. 이 결정은 역사상 유래가 없는 혼란의 근원이 되어버립니다.</p> - -<p>몇 달 후, Microsoft는 IE3와 함께 JScript를 발표했습니다. 이 JScript는 Javascript를 정말 닮았고 호환성이 좋았습니다. 몇 달 뒤에, Netscape는 1997년에 <a href="/ko/docs/Glossary/ECMAScript">ECMAScript</a> 표준의 첫번째 판이 되는 JavaScript를 유럽 표준화 단체인 <a class="external" href="http://www.ecma-international.org/">Ecma International</a>에 보냅니다. 이 표준은 1999년에 <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a>에 따라 큰 규모의 개정을 거친 후, 유례없이 아주 안정된 상태로 계속 유지되고 있습니다. <span style="line-height: 16.7999992370605px;">4번째 판은 중도 포기되었는데, 언어의 복잡성 증가에 관련한 정치적 문제 때문이었습니다. 이 4번째 판의 많은 파트들은 ECMAScript edition 5 (2009년 12월에 출간)와 6번째 개정판 규격(2015년에 출간)의 근간을 형성하고 있습니다. </span></p> - -<div class="note"> -<p> 이제부터는 ECMAScript를 우리에게 좀 더 친근한 말인 <span style="line-height: 16.7999992370605px;"> "</span>JavaScript"라고 부르겠습니다.</p> -</div> - -<p>대부분의 프로그래밍 언어와는 달리, JavaScript 언어는 입출력 개념이 없습니다. 이 언어는 호스트 환경 아래에서 스크립트 언어로서 동작하도록 디자인 되어있고, 따라서 외부 세계와 통신하기위해 호스트 환경이 제공하는 메커니즘에 의존합니다. 대부분의 경우 일반적인 호스트 환경은 브라우저이지만 JavaScript 인터프리터는 Adobe Acrobat, Photoshop, SVG images, Yahoo! 위젯 엔진 등의 제품에서도 발견할 수 있고, <a href="http://nodejs.org/">node.js</a> 와 같은 서버 측 환경에서도 찾을 수 있습니다. 하지만 JavaScript가 사용되는 분야는 계속 더 넓혀지고 있습니다. NoSQL 데이터베이스, <a href="http://couchdb.apache.org/">Apache CouchDB</a>, 임베디드 컴퓨터, GNU/Linux OS의 가장 유명한 GUI 인 <a href="http://www.gnome.org/">GNOME</a> 과 같은 데스크톱 환경에서도 JavaScript가 사용됩니다.</p> - -<h2 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h2> - -<p>JavaScript는 유형 및 연산자, 표준 내장 객체 및 메소드가 있는 다중 패러다임, 동적 언어입니다. 구문은 Java 및 C 언어를 기반으로합니다. 이러한 언어의 많은 구조가 JavaScript에도 적용됩니다. JavaScript는 클래스 대신 객체 프로토 타입을 사용하여 객체 지향 프로그래밍을 지원합니다 (<a href="/ko//docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">프로토 타입 상속</a> 및 ES2015 {{jsxref("Classes")}}). JavaScript는 함수형 프로그래밍도 지원합니다. 함수는 객체이며, 함수는 실행 가능한 코드를 유지하고 다른 객체와 마찬가지로 전달 될 수 있습니다.</p> - -<p>어떤 언어에서라도 기초가 되는 부분인 타입을 살펴보는 것부터 시작해봅시다. JavaScript 프로그램은 값을 다루고 해당 값은 모두 타입을 가지고 있습니다. JavaScript의 타입은 다음과 같습니다:</p> - -<ul> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Number">수 (Number)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/String">문자열 (String)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Boolean">부울 (Boolean)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Function">함수 (Function)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Object">객체 (Object)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Symbol">기호 (Symbol)</a> (ES2015에 새롭게 추가)</li> -</ul> - -<p>... 오, 그리고 약간 특별한 타입인 정의되지 않음(Undefined) 과 널(Null) 이 있습니다. 또한 객체의 특별한 종류인 <a href="ko/Web/JavaScript/Reference/Global_Objects/Array">배열(Array) 객체</a>. 그리고 자유롭게 사용할 수 있는 <a href="ko/Web/JavaScript/Reference/Global_Objects/Date">날짜(Date) 객체</a> 와 <a href="ko/Web/JavaScript/Reference/Global_Objects/RegExp">정규식(RegExp) 객체</a>가 있습니다. 그리고 기술적으로 정확히 말해 함수(Function)는 단지 객체의 특별한 타입으로 취급됩니다. 따라서 타입 구조도를 정리해보면 다음과 같습니다:</p> - -<ul> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Number">수 (Number)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/String">문자열 (String)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Boolean">부울 (Boolean)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Symbol">기호 (Symbol)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Object">객체 (Object)</a> - <ul> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Function">함수 (Function)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Array">배열 (Array)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Date">날짜 (Date)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/RegExp">정규식 (RegExp)</a></li> - </ul> - </li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/null">널 (Null)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/undefined">정의되지 않음 (Undefined)</a></li> -</ul> - -<p>그리고 또 몇 가지 <a href="ko/Web/JavaScript/Reference/Global_Objects/Error">오류</a> 타입이 내장되어 있습니다. 그렇지만 처음 구조도를 기억하고만 있으면 다른 것들도 아주 쉽게 이해할 수 있을 것입니다.</p> - -<h2 id=".EC.88.98_.28Numbers.29" name=".EC.88.98_.28Numbers.29">수 (Numbers)</h2> - -<p>설계 명세서에 의하면 JavaScript에서 수는 "이중정밀도 64비트 형식 IEEE 754 값"으로 정의됩니다. 이것은 몇가지 흥미로운 결과를 가져옵니다. JavaScript에는 <strong>정수와 같은 것이 존재하지 않으므로 </strong>({{jsxref("BigInt")}} 제외), 조금 조심해야 합니다. 이 예제를 보세요:</p> - -<pre class="syntaxbox notranslate">console.log(3 / 2); // 1이 아닌, 1.5 -console.log(Math.floor(3 / 2)); // 1</pre> - -<p><em>명백한 정수</em>는 사실 <em>암묵적으로 실수</em>입니다.</p> - -<p>또한, 다음과 같은 것들을 주의하세요:</p> - -<pre class="brush: js notranslate">0.1 + 0.2 = 0.30000000000000004 -</pre> - -<p>실제로 정수 값은 32 비트 정수로 처리되며 일부 구현은 32 비트 정수가 아닌 숫자에 유효한 명령어를 수행 할 때까지 이러한 방식으로 저장합니다. 이는 비트 단위 작업에 중요 할 수 있습니다.</p> - -<p>덧셈, 뺄셈, 계수 (또는 나머지) 연산을 포함하는 표준 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Arithmetic_Operators">산술 연산자</a>가 지원됩니다. 또한 앞에서 언급하는 것을 깜박 잊은 고급 수학 함수와 상수를 다루기 위한 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Math">수학(Math)</a>으로 불리는 내장 객체가 있습니다:</p> - -<pre class="brush: js notranslate">Math.sin(3.5); -var circumference = 2 * Math.PI * r;</pre> - -<p>내장 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Functions/parseInt">parseInt()</a></code> 함수를 사용하여 문자열을 정수로 변환할 수 있습니다. 이는 다음과 같이 옵션으로 주어지는 두번째 매개변수를 밑으로 하여 수행할 수 있습니다:</p> - -<pre class="brush: js notranslate">parseInt('123', 10); // 123 -parseInt('010', 10); // 10</pre> - -<p>구형 브라우저에서 "0"으로 시작하는 문자열은 8 진수 (기수 8)로 가정되지만, 2013 년 이후에는 그렇지 않습니다. 문자열 형식이 확실하지 않으면 이전 브라우저에서 놀라운 결과를 얻을 수 있습니다.</p> - -<pre class="brush: js notranslate">parseInt('010'); // 8 -parseInt('0x10'); // 16</pre> - -<p>이 같은 결과는 <code>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</code> 함수가 0으로 시작되는 문자열을 8진수로, "0x"로 시작하는 문자열은 16진수로 취급하기 때문에 발생합니다. 16진수 표기법이 그대로 유지됩니다. 8진수는 제거되었습니다.</p> - -<p>만약 이진수를 정수로 변환하고 싶다면, 밑을 바꾸기만하면 됩니다:</p> - -<pre class="brush: js notranslate">parseInt('11', 2); // 3 -</pre> - -<p>이와 비슷하게, 내장 함수 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}를 사용하여 부동 소수점 숫자를 파싱 할 수 있습니다. {{jsxref("Global_Objects/parseInt", "parseInt()")}}과 달리 parseFloat()는 항상 10진수를 사용합니다.</p> - -<p>단항 연산자 + 를 사용하여 값을 숫자로 변환 할 수도 있습니다:</p> - -<pre class="brush: js notranslate">+ '42'; // 42 -+ '010'; // 10 -+ '0x10'; // 16</pre> - -<p>문자열이 수가 아닌 경우 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/NaN">NaN</a></code> ("Not a Number" (수가 아님)을 줄인 약자)로 불리는 특별한 값을 돌려줍니다:</p> - -<pre class="brush: js notranslate">parseInt('hello', 10); // NaN -</pre> - -<p><code>NaN</code> 는 독성을 가지고 있습니다: 어떤 수학 연산의 입력값으로써 주어지면 그 결과는 역시 <code>NaN</code>가 되기 때문입니다:</p> - -<pre class="brush: js notranslate">NaN + 5; // NaN -</pre> - -<p>내장 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Functions/isNaN">isNaN()</a></code> 함수를 사용해서 <code>NaN</code> 인지 여부를 검사할 수 있습니다:</p> - -<pre class="brush: js notranslate">isNaN(NaN); // true -</pre> - -<p>JavaScript는 또 특별한 값 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/Infinity">Infinity</a></code>와 <code>-Infinity</code>를 가지고 있습니다:</p> - -<pre class="brush: js notranslate"> 1 / 0; // Infinity --1 / 0; // -Infinity</pre> - -<p>내장 함수 {{jsxref("Global_Objects/isFinite", "isFinite()")}}를 사용하여 Infinity, -Infinity 및 NaN 값을 테스트 할 수 있습니다.</p> - -<pre class="brush: js notranslate">isFinite(1 / 0); // false -isFinite(-Infinity); // false -isFinite(NaN); // false</pre> - -<div class="note"> -<p>{{jsxref("Global_Objects/parseInt", "parseInt()")}} 와 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 함수는 숫자로 아닌 문자가 나올때까지 문자열을 파싱하고, 그 지점까지 파싱된 숫자를 반환합니다. 그런데 "+"연산자는 중간에 유효하지 않은 문자가 있으면 그대로 문자열을 <code>NaN</code> 으로 그냥 변환해버립니다. console에서 "10.2abc"를 파싱해보면 어떤점이 다른지 더 쉽게 이해할 수 있습니다.</p> -</div> - -<h2 id=".EB.AC.B8.EC.9E.90.EC.97.B4_.28Strings.29" name=".EB.AC.B8.EC.9E.90.EC.97.B4_.28Strings.29">문자열 (Strings)</h2> - -<p>JavaScript에서 문자열은 <a href="ko/Core_JavaScript_1.5_Guide/Unicode">유니코드 문자들</a>이 연결되어 만들어진 것입니다. 이는 국제화(i18n, internationalization) 하려하는 누구에게라도 환영받을만한 소식입니다. 좀 더 정확히 말하자면, 각각이 16비트 숫자로 표현된 UTF-16 코드 유닛이 길게 이어져있는 것입니다. 각 유니코드 문자는 1개나 2개의 코드 유닛으로 표현됩니다.</p> - -<p>한 개의 문자를 나타내려면 길이가 1인 문자열을 사용하면 됩니다.</p> - -<p>문자열의 길이를 알고싶다면, 해당 문자열의 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/String/length">length</a></code> 속성(해당 객체가 소유하고 있는 성질을 나타내는 값)에 접근하면 됩니다:</p> - -<pre class="brush: js notranslate">'hello'.length; // 5 -</pre> - -<p>우리의 첫 JavaScript 객체입니다! 문자열도 역시 객체로 취급된다고 언급했던적이 있죠? 다음과 같이 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods">메소드</a>까지 있는 확실한 녀석입니다:</p> - -<pre class="brush: js notranslate">'hello'.charAt(0); // "h" -'hello, world'.replace('hello', 'goodbye'); // "goodbye, world" -'hello'.toUpperCase(); // "HELLO"</pre> - -<h2 id=".EC.9D.B4.EC.99.B8.EC.9D.98_.ED.83.80.EC.9E.85.EB.93.A4" name=".EC.9D.B4.EC.99.B8.EC.9D.98_.ED.83.80.EC.9E.85.EB.93.A4">이외의 타입들</h2> - -<p>JavaScript는 의도적으로 값이 없음을 가리키는 '객체' 타입의 객체인 <code>null</code>과 초기화되지 않은 값 — 아직 어떤 값도 주어지않은(할당되지않은) 변수임을 가리키는 '정의되지 않음' 타입의 객체인 <code>undefined</code>로 구분됩니다. 값에 대해서 나중에 언급할 것이지만 JavaScript에서 변수에 값을 주지않고 선언하는 것이 가능합니다. 이럴 경우, 변수의 타입은 <code>undefined</code>이 되는 것입니다.</p> - -<p>JavaScript는 <code>true</code> 와 <code>false</code> 값 (둘은 모두 키워드로 예약되어있는 값)을 가질 수 있는 부울 타입을 가지고 있습니다. 다음과 같은 규칙에 따라 어떤 임의의 값을 부울값으로 변환할 수 있습니다:</p> - -<ol> - <li><code>false</code>, <code>0</code>, 빈 문자열 (<code>""</code>), 수가 아님을 뜻하는 <code>NaN</code>, <code>null</code>, 와 <code>undefined</code>은 모두 <code>false</code>가 됩니다.</li> - <li>다른 모든 값은 <code>true</code>가 됩니다.</li> -</ol> - -<p>이 변환은 <code>Boolean()</code> 함수를 써서 명시적으로 이 작업을 수행하실 수 있습니다:</p> - -<pre class="brush: js notranslate">Boolean(''); // false -Boolean(234); // true</pre> - -<p>하지만 반드시 이렇게 할 필요는 거의 없습니다. JavaScript는 이러한 변환 작업을 <code>if</code> 문 (아래를 보세요)과 같이 부울값이 필요한 경우를 만나게되면 자동으로 사용자가 모르는 사이에 처리해버리기 때문입니다. 이러한 이유로 인해 우리는 가끔 부울 타입으로 변환되었을 때, <code>true</code>와 <code>false</code>이 됨을 의미하는 값들을 각각 "참 값"과 "거짓 값"으로 부를 것입니다. 또는 각각 "참으로 취급되다"와 "거짓으로 취급되다"라는 식으로 불릴 수도 있습니다.</p> - -<p>부울 연산자는 <code>&&</code> (논리적<em>와, 그리고</em> ), <code>||</code> (논리적<em>또는</em> ), 그리고 <code>!</code> (논리적<em>부정</em> )이 지원됩니다. 아래에서 다시 언급하겠습니다.</p> - -<h2 id=".EB.B3.80.EC.88.98_.28Variables.29" name=".EB.B3.80.EC.88.98_.28Variables.29">변수 (Variables)</h2> - -<p>JavaScript에서 새로운 변수는 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <code><a href="/ko/docs/Web/HTML/Element/var">var</a></code> 키워드로 선언됩니다.</p> - -<p><code>let</code>을 사용하면 블록 유효 범위 변수를 선언 할 수 있습니다. 선언 된 변수는 <em>변수가 포함 된 함수 블록</em>에서 사용할 수 있습니다.</p> - -<pre class="brush: js notranslate">let a; -let name = 'Simon';</pre> - -<p>아래는 let으로 선언한 변수가 가지는 유효 범위의 예제입니다. </p> - -<pre class="brush: js notranslate">// myLetVariable는 여기에서 보이지 *않습니다* - -for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { - // myLetVariable는 여기에서 유효합니다 -} - -// myLetVariable는 여기에서 보이지 *않습니다*</pre> - -<p><code>const</code>는 값이 변경되지 않는 변수를 선언 할 수 있게 합니다. 변수는 <em>변수가 선언 된 함수 블록</em>에서 사용할 수 있습니다.</p> - -<pre class="brush: js notranslate">const Pi = 3.14; // 변수 Pi 설정 -Pi = 1; // 상수로 설정된 변수는 변경 할 수 없기 때문에 애러 발생.</pre> - -<p><code>var</code>은 가장 일반적인 변수 선언 키워드입니다. <code>let</code>, <code>const</code> 키워드가 가지는 제한을 <code>var</code>은 갖지 않습니다. 이는 자바스크립트에서 변수를 선언하는 전통적인 유일한 방법이었기 때문입니다. <code>var</code> 키워드로 선언 된 변수는 <em>변수가 선언 된 함수 블록</em>에서 사용 할 수 있습니다.</p> - -<pre class="brush: js notranslate">var a; -var name = 'Simon';</pre> - -<p>var로 선언한 변수의 유효 범위 예제입니다.</p> - -<pre class="brush: js notranslate">// myVarVariable는 여기에서 사용 할 수 *있습니다* - -for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { - // myVarVariable는 함수 전체에서 사용 할 수 있습니다. -} - -// myVarVariable는 여기에서 사용 할 수 *있습니다*</pre> - -<p>변수에 값을 지정하지 않고 변수를 선언하면, 타입은 <code>undefined</code>로 지정 됩니다.</p> - -<p>자바스크립트와 자바 같은 다른 언어 사이의 중요한 차이점은 자바스크립트는 블록에 범위가 없다는 것입니다. 함수에만 범위가 있습니다. 변수가 복합 문에서 (예를 들어 <code>if</code> 제어 구조 내에서) var를 사용하여 정의 된 경우 전체 함수에서 볼 수 있습니다. 그러나 ECMAScript 2015부터 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 및 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/const">const</a></code> 선언을 사용하면 블록 범위 변수를 만들 수 있습니다.</p> - -<h2 id=".EC.97.B0.EC.82.B0.EC.9E.90_.28Operators.29" name=".EC.97.B0.EC.82.B0.EC.9E.90_.28Operators.29">연산자 (Operators)</h2> - -<p>JavaScript의 산술 연산자로는 <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>, <code>%</code>(나머지 연산자)가 있습니다. 값은 <code>=</code> 연산자로 할당할 수 있고, <code>+=</code> 와 <code>-=</code>처럼 다른 연산자를 같이사용해서 할당할 수 있습니다. 이렇게 쓰인 연산자는 <code>x = x<em>연산자</em> y</code>와 같은 결과를 나타냅니다.</p> - -<pre class="brush: js notranslate">x += 5; -x = x + 5; -</pre> - -<p><code>++</code> 와 <code>--</code> 를 각각 점진적인 증가와 감소에 사용할 수 있습니다. 이들은 또한 전처리 또는 후처리 연산자로 사용될 수 있습니다.</p> - -<p><a href="ko/Core_JavaScript_1.5_Reference/Operators/String_Operators"><code>+</code> 연산자</a>는 문자열 이어붙이기도 합니다:</p> - -<pre class="brush: js notranslate">'hello' + ' world'; // "hello world" -</pre> - -<p>문자열에 어떤 수 (또는 다른 값)를 더하면 일단 모두 문자열로 바뀌게 됩니다. 다음 예를 보시면 무슨 말씀인지 아실 수 있을겁니다:</p> - -<pre class="brush: js notranslate">'3' + 4 + 5; // "345" - 3 + 4 + '5'; // "75"</pre> - -<p>빈 문자열에 어떤 값을 더하는 것은 해당 값을 문자열로 바꾸는 요령입니다.</p> - -<p>JavaScript에서 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators">비교</a>는 <code><</code>, <code>></code>, <code><=</code> 와 <code>>=</code> 를 통해 가능합니다. 이 연산자들은 문자열과 수 양쪽 모두에서 동작합니다. 상동은 약간 직관성이 떨어지는데 이중 등호 (<code>==</code>) 연산자는 서로 다른 타입을 줄 경우 타입 강제 변환을 수행하기 때문에 다음과 같이 때때로 기대하지 않은 결과를 내보내기 때문입니다:</p> - -<pre class="brush: js notranslate">123 == '123'; // true -1 == true; // true -</pre> - -<p>타입 강제 변환을 하지 않게 하려면, 삼중 등호 연산자 (<code>===</code>)를 사용해야합니다:</p> - -<pre class="brush: js notranslate">123 === '123'; // false -1 === true; // false -</pre> - -<p>이와 비슷하게 <code>!=</code> 와 <code>!==</code> 연산자가 있습니다.</p> - -<p>JavaScript는 값을 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators">비트로 취급하는 연산자</a>도 가지고 있습니다. 사용하고 싶을 때 언제라도 사용할 수 있도록 말이죠.</p> - -<h2 id=".EC.A0.9C.EC.96.B4_.EA.B5.AC.EC.A1.B0" name=".EC.A0.9C.EC.96.B4_.EA.B5.AC.EC.A1.B0">제어 구조</h2> - -<p>JavaScript는 C 계열의 다른 언어들과 비슷한 제어 구조를 가지고 있습니다. 조건문은 <code>if</code> 와 <code>else</code>를 지원하는데, 원하시는대로 얼마든지 중첩 시켜서 사용할 수 있습니다:</p> - -<pre class="brush: js notranslate">var name = 'kittens'; -if (name == 'puppies') { - name += ' woof'; -} else if (name == 'kittens') { - name += ' meow'; -} else { - name += '!'; -} -name == 'kittens meow'; -</pre> - -<p>JavaScript는 <code>while</code> 반복문과 <code>do-while</code> 반복문도 사용할 수 있습니다. 첫번째 것은 단순 반복에 유용하게 사용할 수 있고, 두번째 것은 반복문이 반드시 적어도 한번이상 실행 되도록 하고 싶을 때 사용할 수 있습니다:</p> - -<pre class="brush: js notranslate">while (true) { - // 무한루프! -} - -var input; -do { - input = get_input(); -} while (inputIsNotValid(input)); -</pre> - -<p>JavaScript의 <code>for</code> 반복문은 C 와 Java의 반복문과 같습니다. 말하자면, 반복문에 필요한 제어 정보를 한 줄에 표현할 수 있다는 이야기지요.</p> - -<pre class="brush: js notranslate">for (var i = 0; i < 5; i++) { - // 내부 동작을 5번 반복합니다 -} -</pre> - -<p>JavaScript에는 두개의 중요한 for 반복문 또한 포함됩니다. 첫번째로 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> 입니다.</p> - -<pre class="brush: js notranslate">for (let value of array) { - // value로 작업을 실행합니다 -} -</pre> - -<p>그리고 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for...in">for ... in</a> 입니다.</p> - -<pre class="brush: js notranslate">for (let property in object) { - // object의 항목(property)으로 작업을 실행합니다 -} -</pre> - -<p><code>&&</code> 와 <code>||</code> 연산자는 첫번째 식을 평가한 결과에 따라서 두번째 식을 평가를 실행하는 단축평가(short-circuit) 논리를 사용합니다. 이는 다음과 같이 객체에 접근하기 전에 null 객체인지, 아닌지를 검사하는데 유용하게 사용될 수 있습니다:</p> - -<pre class="brush: js notranslate">var name = o && o.getName(); -</pre> - -<p>또는 (틀린값이 유효하지 않은 값일때) 캐싱 값에 대해서도 사용합니다.:</p> - -<pre class="brush: js notranslate">var name = cachedName || (cachedName = getName()); -</pre> - -<p>JavaScript는 한줄로 조건문을 쓸 수 있게 해주는 삼중 연산자도 가지고 있습니다:</p> - -<pre class="brush: js notranslate">var allowed = (age > 18) ? "yes" : "no"; -</pre> - -<p><code>switch</code> 문은 숫자나 문자열을 기반으로 다중 분기되는 문장을 작성하는데 사용될 수 있습니다:</p> - -<pre class="brush: js notranslate">switch(action) { - case 'draw': - drawIt(); - break; - case 'eat': - eatIt(); - break; - default: - doNothing(); -} -</pre> - -<p><code>break</code> 문장을 추가하지 않았다면, 다음 단계로 "넘어가서" 실행합니다. 이렇게 되는 것을 기대하는 것은 매우 드문경우 입니다. 실은 디버깅하는데 용이하도록 하기위해 주석으로서 일부러 붙여놓은 넘어가기 이름표 입니다:</p> - -<pre class="brush: js notranslate">switch(a) { - case 1: // fallthrough - case 2: - eatIt(); - break; - default: - doNothing(); -} -</pre> - -<p>default 구문의 적용은 선택사항입니다. switch와 case 부분에서 둘다 표현식을 사용할 수도 있습니다. switch부분과 case 부분의 표현식은 <code>===</code> 연산자로 비교됩니다.</p> - -<pre class="brush: js notranslate">switch(1 + 3){ - case 2 + 2: - yay(); - break; - default: - neverhappens(); -} -</pre> - -<h2 id=".EA.B0.9D.EC.B2.B4_.28Objects.29" name=".EA.B0.9D.EC.B2.B4_.28Objects.29">객체 (Objects)</h2> - -<p>JavaScript 객체는 간단히 이름-값 쌍(name-value pairs)의 모임입니다. 그렇기 때문에, JavaScript의 객체의 모임은 다음과 비슷하다고 할 수 있습니다:</p> - -<ul> - <li>Python의 Dictionaries</li> - <li>Perl 과 Ruby의 Hashes</li> - <li>C 와 C++ 의 Hash tables</li> - <li>Java 의 HashMaps</li> - <li>PHP의 Associative arrays</li> -</ul> - -<p>이 데이터 구조가 매우 광범위하게 사용된다는 사실은 활용 방도가 다양함을 입증합니다. JavaScript내 모든 것 (코어 타입들은 제외)은 객체로 취급되기 때문에 어떤 JavaScript 프로그램도 기본적으로 해쉬 테이블을 검색하는데 필요한 출중한 성능을 가지고 있습니다. 매우 빠르기 때문에 장점이 됩니다!</p> - -<p>값은 객체를 포함하여 아무 JavaScript 값이 될 수 있는 반면, "이름" 부분은 JavaScript 문자열 입니다. 이는 무작위적인 복잡성을 가지는 데이터 구조를 만들 수 있도록 해줍니다.</p> - -<p>빈 객체를 생성하는데 두가지 방법이 있습니다:</p> - -<pre class="brush: js notranslate">var obj = new Object(); -</pre> - -<p>와:</p> - -<pre class="brush: js notranslate">var obj = {}; -</pre> - -<p>이들은 의미적으로 동치입니다. 두번째 방법은 객체 리터럴 구문이라고 부르며 더 편리합니다. 객체 리터럴 구문은 JSON 구문의 핵심이며 이 방법을 사용한 코드를 더 많이 볼 수 있습니다.</p> - -<p>객체 리터럴 구문으로 객체의 전체적인 구조를 초기화 할 수 있습니다:</p> - -<pre class="brush: js notranslate">var obj = { - name: "Carrot", - "for": "Max", - details: { - color: "orange", - size: 12 - } -} -</pre> - -<p>속성에 연속적으로 접근할 수 있습니다:</p> - -<pre class="brush: js notranslate">obj.details.color; // orange -obj["details"]["size"]; // 12 -</pre> - -<p>아래 예제는 객체 프로토타입(<code>Person</code>)과 프로토타입의 인스턴스(<code>you</code>)를 생성합니다.</p> - -<pre class="brush: js notranslate">function Person(name, age) { - this.name = name; - this.age = age; -} - -// 객체를 정의한다 -var you = new Person('You', 24); -// "You"라는 이름의 24세인 새로운 사람을 생성중이다. -</pre> - -<p><strong>일단 생성되면</strong>, 객체의 속성에 다음의 두가지 방법들 중 한가지로 접근할 수 있습니다:</p> - -<pre class="brush: js notranslate">// dot 표기법 -obj.name = "Simon" -var name = obj.name; -</pre> - -<p>그리고...</p> - -<pre class="brush: js notranslate">// bracket 표기법 -obj["name"] = "Simon"; -var name = obj["name"]; -// key를 정의하기 위해 변수도 쓸수 있습니다. -var user = prompt('what is your key?') -obj[user] = prompt('what is its value?') -</pre> - -<p>이들은 의미적으로 역시 같습니다. 두번째 방법은 속성의 이름이 실행시간(run-time)에 계산될 수 있는 문자열로 주어집니다. 하지만 이방법을 사용하면 일부 JavaScript엔진과 압축기 최적화(minifier optimizations)를 적용할수 없습니다.또한 <a href="ko/Core_JavaScript_1.5_Reference/Reserved_Words">예약된 단어(키워드)</a>로 되어있는 이름으로 객체의 속성을 설정하거나 얻어낼 수 있습니다:</p> - -<pre class="brush: js notranslate">obj.for = "Simon"; // 구문 오류, for 가 예약된 단어(키워드)이기 때문에 -obj["for"] = "Simon"; // 정상 동작 -</pre> - -<div class="blockIndicator note"> -<p>ECMAScript 5 이래로, 예약어는 객체 항목의 이름으로 "덧붙임없이" 사용할수도 있습니다. 이말은 객체 리터럴을 정의할때 따옴표로 "둘러쌀" 필요가 없다는 의미입니다. ES5 <a href="http://es5.github.io/#x7.6.1">Spec</a>을 참고해 보십시오.</p> -</div> - -<p>객체나 프로토타입에 대한 좀더 상세한 내용은 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a> 을 참조하십시오. 객체 프로토타입과 객체 프로토타입 체인에 대한 설명은 <a href="/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">상속과 프로토타입 체인</a> 을 참조하십시오.</p> - -<div class="blockIndicator note"> -<p>ECMAScript 2015 이래로, 객체의 key는 생성시의 대괄호 표기법(bracket notation)으로 정의될수 있습니다. 그냥 <code>var userPhone = {}; userPhone[phoneType] = 12345</code>. 처럼 표기하는 방법 대신 <code>{[phoneType]: 12345}</code> 와 같은 사용법도 가능합니다.</p> -</div> - -<h2 id=".EB.B0.B0.EC.97.B4_.28Arrays.29" name=".EB.B0.B0.EC.97.B4_.28Arrays.29">배열 (Arrays)</h2> - -<p>JavaScript에서 배열은 실제로는 특별한 타입의 객체입니다. (숫자로 나타낸 속성은 자연스럽게 [] 구문만을 사용해서 접근하게 되므로) 일반 객체와 많이 비슷하게 동작하지만, 이 객체는 '<code>length</code>'라는 한가지 마법적인 속성을 가집니다. 이는 항상 배열에서 가장 큰 인덱스보다 하나 더 큰 값으로 존재합니다.</p> - -<p>배열을 생성하는 예전 방법은 다음과 같습니다:</p> - -<pre class="brush: js notranslate">var a = new Array(); -a[0] = "dog"; -a[1] = "cat"; -a[2] = "hen"; -a.length // 3 -</pre> - -<p>한가지 더 편리한 배열 표현 방법은 배열 리터럴을 사용하는 것입니다:</p> - -<pre class="brush: js notranslate">> var a = ["dog", "cat", "hen"]; -> a.length -3 -</pre> - -<p>배열 리터럴 끝에 콤마(",")를 꼬리로 남겨두는 것은 브라우저마다 다르게 처리하므로 그렇게 하지는 마시기 바랍니다.</p> - -<p><code>array.length</code> 는 배열에 들어있는 항목의 수를 반드시 반영하지는 않는다는 점을 주의하시기 바랍니다. 다음과 같은 경우를 고려해보겠습니다:</p> - -<pre class="brush: js notranslate">> var a = ["dog", "cat", "hen"]; -> a[100] = "fox"; -> a.length -101 -</pre> - -<p>기억해두세요 - 배열의 length 속성은 최대 인덱스에 하나를 더한 값일 뿐입니다.</p> - -<p>존재하지 않는 배열 인덱스를 참조하려고하면 다음과 같이 <code>undefined</code> 을 얻게됩니다:</p> - -<pre class="brush: js notranslate">> typeof(a[90]) -undefined -</pre> - -<p><code>[]</code> 와 <code>length</code>에 관한 위의 사항들을 감안하면 배열을 <code>for</code> 반복문으로 처리할 때 다음과 같은 방법으로 처리하실 수 있을 것입니다:</p> - -<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { - // a[i] 로 뭔가를 수행 -} -</pre> - -<p>ES2015는 배열과 같은 이터러블 객체를 위해 좀더 간결한 for...of 루프를 소개했습니다.</p> - -<pre class="brush: js notranslate">for (const currentValue of a) { - // currentValue 로 뭔가를 수행 -}</pre> - -<p>또한 for...in 루프를 이용하여 배열에 루프를 돌릴수도 있지만, 이 방법은 배열 요소를 반복하는게 아니라 배열 인덱스를 반복합니다. 뿐만 아니라, 누군가 <code>Array.prototype</code>에 새로운 속성을 추가하면, 그 속성들 또한 이런 루프로 반복됩니다. 따라서 이런 반복 형태는 배열에는 추천되지 않습니다.</p> - -<p>배열에 대한 또다른 반복방법은 ECMAScript 5에 추가된 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a> 입니다:</p> - -<pre class="brush: js notranslate">['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) { - // currentValue나 array[index]로 뭔가를 수행 -} -</pre> - -<p>배열에 항목 하나를 추가하길 원한다면 이렇게 하면 됩니다:</p> - -<pre class="brush: js notranslate">a.push(item);</pre> - -<p>배열은 몇가지 메서드가 제공됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array">배열 메서드에 대한 전체 문서</a>를 참조하십시오.</p> - -<table> - <thead> - <tr> - <th scope="col">메서드 이름</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>a.toString()</code></td> - <td>각 항목에 대한 <code>toString()</code>의 출력이 콤마로 구분된 한개의 문자열을 반환합니다.</td> - </tr> - <tr> - <td><code>a.toLocaleString()</code></td> - <td>각 항목에 대한 <code>toLocaleString()</code>의 출력이 콤마로 구분된 한개의 문자열을 반환합니다.</td> - </tr> - <tr> - <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td> - <td>item들이 덧붙여진 한개의 배열을 반환합니다.</td> - </tr> - <tr> - <td><code>a.join(sep)</code></td> - <td>배열의 값들을 <code>sep</code> 인자로 구분하여 합친 한개의 문자열로 변환합니다.</td> - </tr> - <tr> - <td><code>a.pop()</code></td> - <td>배열의 마지막 항목을 반환하면서 제거합니다.</td> - </tr> - <tr> - <td><code>a.push(item1, ..., itemN)</code></td> - <td>배열의 끝에 item들을 덧붙입니다.</td> - </tr> - <tr> - <td><code>a.shift()</code></td> - <td>배열의 첫번째 항목을 반환하면서 제거합니다.</td> - </tr> - <tr> - <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td> - <td>배열의 앞쪽에 item들을 덧붙입니다.</td> - </tr> - <tr> - <td><code>a.slice(start[, end])</code></td> - <td>배열의 일부분을 새배열로 반환합니다.</td> - </tr> - <tr> - <td><code>a.sort([cmpfn])</code></td> - <td>옵션으로 비교용도의 함수를 입력받습니다.</td> - </tr> - <tr> - <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td> - <td>배열의 일부분을 제거하고 다른 항목으로 대체하여 배열을 변경합니다..</td> - </tr> - <tr> - <td><code>a.reverse()</code></td> - <td>배열의 순서를 거꾸로 배열합니다.</td> - </tr> - </tbody> -</table> - -<h2 id=".ED.95.A8.EC.88.98_.28Functions.29" name=".ED.95.A8.EC.88.98_.28Functions.29">함수 (Functions)</h2> - -<p>객체와 마찬가지로, 함수는 JavaScript를 이해하는데 핵심이 되는 컴포넌트입니다. 가장 기본적인 함수의 예는 다음과 같습니다:</p> - -<pre class="brush: js notranslate">function add(x, y) { - var total = x + y; - return total; -} -</pre> - -<p>이 예는 기본 함수에 대해 알아야 할 모든 것을 보여주고 있습니다. JavaScript 함수는 0 이상의 이름이 있는 매개변수를 가질 수 있습니다. 함수의 본체는 갯수 제한없이 구문을 포함할 수 있고 해당 함수에 지역적으로 변수를 보유하도록 선언할 수 있습니다. <code>return</code> 문은 언제나 값을 돌려주고 함수의 실행을 끝내는데 사용될 수 있습니다. 리턴 문이 없으면 (혹은 값이 없는 리턴이 사용되면), JavaScript는 <code>undefined</code>을 돌려줍니다.</p> - -<p>이름 붙여진 매개변수들은 다른 어떤 것보다도 해당 함수가 어떤 함수인지 설명해주는 좋은 역할을 할 수 있습니다. 해당 함수가 원하는 매개변수를 주지않고 함수를 호출할 수 있지만 그럴 경우 해당 변수들은 <code>undefined</code>로 설정됩니다.</p> - -<pre class="brush: js notranslate">add(); //NaN -// undefined에 대해 덧셈을 수행할 수 없습니다 -</pre> - -<p>함수가 기대하는 원래의 매개변수보다 많은 매개변수를 넘겨줄 수도 있습니다:</p> - -<pre class="brush: js notranslate">add(2, 3, 4); // 5 -// 처음의 두 수가 더해집니다. 4는 무시됨 -</pre> - -<p>이 예는 조금 어리석어 보이지만, 함수는 추가적으로 주어진 매개변수를 함수 내부에서 접근할수 있습니다. 이 객체는 <a href="ko/Core_JavaScript_1.5_Reference/Functions/arguments"><code>arguments</code></a>라고 하며, 해당 함수에 매개변수로 넘겨진 모든 값을 가지고 있는 배열과 비슷한 객체입니다. 우리가 원하는만큼 값을 취하는 add 함수를 다시 써보겠습니다:</p> - -<pre class="brush: js notranslate">function add() { - var sum = 0; - for (var i = 0, j = arguments.length; i < j; i++) { - sum += arguments[i]; - } - return sum; -} - -add(2, 3, 4, 5); // 14 -</pre> - -<p>확실히 <code>2 + 3 + 4 + 5</code>를 직접쓰는 것보다 유용한 함수는아닙니다. 평균계산 함수를 만들어 보겠습니다:</p> - -<pre class="brush: js notranslate">function avg() { - var sum = 0; - for (var i = 0, j = arguments.length; i < j; i++) { - sum += arguments[i]; - } - return sum / arguments.length; -} - -avg(2, 3, 4, 5); // 3.5 -</pre> - -<p>이건 매우 유용합니다만, 좀 번잡해보입니다. 코드 크기를 다소 줄이기 위해, arguments 배열의 사용을 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest 파라미터 문법</a>으로 대체해볼 필요가 있습니다. 이 방법으로, 코드 크기는 최소한으로 유지 하면서, 갯수 제한없이 함수로 인자를 전달할수 있습니다. <strong>Rest 파라미터 연산자</strong>는 다음과 같은 포맷(<strong>...variable</strong>)으로 함수 파라미터 목록에 사용됩니다. 이 varaible 인자는 함수가 호출될때 전달되는 모든 인자를 포함합니다. variable 인자에서 반환되는 값을 사용하기 위해 위 코드에서 <strong>for</strong> 루프를 <strong>for..of</strong> 루프로 변경합니다.</p> - -<pre class="brush: js notranslate">function avg(...args) { - var sum = 0; - for (let value of args) { - sum += value; - } - return sum / arr.length; -} - -avg(2, 3, 4, 5); // 3.5 -</pre> - -<div class="blockIndicator note"> -<p>위 코드에서,변수 <strong>args</strong> 는 함수로 전달된 모든 값을 가지고 있습니다.<br> - <br> - rest 파라미터 연산자가 함수 선언의 어느곳에 위치하든 선언 위치<em> 이후</em>에 모든 인자를 저장하는것이며, 이전이 아니라는 것이 중요합니다. 즉 ,<em> function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em><strong> </strong>에서 함수로 전달된 첫번째 값은 <strong>firstValue </strong>변수에 저장되며, 남은 변수들은 <strong>args</strong>에 저장됩니다.</p> -</div> - -<p>이건 또다른 유용한 언어 특성입니다만 우리를 새로운 문제점으로 인도합니다. <code>avg()</code> 함수는 콤마로 구분된 인자목록을 받지만, 배열의 평균을 알고싶은 경우라면요? 함수를 다음과 같이 재작성 하면 됩니다 :</p> - -<pre class="notranslate">function avgArray(arr) { - var sum = 0; - for (var i = 0, j = arr.length; i < j; i++) { - sum += arr[i]; - } - return sum / arr.length; -} - -avgArray([2, 3, 4, 5]); // 3.5</pre> - -<p>하지만 우리가 이미 만든 함수를 다시 사용할 수 있다면 좋을 것입니다. 운이 좋게도 JavaScript는 함수 객체라면 모두 가지게 되는 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply"><code>apply()</code></a> 메소드를 사용해서 임의의 매개변수 배열을 함수에 넘겨줄 수 있습니다.</p> - -<pre class="brush: js notranslate">> avg.apply(null, [2, 3, 4, 5]) -3.5 -</pre> - -<p><code>apply()의 </code>두번째 매개변수는 '매개변수들'로 사용하고자 하는 배열입니다. 첫번째 매개변수는 나중에 설명하도록 하겠습니다. 이는 함수가 역시 객체임을 명확히 해주는 사실입니다.</p> - -<div class="blockIndicator note"> -<p>함수 호출시 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator">전개 연산자(spread operator)</a> 를 이용하여 똑같은 결과를 얻을수 있습니다.</p> - -<p>예를 들면: <code>avg(...numbers)</code></p> -</div> - -<p>JavaScript는 익명의 함수를 만들 수 있도록 허용하고 있습니다.</p> - -<pre class="brush: js notranslate">var avg = function() { - var sum = 0; - for (var i = 0, j = arguments.length; i < j; i++) { - sum += arguments[i]; - } - return sum / arguments.length; -} -</pre> - -<p>이것은 의미적으로 <code>function avg()</code> 형식과 같습니다. 이 특징은 매우 강력한데, 일반적인 표현식(expression)을 사용할 수있는 어디에서나 완전한 함수 정의를 넣을 수 있도록 허용하는 것이기 때문입니다. 이 특징은 다양한 요령을 부릴 수 있게합니다. 다음 예는 C에서 블록 유효 범위를 적용 시킨 것 처럼 지역 변수를 "숨기는" 요령을 보여줍니다:</p> - -<pre class="brush: js notranslate">var a = 1; -var b = 2; - -(function() { - var b = 3; - a += b; -})(); - -a; // 4 -b; // 2 -</pre> - -<p>JavaScript는 재귀적으로 함수를 부를 수 있습니다. 이는 브라우저 DOM 등에서 볼수 있는 트리 구조를 다루는데 유용합니다.</p> - -<pre class="brush: js notranslate">function countChars(elm) { - if (elm.nodeType == 3) { // TEXT_NODE - return elm.nodeValue.length; - } - var count = 0; - for (var i = 0, child; child = elm.childNodes[i]; i++) { - count += countChars(child); - } - return count; -} -</pre> - -<p>다음의 예는 익명 함수를 사용함에 있어 잠재적인 문제점을 보여줍니다: 이름이 없으면 어떻게 재귀적으로 부를 수 있을까요? JavaScript는 함수 표현식을 이렇게 이름붙이도록 지원합니다. 이름붙은 IIFEs (Immediately Invoked Function Expressions: 즉시 실행 함수 표현) 를 다음과 같이 사용할 수 있습니다:</p> - -<pre class="brush: js notranslate">var charsInBody = (function counter(elm) { - if (elm.nodeType == 3) { // TEXT_NODE - return elm.nodeValue.length; - } - var count = 0; - for (var i = 0, child; child = elm.childNodes[i]; i++) { - count += counter(child); - } - return count; -})(document.body); -</pre> - -<p>위와 같이 함수 표현식에 제공된 이름은 함수 자체 범위에서만 유효합니다. 이 특징은 엔진에 의한 최적화뿐만 아니라 코드 가독성을 높이는데 도움을 줍니다. 이 이름은 디버거와 스택 추적에서도 나타나므로 디버깅시간을 줄일수 있게합니다.</p> - -<p>JavaScript 함수는 - JavsScript 내의 다른 모든 것들과 마찬가지로 - 그 자체가 객체이며, 객체 섹션에서 이미 확인한 것처럼, 속성을 추가하거나 변경할수 있다는 점을 명심하십시오</p> - -<h2 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_.EA.B0.9D.EC.B2.B4" name=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_.EA.B0.9D.EC.B2.B4">사용자 정의 객체</h2> - -<div class="blockIndicator note"> -<p>JavaScript에서 객체 지향 프로그래밍에 대한 더 자세한 논의는 <a href="/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">객체 지향 JavaScript 소개</a>를 참조하십시오.</p> -</div> - -<p>고전 객체지향 프로그래밍에서 객체는 데이터와 해당 데이터들을 다루는 메소드의 집합이었습니다. JavaScript는 프로토타입 기반 언어로, C++ 이나 Java에서 발견할 수 있는 class 구문이 없습니다(이런 이유로 class 구문에 익숙한 프로그래머들이 때때로 혼란을 경험합니다). 그 대신, JavaScrip는 function을 class로 사용합니다. 이름과 성을 필드로 가지고 있는 'person' 객체를 고려해보도록 합시다. 이름을 표시하는 두가지 방법이 있을 수 있습니다. 예를 들어, "이름 성" 또는 "성, 이름" 이런 식으로 말이죠. 이전에 다룬 함수와 객체를 사용해서 이를 표현하면 다음과 같습니다:</p> - -<pre class="brush: js notranslate">function makePerson(first, last) { - return { - first: first, - last: last - } -} -function personFullName(person) { - return person.first + ' ' + person.last; -} -function personFullNameReversed(person) { - return person.last + ', ' + person.first -} - -var s = makePerson("Simon", "Willison"); -personFullName(s); // "Simon Willison" -personFullNameReversed(s); // "Willison, Simon" -</pre> - -<p>이렇게 하면 작동하긴 하지만, 보기 안좋습니다. 이런 방법이라면 전역 이름공간(global namespace)에 관련 함수가 너무 많아집니다. 정말 우리에게 필요한 것은 객체에 함수를 붙여놓는 것입니다. 함수는 객체이기 때문에 이건 별로 어렵지 않습니다.</p> - -<pre class="brush: js notranslate">function makePerson(first, last) { - return { - first: first, - last: last, - fullName: function() { - return this.first + ' ' + this.last; - }, - fullNameReversed: function() { - return this.last + ', ' + this.first; - } - }; -} - -var s = makePerson('Simon', 'Willison'); -s.fullName(); // "Simon Willison" -s.fullNameReversed(); // "Willison, Simon" -</pre> - -<p><code><a href="ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator">this</a></code> 키워드에 주목해 주십시오. 함수 안쪽에서 사용되면서, <code>this</code>는 현재 객체를 참조합니다. 그것이 실제로 의미하는 바는 당신이 부른 바로 그 함수를 지정하는 것입니다. 객체에서 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Member_Operators">dot 표기법이나 bracket 표기법</a>을 사용해서 부른 경우, 해당 객체는 <code>this</code>가 됩니다. 해당 호출에서 dot 표기법을 사용하지 않은 경우, <code>this</code>는 전역 객체를 참조하게 됩니다.</p> - -<p><code>this</code>가 실수의 잦은 원인이 된다는 것을 명심하십시오 . 예를 들면:</p> - -<pre class="brush: js notranslate">var s = makePerson('Simon', 'Willison'); -var fullName = s.fullName; -fullName(); // undefined undefined -</pre> - -<p><code>s.fullName()</code>을 이용하지 않고 <code>fullName()</code>을 단독으로 호출하면, '<code>this</code>'는 전역 객체로 묶이게(bind) 됩니다. <code>first</code> 또는 <code>last</code> 로 명명된 전역 변수가 없기 때문에, 각각에 대해 <code>undefined</code> 결과를 얻게됩니다.</p> - -<p><code>makePerson</code> 함수를 개선하는데 '<code>this</code>' 키워드의 이점을 취할 수 있습니다:</p> - -<pre class="brush: js notranslate">function Person(first, last) { - this.first = first; - this.last = last; - this.fullName = function() { - return this.first + ' ' + this.last; - }; - this.fullNameReversed = function() { - return this.last + ', ' + this.first; - }; -} -var s = new Person('Simon', 'Willison'); -</pre> - -<p>여기서 <code><a href="ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new</a></code>라는 또다른 키워드를 도입했습니다. <code>new</code>는 <code>this</code>와 깊게 연관되어 있습니다. 새로운 빈 객체를 만든 다음 지정된 함수를 불러 새로운 객체를 <code>this</code> 에 설정합니다. <code>this</code>로 지정된 함수는 값을 반환하지 않고 단지 <code>this</code> 객체를 수정한다는 것을 명심하세요. <code>this</code> 객체를 호출하는 곳으로 반환하는 것은 <code>new</code> 입니다. '<code>new</code>' 에 의해 호출되도록 설계된 함수는 컨스트럭터 함수라고 불립니다. 일반적으로 이러한 함수의 첫자를 대문자로 써서 <code>new</code>로 불릴 컨스트럭터 함수임을 나타냅니다.</p> - -<p>개선된 함수는 여전히 <code>fullName()</code> 을 단독으로 호출할 때의 함정이 존재합니다.</p> - -<p>우리의 person 객체가 점점 개선되고 있지만, 아직 좀 보기 안좋은 면이 있습니다. 매번 person 계열의 객체를 만들 때마다 내부에서 2개의 새로운 함수 객체를 만들고 있습니다. 이 코드가 객체간에 공유된다면 더 낫지 않을까요?</p> - -<pre class="brush: js notranslate">function personFullName() { - return this.first + ' ' + this.last; -} -function personFullNameReversed() { - return this.last + ', ' + this.first; -} -function Person(first, last) { - this.first = first; - this.last = last; - this.fullName = personFullName; - this.fullNameReversed = personFullNameReversed; -} -</pre> - -<p>더 좋아 보이네요: 메소드 함수를 한번만 만들고, 컨스트럭터 내에 해당 메소드들을 참조하도록 할당합니다. 이보다 더 개선 할 수 있을까요? 네, 그렇게 할 수 있습니다:</p> - -<pre class="brush: js notranslate">function Person(first, last) { - this.first = first; - this.last = last; -} -Person.prototype.fullName = function() { - return this.first + ' ' + this.last; -}; -Person.prototype.fullNameReversed = function() { - return this.last + ', ' + this.first; -}; -</pre> - -<p><code>Person.prototype</code>은 모든 <code>Person</code> 인스턴스들간에 공유되는 객체입니다. 이는 lookup(찾아보기) 체인의 한 부분을 이룹니다. (이건 "prototype chain"이라는 특수한 이름을 따로 가지고 있습니다) 다시 말해, <code>Person</code> 객체의 설정되지 않은 속성에 접근을 시도할 때마다, 그것의 대체용도로 JavaScript는 <code>Person.prototype</code>에 그 속성이 존재하는지 살펴봅니다.그 결과, <code>Person.prototype</code>에 할당된 모든 것은 <code>this</code> 객체를 통해 해당 컨스트럭터에 속한 모든 인스턴스들간에 사용 가능하게 됩니다.</p> - -<p>이것은 정말 강력한 도구입니다. JavaScript에서는 임의의 prototype을 프로그램 내에서 언제든 변형할 수 있습니다. 이미 존재하는 객체에 추가적인 메소드를 실시간으로 추가가할 수 있다는 이야기입니다:</p> - -<pre class="brush: js notranslate">var s = new Person("Simon", "Willison"); -s.firstNameCaps(); //TypeError on line 1: s.firstNameCaps is not a function - -Person.prototype.firstNameCaps = function() { - return this.first.toUpperCase() -}; -s.firstNameCaps(); // "SIMON" -</pre> - -<p>흥미롭게도, JavaScript의 빌트인 객체의 prototype에도 뭔가를 더 추가할 수 있습니다. <code>String</code> 객체에 문자열 순서를 거꾸로 배열하여 돌려주는 메소드를 추가해 봅시다.</p> - -<pre class="brush: js notranslate">var s = "Simon"; -s.reversed(); // TypeError on line 1: s.reversed is not a function - -String.prototype.reversed = function() { - var r = ""; - for (var i = this.length - 1; i >= 0; i--) { - r += this[i]; - } - return r; -}; - -s.reversed(); // nomiS -</pre> - -<p>우리가 추가한 새로운 메소드는 심지어 문자열 상수에서도 동작합니다!</p> - -<pre class="brush: js notranslate">"This can now be reversed".reversed(); // desrever eb won nac sihT -</pre> - -<p>기존에 언급한 바와같이, prototype은 체인의 한 부분을 이룹니다. 해당 체인의 루트는 <code>Object.prototype</code> 이며 <code>toString()</code> 메소드를 포함합니다. 이 메소드는 객체를 문자열로 나타내려할 때 호출됩니다. 이 메소드는 우리의 <code>Person</code> 객체의 디버깅에 유용합니다:</p> - -<pre class="brush: js notranslate">var s = new Person("Simon", "Willison"); -s.toString(); // [object Object] - -Person.prototype.toString = function() { - return '<Person: ' + this.fullName() + '>'; -} - -s.toString(); // "<Person: Simon Willison>" -</pre> - -<p><code>avg.apply()</code>의 첫번째 매개변수가 null 이었던걸 기억해봅시다. <code>apply()</code>에 적용되는 첫번째 인자는 당연히 `<code>this</code>'로 간주되는 객체입니다. 여기에 <code>new</code> 의 간단한 구현을 보시죠:</p> - -<pre class="brush: js notranslate">function trivialNew(constructor, ...args) { - var o = {}; // 빈 객체를 생성 - constructor.apply(o, args); - return o; -} -</pre> - -<p>이것은 prototype 체인을 설정하지 않으므로 <code>new</code>의 완벽한 대체물이 될 수 없습니다.(이 부분은 설명하기 어렵습니다). 이 내용은 자주 사용하지는 않겠지만 알아두면 좋습니다. 이 부분에서 <code>...args</code> (생략 부호를 포함해서)는 "<a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>" 라고 불립니다. 이름이 암시하는 것처럼 매개변수의 나머지를 포함합니다.</p> - -<p>그러므로 이렇게 호출하는 것은</p> - -<pre class="notranslate">var bill = trivialNew(Person, 'William', 'Orange');</pre> - -<p>아래와 거의 동일합니다.</p> - -<pre class="notranslate">var bill = new Person('William', 'Orange');</pre> - -<p><code>apply()</code> 와 비슷하게 <code>this</code>를 다시 설정할 수 있게 하는, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>이라는 이름의 자매 함수가 있는데, 인자로 단일 배열이 아니라 확장된 인자 목록을 입력받습니다.</p> - -<pre class="brush: js notranslate">function lastNameCaps() { - return this.last.toUpperCase(); -} -var s = new Person('Simon', 'Willison'); -lastNameCaps.call(s); -// 위의 구문은 다음과 같습니다: -s.lastNameCaps = lastNameCaps; -s.lastNameCaps(); -</pre> - -<h3 id=".EB.82.B4.EC.9E.A5_.ED.95.A8.EC.88.98" name=".EB.82.B4.EC.9E.A5_.ED.95.A8.EC.88.98">내장 함수 (Inner functions)</h3> - -<p>다른 함수의 내부에서 JavaScript 함수를 선언할 수 있습니다. 우리는 <code>makePerson()</code> 함수 초기 버전에서 이것을 한번 본적이 있습니다. JavaScript에서 중첩 함수(nested functions)의 중요한 세부사항은 부모 함수 범위의 변수에 접근할 수 있다는 사실입니다:</p> - -<pre class="brush: js notranslate">function parentFunc() { - var a = 1; - - function nestedFunc() { - var b = 4; // parentFunc은 사용할 수 없는 변수 - return a + b; - } - return nestedFunc(); // 5 -} -</pre> - -<p>좀 더 유지관리가 쉬운 코드를 작성하고자 할때 이 특성이 굉장히 유용합니다. 한개 혹은 두개의 정도의 함수에서만 호출되며 전체 코드중 다른 부분에서는 사용처가 없는 함수라면 그 함수내에 해당 함수를 중첩시키는 것이 좋습니다. 이렇게 전역 범위 함수의 갯수를 늘리지 않도록 하는 것은 언제나 좋은 습관입니다.</p> - -<p>이것은 또한 전역 변수에 대한 유혹을 뿌리칠 수 있는 좋은 대안이 됩니다. 복잡한 코드를 쓸 때, 다양한 함수들간에 값을 공유할 수 있도록 전역 변수를 사용하고 싶어집니다 - 전역 변수는 코드 유지 보수를 어렵게 만듭니다. 중첩 함수는 그 부모 함수의 범위에서 변수를 공유할 수 있으므로, 이 방법을 사용하면 전역 변수 이름공간을 건드리지 않고도 적절한 경우에 함수들을 연동시킬수 있습니다. - '지역 전역'이라고 불러도 괜찮겠네요. 이 기술을 사용할 때는 주의를 요하겠지만, 반드시 알아둬야할 유용한 기술입니다.</p> - -<h2 id=".ED.8F.90.ED.8F.AC_.28Closures.29" name=".ED.8F.90.ED.8F.AC_.28Closures.29">클로져 (Closures)</h2> - -<p>클로져 (역자주: 글자 그대로 한국어로 해석하면 닫힌 주머니)는 JavaScript가 제공해야만 하는 가장 막강한 추상 개념으로 우리를 이끕니다 - 하지만 동시에 잠재적으로 가장 혼란스럽기도 합니다. 다음 함수는 무엇을 하는 걸까요?</p> - -<pre class="brush: js notranslate">function makeAdder(a) { - return function(b) { - return a + b; - }; -} -var add5 = makeAdder(5); -var add20 = makeAdder(20); -add5(6); // ? -add20(7); // ? -</pre> - -<p><code>makeAdder</code> 함수의 이름은 다음과 같은 과정을 거쳐 반드시 없어집니다: 해당 함수가 한 매개변수를 받아 호출됐을 때, 생성될 때 주어진 매개변수를 더하는 새 'adder' 함수를 생성합니다.</p> - -<p>여기서 일어나는 일은 다른 함수의 내에 정의된 어떤 함수가 외부 함수의 변수에 액세스한다는 점에서 앞에 언급한 내장 함수에서 일어나는 일과 매우 비슷합니다. 한가지 다른 점은 외부 함수가 리턴 된다는 점인데, 상식적으로 그것에 들어 있는 변수는 사라진다고 볼 수 있습니다. 하지만 그들은 여전히<em>존재합니다</em> - 그렇지 않으면 adder 함수는 동작하지 않겠지요. 게다가, <code>makeAdder</code> 지역 변수의 서로 다른 두 "복사본"이 존재합니다 - 하나의 <code>a</code>는 5이고, 다른 하나의 <code>a</code>는 20이죠. 따라서 해당 함수를 부른 결과는 다음과 같습니다:</p> - -<pre class="brush: js notranslate">x(6) // 11을 돌려줌 -y(7) // 27을 돌려줌 -</pre> - -<p>이건 실제로 일어나는 일입니다. JavaScript 함수가 실행될 때는 언제나, '범위' 객체가 생성되어 해당 함수내에서 생성된 지역 변수를 여기에 저장하고 있습니다. 함수 매개변수로서 넘겨진 어떤 변수라도 여기에 초기값으로 저장하고 있습니다. 이것은 모든 전역 변수와 함수가 들어있는 전역 객체와 비슷하지만, 두가지 중요한 차이점이 있습니다. 첫번째로, 함수가 실행될 때마다 새로운 범위 객체가 생성된다는 점과, 두번째로, (브라우저에서 window로 접근가능한) 전역 객체와 달리 범위 객체는 JavaScript 코드에서 직접적으로 액세스할 수 없다는 점입니다. 예를 들자면 현재 범위 객체의 속성에 반복 접근할 수 있는 수단이 없습니다.</p> - -<p>따라서 <code>makeAdder</code> 가 호출되면, 범위 객체는 <code>makeAdder</code> 함수에 매개변수로 넘겨진 하나의 속성 <code>a</code>를 가진 상태로 생성됩니다. 일반적으로 JavaScript의 가비지 컬렉터가 이때 <code>makeAdder</code>에 의해 생성된 범위 객체를 청소해야겠지만, 리턴된 함수가 여전히 범위 객체를 참조하고 있습니다. 결과적으로 범위 객체는 <code>makeAdder</code>에 의해 리턴된 함수 객체가 더는 참조되지 않을 때까지 가비지 컬렉터에 의해 정리되지 않게됩니다.</p> - -<p>범위 객체는 JavaScript 객체 체계에서 사용되는 prototype 사슬과 비슷한 범위 사슬이라고 불리는 사슬을 형성합니다.</p> - -<p>클로져는 함수와 함수에 의해 생성되는 범위 객체를 함께 지칭하는 용어입니다.</p> - -<p>또한 클로져는 상태를 저장할 수 있도록 허용합니다 - 그렇기 때문에, 객체의 내부에서 자주 사용될 수 있는 것입니다.</p> - -<h3 id=".EB.A9.94.EB.AA.A8.EB.A6.AC_.EB.88.84.EC.B6.9C" name=".EB.A9.94.EB.AA.A8.EB.A6.AC_.EB.88.84.EC.B6.9C">메모리 누출</h3> - -<p>클로져의 부작용은 Internet Explorer에서 심각하지는 않지만 쉽게 메모리 누출이 된다는 것입니다. JavaScript는 가비지 컬렉트를 하는 언어 입니다. 객체가 생성됨에 따라서 메모리가 할당되고, 사용하고난 메모리는 더 참조하는 다른 객체가 없을 때 되돌아가는 방식으로 동작하는 언어란 말이죠. 호스트 환경에서 제공되는 객체들은 해당 환경에 의해 다뤄집니다.</p> - -<p>브라우저 호스트는 HTML 페이지에 <a href="ko/DOM">DOM</a> 객체로서 표현되어있는 많은 수의 객체를 다뤄야 합니다. 이 객체들을 어떻게 할당하고 다시 거둬들일지는 브라우저 책임이죠.</p> - -<p>Internet Explorer는 이를 위해 자신만의 고유한, JavaScript의 그것과는 다른 가비지 컬렉션 방식을 사용합니다. 두 언어간에 상호작용이 일어날 수 있고 이 과정에서 메모리 누출이 발생할 수 있습니다.</p> - -<p>IE에서 메모리 누출은 JavaScript 객체와 고유 객체간에 참조하는 중 자기 자신을 참조 (circular reference, 순환 참조)하게 되는 일이 발생할 경우라면 언제든지 발생하게 됩니다. 다음을 고려해 보도록 합시다:</p> - -<pre class="brush: js notranslate">function leakMemory() { - var el = document.getElementById('el'); - var o = { 'el': el }; - el.o = o; -} -</pre> - -<p>위의 코드는 순환 참조로서 메모리 누출을 일으킵니다. IE는 완전히 다시 시작되기 전까지는 <code>el</code>와 <code>o</code>에 의해 사용되는 메모리를 반환하지 못합니다.</p> - -<p>위의 경우는 알아채지 못하고 지나갈 확률이 높습니다. 메모리 누출은 사실 오랫동안 실행되거나 큰 데이터 구조나 반복, 순환에 의해 누출된는 메모리 양이 많은 경우에서 실질적으로 고려할만한 가치가 생깁니다.</p> - -<p>누출이 이처럼 명확한 경우는 드뭅니다. 누출을 일으키는 데이터 구조는 수차례에 걸친 참조 구조를 가지고 있어서 순환 참조를 하고있는지 명확하지 않은 경우가 더 많습니다.</p> - -<p>클로져는 그렇게 되도록 하지않아도 간단하게 메모리 누출을 일으킬 수 있습니다. 다음을 고려해 봅시다:</p> - -<pre class="brush: js notranslate">function addHandler() { - var el = document.getElementById('el'); - el.onclick = function() { - this.style.backgroundColor = 'red'; - } -} -</pre> - -<p>위의 코드는 클릭했을때 배경색이 빨강으로 바뀌는 엘레멘트를 설정합니다. 그리고 메모리 누출도 일으킵니다. 어째서냐고요? <code>el</code>을 참조하면 의도와는 달리 익명 내부 함수 때문에 생성된 클로져 내에 붙잡혀 있게 되기 때문입니다. 이는 JavaScript 객체 (내부 함수)와 원시 객체 (<code>el</code>)간에 순환 참조를 만듭니다.</p> - -<p>이 문제를 피할 수 있는 많은 방법이 있습니다. 가장 간단한 건 이겁니다:</p> - -<pre class="brush: js notranslate">function addHandler() { - var el = document.getElementById('el'); - el.onclick = function() { - this.style.backgroundColor = 'red'; - } - el = null; -} -</pre> - -<p>이렇게 하면 순환 참조 고리를 끊을 수 있습니다.</p> - -<p>놀랍게도, 클로져에 의해 발생된 순환 참조를 고리를 끊기 위한 한 요령은 또다른 클로져를 추가하는 것입니다:</p> - -<pre class="brush: js notranslate">function addHandler() { - var clickHandler = function() { - this.style.backgroundColor = 'red'; - } - (function() { - var el = document.getElementById('el'); - el.onclick = clickHandler; - })(); -} -</pre> - -<p>내부 함수는 실행되고 바로 사라지므로서, <code>clickHandler</code>와 함께 생성된 클로져로부터 그 내용을 숨깁니다.</p> - -<p>클로져를 피할 수 있는 또다른 좋은 요령은 <code>window.onunload</code> 이벤트가 발생하는 동안 순환 참조를 끊는 것입니다. 많은 이벤트 라이브러리가 이렇게 동작합니다. 주의할 것은 그렇게 하도록하면 <a href="ko/Using_Firefox_1.5_caching">Firefox 1.5의 bfcache</a>를 비활성화 하게 되므로, 별 다른 이유가 없다면 Firefox에서 <code>unload</code> listener를 등록해서는 안 된다는 것입니다.</p> - -<div class="originaldocinfo"> -<h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">원본 문서 정보</h2> - -<ul> - <li>저자: <a class="external" href="http://simon.incutio.com/">Simon Willison</a></li> - <li>최근 갱신 날짜: March 7, 2006</li> - <li>저작권: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.</li> - <li>추가 정보: For more information about this tutorial (and for links to the original talk's slides), see Simon's <a class="external" href="http://simon.incutio.com/archive/2006/03/07/etech">Etech weblog post</a>.</li> -</ul> -</div> - -<p>{{ languages( { "en": "en/A_re-introduction_to_JavaScript", "fr": "fr/Une_reintroduction_a_JavaScript", "it": "it/Una_re-introduzione_a_Javascript", "ja": "ja/A_re-introduction_to_JavaScript", "pl": "pl/JavaScript/Na_pocz?tek", "zh-cn": "cn/A_re-introduction_to_JavaScript" } ) }}</p> diff --git a/files/ko/web/javascript/a_re-introduction_to_javascript/index.md b/files/ko/web/javascript/a_re-introduction_to_javascript/index.md new file mode 100644 index 0000000000..66264ba637 --- /dev/null +++ b/files/ko/web/javascript/a_re-introduction_to_javascript/index.md @@ -0,0 +1,1106 @@ +--- +title: JavaScript 재입문하기 (JS 튜토리얼) +slug: Web/JavaScript/A_re-introduction_to_JavaScript +tags: + - CodingScripting + - Guide + - Intermediate + - Intro + - JavaScript + - Learn +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +original_slug: A_re-introduction_to_JavaScript +--- +{{jsSidebar}} + +어째서 재입문일까요? 왜냐하면, [JavaScript](/ko/docs/Glossary/JavaScript)는 [세계에서 가장 오해받고 있는 프로그래밍 언어](http://javascript.crockford.com/javascript.html)로 악명이 높기 때문입니다. 종종 장난감같다고 조롱당하기도했지만, 이 거짓말같은 단순함 아래에는 몇 가지의 강력한 언어 기능이 숨어 있습니다. Javascript는 현재 엄청나게 많은, 요즘 가장 뜨고있는 애플리케이션들에 사용되고 있어서, 웹 또는 모바일 개발자 누구에게라도 이 기술에 대한 깊은 지식이 중요한 기량이 된다는 것을 보여주고 있습니다. + +이 이야기를 이해하는데는 이 언어의 역사를 먼저 보는 것이 도움이 됩니다. JavaScript는 1995년 Netscape의 엔지니어 Brendan Eich에 의해 만들어졌고, 1996년 초에 Netscape 2와 함께 처음 릴리즈 되었습니다. 이것은 원래 LiveScript로 불리기로 되어 있었습니다만 Sun Microsystem의 Java 언어의 성공에 편승해보려고 -두 언어 사이의 공통점이 매우 적음에도 불구하고- 불행이 예견된 마케팅 결정에 따라 이름이 바뀌게 됩니다. 이 결정은 역사상 유래가 없는 혼란의 근원이 되어버립니다. + +몇 달 후, Microsoft는 IE3와 함께 JScript를 발표했습니다. 이 JScript는 Javascript를 정말 닮았고 호환성이 좋았습니다. 몇 달 뒤에, Netscape는 1997년에 [ECMAScript](/ko/docs/Glossary/ECMAScript) 표준의 첫번째 판이 되는 JavaScript를 유럽 표준화 단체인 [Ecma International](https://www.ecma-international.org/)에 보냅니다. 이 표준은 1999년에 [ECMAScript edition 3](https://www.ecma-international.org/publications/standards/Ecma-262.htm)에 따라 큰 규모의 개정을 거친 후, 유례없이 아주 안정된 상태로 계속 유지되고 있습니다.4번째 판은 중도 포기되었는데, 언어의 복잡성 증가에 관련한 정치적 문제 때문이었습니다. 이 4번째 판의 많은 파트들은 ECMAScript edition 5 (2009년 12월에 출간)와 6번째 개정판 규격(2015년에 출간)의 근간을 형성하고 있습니다. + +> **참고:** 이제부터는 ECMAScript를 우리에게 좀 더 친근한 말인 "JavaScript"라고 부르겠습니다. + +대부분의 프로그래밍 언어와는 달리, JavaScript 언어는 입출력 개념이 없습니다. 이 언어는 호스트 환경 아래에서 스크립트 언어로서 동작하도록 디자인 되어있고, 따라서 외부 세계와 통신하기위해 호스트 환경이 제공하는 메커니즘에 의존합니다. 대부분의 경우 일반적인 호스트 환경은 브라우저이지만 JavaScript 인터프리터는 Adobe Acrobat, Photoshop, SVG images, Yahoo! 위젯 엔진 등의 제품에서도 발견할 수 있고, [node.js](https://nodejs.org/) 와 같은 서버 측 환경에서도 찾을 수 있습니다. 하지만 JavaScript가 사용되는 분야는 계속 더 넓혀지고 있습니다. NoSQL 데이터베이스, [Apache CouchDB](https://couchdb.apache.org/), 임베디드 컴퓨터, GNU/Linux OS의 가장 유명한 GUI 인 [GNOME](https://www.gnome.org/) 과 같은 데스크톱 환경에서도 JavaScript가 사용됩니다. + +## 개요 + +JavaScript는 유형 및 연산자, 표준 내장 객체 및 메소드가 있는 다중 패러다임, 동적 언어입니다. 구문은 Java 및 C 언어를 기반으로합니다. 이러한 언어의 많은 구조가 JavaScript에도 적용됩니다. JavaScript는 클래스 대신 객체 프로토 타입을 사용하여 객체 지향 프로그래밍을 지원합니다 ([프로토 타입 상속](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) 및 ES2015 [classes](/ko/docs/Web/JavaScript/Reference/Classes). JavaScript는 함수형 프로그래밍도 지원합니다. 함수는 객체이며, 함수는 실행 가능한 코드를 유지하고 다른 객체와 마찬가지로 전달 될 수 있습니다. + +어떤 언어에서라도 기초가 되는 부분인 타입을 살펴보는 것부터 시작해봅시다. JavaScript 프로그램은 값을 다루고 해당 값은 모두 타입을 가지고 있습니다. JavaScript의 타입은 다음과 같습니다: + +- [수 (Number)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number) +- [BigInt](/ko/docs/docs/Web/JavaScript/Data_structures#bigint_type) +- [문자열 (String)](/ko/docs/Web/JavaScript/Reference/Global_Objects/String) +- [부울 (Boolean)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean) +- [함수 (Function)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function) +- [객체 (Object)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object) +- [기호 (Symbol)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol) (ES2015에 새롭게 추가) + +... 오, 그리고 약간 특별한 타입인 [undefined](/ko/docs/docs/Web/JavaScript/Data_structures#undefined_type) 과 [null](/ko/docs/docs/Web/JavaScript/Data_structures#null_type) 이 있습니다. 또한 객체의 특별한 종류인 [배열(Array) 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array). 그리고 자유롭게 사용할 수 있는 [날짜(Date) 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date) 와 [정규식(RegExp) 객체](ko/Web/JavaScript/Reference/Global_Objects/RegExp)가 있습니다. 그리고 기술적으로 정확히 말해 함수(Function)는 단지 객체의 특별한 타입으로 취급됩니다. 따라서 타입 구조도를 정리해보면 다음과 같습니다: + +- [수 (Number)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number) +- [BigInt](/ko/docs/docs/Web/JavaScript/Data_structures#bigint_type) +- [문자열 (String)](/ko/docs/Web/JavaScript/Reference/Global_Objects/String) +- [부울 (Boolean)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean) +- [기호 (Symbol)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol) +- [객체 (Object)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object) + - [함수 (Function)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function) + - [배열 (Array)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array) + - [날짜 (Date)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date) + - [정규식 (RegExp)](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp) +- [널 (Null)](/ko/docs/Web/JavaScript/Reference/Global_Objects/null) +- [정의되지 않음 (Undefined)](/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined) + +그리고 또 몇 가지 [오류](/ko/docs/Web/JavaScript/Reference/Global_Objects/Error) 타입이 내장되어 있습니다. 그렇지만 처음 구조도를 기억하고만 있으면 다른 것들도 아주 쉽게 이해할 수 있을 것입니다. + +## 수 (Numbers) + +설계 명세서에 의하면 JavaScript에서 수는 ["이중정밀도 64비트 형식 IEEE 754 값"](https://en.wikipedia.org/wiki/Double_precision_floating-point_format) (numbers between -(2^53 − 1) and 2^53 − 1)으로 정의됩니다. 이것은 몇가지 흥미로운 결과를 가져옵니다. JavaScript에는 **정수와 같은 것이 존재하지 않으므로** ({{jsxref("BigInt")}} 제외), 조금 조심해야 합니다. 이 예제를 보세요: + +```js +console.log(3 / 2); // 1.5, not 1 +console.log(Math.floor(3 / 2)); // 1 +``` + +*명백한 정수*는 사실 *암묵적으로 실수*입니다. + +또한, 다음과 같은 것들을 주의하세요: + +```js +0.1 + 0.2 == 0.30000000000000004; +``` + +실제로 정수 값은 32 비트 정수로 처리되며 일부 구현은 32 비트 정수가 아닌 숫자에 유효한 명령어를 수행 할 때까지 이러한 방식으로 저장합니다. 이는 비트 단위 작업에 중요 할 수 있습니다. + +덧셈, 뺄셈, 계수 (또는 나머지) 연산을 포함하는 표준 [산술 연산자](/ko/Core_JavaScript_1.5_Reference/Operators/Arithmetic_Operators)가 지원됩니다. 또한 앞에서 언급하는 것을 깜박 잊은 고급 수학 함수와 상수를 다루기 위한 [수학(Math)](/ko/Core_JavaScript_1.5_Reference/Global_Objects/Math)으로 불리는 내장 객체가 있습니다: + +```js +Math.sin(3.5); +var circumference = 2 * Math.PI * r; +``` + +내장 [`parseInt()`](ko/Core_JavaScript_1.5_Reference/Global_Functions/parseInt) 함수를 사용하여 문자열을 정수로 변환할 수 있습니다. 이는 다음과 같이 옵션으로 주어지는 두번째 매개변수를 밑으로 하여 수행할 수 있습니다: + +```js +parseInt('123', 10); // 123 +parseInt('010', 10); // 10 +``` + +구형 브라우저에서 "0"으로 시작하는 문자열은 8 진수 (기수 8)로 가정되지만, 2013 년 이후에는 그렇지 않습니다. 문자열 형식이 확실하지 않으면 이전 브라우저에서 놀라운 결과를 얻을 수 있습니다. + +```js +parseInt('010'); // 8 +parseInt('0x10'); // 16 +``` + +이 같은 결과는 {{jsxref("Global_Objects/parseInt", "parseInt()")}} 함수가 0으로 시작되는 문자열을 8진수로, "0x"로 시작하는 문자열은 16진수로 취급하기 때문에 발생합니다. 16진수 표기법이 그대로 유지됩니다. 8진수는 제거되었습니다. + +만약 이진수를 정수로 변환하고 싶다면, 밑을 바꾸기만하면 됩니다: + +```js +parseInt('11', 2); // 3 +``` + +이와 비슷하게, 내장 함수 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}를 사용하여 부동 소수점 숫자를 파싱 할 수 있습니다. {{jsxref("Global_Objects/parseInt", "parseInt()")}}과 달리 `parseFloat()`는 항상 10진수를 사용합니다. + +단항 연산자 `+` 를 사용하여 값을 숫자로 변환 할 수도 있습니다: + +```js ++ '42'; // 42 ++ '010'; // 10 ++ '0x10'; // 16 +``` + +문자열이 수가 아닌 경우 [`NaN`](ko/Core_JavaScript_1.5_Reference/Global_Properties/NaN) ("Not a Number" (수가 아님)을 줄인 약자)로 불리는 특별한 값을 돌려줍니다: + +```js +parseInt('hello', 10); // NaN +``` + +`NaN` 는 독성을 가지고 있습니다: 어떤 수학 연산의 입력값으로써 주어지면 그 결과는 역시 `NaN`가 되기 때문입니다: + +```js +NaN + 5; // NaN +``` + +내장 [`isNaN()`](ko/Core_JavaScript_1.5_Reference/Global_Functions/isNaN) 함수를 사용해서 `NaN` 인지 여부를 검사할 수 있습니다: + +```js +Number.isNaN(NaN); // true +Number.isNaN('hello'); // false +Number.isNaN('1'); // false +Number.isNaN(undefined); // false +Number.isNaN({}); // false +Number.isNaN([1]) // false +Number.isNaN([1,2]) // false +``` + +But don’t test for `NaN` using the global {{jsxref("Global_Objects/isNaN", "isNaN()")}} function, [which has unintuitive behavior](/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#confusing_special-case_behavior): + +```js +isNaN('hello'); // true +isNaN('1'); // false +isNaN(undefined); // true +isNaN({}); // true +isNaN([1]) // false +isNaN([1,2]) // true +``` + +JavaScript는 또 특별한 값 [`Infinity`](ko/Core_JavaScript_1.5_Reference/Global_Properties/Infinity)와 `-Infinity`를 가지고 있습니다: + +```js + 1 / 0; // Infinity +-1 / 0; // -Infinity +``` + +내장 함수 {{jsxref("Global_Objects/isFinite", "isFinite()")}}를 사용하여 Infinity, -Infinity 및 NaN 값을 테스트 할 수 있습니다. + +```js +isFinite(1 / 0); // false +isFinite(-Infinity); // false +isFinite(NaN); // false +``` + +> **참고:** {{jsxref("Global_Objects/parseInt", "parseInt()")}} 와 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 함수는 숫자로 아닌 문자가 나올때까지 문자열을 파싱하고, 그 지점까지 파싱된 숫자를 반환합니다. 그런데 "+"연산자는 중간에 유효하지 않은 문자가 있으면 그대로 문자열을 `NaN` 으로 그냥 변환해버립니다. console에서 "10.2abc"를 파싱해보면 어떤점이 다른지 더 쉽게 이해할 수 있습니다. + +## 문자열 (Strings) + +JavaScript에서 문자열은 [유니코드 문자들](/ko/Core_JavaScript_1.5_Guide/Unicode)이 연결되어 만들어진 것입니다. 이는 국제화(i18n, internationalization) 하려하는 누구에게라도 환영받을만한 소식입니다. 좀 더 정확히 말하자면, 각각이 16비트 숫자로 표현된 UTF-16 코드 유닛이 길게 이어져있는 것입니다. 각 유니코드 문자는 1개나 2개의 코드 유닛으로 표현됩니다. + +한 개의 문자를 나타내려면 길이가 1인 문자열을 사용하면 됩니다. + +문자열의 길이를 알고싶다면, 해당 문자열의 [`length`](/ko/Core_JavaScript_1.5_Reference/Global_Objects/String/length) 속성(해당 객체가 소유하고 있는 성질을 나타내는 값)에 접근하면 됩니다: + +```js +'hello'.length; // 5 +``` + +우리의 첫 JavaScript 객체입니다! 문자열도 역시 객체로 취급된다고 언급했던적이 있죠? 다음과 같이 [메소드](/ko/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods)까지 있는 확실한 녀석입니다: + +```js +'hello'.charAt(0); // "h" +'hello, world'.replace('hello', 'goodbye'); // "goodbye, world" +'hello'.toUpperCase(); // "HELLO" +``` + +## 이외의 타입들 + +JavaScript는 의도적으로 값이 없음을 가리키는 '객체' 타입의 객체인 `null`과 초기화되지 않은 값 — 아직 어떤 값도 주어지않은(할당되지않은) 변수임을 가리키는 '정의되지 않음' 타입의 객체인 `undefined`로 구분됩니다. 값에 대해서 나중에 언급할 것이지만 JavaScript에서 변수에 값을 주지않고 선언하는 것이 가능합니다. 이럴 경우, 변수의 타입은 `undefined`이 되는 것입니다. + +JavaScript는 `true` 와 `false` 값 (둘은 모두 키워드로 예약되어있는 값)을 가질 수 있는 부울 타입을 가지고 있습니다. 다음과 같은 규칙에 따라 어떤 임의의 값을 부울값으로 변환할 수 있습니다: + +1. `false`, `0`, 빈 문자열 (`""`), 수가 아님을 뜻하는 `NaN`, `null`, 와 `undefined`은 모두 `false`가 됩니다. +2. 다른 모든 값은 `true`가 됩니다. + +이 변환은 `Boolean()` 함수를 써서 명시적으로 이 작업을 수행하실 수 있습니다: + +```js +Boolean(''); // false +Boolean(234); // true +``` + +하지만 반드시 이렇게 할 필요는 거의 없습니다. JavaScript는 이러한 변환 작업을 `if` 문 (아래를 보세요)과 같이 부울값이 필요한 경우를 만나게되면 자동으로 사용자가 모르는 사이에 처리해버리기 때문입니다. 이러한 이유로 인해 우리는 가끔 부울 타입으로 변환되었을 때, `true`와 `false`이 됨을 의미하는 값들을 각각 "참 값"과 "거짓 값"으로 부를 것입니다. 또는 각각 "참으로 취급되다"와 "거짓으로 취급되다"라는 식으로 불릴 수도 있습니다. + +부울 연산자는 `&&` (논리적*와, 그리고* ), `||` (논리적*또는* ), 그리고 `!` (논리적*부정* )이 지원됩니다. 아래에서 다시 언급하겠습니다. + +## 변수 (Variables) + +JavaScript에서 새로운 변수는 [`let`](/ko/docs/Web/JavaScript/Reference/Statements/let), [`const`](/ko/docs/Web/JavaScript/Reference/Statements/const), [`var`](/ko/docs/Web/HTML/Element/var) 키워드로 선언됩니다. + +**`let`**을 사용하면 블록 유효 범위 변수를 선언 할 수 있습니다. 선언 된 변수는 *변수가 포함 된 함수 블록*에서 사용할 수 있습니다. + +```js +let a; +let name = 'Simon'; +``` + +아래는 **let**으로 선언한 변수가 가지는 유효 범위의 예제입니다. + +```js +// myLetVariable는 여기에서 보이지 *않습니다* + +for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { + // myLetVariable는 여기에서 유효합니다 +} + +// myLetVariable는 여기에서 보이지 *않습니다* +``` + +**`const`**는 값이 변경되지 않는 변수를 선언 할 수 있게 합니다. 변수는 *변수가 선언 된 함수 블록*에서 사용할 수 있습니다. + +```js +const Pi = 3.14; // 변수 Pi 설정 +Pi = 1; // 상수로 설정된 변수는 변경 할 수 없기 때문에 애러 발생. +``` + +**`var`**은 가장 일반적인 변수 선언 키워드입니다. `let`, `const` 키워드가 가지는 제한을 `var`은 갖지 않습니다. 이는 자바스크립트에서 변수를 선언하는 전통적인 유일한 방법이었기 때문입니다. **`var`** 키워드로 선언 된 변수는 *변수가 선언 된 함수 블록*에서 사용 할 수 있습니다. + +```js +var a; +var name = 'Simon'; +``` + +**`var`**로 선언한 변수의 유효 범위 예제입니다. + +```js +// myVarVariable는 여기에서 사용 할 수 *있습니다* + +for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { + // myVarVariable는 함수 전체에서 사용 할 수 있습니다. +} + +// myVarVariable는 여기에서 사용 할 수 *있습니다* +``` + +변수에 값을 지정하지 않고 변수를 선언하면, 타입은 `undefined`로 지정 됩니다. + +자바스크립트와 자바 같은 다른 언어 사이의 중요한 차이점은 자바스크립트는 블록에 범위가 없다는 것입니다. 함수에만 범위가 있습니다. 변수가 복합 문에서 (예를 들어 `if` 제어 구조 내에서) var를 사용하여 정의 된 경우 전체 함수에서 볼 수 있습니다. 그러나 ECMAScript 2015부터 [`let`](/ko/docs/Web/JavaScript/Reference/Statements/let) 및 [`const`](/ko/docs/Web/JavaScript/Reference/Statements/const) 선언을 사용하면 블록 범위 변수를 만들 수 있습니다. + +## 연산자 (Operators) + +JavaScript의 산술 연산자로는 `+`, `-`, `*`, `/`, `%`(나머지 연산자)가 있습니다. 값은 `=` 연산자로 할당할 수 있고, `+=` 와 `-=`처럼 다른 연산자를 같이사용해서 할당할 수 있습니다. 이렇게 쓰인 연산자는 `x = x연산자 y`와 같은 결과를 나타냅니다. + +```js +x += 5; +x = x + 5; +``` + +`++` 와 `--` 를 각각 점진적인 증가와 감소에 사용할 수 있습니다. 이들은 또한 전처리 또는 후처리 연산자로 사용될 수 있습니다. + +[`+` 연산자](/ko/Core_JavaScript_1.5_Reference/Operators/String_Operators)는 문자열 이어붙이기도 합니다: + +```js +'hello' + ' world'; // "hello world" +``` + +문자열에 어떤 수 (또는 다른 값)를 더하면 일단 모두 문자열로 바뀌게 됩니다. 다음 예를 보시면 무슨 말씀인지 아실 수 있을겁니다: + +```js +'3' + 4 + 5; // "345" + 3 + 4 + '5'; // "75" +``` + +빈 문자열에 어떤 값을 더하는 것은 해당 값을 문자열로 바꾸는 요령입니다. + +JavaScript에서 [비교](/ko/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators)는 `<`, `>`, `<=` 와 `>=` 를 통해 가능합니다. 이 연산자들은 문자열과 수 양쪽 모두에서 동작합니다. 상동은 약간 직관성이 떨어지는데 이중 등호 (`==`) 연산자는 서로 다른 타입을 줄 경우 타입 강제 변환을 수행하기 때문에 다음과 같이 때때로 기대하지 않은 결과를 내보내기 때문입니다: + +```js +123 == '123'; // true +1 == true; // true +``` + +타입 강제 변환을 하지 않게 하려면, 삼중 등호 연산자 (`===`)를 사용해야합니다: + +```js +123 === '123'; // false +1 === true; // false +``` + +이와 비슷하게 `!=` 와 `!==` 연산자가 있습니다. + +JavaScript는 값을 [비트로 취급하는 연산자](/ko/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators)도 가지고 있습니다. 사용하고 싶을 때 언제라도 사용할 수 있도록 말이죠. + +## 제어 구조 + +JavaScript는 C 계열의 다른 언어들과 비슷한 제어 구조를 가지고 있습니다. 조건문은 `if` 와 `else`를 지원하는데, 원하시는대로 얼마든지 중첩 시켜서 사용할 수 있습니다: + +```js +var name = 'kittens'; +if (name == 'puppies') { + name += ' woof'; +} else if (name == 'kittens') { + name += ' meow'; +} else { + name += '!'; +} +name == 'kittens meow'; +``` + +JavaScript는 `while` 반복문과 `do-while` 반복문도 사용할 수 있습니다. 첫번째 것은 단순 반복에 유용하게 사용할 수 있고, 두번째 것은 반복문이 반드시 적어도 한번이상 실행 되도록 하고 싶을 때 사용할 수 있습니다: + +```js +while (true) { + // 무한루프! +} + +var input; +do { + input = get_input(); +} while (inputIsNotValid(input)); +``` + +JavaScript의 [`for`](/ko/docs/Web/JavaScript/Reference/Statements/for) 반복문은 C 와 Java의 반복문과 같습니다. 말하자면, 반복문에 필요한 제어 정보를 한 줄에 표현할 수 있다는 이야기지요. + +```js +for (var i = 0; i < 5; i++) { + // 내부 동작을 5번 반복합니다 +} +``` + +JavaScript에는 두개의 중요한 for 반복문 또한 포함됩니다. 첫번째로 [for...of](/ko/docs/Web/JavaScript/Reference/Statements/for...of) 입니다. + +```js +for (let value of array) { + // value로 작업을 실행합니다 +} +``` + +그리고 [for ... in](/ko/docs/Web/JavaScript/Reference/Statements/for...in) 입니다. + +```js +for (let property in object) { + // object의 항목(property)으로 작업을 실행합니다 +} +``` + +`&&` 와 `||` 연산자는 첫번째 식을 평가한 결과에 따라서 두번째 식을 평가를 실행하는 단축평가(short-circuit) 논리를 사용합니다. 이는 다음과 같이 객체에 접근하기 전에 null 객체인지, 아닌지를 검사하는데 유용하게 사용될 수 있습니다: + +```js +var name = o && o.getName(); +``` + +또는 (틀린값이 유효하지 않은 값일때) 캐싱 값에 대해서도 사용합니다.: + +```js +var name = cachedName || (cachedName = getName()); +``` + +JavaScript는 한줄로 조건문을 쓸 수 있게 해주는 삼중 연산자도 가지고 있습니다: + +```js +var allowed = (age > 18) ? "yes" : "no"; +``` + +`switch` 문은 숫자나 문자열을 기반으로 다중 분기되는 문장을 작성하는데 사용될 수 있습니다: + +```js +switch(action) { + case 'draw': + drawIt(); + break; + case 'eat': + eatIt(); + break; + default: + doNothing(); +} +``` + +`break` 문장을 추가하지 않았다면, 다음 단계로 "넘어가서" 실행합니다. 이렇게 되는 것을 기대하는 것은 매우 드문경우 입니다. 실은 디버깅하는데 용이하도록 하기위해 주석으로서 일부러 붙여놓은 넘어가기 이름표 입니다: + +```js +switch(a) { + case 1: // fallthrough + case 2: + eatIt(); + break; + default: + doNothing(); +} +``` + +default 구문의 적용은 선택사항입니다. switch와 case 부분에서 둘다 표현식을 사용할 수도 있습니다. switch부분과 case 부분의 표현식은 `===` 연산자로 비교됩니다. + +```js +switch(1 + 3){ + case 2 + 2: + yay(); + break; + default: + neverhappens(); +} +``` + +## 객체 (Objects) + +JavaScript 객체는 간단히 이름-값 쌍(name-value pairs)의 모임입니다. 그렇기 때문에, JavaScript의 객체의 모임은 다음과 비슷하다고 할 수 있습니다: + +- Python의 Dictionaries +- Perl 과 Ruby의 Hashes +- C 와 C++ 의 Hash tables +- Java 의 HashMaps +- PHP의 Associative arrays + +이 데이터 구조가 매우 광범위하게 사용된다는 사실은 활용 방도가 다양함을 입증합니다. JavaScript내 모든 것 (코어 타입들은 제외)은 객체로 취급되기 때문에 어떤 JavaScript 프로그램도 기본적으로 해쉬 테이블을 검색하는데 필요한 출중한 성능을 가지고 있습니다. 매우 빠르기 때문에 장점이 됩니다! + +값은 객체를 포함하여 아무 JavaScript 값이 될 수 있는 반면, "이름" 부분은 JavaScript 문자열 입니다. 이는 무작위적인 복잡성을 가지는 데이터 구조를 만들 수 있도록 해줍니다. + +빈 객체를 생성하는데 두가지 방법이 있습니다: + +```js +var obj = new Object(); +``` + +와: + +```js +var obj = {}; +``` + +이들은 의미적으로 동치입니다. 두번째 방법은 객체 리터럴 구문이라고 부르며 더 편리합니다. 객체 리터럴 구문은 JSON 구문의 핵심이며 이 방법을 사용한 코드를 더 많이 볼 수 있습니다. + +객체 리터럴 구문으로 객체의 전체적인 구조를 초기화 할 수 있습니다: + +```js +var obj = { + name: "Carrot", + "for": "Max", + details: { + color: "orange", + size: 12 + } +} +``` + +속성에 연속적으로 접근할 수 있습니다: + +```js +obj.details.color; // orange +obj["details"]["size"]; // 12 +``` + +아래 예제는 객체 프로토타입(`Person`)과 프로토타입의 인스턴스(`you`)를 생성합니다. + +```js +function Person(name, age) { + this.name = name; + this.age = age; +} + +// 객체를 정의한다 +var you = new Person('You', 24); +// "You"라는 이름의 24세인 새로운 사람을 생성중이다. +``` + +**일단 생성되면**, 객체의 속성에 다음의 두가지 방법들 중 한가지로 접근할 수 있습니다: + +```js +// dot 표기법 +obj.name = "Simon" +var name = obj.name; +``` + +그리고... + +```js +// bracket 표기법 +obj["name"] = "Simon"; +var name = obj["name"]; +// key를 정의하기 위해 변수도 쓸수 있습니다. +var user = prompt('what is your key?') +obj[user] = prompt('what is its value?') +``` + +이들은 의미적으로 역시 같습니다. 두번째 방법은 속성의 이름이 실행시간(run-time)에 계산될 수 있는 문자열로 주어집니다. 하지만 이방법을 사용하면 일부 JavaScript엔진과 압축기 최적화(minifier optimizations)를 적용할수 없습니다.또한 [예약된 단어(키워드)](/ko/Core_JavaScript_1.5_Reference/Reserved_Words)로 되어있는 이름으로 객체의 속성을 설정하거나 얻어낼 수 있습니다: + +```js +obj.for = "Simon"; // 구문 오류, for 가 예약된 단어(키워드)이기 때문에 +obj["for"] = "Simon"; // 정상 동작 +``` + +> **참고:** ECMAScript 5 이래로, 예약어는 객체 항목의 이름으로 "덧붙임없이" 사용할수도 있습니다. 이말은 객체 리터럴을 정의할때 따옴표로 "둘러쌀" 필요가 없다는 의미입니다. ES5 [Spec](http://es5.github.io/#x7.6.1)을 참고해 보십시오. + +객체나 프로토타입에 대한 좀더 상세한 내용은 [Object.prototype](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) 을 참조하십시오. 객체 프로토타입과 객체 프로토타입 체인에 대한 설명은 [상속과 프로토타입 체인](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) 을 참조하십시오. + +> **참고:** ECMAScript 2015 이래로, 객체의 key는 생성시의 대괄호 표기법(bracket notation)으로 정의될수 있습니다. 그냥 `var userPhone = {}; userPhone[phoneType] = 12345`. 처럼 표기하는 방법 대신 `{[phoneType]: 12345}` 와 같은 사용법도 가능합니다. + +## 배열 (Arrays) + +JavaScript에서 배열은 실제로는 특별한 타입의 객체입니다. (숫자로 나타낸 속성은 자연스럽게 `[]` 구문만을 사용해서 접근하게 되므로) 일반 객체와 많이 비슷하게 동작하지만, 이 객체는 '`length`'라는 한가지 마법적인 속성을 가집니다. 이는 항상 배열에서 가장 큰 인덱스보다 하나 더 큰 값으로 존재합니다. + +배열을 생성하는 예전 방법은 다음과 같습니다: + +```js +var a = new Array(); +a[0] = "dog"; +a[1] = "cat"; +a[2] = "hen"; +a.length // 3 +``` + +한가지 더 편리한 배열 표현 방법은 배열 리터럴을 사용하는 것입니다: + +```js +var a = ['dog', 'cat', 'hen']; +a.length; // 3 +``` + +배열 리터럴 끝에 콤마(",")를 꼬리로 남겨두는 것은 브라우저마다 다르게 처리하므로 그렇게 하지는 마시기 바랍니다. + +`array.length` 는 배열에 들어있는 항목의 수를 반드시 반영하지는 않는다는 점을 주의하시기 바랍니다. 다음과 같은 경우를 고려해보겠습니다: + +```js +var a = ['dog', 'cat', 'hen']; +a[100] = 'fox'; +a.length; // 101 +``` + +기억해두세요 - 배열의 length 속성은 최대 인덱스에 하나를 더한 값일 뿐입니다. + +존재하지 않는 배열 인덱스를 참조하려고하면 다음과 같이 `undefined` 을 얻게됩니다: + +```js +typeof a[90]; // undefined +``` + +`[]` 와 `length`에 관한 위의 사항들을 감안하면 배열을 `for` 반복문으로 처리할 때 다음과 같은 방법으로 처리하실 수 있을 것입니다: + +```js +for (var i = 0; i < a.length; i++) { + // a[i] 로 뭔가를 수행 +} +``` + +ES2015는 배열과 같은 이터러블 객체를 위해 좀더 간결한 [`for`...`of`](/ko/docs/Web/JavaScript/Reference/Statements/for...of) 루프를 소개했습니다. + +```js +for (const currentValue of a) { + // currentValue 로 뭔가를 수행 +} +``` + +또한 [`for`...`in`](/ko/docs/Web/JavaScript/Reference/Statements/for...in) 루프를 이용하여 배열에 루프를 돌릴수도 있지만, 이 방법은 배열 요소를 반복하는게 아니라 배열 인덱스를 반복합니다. 뿐만 아니라, 누군가 `Array.prototype`에 새로운 속성을 추가하면, 그 속성들 또한 이런 루프로 반복됩니다. 따라서 이런 반복 형태는 배열에는 추천되지 않습니다. + +배열에 대한 또다른 반복방법은 ECMAScript 5에 추가된 [forEach()](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) 입니다: + +```js +['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) { + // currentValue나 array[index]로 뭔가를 수행 +} +``` + +배열에 항목 하나를 추가하길 원한다면 이렇게 하면 됩니다: + +```js +a.push(item); +``` + +배열은 몇가지 메서드가 제공됩니다. [배열 메서드에 대한 전체 문서](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)를 참조하십시오. + +| 메서드 이름 | 설명 | +| ---------------------------------------------------- | ------------------------------------------------------------------------------------ | +| `a.toString()` | 각 항목에 대한 `toString()`의 출력이 콤마로 구분된 한개의 문자열을 반환합니다. | +| `a.toLocaleString()` | 각 항목에 대한 `toLocaleString()`의 출력이 콤마로 구분된 한개의 문자열을 반환합니다. | +| `a.concat(item1[, item2[, ...[, itemN]]])` | item들이 덧붙여진 한개의 배열을 반환합니다. | +| `a.join(sep)` | 배열의 값들을 `sep` 인자로 구분하여 합친 한개의 문자열로 변환합니다. | +| `a.pop()` | 배열의 마지막 항목을 반환하면서 제거합니다. | +| `a.push(item1, ..., itemN)` | 배열의 끝에 item들을 덧붙입니다. | +| `a.shift()` | 배열의 첫번째 항목을 반환하면서 제거합니다. | +| `a.unshift(item1[, item2[, ...[, itemN]]])` | 배열의 앞쪽에 item들을 덧붙입니다. | +| `a.slice(start[, end])` | 배열의 일부분을 새배열로 반환합니다. | +| `a.sort([cmpfn])` | 옵션으로 비교용도의 함수를 입력받습니다. | +| `a.splice(start, delcount[, item1[, ...[, itemN]]])` | 배열의 일부분을 제거하고 다른 항목으로 대체하여 배열을 변경합니다.. | +| `a.reverse()` | 배열의 순서를 거꾸로 배열합니다. | + +## 함수 (Functions) + +객체와 마찬가지로, 함수는 JavaScript를 이해하는데 핵심이 되는 컴포넌트입니다. 가장 기본적인 함수의 예는 다음과 같습니다: + +```js +function add(x, y) { + var total = x + y; + return total; +} +``` + +이 예는 기본 함수에 대해 알아야 할 모든 것을 보여주고 있습니다. JavaScript 함수는 0 이상의 이름이 있는 매개변수를 가질 수 있습니다. 함수의 본체는 갯수 제한없이 구문을 포함할 수 있고 해당 함수에 지역적으로 변수를 보유하도록 선언할 수 있습니다. `return` 문은 언제나 값을 돌려주고 함수의 실행을 끝내는데 사용될 수 있습니다. 리턴 문이 없으면 (혹은 값이 없는 리턴이 사용되면), JavaScript는 `undefined`을 돌려줍니다. + +이름 붙여진 매개변수들은 다른 어떤 것보다도 해당 함수가 어떤 함수인지 설명해주는 좋은 역할을 할 수 있습니다. 해당 함수가 원하는 매개변수를 주지않고 함수를 호출할 수 있지만 그럴 경우 해당 변수들은 `undefined`로 설정됩니다. + +```js +add(); //NaN +// undefined에 대해 덧셈을 수행할 수 없습니다 +``` + +함수가 기대하는 원래의 매개변수보다 많은 매개변수를 넘겨줄 수도 있습니다: + +```js +add(2, 3, 4); // 5 +// 처음의 두 수가 더해집니다. 4는 무시됨 +``` + +이 예는 조금 어리석어 보이지만, 함수는 추가적으로 주어진 매개변수를 함수 내부에서 접근할수 있습니다. 이 객체는 [`arguments`](/ko/Core_JavaScript_1.5_Reference/Functions/arguments)라고 하며, 해당 함수에 매개변수로 넘겨진 모든 값을 가지고 있는 배열과 비슷한 객체입니다. 우리가 원하는만큼 값을 취하는 add 함수를 다시 써보겠습니다: + +```js +function add() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum; +} + +add(2, 3, 4, 5); // 14 +``` + +확실히 `2 + 3 + 4 + 5`를 직접쓰는 것보다 유용한 함수는아닙니다. 평균계산 함수를 만들어 보겠습니다: + +```js +function avg() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} + +avg(2, 3, 4, 5); // 3.5 +``` + +이건 매우 유용합니다만, 좀 번잡해보입니다. 코드 크기를 다소 줄이기 위해, arguments 배열의 사용을 [Rest 파라미터 문법](/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters)으로 대체해볼 필요가 있습니다. 이 방법으로, 코드 크기는 최소한으로 유지 하면서, 갯수 제한없이 함수로 인자를 전달할수 있습니다. **Rest 파라미터 연산자**는 다음과 같은 포맷(**...variable**)으로 함수 파라미터 목록에 사용됩니다. 이 varaible 인자는 함수가 호출될때 전달되는 모든 인자를 포함합니다. variable 인자에서 반환되는 값을 사용하기 위해 위 코드에서 **for** 루프를 **for..of** 루프로 변경합니다. + +```js +function avg(...args) { + var sum = 0; + for (let value of args) { + sum += value; + } + return sum / arr.length; +} + +avg(2, 3, 4, 5); // 3.5 +``` + +위 코드에서,변수 **args** 는 함수로 전달된 모든 값을 가지고 있습니다. rest 파라미터 연산자가 함수 선언의 어느곳에 위치하든 선언 위치 이후에 모든 인자를 저장하는것이며, 이전이 아니라는 것이 중요합니다. 즉 , function avg(**firstValue,**...args)에서 함수로 전달된 첫번째 값은 **firstValue** 변수에 저장되며, 남은 변수들은 **args**에 저장됩니다. 이건 또다른 유용한 언어 특성입니다만 우리를 새로운 문제점으로 인도합니다. `avg()` 함수는 콤마로 구분된 인자목록을 받지만, 배열의 평균을 알고싶은 경우라면요? 함수를 다음과 같이 재작성 하면 됩니다: + +```js + function avgArray(arr) { + var sum = 0; + for (var i = 0, j = arr.length; i < j; i++) { + sum += arr[i]; + } + return sum / arr.length; + } + + avgArray([2, 3, 4, 5]); // 3.5 +``` + +하지만 우리가 이미 만든 함수를 다시 사용할 수 있다면 좋을 것입니다. 운이 좋게도 JavaScript는 함수 객체라면 모두 가지게 되는 [`apply()`](/ko/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply) 메소드를 사용해서 임의의 매개변수 배열을 함수에 넘겨줄 수 있습니다. + +```js +avg.apply(null, [2, 3, 4, 5]); // 3.5 +``` + +`apply()의 `두번째 매개변수는 '매개변수들'로 사용하고자 하는 배열입니다. 첫번째 매개변수는 나중에 설명하도록 하겠습니다. 이는 함수가 역시 객체임을 명확히 해주는 사실입니다. + +함수 호출시 [전개 연산자(spread operator)](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax) 를 이용하여 똑같은 결과를 얻을수 있습니다. + +예를 들면: `avg(...numbers)` + +## 익명 함수 + +JavaScript는 익명의 함수를 만들 수 있도록 허용하고 있습니다. + +```js +function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +}; +``` + +이것은 의미적으로 `function avg()` 형식과 같습니다. 이 특징은 매우 강력한데, 일반적인 표현식(expression)을 사용할 수있는 어디에서나 완전한 함수 정의를 넣을 수 있도록 허용하는 것이기 때문입니다. 이 특징은 다양한 요령을 부릴 수 있게합니다. 다음 예는 C에서 블록 유효 범위를 적용 시킨 것 처럼 지역 변수를 "숨기는" 요령을 보여줍니다: + +```js +var a = 1; +var b = 2; + +(function() { + var b = 3; + a += b; +})(); + +a; // 4 +b; // 2 +``` + +But such an anonymous function isn’t useful in isolation — because without a name, there’s no way to call the function. So in practice, anonymous functions are typically used as arguments to other functions or are made callable by immediately assigning them to a variable that can be used to invoke the function: + +```js +var avg = function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +}; +``` + +That makes the anonymous function invocable by calling `avg()` with some arguments — that is, it’s semantically equivalent to declaring the function using the `function avg()` named-function form. + +But there’s a way that anonymous functions can be useful even without ever being assigned to variables or passed as arguments to other functions: JavaScript provides a mechanism for simultaneously declaring and invoking a function using a single expression. It’s called an [Immediately invoked function expression (IIFE)](/en-US/docs/Glossary/IIFE), and the syntax for using it with an anonymous function looks like this: + +```js +(function() { + // … +})(); +``` + +Further details on IIFEs are out of scope for this introductory article — but a good example of what they’re particularly useful for is in the [Emulating private methods with closures](/en-US/docs/Web/JavaScript/Closures#emulating_private_methods_with_closures) section of the [Closures](/en-US/docs/Web/JavaScript/Closures) article. + +### 재귀 함수 + +JavaScript는 재귀적으로 함수를 부를 수 있습니다. 이는 브라우저 DOM 등에서 볼수 있는 트리 구조를 다루는데 유용합니다. + +```js +function countChars(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += countChars(child); + } + return count; +} +``` + +다음의 예는 익명 함수를 사용함에 있어 잠재적인 문제점을 보여줍니다: 이름이 없으면 어떻게 재귀적으로 부를 수 있을까요? JavaScript는 함수 표현식을 이렇게 이름붙이도록 지원합니다. 이름붙은 [IIFEs (Immediately Invoked Function Expressions)](/en-US/docs/Glossary/IIFE) (즉시 실행 함수 표현)를 다음과 같이 사용할 수 있습니다: + +```js +var charsInBody = (function counter(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += counter(child); + } + return count; +})(document.body); +``` + +위와 같이 함수 표현식에 제공된 이름은 함수 자체 범위에서만 유효합니다. 이 특징은 엔진에 의한 최적화뿐만 아니라 코드 가독성을 높이는데 도움을 줍니다. 이 이름은 디버거와 스택 추적에서도 나타나므로 디버깅시간을 줄일수 있게합니다. + +JavaScript 함수는 - JavsScript 내의 다른 모든 것들과 마찬가지로 - 그 자체가 객체이며, 객체 섹션에서 이미 확인한 것처럼, 속성을 추가하거나 변경할수 있다는 점을 명심하십시오 + +## 사용자 정의 객체 + +> **참고:** JavaScript에서 객체 지향 프로그래밍에 대한 더 자세한 논의는 [객체 지향 JavaScript 소개](/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript)를 참조하십시오. + +고전 객체지향 프로그래밍에서 객체는 데이터와 해당 데이터들을 다루는 메소드의 집합이었습니다. JavaScript는 프로토타입 기반 언어로, C++ 이나 Java에서 발견할 수 있는 class 구문이 없습니다(이런 이유로 class 구문에 익숙한 프로그래머들이 때때로 혼란을 경험합니다). 그 대신, JavaScrip는 function을 class로 사용합니다. 이름과 성을 필드로 가지고 있는 'person' 객체를 고려해보도록 합시다. 이름을 표시하는 두가지 방법이 있을 수 있습니다. 예를 들어, "이름 성" 또는 "성, 이름" 이런 식으로 말이죠. 이전에 다룬 함수와 객체를 사용해서 이를 표현하면 다음과 같습니다: + +```js +function makePerson(first, last) { + return { + first: first, + last: last + } +} +function personFullName(person) { + return person.first + ' ' + person.last; +} +function personFullNameReversed(person) { + return person.last + ', ' + person.first +} + +var s = makePerson("Simon", "Willison"); +personFullName(s); // "Simon Willison" +personFullNameReversed(s); // "Willison, Simon" +``` + +이렇게 하면 작동하긴 하지만, 보기 안좋습니다. 이런 방법이라면 전역 이름공간(global namespace)에 관련 함수가 너무 많아집니다. 정말 우리에게 필요한 것은 객체에 함수를 붙여놓는 것입니다. 함수는 객체이기 때문에 이건 별로 어렵지 않습니다. + +```js +function makePerson(first, last) { + return { + first: first, + last: last, + fullName: function() { + return this.first + ' ' + this.last; + }, + fullNameReversed: function() { + return this.last + ', ' + this.first; + } + }; +} + +var s = makePerson('Simon', 'Willison'); +s.fullName(); // "Simon Willison" +s.fullNameReversed(); // "Willison, Simon" +``` + +[`this`](ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator) 키워드에 주목해 주십시오. 함수 안쪽에서 사용되면서, `this`는 현재 객체를 참조합니다. 그것이 실제로 의미하는 바는 당신이 부른 바로 그 함수를 지정하는 것입니다. 객체에서 [dot 표기법이나 bracket 표기법](ko/Core_JavaScript_1.5_Reference/Operators/Member_Operators)을 사용해서 부른 경우, 해당 객체는 `this`가 됩니다. 해당 호출에서 dot 표기법을 사용하지 않은 경우, `this`는 전역 객체를 참조하게 됩니다. + +`this`가 실수의 잦은 원인이 된다는 것을 명심하십시오 . 예를 들면: + +```js +var s = makePerson('Simon', 'Willison'); +var fullName = s.fullName; +fullName(); // undefined undefined +``` + +`s.fullName()`을 이용하지 않고 `fullName()`을 단독으로 호출하면, '`this`'는 전역 객체로 묶이게(bind) 됩니다. `first` 또는 `last` 로 명명된 전역 변수가 없기 때문에, 각각에 대해 `undefined` 결과를 얻게됩니다. + +`makePerson` 함수를 개선하는데 '`this`' 키워드의 이점을 취할 수 있습니다: + +```js +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = function() { + return this.first + ' ' + this.last; + }; + this.fullNameReversed = function() { + return this.last + ', ' + this.first; + }; +} +var s = new Person('Simon', 'Willison'); +``` + +여기서 [`new`](/ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator)라는 또다른 키워드를 도입했습니다. `new`는 `this`와 깊게 연관되어 있습니다. 새로운 빈 객체를 만든 다음 지정된 함수를 불러 새로운 객체를 `this` 에 설정합니다. `this`로 지정된 함수는 값을 반환하지 않고 단지 `this` 객체를 수정한다는 것을 명심하세요. `this` 객체를 호출하는 곳으로 반환하는 것은 `new` 입니다. '`new`' 에 의해 호출되도록 설계된 함수는 컨스트럭터 함수라고 불립니다. 일반적으로 이러한 함수의 첫자를 대문자로 써서 `new`로 불릴 컨스트럭터 함수임을 나타냅니다. + +개선된 함수는 여전히 `fullName()` 을 단독으로 호출할 때의 함정이 존재합니다. + +우리의 person 객체가 점점 개선되고 있지만, 아직 좀 보기 안좋은 면이 있습니다. 매번 person 계열의 객체를 만들 때마다 내부에서 2개의 새로운 함수 객체를 만들고 있습니다. 이 코드가 객체간에 공유된다면 더 낫지 않을까요? + +```js +function personFullName() { + return this.first + ' ' + this.last; +} +function personFullNameReversed() { + return this.last + ', ' + this.first; +} +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = personFullName; + this.fullNameReversed = personFullNameReversed; +} +``` + +더 좋아 보이네요: 메소드 함수를 한번만 만들고, 컨스트럭터 내에 해당 메소드들을 참조하도록 할당합니다. 이보다 더 개선 할 수 있을까요? 네, 그렇게 할 수 있습니다: + +```js +function Person(first, last) { + this.first = first; + this.last = last; +} +Person.prototype.fullName = function() { + return this.first + ' ' + this.last; +}; +Person.prototype.fullNameReversed = function() { + return this.last + ', ' + this.first; +}; +``` + +`Person.prototype`은 모든 `Person` 인스턴스들간에 공유되는 객체입니다. 이는 lookup(찾아보기) 체인의 한 부분을 이룹니다. (이건 "prototype chain"이라는 특수한 이름을 따로 가지고 있습니다) 다시 말해, `Person` 객체의 설정되지 않은 속성에 접근을 시도할 때마다, 그것의 대체용도로 JavaScript는 `Person.prototype`에 그 속성이 존재하는지 살펴봅니다.그 결과, `Person.prototype`에 할당된 모든 것은 `this` 객체를 통해 해당 컨스트럭터에 속한 모든 인스턴스들간에 사용 가능하게 됩니다. + +이것은 정말 강력한 도구입니다. JavaScript에서는 임의의 prototype을 프로그램 내에서 언제든 변형할 수 있습니다. 이미 존재하는 객체에 추가적인 메소드를 실시간으로 추가가할 수 있다는 이야기입니다: + +```js +var s = new Person("Simon", "Willison"); +s.firstNameCaps(); //TypeError on line 1: s.firstNameCaps is not a function + +Person.prototype.firstNameCaps = function() { + return this.first.toUpperCase() +}; +s.firstNameCaps(); // "SIMON" +``` + +흥미롭게도, JavaScript의 빌트인 객체의 prototype에도 뭔가를 더 추가할 수 있습니다. `String` 객체에 문자열 순서를 거꾸로 배열하여 돌려주는 메소드를 추가해 봅시다. + +```js +var s = "Simon"; +s.reversed(); // TypeError on line 1: s.reversed is not a function + +String.prototype.reversed = function() { + var r = ""; + for (var i = this.length - 1; i >= 0; i--) { + r += this[i]; + } + return r; +}; + +s.reversed(); // nomiS +``` + +우리가 추가한 새로운 메소드는 심지어 문자열 상수에서도 동작합니다! + +```js +"This can now be reversed".reversed(); // desrever eb won nac sihT +``` + +기존에 언급한 바와같이, prototype은 체인의 한 부분을 이룹니다. 해당 체인의 루트는 `Object.prototype` 이며 `toString()` 메소드를 포함합니다. 이 메소드는 객체를 문자열로 나타내려할 때 호출됩니다. 이 메소드는 우리의 `Person` 객체의 디버깅에 유용합니다: + +```js +var s = new Person("Simon", "Willison"); +s.toString(); // [object Object] + +Person.prototype.toString = function() { + return '<Person: ' + this.fullName() + '>'; +} + +s.toString(); // "<Person: Simon Willison>" +``` + +`avg.apply()`의 첫번째 매개변수가 null 이었던걸 기억해봅시다. `apply()`에 적용되는 첫번째 인자는 당연히 '`this`'로 간주되는 객체입니다. 여기에 `new` 의 간단한 구현을 보시죠: + +```js +function trivialNew(constructor, ...args) { + var o = {}; // 빈 객체를 생성 + constructor.apply(o, args); + return o; +} +``` + +이것은 prototype 체인을 설정하지 않으므로 `new`의 완벽한 대체물이 될 수 없습니다.(이 부분은 설명하기 어렵습니다). 이 내용은 자주 사용하지는 않겠지만 알아두면 좋습니다. 이 부분에서 `...args` (생략 부호를 포함해서)는 "[rest arguments](/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters)" 라고 불립니다. 이름이 암시하는 것처럼 매개변수의 나머지를 포함합니다. + +그러므로 이렇게 호출하는 것은 + +```js +var bill = trivialNew(Person, 'William', 'Orange'); +``` + +아래와 거의 동일합니다. + +```js +var bill = new Person('William', 'Orange'); +``` + +`apply()` 와 비슷하게 `this`를 다시 설정할 수 있게 하는, [`call`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call)이라는 이름의 자매 함수가 있는데, 인자로 단일 배열이 아니라 확장된 인자 목록을 입력받습니다. + +```js +function lastNameCaps() { + return this.last.toUpperCase(); +} +var s = new Person('Simon', 'Willison'); +lastNameCaps.call(s); +// 위의 구문은 다음과 같습니다: +s.lastNameCaps = lastNameCaps; +s.lastNameCaps(); +``` + +### 내장 함수 (Inner functions) + +다른 함수의 내부에서 JavaScript 함수를 선언할 수 있습니다. 우리는 `makePerson()` 함수 초기 버전에서 이것을 한번 본적이 있습니다. JavaScript에서 중첩 함수(nested functions)의 중요한 세부사항은 부모 함수 범위의 변수에 접근할 수 있다는 사실입니다: + +```js +function parentFunc() { + var a = 1; + + function nestedFunc() { + var b = 4; // parentFunc은 사용할 수 없는 변수 + return a + b; + } + return nestedFunc(); // 5 +} +``` + +좀 더 유지관리가 쉬운 코드를 작성하고자 할때 이 특성이 굉장히 유용합니다. 한개 혹은 두개의 정도의 함수에서만 호출되며 전체 코드중 다른 부분에서는 사용처가 없는 함수라면 그 함수내에 해당 함수를 중첩시키는 것이 좋습니다. 이렇게 전역 범위 함수의 갯수를 늘리지 않도록 하는 것은 언제나 좋은 습관입니다. + +이것은 또한 전역 변수에 대한 유혹을 뿌리칠 수 있는 좋은 대안이 됩니다. 복잡한 코드를 쓸 때, 다양한 함수들간에 값을 공유할 수 있도록 전역 변수를 사용하고 싶어집니다 - 전역 변수는 코드 유지 보수를 어렵게 만듭니다. 중첩 함수는 그 부모 함수의 범위에서 변수를 공유할 수 있으므로, 이 방법을 사용하면 전역 변수 이름공간을 건드리지 않고도 적절한 경우에 함수들을 연동시킬수 있습니다. - '지역 전역'이라고 불러도 괜찮겠네요. 이 기술을 사용할 때는 주의를 요하겠지만, 반드시 알아둬야할 유용한 기술입니다. + +## 클로져 (Closures) + +클로져 (역자주: 글자 그대로 한국어로 해석하면 닫힌 주머니)는 JavaScript가 제공해야만 하는 가장 막강한 추상 개념으로 우리를 이끕니다 - 하지만 동시에 잠재적으로 가장 혼란스럽기도 합니다. 다음 함수는 무엇을 하는 걸까요? + +```js +function makeAdder(a) { + return function(b) { + return a + b; + }; +} +var add5 = makeAdder(5); +var add20 = makeAdder(20); +add5(6); // ? +add20(7); // ? +``` + +`makeAdder` 함수의 이름은 다음과 같은 과정을 거쳐 반드시 없어집니다: 해당 함수가 한 매개변수를 받아 호출됐을 때, 생성될 때 주어진 매개변수를 더하는 새 'adder' 함수를 생성합니다. + +여기서 일어나는 일은 다른 함수의 내에 정의된 어떤 함수가 외부 함수의 변수에 액세스한다는 점에서 앞에 언급한 내장 함수에서 일어나는 일과 매우 비슷합니다. 한가지 다른 점은 외부 함수가 리턴 된다는 점인데, 상식적으로 그것에 들어 있는 변수는 사라진다고 볼 수 있습니다. 하지만 그들은 여전히*존재합니다* - 그렇지 않으면 adder 함수는 동작하지 않겠지요. 게다가, `makeAdder` 지역 변수의 서로 다른 두 "복사본"이 존재합니다 - 하나의 `a`는 5이고, 다른 하나의 `a`는 20이죠. 따라서 해당 함수를 부른 결과는 다음과 같습니다: + +```js +add5(6); // returns 11 +add20(7); // returns 27 +``` + +이건 실제로 일어나는 일입니다. JavaScript 함수가 실행될 때는 언제나, '범위' 객체가 생성되어 해당 함수내에서 생성된 지역 변수를 여기에 저장하고 있습니다. 함수 매개변수로서 넘겨진 어떤 변수라도 여기에 초기값으로 저장하고 있습니다. 이것은 모든 전역 변수와 함수가 들어있는 전역 객체와 비슷하지만, 두가지 중요한 차이점이 있습니다. 첫번째로, 함수가 실행될 때마다 새로운 범위 객체가 생성된다는 점과, 두번째로, (브라우저에서 window로 접근가능한) 전역 객체와 달리 범위 객체는 JavaScript 코드에서 직접적으로 액세스할 수 없다는 점입니다. 예를 들자면 현재 범위 객체의 속성에 반복 접근할 수 있는 수단이 없습니다. + +따라서 `makeAdder` 가 호출되면, 범위 객체는 `makeAdder` 함수에 매개변수로 넘겨진 하나의 속성 `a`를 가진 상태로 생성됩니다. 일반적으로 JavaScript의 가비지 컬렉터가 이때 `makeAdder`에 의해 생성된 범위 객체를 청소해야겠지만, 리턴된 함수가 여전히 범위 객체를 참조하고 있습니다. 결과적으로 범위 객체는 `makeAdder`에 의해 리턴된 함수 객체가 더는 참조되지 않을 때까지 가비지 컬렉터에 의해 정리되지 않게됩니다. + +범위 객체는 JavaScript 객체 체계에서 사용되는 prototype 사슬과 비슷한 범위 사슬이라고 불리는 사슬을 형성합니다. + +클로져는 함수와 함수에 의해 생성되는 범위 객체를 함께 지칭하는 용어입니다. + +또한 클로져는 상태를 저장할 수 있도록 허용합니다 - 그렇기 때문에, 객체의 내부에서 자주 사용될 수 있는 것입니다. + +### 메모리 누출 + +클로져의 부작용은 Internet Explorer에서 심각하지는 않지만 쉽게 메모리 누출이 된다는 것입니다. JavaScript는 가비지 컬렉트를 하는 언어 입니다. 객체가 생성됨에 따라서 메모리가 할당되고, 사용하고난 메모리는 더 참조하는 다른 객체가 없을 때 되돌아가는 방식으로 동작하는 언어란 말이죠. 호스트 환경에서 제공되는 객체들은 해당 환경에 의해 다뤄집니다. + +브라우저 호스트는 HTML 페이지에 [DOM](ko/DOM) 객체로서 표현되어있는 많은 수의 객체를 다뤄야 합니다. 이 객체들을 어떻게 할당하고 다시 거둬들일지는 브라우저 책임이죠. + +Internet Explorer는 이를 위해 자신만의 고유한, JavaScript의 그것과는 다른 가비지 컬렉션 방식을 사용합니다. 두 언어간에 상호작용이 일어날 수 있고 이 과정에서 메모리 누출이 발생할 수 있습니다. + +IE에서 메모리 누출은 JavaScript 객체와 고유 객체간에 참조하는 중 자기 자신을 참조 (circular reference, 순환 참조)하게 되는 일이 발생할 경우라면 언제든지 발생하게 됩니다. 다음을 고려해 보도록 합시다: + +```js +function leakMemory() { + var el = document.getElementById('el'); + var o = { 'el': el }; + el.o = o; +} +``` + +위의 코드는 순환 참조로서 메모리 누출을 일으킵니다. IE는 완전히 다시 시작되기 전까지는 `el`와 `o`에 의해 사용되는 메모리를 반환하지 못합니다. + +위의 경우는 알아채지 못하고 지나갈 확률이 높습니다. 메모리 누출은 사실 오랫동안 실행되거나 큰 데이터 구조나 반복, 순환에 의해 누출된는 메모리 양이 많은 경우에서 실질적으로 고려할만한 가치가 생깁니다. + +누출이 이처럼 명확한 경우는 드뭅니다. 누출을 일으키는 데이터 구조는 수차례에 걸친 참조 구조를 가지고 있어서 순환 참조를 하고있는지 명확하지 않은 경우가 더 많습니다. + +클로져는 그렇게 되도록 하지않아도 간단하게 메모리 누출을 일으킬 수 있습니다. 다음을 고려해 봅시다: + +```js +function addHandler() { + var el = document.getElementById('el'); + el.onclick = function() { + this.style.backgroundColor = 'red'; + } +} +``` + +위의 코드는 클릭했을때 배경색이 빨강으로 바뀌는 엘레멘트를 설정합니다. 그리고 메모리 누출도 일으킵니다. 어째서냐고요? `el`을 참조하면 의도와는 달리 익명 내부 함수 때문에 생성된 클로져 내에 붙잡혀 있게 되기 때문입니다. 이는 JavaScript 객체 (내부 함수)와 원시 객체 (`el`)간에 순환 참조를 만듭니다. + +이 문제를 피할 수 있는 많은 방법이 있습니다. 가장 간단한 건 이겁니다: + +```js +function addHandler() { + var el = document.getElementById('el'); + el.onclick = function() { + this.style.backgroundColor = 'red'; + } + el = null; +} +``` + +이렇게 하면 순환 참조 고리를 끊을 수 있습니다. + +놀랍게도, 클로져에 의해 발생된 순환 참조를 고리를 끊기 위한 한 요령은 또다른 클로져를 추가하는 것입니다: + +```js +function addHandler() { + var clickHandler = function() { + this.style.backgroundColor = 'red'; + } + (function() { + var el = document.getElementById('el'); + el.onclick = clickHandler; + })(); +} +``` + +내부 함수는 실행되고 바로 사라지므로서, `clickHandler`와 함께 생성된 클로져로부터 그 내용을 숨깁니다. + +클로져를 피할 수 있는 또다른 좋은 요령은 `window.onunload` 이벤트가 발생하는 동안 순환 참조를 끊는 것입니다. 많은 이벤트 라이브러리가 이렇게 동작합니다. 주의할 것은 그렇게 하도록하면 [Firefox 1.5의 bfcache](ko/Using_Firefox_1.5_caching)를 비활성화 하게 되므로, 별 다른 이유가 없다면 Firefox에서 `unload` listener를 등록해서는 안 된다는 것입니다. + +## 원본 문서 정보 + +- 저자: [Simon Willison](http://simon.incutio.com/) +- 최근 갱신 날짜: March 7, 2006 +- 저작권: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license. +- 추가 정보: For more information about this tutorial (and for links to the original talk's slides), see Simon's [Etech weblog post](http://simon.incutio.com/archive/2006/03/07/etech).
\ No newline at end of file diff --git a/files/ko/web/javascript/about_javascript/index.html b/files/ko/web/javascript/about_javascript/index.html deleted file mode 100644 index 434ecff1e1..0000000000 --- a/files/ko/web/javascript/about_javascript/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: JavaScript에 대하여 -slug: Web/JavaScript/About_JavaScript -tags: - - 비기너 - - 소개 - - 자바스크립트 -translation_of: Web/JavaScript/About_JavaScript -original_slug: Web/JavaScript/About ---- -<p>{{JsSidebar}}</p> - -<h2 id="JavaScript란_무엇인가">JavaScript란 무엇인가?</h2> - -<p><strong>JavaScript</strong><sup>®</sup> (줄여서 <strong>JS</strong>)는 일급 함수를 사용하는 가벼운 객체 지향 인터프리터 언어이며 웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다. 프로토타입 기반, 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍 스타일을 지원한다.</p> - -<p>자바스크립트는 클라이언트 측 웹(브라우저)에서 실행 되고, 웹 페이지가 이벤트 발생시 어떻게 작동하는 지 디자인 / 프로그래밍할 수 있다. 자바스크립트는 쉽게 배울 수 있고 강력한 스크립트 언어로 웹 페이지 동작을 제어하는 데 널리 사용된다.</p> - -<p>대중적인 오해와 달리, <strong>Javascript는 인터프리트 형태 자바가 아니다. </strong>간단히 말하면, Javascript는 프로토 타입 기반 객체 생성을 지원하는 동적 스크립트 언어이다. <span style="line-height: 1.5;">기본적인 문법은 언어 학습에 필요한 새로운 개념을 줄이기 위해 Java와 C++의 if문, for와 while문, switch문과 try...catch 구문을 사용하는 언어구조를 사용하며, 그와 같은 (거의 가까운) 동작을 한다. </span></p> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">Javascript는 <a class="external" href="http://www.instantweb.com/%7Efoldoc/foldoc.cgi?query=procedural&action=Search">절차지향 (procedural)</a> 언어와 <a class="external" href="http://www.instantweb.com/%7Efoldoc/foldoc.cgi?query=object+oriented&action=Search">객체지향 (object oriented)</a> 언어 두가지 형태로 만들수 있다. 자바스크립트에서 객체는 실시간으로 빈 객체를 오버라이딩하여 메소드와 프로퍼티를 연결하는 (프로그래밍)방식으로 생성된다. <span style="line-height: 1.5;">C++ 및 Java와 같은 컴파일 언어에서 공통적인 구문 클래스 정의와 반대되는 개념이다. 한번 객체가 생성하면, 비슷한 객체를 생성할 때 프로토타입으로 사용할 수 있다.</span></p> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">JavaScript의 동적인 성질은, 실행시의 오브젝트 구축, 가변 인수 리스트, 함수 변수, (eval 에 의한)동적 스크립트 작성, (for ... in 에 의한) 오브젝트의 내부참조, 또는 소스코드 복원 (JavaScript 의 프로그램은 함수본체를 소스텍스트에 역컴파일할 수 있다.) 을 포함하고 있다.</p> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">자바스크립트 프로그래밍에 대한 더 자세한 설명은 아래의 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/About#JavaScript_%EC%9E%90%EC%9B%90">자바스크립트 리소스</a> 링크를 참조하면 된다.</p> - -<h2 id="어떠한_JavaScript_구현이_유용한가">어떠한 JavaScript 구현이 유용한가?</h2> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">Mozilla 프로젝트는 두 가지 자바스크립트 구현을 제공한다. 최초의 Javascript는 Netscape의 Brendan Eich에 의해 만들었다. 이후 ECMA-262 에디션 5 와 최신 버전을 준수하도록 업데이트되었다. <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a> 라는 이름의 엔진은 C/C++로 구현되었다. <a href="https://developer.mozilla.org/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a> 엔진은 주로 Norris Boys(또한 Netscape)가 만들었고 Java로 작성된 Javascript 구현체이다. SpiderMonkey와 마찬가지로 Rhino도 ECMA-262 에디션 5를 준거한다.</p> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) 그리고 IonMonkey와 같은 몇가지 주요한 실시간 최적화는 차츰 SpiderMonkey 자바스크립트 엔진에 추가되었다. 자바스크립트 실행 성능 향상을 위한 작업은 지금도 진행 중이다.</p> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">위의 구현 이외에도 다음과 같은 다른 인기있는 자바스크립트 엔진이 있다.</p> - -<ul> - <li style="padding: 0px; margin: 0px 0px 1.7em;">구글의 <a href="https://code.google.com/p/v8/">V8</a> 은 크롬 브라우저와 최신 버전의 오페라 브라우저에 사용된다. 또 Node.js의 엔진으로 사용된다.</li> - <li style="padding: 0px; margin: 0px 0px 1.7em;"><a href="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro) 는 Apple 사파리와 같은 일부 WebKit 브라우저에서 사용된다.</li> - <li style="padding: 0px; margin: 0px 0px 1.7em;"><a href="http://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> 는 오페라의 예전 버전안에 있다.</li> - <li style="padding: 0px; margin: 0px 0px 1.7em;"><a href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> 엔진은 Internet Explorer에서 사용된다. (상표권 문제를 피하기 위해 공식적으로 "JScript"라고 불린다.)</li> -</ul> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">mozilla.org의 각 JavaScript 엔진은, 애플리케이션이 JavaScript를 지원하기 위해 부를 수 있는 공개 API를 공개하고 있다. JavaScript 를 지원하는 가장 일반적인 호스트환경은 웹브라우저이다. 웹 브라우저는 일반적으로 공개 API를 사용하여 <a class="external external-icon" href="http://www.w3.org/DOM/">DOM</a>을 Javascript로 반영하는 <strong>호스트 객체</strong>를 만든다.</p> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">JavaScript 의 또 다른 일반적인 애플리케이션은 (웹) 서버사이드 스크립팅 언어이다. 자바스크립트 웹 서버는 HTTP 요청 및 응답 객체를 나타내는 호스트 객체를 공개하며 자바 스크립트 프로그램에 의해 조작되어 웹 페이지를 동적으로 생성 할 수 있다. <a href="http://nodejs.org/">Node.js</a>는 이에 대한 대중적인 예이다.</p> - -<h2 id="JavaScript_자원">JavaScript 자원</h2> - -<dl style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;"> - <dt style="font-weight: bold; font-style: normal;"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a></dt> - <dd style="padding-left: 15px; margin-bottom: 0.5em; margin-left: 0px;">애플리케이션에 임베드하는 방법을 포함하는, C/C++ 엔진(SpiderMonkey)으로 구현된 Mozilla의 JavaScript 구현체에 관한 정보.</dd> - <dt style="font-weight: bold; font-style: normal;"><a href="https://developer.mozilla.org/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a></dt> - <dd style="padding-left: 15px; margin-bottom: 0.5em; margin-left: 0px;">Java(Rhino)로 작성된 자바스크립트 구현체에 관련 정보.</dd> - <dt style="font-weight: bold; font-style: normal;"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources" title="en-US/docs/JavaScript_Language_Resources">Language resources</a></dt> - <dd style="padding-left: 15px; margin-bottom: 0.5em; margin-left: 0px;">자바스크립트 표준을 출판하기 위한 포인터들.</dd> - <dt style="font-weight: bold; font-style: normal;"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript" title="en-US/docs/A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a></dt> - <dd style="padding-left: 15px; margin-bottom: 0.5em; margin-left: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" title="en-US/docs/JavaScript/Guide">자바스크립트 가이드</a>와 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">자바스크립트 레퍼런스</a>.</dd> -</dl> - -<p>JavaScript® 는 미국 및 여러 나라의 Oracle 트레이드마크 또는 등록된 트레이드마크입니다.</p> diff --git a/files/ko/web/javascript/about_javascript/index.md b/files/ko/web/javascript/about_javascript/index.md new file mode 100644 index 0000000000..285fe3e5fa --- /dev/null +++ b/files/ko/web/javascript/about_javascript/index.md @@ -0,0 +1,52 @@ +--- +title: JavaScript에 대하여 +slug: Web/JavaScript/About_JavaScript +tags: + - Beginner + - Guide + - Introduction + - JavaScript +translation_of: Web/JavaScript/About_JavaScript +original_slug: Web/JavaScript/About +--- +{{JsSidebar}} + +## JavaScript란 무엇인가? + +**JavaScript** (줄여서 **JS**)는 [일급 함수](https://en.wikipedia.org/wiki/First-class_function)를 사용하는 가벼운 객체 지향 인터프리터 언어이며 웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다. [프로토타입 기반](https://en.wikipedia.org/wiki/Prototype-based_programming), 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍 스타일을 지원한다. + +자바스크립트는 클라이언트 측 웹(브라우저)에서 실행 되고, 웹 페이지가 이벤트 발생 시 어떻게 작동하는 지 디자인 / 프로그래밍할 수 있다. 자바스크립트는 쉽게 배울 수 있고 강력한 스크립트 언어로 웹 페이지 동작을 제어하는 데 널리 사용된다. + +대중적인 오해와 달리, **Javascript는 "인터프리트 형태의 자바"가 아니다.** 간단히 말하면, Javascript는 [프로토타입 기반](/ko/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#class-based_vs._prototype-based_languages) 객체 생성을 지원하는 동적 스크립트 언어이다. 기본적인 문법은 언어 학습에 필요한 새로운 개념을 줄이기 위해 Java와 C++의 `if`문, `for`와 `while`문, `switch`문과 `try...catch` 구문을 사용하는 언어구조를 사용하며, 그와 같은 (거의 가까운) 동작을 한다. + +Javascript는 [절차지향 (procedural)](http://www.instantweb.com/%7Efoldoc/foldoc.cgi?query=procedural&action=Search) 언어와 [객체지향 (object oriented)](http://www.instantweb.com/%7Efoldoc/foldoc.cgi?query=object+oriented&action=Search) 언어 두가지 형태로 만들수 있다. 자바스크립트에서 객체는 **실행 시간에** 빈 객체를 오버라이딩하여 메소드와 프로퍼티를 연결하는 (프로그래밍)방식으로 생성된다. C++ 및 Java와 같은 컴파일 언어에서 공통적인 구문 클래스 정의와 반대되는 개념이다. 한번 객체가 생성하면, 비슷한 객체를 생성할 때 프로토타입으로 사용할 수 있다. + +JavaScript의 동적인 성질은, 실행시의 오브젝트 구축, 가변 인수 리스트, 함수 변수, ([`eval`](/ko/docs/Web/JavaScript/Reference/Global_Objects/eval)) 에 의한)동적 스크립트 작성, (`for ... in` 에 의한) 오브젝트의 내부참조, 또는 소스코드 복원 (JavaScript 의 프로그램은 함수본체를 소스텍스트에 역컴파일할 수 있다.) 을 포함하고 있다. + +자바스크립트 프로그래밍에 대한 더 자세한 설명은 아래의 [자바스크립트 자원](#javascript_자원) 링크를 참조하면 된다. + +## 어떠한 JavaScript 구현이 유용한가? + +Mozilla 프로젝트는 두 가지 자바스크립트 구현을 제공한다. 최초의 Javascript는 Netscape의 Brendan Eich에 의해 만들었다. 이후 ECMA-262 에디션 5 와 최신 버전을 준수하도록 업데이트되었다. [SpiderMonkey](https://spidermonkey.dev/)라는 이름의 엔진은 C/C++로 구현되었다. [Rhino](https://en.wikipedia.org/wiki/Rhino_(JavaScript_engine)) 엔진은 주로 Norris Boys(또한 Netscape)가 만들었고 Java로 작성된 Javascript 구현체이다. SpiderMonkey와 마찬가지로 Rhino도 ECMA-262 에디션 5를 준거한다. + +TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) 그리고 IonMonkey와 같은 몇가지 주요한 실시간 최적화는 차츰 SpiderMonkey 자바스크립트 엔진에 추가되었다. 자바스크립트 실행 성능 향상을 위한 작업은 지금도 진행 중이다. + +위의 구현 이외에도 다음과 같은 다른 인기있는 자바스크립트 엔진이 있다. + +- 구글의 [V8](https://code.google.com/p/v8/) 은 크롬 브라우저와 최신 버전의 오페라 브라우저에 사용된다. 또 Node.js의 엔진으로 사용된다. +- [JavaScriptCore](https://www.webkit.org/projects/javascript/index.html) (SquirrelFish/Nitro) 는 Apple 사파리와 같은 일부 WebKit 브라우저에서 사용된다. +- [Carakan](https://my.opera.com/ODIN/blog/carakan-faq)는 오페라의 예전 버전안에 있다. +- [Chakra](https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29) 엔진은 Internet Explorer에서 사용된다. (상표권 문제를 피하기 위해 공식적으로 "JScript"라고 불린다.) + +mozilla.org의 각 JavaScript 엔진은, 애플리케이션이 JavaScript를 지원하기 위해 부를 수 있는 공개 API를 공개하고 있다. JavaScript 를 지원하는 가장 일반적인 호스트환경은 웹브라우저이다. 웹 브라우저는 일반적으로 공개 API를 사용하여 [DOM](https://www.w3.org/DOM/)을 Javascript로 반영하는 **호스트 객체**를 만든다. + +JavaScript 의 또 다른 일반적인 애플리케이션은 (웹) 서버사이드 스크립팅 언어이다. 자바스크립트 웹 서버는 HTTP 요청 및 응답 객체를 나타내는 호스트 객체를 공개하며 자바 스크립트 프로그램에 의해 조작되어 웹 페이지를 동적으로 생성 할 수 있다. [Node.js](https://nodejs.org/)는 이에 대한 대중적인 예이다. + +## JavaScript 자원 + +- [Language resources](/ko/docs/Web/JavaScript/Language_Resources) + - : 자바스크립트 표준을 출판하기 위한 포인터들. +- [A re-introduction to JavaScript](/ko/docs/Web/JavaScript/A_re-introduction_to_JavaScript) + - : [Javascript 가이드](/ko/docs/Web/JavaScript/Guide)와 [JavaScript reference](/ko/docs/Web/JavaScript/Reference). + +JavaScript® 는 미국 및 여러 나라의 Oracle 트레이드마크 또는 등록된 트레이드마크입니다. diff --git a/files/ko/web/javascript/closures/index.html b/files/ko/web/javascript/closures/index.html deleted file mode 100644 index dc6fdbc41c..0000000000 --- a/files/ko/web/javascript/closures/index.html +++ /dev/null @@ -1,455 +0,0 @@ ---- -title: 클로저 -slug: Web/JavaScript/Closures -tags: - - Closure - - ES5 - - Intermediate - - JavaScript - - Reference -translation_of: Web/JavaScript/Closures -original_slug: Web/JavaScript/Guide/Closures ---- -<div>{{jsSidebar("Intermediate")}}</div> - -<p>클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.</p> - -<h2 id="어휘적_범위_지정Lexical_scoping">어휘적 범위 지정(Lexical scoping)</h2> - -<p>다음을 보자:</p> - -<pre>function init() { - var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다. - function displayName() { // displayName() 은 내부 함수이며, 클로저다. - alert(name); // 부모 함수에서 선언된 변수를 사용한다. - } - displayName(); -} -init();</pre> - -<p><code>init()</code>은 지역 변수 <code>name</code>과 함수 <code>displayName()</code>을 생성한다. <code>displayName()</code>은 <code>init()</code> 안에 정의된 내부 함수이며 <code>init()</code> 함수 본문에서만 사용할 수 있다. 여기서 주의할 점은 <code>displayName()</code> 내부엔 자신만의 지역 변수가 없다는 점이다. 그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 <code>displayName()</code> 역시 부모 함수 <code>init()</code>에서 선언된 변수 <code>name</code>에 접근할 수 있다. 만약 <code>displayName()</code>가 자신만의 <code>name</code>변수를 가지고 있었다면, <code>name</code>대신 <code>this.name</code>을 사용했을 것이다.</p> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}}</p> - -<p>위 코드를 <a href="http://jsfiddle.net/xAFs9/3/">실행</a>하면 <code>displayName()</code> 함수 내의 <code>alert()</code>문이 부모 함수에서 정의한 변수 <code>name</code>의 값을 성공적으로 출력한다. 이 예시를 통해 함수가 중첩된 상황에서 파서가 어떻게 변수를 처리하는지 알 수 있다. 이는 어휘적 범위 지정(lexical scoping)의 한 예이다. 여기서 "lexical"이란, 어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다. 단어 "lexical"은 이런 사실을 나타낸다. 중첩된 함수는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다.</p> - -<h2 id="클로저Closure">클로저(Closure)</h2> - -<p>이제 다음 예제를 보자:</p> - -<pre>function makeFunc() { - var name = "Mozilla"; - function displayName() { - alert(name); - } - return displayName; -} - -var myFunc = makeFunc(); -//myFunc변수에 displayName을 리턴함 -//유효범위의 어휘적 환경을 유지 -myFunc(); -//리턴된 displayName 함수를 실행(name 변수에 접근)</pre> - -<p>이 코드는 바로 전의 예제와 완전히 동일한 결과가 실행된다. 하지만 흥미로운 차이는 <code>displayName()</code>함수가 실행되기 전에 외부함수인 <code>makeFunc()</code>로부터 리턴되어 <code>myFunc</code> 변수에 저장된다는 것이다.</p> - -<p>한 눈에 봐서는 이 코드가 여전히 작동하는 것이 직관적으로 보이지 않을 수 있다. 몇몇 프로그래밍 언어에서, 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재한다. <code>makeFunc()</code> 실행이 끝나면(<code>displayName</code>함수가 리턴되고 나면) <code>name</code> 변수에 더 이상 접근할 수 없게 될 것으로 예상하는 것이 일반적이다.</p> - -<p>하지만 위의 예시와 자바스크립트의 경우는 다르다. 그 이유는 자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성하기 때문이다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 첫 번째 예시의 경우, <code>myFunc</code>은 <code>makeFunc</code>이 실행될 때 생성된 <code>displayName</code> 함수의 인스턴스에 대한 참조다. <code>displayName</code>의 인스턴스는 변수 <code>name</code> 이 있는 어휘적 환경에 대한 참조를 유지한다. 이런 이유로 <code>myFunc</code>가 호출될 때 변수 <code>name</code>은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 <code>alert</code> 에 전달된다.</p> - -<p>다음은 조금 더 흥미로운 예제인 makeAdder 함수이다:</p> - -<pre>function makeAdder(x) { - var y = 1; - return function(z) { - y = 100; - return x + y + z; - }; -} - -var add5 = makeAdder(5); -var add10 = makeAdder(10); -//클로저에 x와 y의 환경이 저장됨 - -console.log(add5(2)); // 107 (x:5 + y:100 + z:2) -console.log(add10(2)); // 112 (x:10 + y:100 + z:2) -//함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산 - -</pre> - -<p>이 예제에서 단일 인자 <code>x</code>를 받아서 새 함수를 반환하는 함수 <code>makeAdder(x)를 정의했다.</code> 반환되는 함수는 단일 인자 <font face="consolas, Liberation Mono, courier, monospace">z</font>를 받아서 x와 y와 z의 합을 반환한다.</p> - -<p>본질적으로 <code>makeAdder</code>는 함수를 만들어내는 공장이다. 이는 <code>makeAdder</code>함수가 특정한 값을 인자로 가질 수 있는 함수들을 리턴한다는 것을 의미한다. 위의 예제에서 <code>add5, add10</code> 두 개의 새로운 함수들을 만들기 위해 <code>makeAdder</code>함수 공장을 사용했다. 하나는 매개변수 <font face="consolas, Liberation Mono, courier, monospace">x</font>에 5를 더하고 다른 하나는 매개변수 <font face="consolas, Liberation Mono, courier, monospace">x</font>에 10을 더한다.</p> - -<p><code>add5</code>와 <code>add10</code>은 둘 다 클로저이다. 이들은 같은 함수 본문 정의를 공유하지만 서로 다른 맥락(어휘)적 환경을 저장한다. 함수 실행 시 <code>add5</code>의 맥락적 환경에서 클로저 내부의 x는 5 이지만 <code>add10</code>의 맥락적 환경에서 x는 10이다. 또한 리턴되는 함수에서 초기값이 1로 할당된 y에 접근하여 y값을 100으로 변경한 것을 볼 수 있다. (물론 x값도 동일하게 변경 가능하다.) 이는 클로저가 리턴된 후에도 외부함수의 변수들에 접근 가능하다는 것을 보여주는 포인트이며 클로저에 단순히 값 형태로 전달되는 것이 아니라는 것을 의미한다.</p> - -<h2 id="실용적인_클로저">실용적인 클로저</h2> - -<p>클로저는 어떤 데이터(어휘적 환경)와 그 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다. 이것은 객체가 어떤 데이터와(그 객체의 속성) 하나 혹은 그 이상의 메소드들을 연관시킨다는 점에서 객체지향 프로그래밍과 분명히 같은 맥락에 있다.</p> - -<p>결론적으로 오직 하나의 메소드를 가지고 있는 객체를 일반적으로 사용하는 모든 곳에 클로저를 사용할 수 있다.</p> - -<p>이렇게 할 수 있는 상황은 특히 웹에서 일반적이다. 프론트 엔드 자바스크립트에서 우리가 쓰는 많은 코드가 이벤트 기반이다. 우리는 몇 가지 동작을 정의한 다음 사용자에 의한 이벤트에(클릭 혹은 키 누르기 같은) 연결한다. 우리의 코드는 일반적으로 콜백으로 첨부된다: 이벤트에 응답하여 실행되는 단일 함수다.</p> - -<p>예를 들면 페이지의 글자 크기를 조정하는 몇 개의 버튼을 추가한다고 가정하자. 이 작업을 수행하는 한 가지 방법은 body 요소의 font-size를 픽셀 단위로 지정하고 상대적인 em 단위를 사용하여 페이지의 다른 요소들의 (예: 헤더) 크기를 설정하는 것이다.</p> - -<pre>body { - font-family: Helvetica, Arial, sans-serif; - font-size: 12px; -} - -h1 { - font-size: 1.5em; -} - -h2 { - font-size: 1.2em; -} -</pre> - -<p>우리의 대화식 글자 크기 버튼들은 body 요소의 font-size 속성을 변경할 수 있고 이런 조정은 상대적 단위들 덕분에 페이지의 다른 요소에 의해 선택된다.</p> - -<p>여기 자바스크립트 코드가 있다.</p> - -<pre>function makeSizer(size) { - return function() { - document.body.style.fontSize = size + 'px'; - }; -} - -var size12 = makeSizer(12); -var size14 = makeSizer(14); -var size16 = makeSizer(16); -</pre> - -<p><code>size12</code>, <code>size14</code>, <code>size16</code>은 body 요소의 글자 크기를 각각 12, 14, 16 픽셀로 바꾸는 함수이다. 이 함수들을 아래처럼 버튼들에(이 경우에는 링크) 연결할 수 있다.</p> - -<pre>document.getElementById('size-12').onclick = size12; -document.getElementById('size-14').onclick = size14; -document.getElementById('size-16').onclick = size16; -</pre> - -<pre><a href="#" id="size-12">12</a> -<a href="#" id="size-14">14</a> -<a href="#" id="size-16">16</a> -</pre> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}}</p> - -<h2 id="클로저를_이용해서_프라이빗_메소드_private_method_흉내내기">클로저를 이용해서 프라이빗 메소드 (private method) 흉내내기</h2> - -<p>자바와 같은 몇몇 언어들은 메소드를 프라이빗으로 선언할 수 있는 기능을 제공한다. 이는 같은 클래스 내부의 다른 메소드에서만 그 메소드들을 호출할 수 있다는 의미이다.</p> - -<p>자바스크립트는 태생적으로는 이런 방법을 제공하지 않지만 클로저를 이용하여 프라이빗 메소드를 흉내내는 것이 가능하다. 프라이빗 메소드는 코드에 제한적인 접근만을 허용한다는 점 뿐만 아니라 전역 네임 스페이스를 관리하는 강력한 방법을 제공하여 불필요한 메소드가 공용 인터페이스를 혼란스럽게 만들지 않도록 한다.</p> - -<p>아래 코드는 프라이빗 함수와 변수에 접근하는 퍼블릭 함수를 정의하기 위해 클로저를 사용하는 방법을 보여준다. 이렇게 클로저를 사용하는 것을 <a href="http://www.google.com/search?q=javascript+module+pattern">모듈 패턴</a>이라 한다.</p> - -<pre>var counter = (function() { - var privateCounter = 0; - function changeBy(val) { - privateCounter += val; - } - return { - increment: function() { - changeBy(1); - }, - decrement: function() { - changeBy(-1); - }, - value: function() { - return privateCounter; - } - }; -})(); - -console.log(counter.value()); // logs 0 -counter.increment(); -counter.increment(); -console.log(counter.value()); // logs 2 -counter.decrement(); -console.log(counter.value()); // logs 1 -</pre> - -<p>이전 예제에서 각 클로저들이 고유한 문법적 환경을 가졌지만 여기서 우리는 <code>counter.increment</code>, <code>counter.decrement</code>, <code>counter.value </code>세 함수에 의해 공유되는 하나의 어휘적 환경을 만든다.</p> - -<p>공유되는 어휘적 환경은 실행되는 익명 함수 안에서 만들어진다. 이 익명 함수는 정의되는 즉시 실행된다. 이 어휘적 환경은 두 개의 프라이빗 아이템을 포함한다. 하나는 <code>privateCounter</code>라는 변수이고 나머지 하나는 <code>changeBy</code>라는 함수이다. 둘 다 익명 함수 외부에서 접근될 수 없다. 대신에 익명 래퍼에서 반환된 세 개의 퍼블릭 함수를 통해서만 접근되어야만 한다.</p> - -<p>위의 세 가지 퍼블릭 함수는 같은 환경을 공유하는 클로저다. 자바스크립트의 어휘적 유효 범위 덕분에 세 함수 각각 <code>privateCounter</code> 변수와 <code>changeBy</code> 함수에 접근할 수 있다.</p> - -<p>카운터를 생성하는 익명 함수를 정의하고 그 함수를 즉시 호출하고 결과를 counter 변수에 할당하는 것을 알아차렸을 것이다. 이 함수를 별도의 변수 makeCounter 저장하고 이 변수를 이용해 여러 개의 카운터를 만들 수 있다.</p> - -<pre>var makeCounter = function() { - var privateCounter = 0; - function changeBy(val) { - privateCounter += val; - } - return { - increment: function() { - changeBy(1); - }, - decrement: function() { - changeBy(-1); - }, - value: function() { - return privateCounter; - } - } -}; - -var counter1 = makeCounter(); -var counter2 = makeCounter(); -alert(counter1.value()); /* 0 */ -counter1.increment(); -counter1.increment(); -alert(counter1.value()); /* 2 */ -counter1.decrement(); -alert(counter1.value()); /* 1 */ -alert(counter2.value()); /* 0 */ -</pre> - -<p>두 개의 카운터가 어떻게 다른 카운터와 독립성을 유지하는지 주목해보자. 각 클로저는 그들 고유의 클로저를 통한 privateCounter 변수의 다른 버전을 참조한다. 각 카운터가 호출될 때마다; 하나의 클로저에서 변수 값을 변경해도 다른 클로저의 값에는 영향을 주지 않는다.</p> - -<p>이런 방식으로 클로저를 사용하여 객체지향 프로그래밍의 정보 은닉과 캡슐화 같은 이점들을 얻을 수 있다.</p> - -<h2 id="클로저_스코프_체인">클로저 스코프 체인</h2> - -<p>모든 클로저에는 세가지 스코프(범위)가 있다:-</p> - -<ul> - <li>지역 범위 (Local Scope, Own scope)</li> - <li>외부 함수 범위 (Outer Functions Scope)</li> - <li>전역 범위 (Global Scope)</li> -</ul> - -<p>따라서, 우리는 클로저에 대해 세가지 범위 모두 접근할 수 있지만, 중첩된 내부 함수가 있는 경우 종종 실수를 저지른다. 아래 예제를 확인해보자:</p> - -<pre><code>// 전역 범위 (global scope) -var e = 10; -function sum(a){ - return function(b){ - return function(c){ - // 외부 함수 범위 (outer functions scope) - return function(d){ - // 지역 범위 (local scope) - return a + b + c + d + e; - } - } - } -} - -console.log(sum(1)(2)(3)(4)); // log 20 - -// 익명 함수 없이 작성할 수도 있다. - -// 전역 범위 (global scope) -var e = 10; -function sum(a){ - return function sum2(b){ - return function sum3(c){ - // 외부 함수 범위 (outer functions scope) - return function sum4(d){ - // 지역 범위 (local scope) - return a + b + c + d + e; - } - } - } -} - -var s = sum(1); -var s1 = s(2); -var s2 = s1(3); -var s3 = s2(4); -console.log(s3) //log 20</code></pre> - -<p>위의 예제를 보면 일련의 중첩된 함수들을 확인할 수 있다. 이 함수들은 전부 외부 함수의 스코프에 접근할 수 있다. 그런데 문제는 즉각적인 외부 함수의 스코프만을 추측한다는 것이다. 이 문맥에서는 모든 클로저가 선언된 외부 함수의 스코프에 접근한다라고 말할 수 있다.</p> - -<h2 id="루프에서_클로저_생성하기_일반적인_실수">루프에서 클로저 생성하기: 일반적인 실수</h2> - -<p>ECMAScript 2015의 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let" title="방해"><code>let</code> 키워드</a> 소개 전에는 클로저와 관련된 일반적인 문제는 루프 안에서 클로저가 생성되었을 때 발생한다.다음 예제를 보자.</p> - -<pre><p id="help">Helpful notes will appear here</p> -<p>E-mail: <input type="text" id="email" name="email"></p> -<p>Name: <input type="text" id="name" name="name"></p> -<p>Age: <input type="text" id="age" name="age"></p> -</pre> - -<pre>function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - var item = helpText[i]; - document.getElementById(item.id).onfocus = function() { - showHelp(item.help); - } - } -} - -setupHelp(); -</pre> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}</p> - -<p>helpText 배열은 세 개의 도움말 힌트를 정의한다. 각 도움말은 문서의 입력 필드의 ID와 연관된다. 루프를 돌면서 각 입력 필드 ID에 해당하는 엘리먼트의 onfocus 이벤트에 관련된 도움말을 보여주는 메소드에 연결한다.</p> - -<p>이 코드를 사용하면 제대로 동작하지 않는 것을 알게 된다. 어떤 필드에 포커스를 주더라도 나이에 관한 도움말이 표시된다.</p> - -<p>onfocus 이벤트에 연결된 함수가 클로저이기 때문이다. 이 클로저는 함수 정의와 setupHelp 함수 범위에서 캡처된 환경으로 구성된다. 루프에서 세 개의 클로저가 만들어졌지만 각 클로저는 값이 변하는 변수가 (item.help) 있는 같은 단일 환경을 공유한다. onfocus 콜백이 실행될 때 콜백의 환경에서 item 변수는 (세개의 클로저가 공유한다) helpText 리스트의 마지막 요소를 가리키고 있을 것이다.</p> - -<p>이 경우 한 가지 해결책은 더 많은 클로저를 사용하는 것이다: 특히 앞에서 설명한 함수 팩토리를 사용하는 것이다.</p> - -<pre>function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function makeHelpCallback(help) { - return function() { - showHelp(help); - }; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - var item = helpText[i]; - document.getElementById(item.id).onfocus = makeHelpCallback(item.help); - } -} - -setupHelp(); -</pre> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}}</p> - -<p>이것은 예상대로 동작한다. 모두 단일 환경을 공유하는 콜백대신, <code>makeHelpCallback</code> 함수는 각각의 콜백에 새로운 어휘적 환경을 생성한다. 여기서 help는 helpText 배열의 해당 문자열을 나타낸다.</p> - -<p>익명 클로저를 사용하여 위 코드를 작성하는 또 다른 방법은 다음과 같다.</p> - -<pre>function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - (function() { - var item = helpText[i]; - document.getElementById(item.id).onfocus = function() { - showHelp(item.help); - } - })(); // Immediate event listener attachment with the current value of item (preserved until iteration). - } -} - -setupHelp();</pre> - -<p>더 많은 클로저를 사용하는 것이 싫다면 ES2015의 <code><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 키워드를 사용할 수 있다.</p> - -<pre>function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - let item = helpText[i]; - document.getElementById(item.id).onfocus = function() { - showHelp(item.help); - } - } -} - -setupHelp();</pre> - -<p>위의 경우 var 대신 let을 사용하여 모든 클로저가 블록 범위 변수를 바인딩할 것이므로 추가적인 클로저를 사용하지 않아도 완벽하게 동작할 것이다.</p> - -<h2 id="성능_관련_고려_사항">성능 관련 고려 사항</h2> - -<p>특정 작업에 클로저가 필요하지 않는데 다른 함수 내에서 함수를 불필요하게 작성하는 것은 현명하지 않다. 이것은 처리 속도와 메모리 소비 측면에서 스크립트 성능에 부정적인 영향을 미칠 것이다.</p> - -<p>예를 들어, 새로운 객체/클래스를 생성 할 때, 메소드는 일반적으로 객체 생성자에 정의되기보다는 객체의 프로토타입에 연결되어야 한다. 그 이유는 생성자가 호출 될 때마다 메서드가 다시 할당되기 때문이다 (즉, 모든 개체가 생성 될 때마다).</p> - -<p>비실용적이지만 시범적인 다음 예를 고려하라:</p> - -<pre>function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); - this.getName = function() { - return this.name; - }; - - this.getMessage = function() { - return this.message; - }; -} -</pre> - -<p>앞의 코드는 클로저의 이점을 이용하지 않음으로 다음과 같이 다시 쓸 수 있다.</p> - -<pre>function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); -} -MyObject.prototype = { - getName: function() { - return this.name; - }, - getMessage: function() { - return this.message; - } -}; -</pre> - -<p>그러나 프로토타입을 다시 정의하는 것은 권장되지 않음으로 기존 프로토타입에 추가하는 다음 예제가 더 좋다.</p> - -<pre>function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); -} -MyObject.prototype.getName = function() { - return this.name; -}; -MyObject.prototype.getMessage = function() { - return this.message; -}; -</pre> - -<p>위의 코드는 같은 결과를 가진 더 깨끗한 방법으로 작성할 수도 있다:</p> - -<pre>function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); -} -(function() { - this.getName = function() { - return this.name; - }; - this.getMessage = function() { - return this.message; - }; -}).call(MyObject.prototype); -</pre> - -<p>앞의 두 가지 예제에서 상속된 프로토타입은 모든 객체에서 공유될 수 있으며 메소드 정의는 모든 객체 생성시 발생할 필요가 없다. <a href="/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" title="en-US/docs/JavaScript/Guide/Details of the Object Model">객체 모델의 세부 사항</a>을 참고하라.</p> diff --git a/files/ko/web/javascript/closures/index.md b/files/ko/web/javascript/closures/index.md new file mode 100644 index 0000000000..f3e6cfaac8 --- /dev/null +++ b/files/ko/web/javascript/closures/index.md @@ -0,0 +1,505 @@ +--- +title: 클로저 +slug: Web/JavaScript/Closures +tags: + - Closure + - ES5 + - Intermediate + - JavaScript + - Reference +translation_of: Web/JavaScript/Closures +original_slug: Web/JavaScript/Guide/Closures +--- +{{jsSidebar("Intermediate")}} + +**클로저**는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. + +## 어휘적 범위 지정(Lexical scoping) + +다음을 보자: + +```js + function init() { + var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다. + function displayName() { // displayName() 은 내부 함수이며, 클로저다. + alert(name); // 부모 함수에서 선언된 변수를 사용한다. + } + displayName(); + } + init(); +``` + +`init()`은 지역 변수 `name`과 함수 `displayName()`을 생성한다. `displayName()`은 +`init()` 안에 정의된 내부 함수이며 `init()` 함수 본문에서만 사용할 수 있다. 여기서 주의할 점은 `displayName()` 내부엔 자신만의 지역 변수가 없다는 점이다. 그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 `displayName()` 역시 부모 함수 `init()`에서 선언된 변수 `name`에 접근할 수 있다. 만약 `displayName()`가 자신만의 `name`변수를 가지고 있었다면, `name`대신 `this.name`을 사용했을 것이다. + +{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}} + +위 코드를 [실행](http://jsfiddle.net/xAFs9/3/)하면 `displayName()` 함수 내의 +`alert()`문이 부모 함수에서 정의한 변수 `name`의 값을 성공적으로 출력한다. 이 예시를 통해 함수가 중첩된 상황에서 파서가 어떻게 변수를 처리하는지 알 수 있다. 이는 어휘적 범위 지정(lexical scoping)의 한 예이다. 여기서 "lexical"이란, 어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다. 단어 "lexical"은 이런 사실을 나타낸다. 중첩된 함수는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다. + +## 클로저(Closure) + +이제 다음 예제를 보자: + +```js + function makeFunc() { + var name = "Mozilla"; + function displayName() { + alert(name); + } + return displayName; + } + + var myFunc = makeFunc(); + //myFunc변수에 displayName을 리턴함 + //유효범위의 어휘적 환경을 유지 + myFunc(); + //리턴된 displayName 함수를 실행(name 변수에 접근) +``` + +이 코드는 바로 전의 예제와 완전히 동일한 결과가 실행된다. 하지만 흥미로운 차이는 `displayName()`함수가 실행되기 전에 외부함수인 `makeFunc()`로부터 리턴되어 `myFunc` 변수에 저장된다는 것이다. + +한 눈에 봐서는 이 코드가 여전히 작동하는 것이 직관적으로 보이지 않을 수 있다. 몇몇 프로그래밍 언어에서, 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재한다. `makeFunc()` 실행이 끝나면(`displayName`함수가 리턴되고 나면) `name` 변수에 더 이상 접근할 수 없게 될 것으로 예상하는 것이 일반적이다. + +하지만 위의 예시와 자바스크립트의 경우는 다르다. 그 이유는 자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성하기 때문이다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 첫 번째 예시의 경우, `myFunc`은 `makeFunc`이 실행 +될 때 생성된 `displayName` 함수의 인스턴스에 대한 참조다. `displayName`의 인스턴스는 변수 `name` 이 있는 어휘적 환경에 대한 참조를 유지한다. 이런 이유로 `myFunc`가 호출될 때 변수 `name`은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 `alert` 에 전달된다. + +다음은 조금 더 흥미로운 예제인 makeAdder 함수이다: + +```js + function makeAdder(x) { + var y = 1; + return function(z) { + y = 100; + return x + y + z; + }; + } + + var add5 = makeAdder(5); + var add10 = makeAdder(10); + //클로저에 x와 y의 환경이 저장됨 + + console.log(add5(2)); // 107 (x:5 + y:100 + z:2) + console.log(add10(2)); // 112 (x:10 + y:100 + z:2) + //함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산 +``` + +이 예제에서 단일 인자 `x`를 받아서 새 함수를 반환하는 함수 `makeAdder(x)`를 정의했다. 반환되는 함수는 단일인자 z를 받아서 x와 y와 z의 합을 반환한다. + +본질적으로 `makeAdder`는 함수를 만들어내는 공장이다. 이는 `makeAdder`함수가 특정한 값을 인자로 가질 수 있는 함수들을 리턴한다는 것을 의미한다. 위의 예제에서 `add5, add10` 두 개의 새로운 함수들을 만들기 위해 `makeAdder`함수 공장을 사용했다. 하나는 매개변수 x에 5를 더하고 다른 하나는 매개변수 x에 10을 더한다. + +`add5`와 `add10`은 둘 다 클로저이다. 이들은 같은 함수 본문 정의를 공유하지만 서로 다른 맥락(어휘)적 환경을 저장한다. 함수 실행 시 `add5`의 맥락적 환경에서 클로저 내부의 x는 5 이지만 `add10`의 맥락적 환경에서 x는 10이다. 또한 리턴되는 함수에서 초기값이 1로 할당된 y에 접근하여 y값을 100으로 변경한 것을 볼 수 있다. (물론 x값도 동일하게 변경 가능하다.) 이는 클로저가 리턴된 후에도 외부함수의 변수들에 접근 가능하다는 것을 보여주는 포인트이며 클로저에 단순히 값 형태로 전달되는것이 아니라는 것을 의미한다. + +## 실용적인 클로저 + +클로저는 어떤 데이터(어휘적 환경)와 그 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다. 이것은 객체가 어떤 데이터와(그 객체의 속성) 하나 혹은 그 이상의 메소드들을 연관시킨다는 점에서 객체지향 프로그래밍과 분명히 같은 맥락에 있다. + +결론적으로 오직 하나의 메소드를 가지고 있는 객체를 일반적으로 사용하는 모든 곳에 클로저를 사용할 수 있다. + +이렇게 할 수 있는 상황은 특히 웹에서 일반적이다. 프론트 엔드 자바스크립트에서 우리가 쓰는 많은 코드가 이벤트 기반이다. 우리는 몇 가지 동작을 정의한 다음 사용자에 의한 이벤트에(클릭 혹은 키 누르기 같은) 연결한다. 우리의 코드는 일반적으로 콜백으로 첨부된다: 이벤트에 응답하여 실행되는 단일 함수다. + +예를 들면 페이지의 글자 크기를 조정하는 몇 개의 버튼을 추가한다고 가정하자. 이 작업을 수행하는 한 가지 방법은 `body` 요소의 font-size를 픽셀 단위로 지정하고 상대적인 `em` 단위를 사용하여 페이지의 다른 요소들의 (예: 헤더) 크기를 설정하는 것이다. + +```css + body { + font-family: Helvetica, Arial, sans-serif; + font-size: 12px; + } + + h1 { + font-size: 1.5em; + } + + h2 { + font-size: 1.2em; + } +``` + +우리의 대화식 글자 크기 버튼들은 `body` 요소의 `font-size` 속성을 변경할 수 있고 이런 조정은 상대적 단위들 덕분에 페이지의 다른 요소에 의해 선택된다. + +여기 자바스크립트 코드가 있다. + +```js + function makeSizer(size) { + return function() { + document.body.style.fontSize = size + 'px'; + }; + } + + var size12 = makeSizer(12); + var size14 = makeSizer(14); + var size16 = makeSizer(16); +``` + +`size12`, `size14`, `size16`은 body 요소의 글자 크기를 각각 12, 14, 16 픽셀로 바꾸는 함수이다. 이 함수들을 아래처럼 버튼들에(이 경우에는 링크) 연결할 수 있다. + +```js + document.getElementById('size-12').onclick = size12; + document.getElementById('size-14').onclick = size14; + document.getElementById('size-16').onclick = size16; +``` + +```html + <a href="#" id="size-12">12</a> + <a href="#" id="size-14">14</a> + <a href="#" id="size-16">16</a> +``` + +{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}} + +다음 링크로 실행해보자. [JSFiddle](https://jsfiddle.net/vnkuZ/7726/) +## 클로저를 이용해서 프라이빗 메소드 (private method) 흉내내기 + +자바와 같은 몇몇 언어들은 메소드를 프라이빗으로 선언할 수 있는 기능을 제공한다. 이는 같은 클래스 내부의 다른 메소드에서만 그 메소드들을 호출할 수 있다는 의미이다. + +자바스크립트는 태생적으로는 이런 방법을 제공하지 않지만 클로저를 이용하여 프라이빗 메소드를 흉내내는 것이 가능하다. 프라이빗 메소드는 코드에 제한적인 접근만을 허용한다는 점 뿐만 아니라 전역 네임 스페이스를 관리하는 강력한 방법을 제공하여 불필요한 메소드가 공용 인터페이스를 혼란스럽게 만들지 않도록 한다. + +아래 코드는 프라이빗 함수와 변수에 접근하는 퍼블릭 함수를 정의하기 위해 클로저를 사용하는 방법을 보여준다. 이렇게 클로저를 사용하는 것을 [모듈 패턴](https://www.google.com/search?q=javascript+module+pattern)이라 한다. + +```js + var counter = (function() { + var privateCounter = 0; + function changeBy(val) { + privateCounter += val; + } + return { + increment: function() { + changeBy(1); + }, + decrement: function() { + changeBy(-1); + }, + value: function() { + return privateCounter; + } + }; + })(); + + console.log(counter.value()); // logs 0 + counter.increment(); + counter.increment(); + console.log(counter.value()); // logs 2 + counter.decrement(); + console.log(counter.value()); // logs 1 +``` + +이전 예제에서 각 클로저들이 고유한 문법적 환경을 가졌지만 여기서 우리는 `counter.increment`, `counter.decrement`, `counter.value `세 함수에 의해 공유되는 하나의 어휘적 환경을 만든다. + +공유되는 어휘적 환경은 실행되는 익명 함수 안에서 만들어진다. 이 익명 함수는 정의되는 즉시 실행된다. 이 어휘적 환경은 두 개의 프라이빗 아이템을 포함한다. 하나는 `privateCounter`라는 변수이고 나머지 하나는 `changeBy`라는 함수이다. 둘 다 익명 함수 외부에서 접근될 수 없다. 대신에 익명 래퍼에서 반환된 세 개의 퍼블릭 함수를 통해서만 접근되어야만 한다. + +위의 세 가지 퍼블릭 함수는 같은 환경을 공유하는 클로저다. 자바스크립트의 어휘적 유효 범위 덕분에 세 함수 각각 `privateCounter` 변수와 `changeBy` 함수에 접근할 수 있다. + +카운터를 생성하는 익명 함수를 정의하고 그 함수를 즉시 호출하고 결과를 `counter` 변수에 할당하는 것을 알아차렸을 것이다. 이 함수를 별도의 변수 `makeCounter` 저장하고 이 변수를 이용해 여러 개의 카운터를 만들 수 있다. + +```js + var makeCounter = function() { + var privateCounter = 0; + function changeBy(val) { + privateCounter += val; + } + return { + increment: function() { + changeBy(1); + }, + decrement: function() { + changeBy(-1); + }, + value: function() { + return privateCounter; + } + } + }; + + var counter1 = makeCounter(); + var counter2 = makeCounter(); + alert(counter1.value()); /* 0 */ + counter1.increment(); + counter1.increment(); + alert(counter1.value()); /* 2 */ + counter1.decrement(); + alert(counter1.value()); /* 1 */ + alert(counter2.value()); /* 0 */ +``` + +두 개의 카운터가 어떻게 다른 카운터와 독립성을 유지하는지 주목해보자. 각 클로저는 그들 고유의 클로저를 통한 `privateCounter` 변수의 다른 버전을 참조한다. 각 카운터가 호출될 때마다; 하나의 클로저에서 변수 값을 변경해도 다른 클로저의 값에는 영향을 주지 않는다. + +> **참고:** 이런 방식으로 클로저를 사용하여 객체지향 프로그래밍의 정보 은닉과 캡슐화 같은 이점들을 얻을 수 있다. + +## 클로저 스코프 체인 + +모든 클로저에는 세가지 스코프(범위)가 있다: + +- 지역 범위 (Local Scope, Own scope) +- 외부 함수 범위 (Outer Functions Scope) +- 전역 범위 (Global Scope) + +따라서, 우리는 클로저에 대해 세가지 범위 모두 접근할 수 있지만, 중첩된 내부 함수가 있는 경우 종종 실수를 저지른다. 아래 예제를 확인해보자: + +```js + // 전역 범위 (global scope) + var e = 10; + function sum(a){ + return function(b){ + return function(c){ + // 외부 함수 범위 (outer functions scope) + return function(d){ + // 지역 범위 (local scope) + return a + b + c + d + e; + } + } + } + } + + console.log(sum(1)(2)(3)(4)); // log 20 + + // 익명 함수 없이 작성할 수도 있다. + + // 전역 범위 (global scope) + var e = 10; + function sum(a){ + return function sum2(b){ + return function sum3(c){ + // 외부 함수 범위 (outer functions scope) + return function sum4(d){ + // 지역 범위 (local scope) + return a + b + c + d + e; + } + } + } + } + + var s = sum(1); + var s1 = s(2); + var s2 = s1(3); + var s3 = s2(4); + console.log(s3) //log 20 +``` + +위의 예제를 보면 일련의 중첩된 함수들을 확인할 수 있다. 이 함수들은 전부 외부 함수의 스코프에 접근할 수 있다. 그런데 문제는 즉각적인 외부 함수의 스코프만을 추측 한다는 것이다. 이 문맥에서는 모든 클로저가 선언된 외부 함수의 스코프에 접근한다라고 말할 수 있다. + +## 루프에서 클로저 생성하기: 일반적인 실수 + +ECMAScript 2015의 [`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let "방해") 키워드 소개 전에는 클로저와 관련된 일반적인 문제는 루프 안에서 클로저가 생성되었을 때 발생한다.다음 예제를 보자. + +```html + <p id="help">Helpful notes will appear here</p> + <p>E-mail: <input type="text" id="email" name="email"></p> + <p>Name: <input type="text" id="name" name="name"></p> + <p>Age: <input type="text" id="age" name="age"></p> +``` + +```js + function showHelp(help) { + document.getElementById('help').innerHTML = help; + } + + function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + } + } + + setupHelp(); +``` + +{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}} + +`helpText` 배열은 세 개의 도움말 힌트를 정의한다. 각 도움말은 문서의 입력 필드의 ID와 연관된다. 루프를 돌면서 각 입력 필드 ID에 해당하는 엘리먼트의 `onfocus` 이벤트에 관련된 도움말을 보여주는 메소드에 연결한다. + +이 코드를 사용하면 제대로 동작하지 않는 것을 알게 된다. 어떤 필드에 포커스를 주더라도 나이에 관한 도움말이 표시된다. + +`onfocus` 이벤트에 연결된 함수가 클로저이기 때문이다. 이 클로저는 함수 정의와 `setupHelp` 함수 범위에서 캡처된 환경으로 구성된다. 루프에서 세 개의 클로저가 만들어졌지만 각 클로저는 값이 변하는 변수가 (`item.help`) 있는 같은 단일 환경을 공유한다. `onfocus` 콜백이 실행될 때 콜백의 환경에서 `item` 변수는 (세개의 클로저가 공유한다) `helpText` 리스트의 마지막 요소를 가리키고 있을 것이다. + +이 경우 한 가지 해결책은 더 많은 클로저를 사용하는 것이다: 특히 앞에서 설명한 함수 팩토리를 사용하는 것이다. + +```js + function showHelp(help) { + document.getElementById('help').innerHTML = help; + } + + function makeHelpCallback(help) { + return function() { + showHelp(help); + }; + } + + function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = makeHelpCallback(item.help); + } + } + + setupHelp(); +``` + +{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}} + +이것은 예상대로 동작한다. 모두 단일 환경을 공유하는 콜백대신, `makeHelpCallback` 함수는 각각의 콜백에 새로운 어휘적 환경을 생성한다. 여기서 `help`는 `helpText` 배열의 해당 문자열을 나타낸다. + +익명 클로저를 사용하여 위 코드를 작성하는 또 다른 방법은 다음과 같다. + +```js + function showHelp(help) { + document.getElementById('help').innerHTML = help; + } + + function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + (function() { + var item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + })(); // Immediate event listener attachment with the current value of item (preserved until iteration). + } + } + + setupHelp(); +``` + +더 많은 클로저를 사용하는 것이 싫다면 ES2015의 [`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let) 키워드를 사용할 수 있다. + +```js + function showHelp(help) { + document.getElementById('help').innerHTML = help; + } + + function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + let item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + } + } + + setupHelp(); +``` + +위의 경우 `var` 대신 `let`을 사용하여 모든 클로저가 블록 범위 변수를 바인딩할 것이므로 추가적인 클로저를 사용하지 않아도 완벽하게 동작할 것이다. + +Another alternative could be to use `forEach()` to iterate over the `helpText` array and attach a listener to each [`<input>`](/en-US/docs/Web/HTML/Element/input "The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent."), as shown: + +```js +function showHelp(help) { + document.getElementById('help').textContent = help; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + helpText.forEach(function(text) { + document.getElementById(text.id).onfocus = function() { + showHelp(text.help); + } + }); +} + +setupHelp(); +``` + +## 성능 관련 고려 사항 + +특정 작업에 클로저가 필요하지 않는데 다른 함수 내에서 함수를 불필요하게 작성하는 것은 현명하지 않다. 이것은 처리 속도와 메모리 소비 측면에서 스크립트 성능에 부정적인 영향을 미칠 것이다. + +예를 들어, 새로운 객체/클래스를 생성 할 때, 메소드는 일반적으로 객체 생성자에 정의되기보다는 객체의 프로토타입에 연결되어야 한다. 그 이유는 생성자가 호출 될 때 마다 메서드가 다시 할당되기 때문이다 (즉, 모든 개체가 생성 될 때마다). + +비실용적이지만 시범적인 다음 예를 고려하라: + +```js + function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); + this.getName = function() { + return this.name; + }; + + this.getMessage = function() { + return this.message; + }; + } +``` + +앞의 코드는 클로저의 이점을 이용하지 않음으로 다음과 같이 다시 쓸 수 있다. + +```js + function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); + } + MyObject.prototype = { + getName: function() { + return this.name; + }, + getMessage: function() { + return this.message; + } + }; +``` + +그러나 프로토타입을 다시 정의하는 것은 권장되지 않음으로 기존 프로토타입에 추가하는 다음 예제가 더 좋다. + +```js + function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); + } + MyObject.prototype.getName = function() { + return this.name; + }; + MyObject.prototype.getMessage = function() { + return this.message; + }; +``` + +위의 코드는 같은 결과를 가진 더 깨끗한 방법으로 작성할 수도 있다: + +```js + function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); + } + (function() { + this.getName = function() { + return this.name; + }; + this.getMessage = function() { + return this.message; + }; + }).call(MyObject.prototype); +``` + +앞의 두 가지 예제에서 상속된 프로토타입은 모든 객체에서 공유될 수 있으며 메소드 정의는 모든 객체 생성시 발생할 필요가 없다. [객체 모델의 세부 사항](/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model)을 +참고하라. diff --git a/files/ko/web/javascript/data_structures/index.html b/files/ko/web/javascript/data_structures/index.html deleted file mode 100644 index 14967ae250..0000000000 --- a/files/ko/web/javascript/data_structures/index.html +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: 자바스크립트의 자료형 -slug: Web/JavaScript/Data_structures -translation_of: Web/JavaScript/Data_structures ---- -<div>{{jsSidebar("More")}}</div> - -<p>모든 프로그래밍 언어는 내장 자료형이 있지만, 종종 이러한 내장 자료형은 언어마다 다르다. 이 문서에서는 자바스크립트의 내장 자료형과, 내장 자료형에서 사용할 수 있는 속성들에 대해 알아본다. 이로써 내장 자료형들로 더 복잡한 자료형을 만드는데 사용할 수 있을 것이다. 가능하다면 다른 언어와도 비교해보자.</p> - -<h2 id="동적_타이핑">동적 타이핑</h2> - -<p>자바스크립트는 <em>느슨한 타입 (loosely typed)</em> 언어, 혹은 <em>동적 (dynamic)</em> 언어이다. 그 말은, 변수의 타입을 미리 선언할 필요가 없다는 뜻이다. 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이다. 또한 그 말은 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻이다.</p> - -<pre class="brush: js notranslate">var foo = 42; // foo 는 이제 Number 임 -var foo = "bar"; // foo 는 이제 String 임 -var foo = true; // foo 는 이제 Boolean 임 -</pre> - -<h2 id="데이터_타입">데이터 타입</h2> - -<p>최신 ECMAScript 표준은 다음과 같은 7개의 자료형을 정의한다.</p> - -<ul> - <li>{{Glossary("Primitive", "기본 자료형 (Primitive)")}} 인 여섯가지 데이터 타입 - <ul> - <li>{{Glossary("Boolean")}}</li> - <li>{{Glossary("Null")}}</li> - <li>{{Glossary("Undefined")}}</li> - <li>{{Glossary("Number")}}</li> - <li>{{Glossary("String")}}</li> - <li>{{Glossary("Symbol")}} (ECMAScript 6 에 추가됨)</li> - </ul> - </li> - <li>별도로 {{Glossary("Object")}} 도 있음</li> -</ul> - -<p>다음 장에서 이 여섯개의 자료형을 사용하는 방법과 자료형을 조합하여 더 복잡한 자료형을 만드는 방법에 대해 알아보자.</p> - -<h2 id="기본_타입_Primitive_value">기본 타입 (Primitive value)</h2> - -<p>오브젝트를 제외한 모든 값은 변경 불가능한 값 (immutable value) 이다. 예를 들자면, 특히 C 언어와는 다르게도, 문자열은 불변값 (immutable) 이다. 이런 값을 "primitive values" 라고 일컫는다. 아래의 {{ anch("Strings") }} 장에서 더 자세히 설명할 것이다.</p> - -<h3 id="Boolean_타입">Boolean 타입</h3> - -<p>Boolean 은 논리적인 요소를 나타내고, <code>true</code> 와 <code>false</code> 의 두 가지 값을 가질 수 있다.</p> - -<h3 id="Null_타입">Null 타입</h3> - -<p>Null 타입은 딱 한 가지 값, <code>null</code> 을 가질 수 있다. 더 알아보려면 {{jsxref("null")}} 와 {{Glossary("Null")}} 을 보라.</p> - -<h3 id="Undefined_타입">Undefined 타입</h3> - -<p>값을 할당하지 않은 변수는 <code>undefined</code> 값을 가진다. 더 알아보려면 {{jsxref("undefined")}} 와 {{Glossary("Undefined")}} 을 보라.</p> - -<h3 id="Number_타입">Number 타입</h3> - -<p>ECMAScript 표준에 따르면, 숫자의 자료형은 <a href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">배정밀도 64비트 형식 IEEE 754 값</a> (-(2<sup>53</sup> -1) 와 2<sup>53</sup> -1 사이의 숫자값) 단 하나만 존재한다. <strong>정수만을 표현하기 위한 특별한 자료형은 없다.</strong> 부동 소수점을 표현할 수 있는 것 말고도, Number 타입은 세 가지 의미있는 몇가지 상징적인 값들도 표현할 수 있다. 이 값에는 <code>+무한대</code>, <code>-무한대</code>, and <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code> (숫자가 아님)이 있다.</p> - -<p><code>+/-Infinity</code> 보다 크거나 작은지 확인하는 용도로 상수값인 {{jsxref("Number.MAX_VALUE")}} 나 {{jsxref("Number.MIN_VALUE")}} 을 사용할 수 있다. 또한, ECMAScript 6 부터는 숫자가 배정밀도 부동소수점 숫자인지 확인하는 용도로 {{jsxref("Number.isSafeInteger()")}} 과 {{jsxref("Number.MAX_SAFE_INTEGER")}}, {{jsxref("Number.MIN_SAFE_INTEGER")}} 을 사용할 수 있다. 이 범위를 넘어서면, 자바스크립트의 숫자는 더 이상 안전하지 않다.</p> - -<p>Number 타입의 값 중에는 두 가지 방식으로 표현할 수 있는 유일한 값이 있는데, 0 이다. 0 은 -0 이나 +0 으로 표시할 수 있다. ("0" 은 물론 +0 이다.) 실제로는 이러한 사실은 거의 효력이 없다. 그 예로, <code>+0 === -0</code> 은 <code>true</code> 이다. 하지만 0으로 나누는 경우 그 차이가 눈에 띌 것이다.</p> - -<pre class="brush: js language-js notranslate"><code class="language-js"><span class="operator token">></span> <span class="number token">42</span> <span class="operator token">/</span> <span class="operator token">+</span><span class="number token">0</span> -<span class="number token">Infinity</span> -<span class="operator token">></span> <span class="number token">42</span> <span class="operator token">/</span> <span class="operator token">-</span><span class="number token">0</span> -<span class="operator token">-</span><span class="number token">Infinity</span></code></pre> - -<p>숫자가 보통 값만으로 표현되긴 하지만, 자바스크립트는 <a href="/en/JavaScript/Reference/Operators/Bitwise_Operators" title="en/JavaScript/Reference/Operators/Bitwise_Operators">몇 가지 이진 연산자</a>도 제공한다. 이러한 이진 연산자들은 <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">비트 마스킹(bit masking)</a> 기법으로 한 숫자 안에 여러 Boolean 값을 저장하는데도 쓸 수 있다. 일반적으로 이런 방법은 나쁜 방법이지만, 자바스크립트에서는 (Boolean 값의 배열이나 Boolean 값들을 이름있는 속성들로 가지는 객체 같은) Boolean 덩어리를 나타낼 다른 방법이 없다. 비트 마스킹은 또한 코드를 이해하고, 읽고, 유지보수하는데에 있어서 좀 더 어렵게 만드는 경향이 있다. 하지만 이러한 기법은 local storage 의 저장공간이 부족해서 절약하려고 하거나, 네트워크 상에서 각각의 비트를 전송하는 등의 극단적인 상황 같은 굉장히 제한적인 환경에서 필요할 수도 있다. 그래서 비트 마스킹 기법은 크기를 최대한 줄여야하는 상황에서만 사용을 고려해야 한다.</p> - -<h3 id="String_타입">String 타입</h3> - -<p>자바스크립트의 {{jsxref("Global_Objects/String", "String")}} 타입은 텍스트 데이터를 나타내는데 사용한다. 이는 16비트 부호없는 정수 값 요소들의 집합이다. String의 각 요소는 String의 위치를 차지한다. 첫 번째 요소는 0번 인덱스에 있고, 다음 요소는 1번, 그 다음 요소는 2번... 같은 방식이다. String 의 길이는 String이 가지고있는 요소의 갯수이다.</p> - -<p>C 같은 언어와는 다르게, 자바스크립트의 문자열은 변경 불가능 (immutable) 하다. 이것은 한 번 문자열이 생성되면, 그 문자열을 수정할 수 없다는걸 의미한다. 그러나 원래 문자열에서 일부가 수정된 다른 문자열을 만드는건 가능하다. 예를 들자면 이렇다.</p> - -<ul> - <li>원래 문자열에서 각각의 글자를 추출하거나 <code><a href="/en/JavaScript/Reference/Global_Objects/String/substr" title="substr">String.substr()</a></code>을 사용해서 만든 부분 문자열</li> - <li>접합 연산자 (<code>+</code>) 나 <code><a href="/en/JavaScript/Reference/Global_Objects/String/concat" title="concat">String.concat()</a></code> 으로 두 문자열을 합친 문자열</li> -</ul> - -<h4 id="문자열의_자료형화를_조심하라!">"문자열의 자료형화"를 조심하라!</h4> - -<p>문자열을 복잡한 자료형을 표현하는 용도로 쓰는 방법이 꽤나 매력적일 수 있다. 단기적으로 이런 장점들이 있다.</p> - -<ul> - <li>접합 연산자로 손쉽게 복잡한 문자열을 만들 수 있다.</li> - <li>문자열은 디버깅이 쉽다 (화면에 출력한 내용이 문자열 변수에 있는 값과 같다)</li> - <li>문자열은 많은 API 에서 사용하는 공통분모이고 (<a href="/en/DOM/HTMLInputElement" title="HTMLInputElement">입력 필드</a>, <a href="/en/Storage" title="Storage">로컬 스토리지</a> 값, {{ domxref("XMLHttpRequest") }} 요청에서 <code>responseText</code>를 사용할 때 등) 그러다보니 문자열만으로 작업하는게 매혹적일 수 있다.</li> -</ul> - -<p>규칙만 잘 정의해놓는다면, 어떤 자료구조가 되던 문자열로 표시할 수 있다. 그렇다고 해서 이게 좋은 방법이 되는 건 아니다. 예를 들자면, 구분자로 리스트 자료형을 흉내낼 수 있을 것이다 (하지만 자바스크립트의 배열을 사용하는게 더 알맞을 것이다). 불행하게도, 리스트의 요소중에 구분자가 들어있는 요소가 있다면 리스트는 엉망진창이 될 것이다. 물론 탈출 문자 (escape character) 등을 사용하거나 할 수도 있을 것이다. 하지만 이런 것들은 모두 미리 정해놓은 규칙을 필요로 하고, 덕분에 불필요한 관리 부담을 낳는다.</p> - -<p>문자열은 텍스트 데이터에만 사용하자. 복잡한 데이터를 나타낼때는, 문자열을 분석해서 적합한 추상화를 선택해 사용하자.</p> - -<h3 id="Symbol_타입">Symbol 타입</h3> - -<p>Symbol 은 ECMAScript 6 에서 추가되었다. Symbol은 <strong>유일</strong>하고 <strong>변경 불가능한</strong> (immutable) 기본값 (primitive value) 이다. 또한, 객체 속성의 key 값으로도 사용될 수 있다 (아래를 볼 것). 몇몇 프로그래밍 언어에서는 Symbol을 atom 이라고 부른다. 또, C 언어의 이름있는 열거형 (enum) 과도 비슷하다. 좀 더 자세히 알아보려면, 자바스크립트의 {{Glossary("Symbol")}} 와 {{jsxref("Symbol")}} 객체 래퍼 (wrapper) 를 보라.</p> - -<h2 id="객체_Objects">객체 (Objects)</h2> - -<p>컴퓨터 과학에서, 객체는 {{Glossary("Identifier", "식별자 (Identifier)")}} 로 참조할 수 있는, 메모리에 있는 값이다.</p> - -<h3 id="속성_Properties">속성 (Properties)</h3> - -<p>자바스크립트에서, 객체는 속성들을 담고있는 가방 (collection) 으로 볼 수 있다. <a href="/en/JavaScript/Guide/Values,_variables,_and_literals#Object_literals" title="en/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">객체 리터럴 문법 (object literal syntax)</a> 으로 제한적으로 몇 가지 속성을 초기화할 수 있고, 그러고 나서 속성들을 추가하거나 제거할 수도 있다. 속성 값은 객체를 포함해 어떠한 자료형도 될 수 있고, 그 덕분에 복잡한 데이터 구조를 형성하는게 가능해진다. 속성은 키 (key) 값으로 식별된다. 키 값은 String 이거나 Symbol 값이다.</p> - -<p>두 종류의 객체 속성이 있는데, 이들은 종류에 따라 특성값들을 가질 수 있다. 데이터 (data) 속성과 접근자 (accessor) 속성이 그것이다.</p> - -<h4 id="데이터_속성_Data_property">데이터 속성 (Data property)</h4> - -<p>키에 값을 연결하고, 아래와 같은 특성들 (attribute) 이 있다.</p> - -<table class="standard-table"> - <caption>데이터 속성의 특성들</caption> - <tbody> - <tr> - <th>특성 (Attribute)</th> - <th>자료형</th> - <th>설명</th> - <th>기본값</th> - </tr> - <tr> - <td>[[Value]]</td> - <td>JavaScript 타입 모두 가능</td> - <td>이 속성에 대한 get 접근으로 반환되는 값.</td> - <td>undefined</td> - </tr> - <tr> - <td>[[Writable]]</td> - <td>Boolean</td> - <td><code>false</code> 라면, 이 속성의 [[Value]] 을 바꿀 수 없다.</td> - <td>false</td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td><code>true</code> 라면, 이 속성은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 루프에서 열거될 수 있다.</td> - <td>false</td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td><code>false</code> 라면, 이 속성은 제거될 수 없고, [[Value]]와 [[Writable]] 외에는 수정될 수 없다.</td> - <td>false</td> - </tr> - </tbody> -</table> - -<h4 id="접근자_속성_Accessor_property">접근자 속성 (Accessor property)</h4> - -<p>값을 가져오거나 값을 저장하기 위해 키에 하나 혹은 두 개의 접근자 함수 (get, set) 연결짓는다. 아래와 같은 특성이 있다.</p> - -<table class="standard-table"> - <caption>접근자 속성</caption> - <tbody> - <tr> - <th>특성 (Attribute)</th> - <th>자료형</th> - <th>설명</th> - <th>기본값</th> - </tr> - <tr> - <td>[[Get]]</td> - <td>Function 객체 혹은 undefined</td> - <td>이 속성의 값에 접근할 때마다, 인자 목록 없이 함수가 호출되고, 함수의 반환된 값으로 속성값을 가져온다. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a> 을 볼 것</td> - <td>undefined</td> - </tr> - <tr> - <td>[[Set]]</td> - <td>Function 객체 혹은 undefined</td> - <td> - <p>이 속성의 값이 바뀌려고 할 때마다, 할당된 값을 인자로 함수가 호출된다. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a> 을 볼 것</p> - </td> - <td>undefined</td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td><code>true</code> 라면, 이 속성은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 루프에서 열거될 수 있다.</td> - <td>false</td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td><code>false</code> 라면, 이 속성은 제거될 수 없고, 데이터 속성을 수정할 수 없다.</td> - <td>false</td> - </tr> - </tbody> -</table> - -<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3> - -<p>자바스크립트 오브젝트는 키와 값의 매핑이다. 키는 문자열이고 값은 다른 어떤 값도 될 수 있다. 오브젝트는 <a class="external" href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>을 표현하는데 적합하다. 표준이 아닌 <a href="/en/JavaScript/Reference/Global_Objects/Object/proto" title="__proto__">__proto__</a> 슈도 프로퍼티를 사용할 때는 주의하자. 이것을 지원하는 환경에서는 <code>'__proto__'는 오브젝트의 프로토타입을 의미하므로 이 이름을 키로 사용할 수 없다. 속성을 사용할 수 없다. 문자열의 출처가 분명하지 않을 때(입력 필드의 입력값 등)</code>주의가 필요하다. <a class="external" href="http://productforums.google.com/forum/#!category-topic/docs/documents/0hQWeOvCcHU">이런 일이 생길 수도 있다</a>. 이 때는 <a class="external" href="http://code.google.com/p/google-caja/source/browse/trunk/src/com/google/caja/ses/StringMap.js?r=4779">StringMap abstraction</a> 같은 대안을 사용해보자.함수는 일반 오브젝트에서 호출 가능한 특성을 추가한 오브젝트이다.</p> - -<h3 id="Dates">Dates</h3> - -<p>시간을 나타내려면 <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global_Objects/Date">Date utility</a>를 사용하자. 최고의 선택이다.</p> - -<h3 id="Arrays">Arrays</h3> - -<p><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array">배열(Arrays</a>) 는 정수키를 가지는 일련의 값들을 표현하기 위한 오브젝트이다. 배열 오브젝트에는 길이를 나타내는 'length'란 속성도 있다. 배열은 Array.prototype을 상속받으므로 배열을 다룰 때 편한 <a href="/en/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a> (배열에서 값 검색)와 <a href="/en/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a> (새로운 값 추가) 같은 함수를 사용할 수 있다. 배열은 리스트나 집합을 표현하는데 적합하다.</p> - -<h3 id="WeakMaps_Maps_Sets">WeakMaps, Maps, Sets</h3> - -<p>표준이 아니지만 ECMAScript 6에서 표준이 될 것 같다.</p> - -<p>이 자료형들에서는 키가 문자열 뿐만 아니라 오브젝트도 될 수 있다. Set은 오브젝트의 집합을 나타내는 반면에 WeakMaps와 Maps는 오브젝트에 값을 연관시킬 수 있다. Map과 WeakMap의 차이는 전자는 오브젝트 키를 열거할 수 있다는 것이다. 이것은 가비지 콜렉션에서 이점을 준다.</p> - -<p>ECMAScript 5를 이용해서 Map과 Set을 구현할 수 있을 것이다. 그러나 오브젝트는 크기 비교가 안된다는 점 때문에(예를들어 어떤 오브젝트는 다른 오브젝트보다 '작다'라고 할 수 없다) look-up에 소요되는 시간이 선형 시간이지 않을 것이다. 네이티브 구현은(WeakMaps를 포함해서) look-up 시간이 거의 로그 시간에서 상수 시간이다.</p> - -<p>DOM 노드에 데이터를 지정하기 위해서 직접 속성을 지정할 수도 있지만 data-* 속성을 사용할 수도 있다. 여기에는 다른 스크립트도 모두 그 속성에 접근할 수 있다는 나쁜 점이 있다. Map과 WeakMap은 오브젝트만 사용할 수 있는 개인 데이터를 쉽게 만들 수 있게 해준다.</p> - -<h3 id="TypedArrays">TypedArrays</h3> - -<p>표준이 아니지만 ECMAScript 6에서 표준이 될 것 같다.</p> - -<h2 id="더_보기">더 보기</h2> - -<ul> - <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li> -</ul> diff --git a/files/ko/web/javascript/data_structures/index.md b/files/ko/web/javascript/data_structures/index.md new file mode 100644 index 0000000000..e72d37dd85 --- /dev/null +++ b/files/ko/web/javascript/data_structures/index.md @@ -0,0 +1,291 @@ +--- +title: 자바스크립트의 자료형 +slug: Web/JavaScript/Data_structures +translation_of: Web/JavaScript/Data_structures +--- +{{jsSidebar("More")}} + +모든 프로그래밍 언어는 내장 자료형이 있지만, 종종 이러한 내장 자료형은 언어마다 다르다. 이 문서에서는 자바스크립트의 내장 자료형과, 내장 자료형에서 사용할 수 있는 속성들에 대해 알아본다. 이로써 내장 자료형들로 더 복잡한 자료형을 만드는데 사용할 수 있을 것이다. 가능하다면 다른 언어와도 비교해보자. + +## 동적 타이핑 + +자바스크립트는 _느슨한 타입 (loosely typed)_ 언어, 혹은 _동적 (dynamic)_ 언어이다. 그 말은, 변수의 타입을 미리 선언할 필요가 없다는 뜻이다. 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이다. 또한 그 말은 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻이다. + +```js +var foo = 42; // foo 는 이제 Number 임 +var foo = "bar"; // foo 는 이제 String 임 +var foo = true; // foo 는 이제 Boolean 임 +``` + +## 데이터 및 구조 유형 + +최신 ECMAScript 표준은 9가지 유형을 정의합니다. + +- [typeof](/ko/docs/Web/JavaScript/Reference/Operators/typeof) 연산자로 확인되는 6가지 [기본](/ko/docs/Glossary/Primitive) **데이터 유형**: + + - [undefined](/en-US/docs/Glossary/undefined) : `typeof instance === "undefined"` + - [Boolean](/en-US/docs/Glossary/Boolean) : `typeof instance === "boolean"` + - [Number](/en-US/docs/Glossary/Number) : `typeof instance === "number"` + - [String](/en-US/docs/Glossary/String) : `typeof instance === "string"` + - [BigInt](/en-US/docs/Glossary/BigInt) : `typeof instance === "bigint"` + - [Symbol](/en-US/docs/Glossary/Symbol) : `typeof instance === "symbol"` (ECMAScript 6 에 추가됨) + +## **구조 유형**: + + - [Object](/en-US/docs/Glossary/Object) : `typeof instance === "object"`. **데이터 구조**로 사용되는 모든 [생성된](/ko/docs/Learn/JavaScript/Objects#the_constructor) 개체 인스턴스에 대한 데이터가 아닌 특수한 구조 유형: new {{jsxref("Object")}}, new {{jsxref("Array")}}, new {{jsxref("Map")}}, new {{jsxref("Set")}}, new {{jsxref("WeakMap")}}, new {{jsxref("WeakSet")}}, new {{jsxref("Date")}} 그리고 거의 모든 것이 [new keyword](/en-US/docs/Web/JavaScript/Reference/Operators/new) 로 만들어졌습니다; + - [Function](/en-US/docs/Glossary/Function) : 비데이터 구조이지만 `typeof` 연산자에도 값이 나옵니다: `typeof instance === "function"`. 모든 Function 생성자는 Object 생성자에서 파생되지만 이것은 단순히 Functions의 특수 축약형입니다. + +- **Structural Root** Primitive: + + - **[null](/en-US/docs/Glossary/Null)** : `typeof instance === "object"`. 값에 대한 추가 사용법이 있는 특수 [기본](/ko/docs/Glossary/Primitive) 유형: 객체가 상속되지 않으면 `null`이 표시됩니다. + +`typeof` 연산자 사용의 유일한 가치 있는 목적은 데이터 유형을 확인하는 것임을 명심하십시오. `Object`에서 파생된 Structural Type을 확인하려면 항상 `"object"`를 수신하므로 typeof를 사용하는 것은 무의미합니다. 어떤 종류의 객체를 사용하고 있는지 확인하는 적절한 방법은 instanceof 키워드입니다. 그러나 그런 경우에도 오해가 있을 수 있습니다. + +우리가 볼 수 있듯이 거의 동일한 undefined와 null을 제외하고 모든 기본 유형의 의미는 분명합니다. 이것은 시간의 개념이 알고리즘의 목적과 엄격하게 연결되어 있기 때문에 발생합니다. 우리는 아직 존재하지 않거나 더 이상 존재하지 않는 것을 의미할 수 있습니다: **undefined**. 그러나 비어 있는 것으로 존재하는 것을 표현하려면 다른 키워드를 발명해야 합니다. 이것이 **null**이 의미하는 것입니다. 구조적 의미의 시작입니다. +## 기본 타입 (Primitive value) + +오브젝트를 제외한 모든 값은 변경 불가능한 값 (immutable value) 이다. 예를 들자면, 특히 C 언어와는 다르게도, 문자열은 불변값 (immutable) 이다. 이런 값을 "primitive values" 라고 일컫는다. 아래의 {{ anch("Strings") }} 장에서 더 자세히 설명할 것이다. + +### Boolean 타입 + +Boolean 은 논리적인 요소를 나타내고, `true` 와 `false` 의 두 가지 값을 가질 수 있다. 세부 사항을 보고싶으면 [Boolean](/ko/docs/Glossary/Boolean)과 {{jsxref("Boolean")}}을 참고하자. + +### Null 타입 + +Null 타입은 딱 한 가지 값, `null` 을 가질 수 있다. 더 알아보려면 {{jsxref("null")}} 와 [Null](/ko/docs/Glossary/Null) 을 보라. + +### Undefined 타입 + +값을 할당하지 않은 변수는 `undefined` 값을 가진다. 더 알아보려면 {{jsxref("undefined")}} 와 [Undefined](/ko/docs/Glossary/undefined) 을 보라. + +### Number 타입 + +ECMAScript에는 **Number** 및 **BigInt**의 두 가지 기본 제공 숫자 유형이 있습니다(아래 참조). + +ECMAScript 표준에 따르면, 숫자의 자료형은 [배정밀도 64비트 형식 IEEE 754 값](https://en.wikipedia.org/wiki/Double-precision_floating-point_format) (-(2^53 -1) 와 2^53 -1 사이의 숫자값) 단 하나만 존재한다. **정수만을 표현하기 위한 특별한 자료형은 없다.** 부동 소수점을 표현할 수 있는 것 말고도, Number 타입은 세 가지 의미있는 몇가지 상징적인 값들도 표현할 수 있다. 이 값에는 `+Infinity`, `-Infinity`, and [`NaN`](/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN) ("**N**ot a **N**umber")이 있다. + +`+/-Infinity` 보다 크거나 작은지 확인하는 용도로 상수값인 {{jsxref("Number.MAX_VALUE")}} 나 {{jsxref("Number.MIN_VALUE")}} 을 사용할 수 있다. + +> **참고:** ECMAScript 2015부터 {{jsxref("Number.isSafeInteger()")}}와 {{jsxref("Number.MAX_SAFE_INTEGER")}} 및 {{jsxref("Number.MIN_SAFE_INTEGER")}}를 사용하여 숫자가 배정밀도 부동 소수점 숫자 범위에 있는지 확인할 수도 있습니다. +> +> 이 범위를 넘어서면 JavaScript의 정수는 더 이상 안전하지 않으며 값의 배정도 부동 소수점 근사값이 됩니다. + +Number 타입의 값 중에는 두 가지 방식으로 표현할 수 있는 유일한 값이 있는데, 0 이다. 0 은 -0 이나 +0 으로 표시할 수 있다. ("0" 은 물론 +0 이다.) + +실제로는 이러한 사실은 거의 효력이 없다. 그 예로, `+0 === -0` 은 `true` 이다. 하지만 0으로 나누는 경우 그 차이가 눈에 띌 것이다. + +```js +> 42 / +0 +Infinity +> 42 / -0 +-Infinity +``` + +숫자가 보통 값만으로 표현되긴 하지만, 자바스크립트는 [몇 가지 이진 연산자](/ko/docs/JavaScript/Reference/Operators/Bitwise_Operators)도 제공한다. + +> **참고:** 이러한 이진 연산자들은 [비트 마스킹(bit masking)](https://en.wikipedia.org/wiki/Mask_%28computing%29) 기법으로 한 숫자 안에 여러 Boolean 값을 저장하는데도 쓸 수 있다. 일반적으로 이런 방법은 나쁜 방법이지만, 자바스크립트에서는 (Boolean 값의 배열이나 Boolean 값들을 이름있는 속성들로 가지는 객체 같은) Boolean 덩어리를 나타낼 다른 방법이 없다. 비트 마스킹은 또한 코드를 이해하고, 읽고, 유지보수하는데에 있어서 좀 더 어렵게 만드는 경향이 있다. + +하지만 이러한 기법은 local storage 의 저장공간이 부족해서 절약하려고 하거나, 네트워크 상에서 각각의 비트를 전송하는 등의 극단적인 상황 같은 굉장히 제한적인 환경에서 필요할 수도 있다. 그래서 비트 마스킹 기법은 크기를 최대한 줄여야하는 상황에서만 사용을 고려해야 한다. + +### BigInt type + +The {{jsxref("BigInt")}} type is a numeric primitive in JavaScript that can represent integers with arbitrary precision. With `BigInt`s, you can safely store and operate on large integers even beyond the safe integer limit for `Number`s. + +A `BigInt` is created by appending `n` to the end of an integer or by calling the constructor. + +You can obtain the safest value that can be incremented with `Number`s by using the constant {{jsxref("Number.MAX_SAFE_INTEGER")}}. With the introduction of `BigInt`s, you can operate with numbers beyond the {{jsxref("Number.MAX_SAFE_INTEGER")}}. + +This example demonstrates, where incrementing the {{jsxref("Number.MAX_SAFE_INTEGER")}} returns the expected result: + +```js +> const x = 2n ** 53n; +9007199254740992n +> const y = x + 1n; +9007199254740993n +``` + +You can use the operators `+`, `*`, `-`, `**`, and `%` with `BigInt`s—just like with `Number`s. A `BigInt` is not strictly equal to a `Number`, but it is loosely so. + +A `BigInt` behaves like a `Number` in cases where it is converted to `Boolean`: `if`, `||`, `&&`, `Boolean`, `!`. + +`BigInt`s cannot be operated on interchangeably with `Number`s. Instead a {{jsxref("TypeError")}} will be thrown. + +### String 타입 + +자바스크립트의 {{jsxref("Global_Objects/String", "String")}} 타입은 텍스트 데이터를 나타내는데 사용한다. 이는 16비트 부호없는 정수 값 요소들의 집합이다. String의 각 요소는 String의 위치를 차지한다. 첫 번째 요소는 `0`번 인덱스에 있고, 다음 요소는 `1`번, 그 다음 요소는 2번... 같은 방식이다. String 의 길이는 String이 가지고있는 요소의 갯수이다. + +C 같은 언어와는 다르게, 자바스크립트의 문자열은 변경 불가능 (immutable) 하다. 이것은 한 번 문자열이 생성되면, 그 문자열을 수정할 수 없다는걸 의미한다. 그러나 원래 문자열에서 일부가 수정된 다른 문자열을 만드는건 가능하다. 예를 들자면 이렇다. + +- 원래 문자열에서 각각의 글자를 추출하거나 [`String.substr()`](/ko/docs/JavaScript/Reference/Global_Objects/String/substr)을 사용해서 만든 부분 문자열 +- 접합 연산자 (`+`) 나 [`String.concat()`](/ko/docs/JavaScript/Reference/Global_Objects/String/concat) 으로 두 문자열을 합친 문자열 + +#### "문자열의 자료형화"를 조심하라! + +문자열을 복잡한 자료형을 표현하는 용도로 쓰는 방법이 꽤나 매력적일 수 있다. 단기적으로 이런 장점들이 있다. + +- 접합 연산자로 손쉽게 복잡한 문자열을 만들 수 있다. +- 문자열은 디버깅이 쉽다 (화면에 출력한 내용이 문자열 변수에 있는 값과 같다) +- 문자열은 많은 API 에서 사용하는 공통분모이고 ([입력 필드](/ko/docs/DOM/HTMLInputElement), [로컬 스토리지](/ko/docs/Web/API/Web_Storage_API) 값, {{ domxref("XMLHttpRequest") }} 요청에서 `responseText`를 사용할 때 등) 그러다보니 문자열만으로 작업하는게 매혹적일 수 있다. + +규칙만 잘 정의해놓는다면, 어떤 자료구조가 되던 문자열로 표시할 수 있다. 그렇다고 해서 이게 좋은 방법이 되는 건 아니다. 예를 들자면, 구분자로 리스트 자료형을 흉내낼 수 있을 것이다 (하지만 자바스크립트의 배열을 사용하는게 더 알맞을 것이다). 불행하게도, 리스트의 요소중에 구분자가 들어있는 요소가 있다면 리스트는 엉망진창이 될 것이다. 물론 탈출 문자 (escape character) 등을 사용하거나 할 수도 있을 것이다. 하지만 이런 것들은 모두 미리 정해놓은 규칙을 필요로 하고, 덕분에 불필요한 관리 부담을 낳는다. + +문자열은 텍스트 데이터에만 사용하자. 복잡한 데이터를 나타낼때는, 문자열을 분석해서 적합한 추상화를 선택해 사용하자. + +### Symbol 타입 + +Symbol 은 ECMAScript 6 에서 추가되었다. Symbol은 **유일**하고 **변경 불가능한** (immutable) 기본값 (primitive value) 이다. 또한, 객체 속성의 key 값으로도 사용될 수 있다 (아래를 볼 것). 몇몇 프로그래밍 언어에서는 Symbol을 atom 이라고 부른다. 또, C 언어의 이름있는 열거형 (enum) 과도 비슷하다. 좀 더 자세히 알아보려면, 자바스크립트의 [Symbol](/ko/docs/Glossary/Symbol) 와 {{jsxref("Symbol")}} 객체 래퍼 (wrapper) 를 보라. + +## 객체 (Objects) + +컴퓨터 과학에서, 객체는 [식별자](/ko/docs/Glossary/Identifier) 로 참조할 수 있는, 메모리에 있는 값이다. + +### 속성 (Properties) + +자바스크립트에서, 객체는 속성들을 담고있는 가방 (collection) 으로 볼 수 있다. [객체 리터럴 문법 (object literal syntax)](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#object_literals) 으로 제한적으로 몇 가지 속성을 초기화할 수 있고, 그러고 나서 속성들을 추가하거나 제거할 수도 있다. 속성 값은 객체를 포함해 어떠한 자료형도 될 수 있고, 그 덕분에 복잡한 데이터 구조를 형성하는게 가능해진다. 속성은 키 (key) 값으로 식별된다. 키 값은 String 이거나 Symbol 값이다. + +두 종류의 객체 속성이 있는데, 이들은 종류에 따라 특성값들을 가질 수 있다. 데이터 (data) 속성과 접근자 (accessor) 속성이 그것이다. + +> **Note:** Each property has corresponding *attributes.* Attributes are used internally by the JavaScript engine, so you cannot directly access them. That's why attributes are listed in double square brackets, rather than single. +> +> See {{jsxref("Object.defineProperty()")}} to learn more. + +#### 데이터 속성 (Data property) + +키에 값을 연결하고, 아래와 같은 특성들 (attribute) 이 있다. + +<table class="standard-table"> + <caption> + Attributes of a data property + </caption> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + <th scope="col">Default value</th> + </tr> + </thead> + <tbody> + <tr> + <td>[[Value]]</td> + <td>Any JavaScript type</td> + <td>The value retrieved by a get access of the property.</td> + <td><code>undefined</code></td> + </tr> + <tr> + <td>[[Writable]]</td> + <td>Boolean</td> + <td> + If <code>false</code>, the property's [[Value]] cannot be changed. + </td> + <td><code>false</code></td> + </tr> + <tr> + <td>[[Enumerable]]</td> + <td>Boolean</td> + <td> + <p> + If <code>true</code>, the property will be enumerated in + <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" + >for...in</a + > + loops.<br />See also + <a + href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties" + >Enumerability and ownership of properties</a + >. + </p> + </td> + <td><code>false</code></td> + </tr> + <tr> + <td>[[Configurable]]</td> + <td>Boolean</td> + <td> + If <code>false</code>, the property cannot be deleted, cannot be changed + to an accessor property, and attributes other than [[Value]] and + [[Writable]] cannot be changed. + </td> + <td><code>false</code></td> + </tr> + </tbody> +</table> + +| Attribute | Type | Description | +| ---------- | ------- | ----------------------------------------------------- | +| Read-only | Boolean | Reversed state of the ES5 [[Writable]] attribute. | +| DontEnum | Boolean | Reversed state of the ES5 [[Enumerable]] attribute. | +| DontDelete | Boolean | Reversed state of the ES5 [[Configurable]] attribute. | + +#### 접근자 속성 (Accessor property) + +값을 가져오거나 값을 저장하기 위해 키에 하나 혹은 두 개의 접근자 함수 (`get`, `set`) 연결짓는다. 아래와 같은 특성이 있다. + +| Attribute | Type | Description | Default value | +| ---------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | +| [[Get]] | Function 객체 혹은 `undefined` | 이 속성의 값에 접근할 때마다, 인자 목록 없이 함수가 호출되고, 함수의 반환된 값으로 속성값을 가져온다. 같이보기 [`get`](/ko/docs/Web/JavaScript/Reference/Functions/get). | `undefined` | +| [[Set]] | Function 객체 혹은 `undefined` | 이 속성의 값이 바뀌려고 할 때마다, 할당된 값을 인자로 함수가 호출된다. 같이보기 [`set`](/ko/docs/Web/JavaScript/Reference/Functions/set). | `undefined` | +| [[Enumerable]] | Boolean | 만약 `true`이면, 이 속성은, [for...in](/ko/docs/Web/JavaScript/Reference/Statements/for...in)로 루프에서 열거될 수 있다.loops. | `false` | +| [[Configurable]] | Boolean | 만약 `false`이면, 이 속성은 제거될 수 없고, 데이터 속성을 수정할 수 없다. | `false` | + +### "Normal" objects, and functions + +자바스크립트 오브젝트는 키와 값의 매핑이다. 키는 문자열이고 값은 다른 어떤 값도 될 수 있다. 오브젝트는 [hashmaps](https://en.wikipedia.org/wiki/Hash_table)을 표현하는데 적합하다. 표준이 아닌 [\_\_proto\_\_](/ko/docs/JavaScript/Reference/Global_Objects/Object/proto "__proto__") 슈도 프로퍼티를 사용할 때는 주의하자. 이것을 지원하는 환경에서는 `'__proto__'는 오브젝트의 프로토타입을 의미하므로 이 이름을 키로 사용할 수 없다. 속성을 사용할 수 없다. 문자열의 출처가 분명하지 않을 때(입력 필드의 입력값 등)`주의가 필요하다. [이런 일이 생길 수도 있다](https://productforums.google.com/forum/#!category-topic/docs/documents/0hQWeOvCcHU). 이 때는 [StringMap abstraction](https://code.google.com/p/google-caja/source/browse/trunk/src/com/google/caja/ses/StringMap.js?r=4779) 같은 대안을 사용해보자.함수는 일반 오브젝트에서 호출 가능한 특성을 추가한 오브젝트이다. + +### Dates + +시간을 나타내려면 [Date utility](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date "en/JavaScript/Reference/Global_Objects/Date")를 사용하자. 최고의 선택이다. + +### Arrays + +[배열(Arrays](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array "Array")) 는 정수키를 가지는 일련의 값들을 표현하기 위한 오브젝트이다. 배열 오브젝트에는 길이를 나타내는 'length'란 속성도 있다. 배열은 Array.prototype을 상속받으므로 배열을 다룰 때 편한 [indexOf](/ko/docs/JavaScript/Reference/Global_Objects/Array/indexOf) (배열에서 값 검색)와 [push](/ko/docs/JavaScript/Reference/Global_Objects/Array/push) (새로운 값 추가) 같은 함수를 사용할 수 있다. 배열은 리스트나 집합을 표현하는데 적합하다. + +[Typed Arrays](/ko/docs/Web/JavaScript/Typed_arrays)는 ECMAScript 2015에서 JavaScript의 새로운 기능이며 기본 바이너리 데이터 버퍼의 배열과 유사한 보기를 제공합니다. 다음 표는 동등한 C 데이터 유형을 결정하는 데 도움이 됩니다. + +| Type | Value Range | Size in bytes | Description | Web IDL type | Equivalent C type | +| ---------------------------------------- | ----------------------------- | ------------- | ---------------------------------------------------------------------------- | --------------------- | ------------------------------- | +| {{jsxref("Int8Array")}} | `-128` to `127` | 1 | 8-bit two's complement signed integer | `byte` | `int8_t` | +| {{jsxref("Uint8Array")}} | `0` to `255` | 1 | 8-bit unsigned integer | `octet` | `uint8_t` | +| {{jsxref("Uint8ClampedArray")}} | `0` to `255` | 1 | 8-bit unsigned integer (clamped) | `octet` | `uint8_t` | +| {{jsxref("Int16Array")}} | `-32768` to `32767` | 2 | 16-bit two's complement signed integer | `short` | `int16_t` | +| {{jsxref("Uint16Array")}} | `0` to `65535` | 2 | 16-bit unsigned integer | `unsigned short` | `uint16_t` | +| {{jsxref("Int32Array")}} | `-2147483648` to `2147483647` | 4 | 32-bit two's complement signed integer | `long` | `int32_t` | +| {{jsxref("Uint32Array")}} | `0` to `4294967295` | 4 | 32-bit unsigned integer | `unsigned long` | `uint32_t` | +| {{jsxref("Float32Array")}} | `1.2E-38` to `3.4E38` | 4 | 32-bit IEEE floating point number (7 significant digits e.g., `1.1234567`) | `unrestricted float` | `float` | +| {{jsxref("Float64Array")}} | `5E-324` to `1.8E308` | 8 | 64-bit IEEE floating point number (16 significant digits e.g., `1.123...15`) | `unrestricted double` | `double` | +| {{jsxref("BigInt64Array")}} | `-2^63` to `2^63 - 1` | 8 | 64-bit two's complement signed integer | `bigint` | `int64_t (signed long long)` | +| {{jsxref("BigUint64Array")}} | `0` to `2^64 - 1` | 8 | 64-bit unsigned integer | `bigint` | `uint64_t (unsigned long long)` | + +### Keyed collections: Maps, Sets, WeakMaps, WeakSets + +표준이 아니지만 ECMAScript 6에서 표준이 될 것 같다. + +이 자료형들에서는 키가 문자열 뿐만 아니라 오브젝트도 될 수 있다. Set은 오브젝트의 집합을 나타내는 반면에 `WeakMaps`와 `Maps`는 오브젝트에 값을 연관시킬 수 있다. `Map`과 `WeakMap`의 차이는 전자는 오브젝트 키를 열거할 수 있다는 것이다. 이것은 가비지 콜렉션에서 이점을 준다. + +ECMAScript 5를 이용해서 Map과 Set을 구현할 수 있을 것이다. 그러나 오브젝트는 크기 비교가 안된다는 점 때문에(예를들어 어떤 오브젝트는 다른 오브젝트보다 '작다'라고 할 수 없다) look-up에 소요되는 시간이 선형 시간이지 않을 것이다. 네이티브 구현은(WeakMaps를 포함해서) look-up 시간이 거의 로그 시간에서 상수 시간이다. + +DOM 노드에 데이터를 지정하기 위해서 직접 속성을 지정할 수도 있지만 `data-\*` 속성을 사용할 수도 있다. 여기에는 다른 스크립트도 모두 그 속성에 접근할 수 있다는 나쁜 점이 있다. `Map`과 `WeakMap`은 오브젝트만 사용할 수 있는 개인 데이터를 쉽게 만들 수 있게 해준다. + +### Structured data: JSON + +JSON(**J**ava**S**cript **O**bject **N**otation)은 JavaScript에서 파생된 경량 데이터 교환 형식이지만 많은 프로그래밍 언어에서 사용됩니다. JSON은 범용 데이터 구조를 구축합니다. + +세부사항은 [JSON](/ko/docs/Glossary/JSON) 와 {{jsxref("JSON")}} 를 보세요. + +### 표준 라이브러리의 더 많은 객체 + +JavaScript에는 내장 객체의 표준 라이브러리가 있습니다. + +더 많은 객체에 대해 알아보려면 [참조](/ko/docs/Web/JavaScript/Reference/Global_Objects)를 살펴보십시오. + +## `typeof` 연산자를 사용하여 유형 결정 + +`typeof` 연산자는 변수의 유형을 찾는 데 도움이 될 수 있습니다. + +자세한 내용과 edge cases에 대한 정보는 [reference page](/ko/docs/Web/JavaScript/Reference/Operators/typeof)를 참고하세요. + +## 같이보기 + +- [Nicholas Zakas collection of common data structure and common algorithms in JavaScript.](https://github.com/nzakas/computer-science-in-javascript/) +- [Search Tre(i)es implemented in JavaScript](https://github.com/monmohan/DataStructures_In_Javascript) +- [Data Types and Values in the ECMAScript specification](https://tc39.es/ecma262/#sec-ecmascript-data-types-and-values) diff --git a/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.html deleted file mode 100644 index 41252c39d1..0000000000 --- a/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Enumerability and ownership of properties -slug: Web/JavaScript/Enumerability_and_ownership_of_properties -translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties ---- -<div>{{JsSidebar("More")}}</div> - - - -<p>'Enumerable properties'(열거 가능한 속성)는 내부 열거 형 플래그가 true로 설정된 property로, 이는 간단한 할당 또는 property initializer (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a>를 통해 정의 된 특성 및 이러한 기본 열거 형을 false로 정의한 특성)를 통해 작성된 property의 기본값입니다. 등록 정보의 키가 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a>이 아니면 열거 가능한 등록 정보가 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 루프에 표시됩니다. 'Ownership of properties' (속성의 소유권)은 속성이 프로토 타입 체인이 아닌 개체에 직접 속하는지 여부에 따라 결정됩니다. 객체의 속성도 전체적으로 검색 할 수 있습니다. 개체 속성을 감지, 반복 / 열거 및 검색하는 여러 가지 기본 제공 방법이 있으며 아래 표와 같이 사용할 수 있습니다. 누락 된 범주를 얻는 방법을 보여주는 샘플 코드는 다음과 같습니다.</p> - -<div style="overflow: auto; width: 100%;"> -<table> - <caption>Property enumerability and ownership - built-in methods of detection, retrieval, and iteration</caption> - <tbody> - <tr> - <th>Functionality</th> - <th>Own object</th> - <th>Own object and its prototype chain</th> - <th>Prototype chain only</th> - </tr> - <tr> - <td>Detection</td> - <td> - <table> - <thead> - <tr> - <th scope="col">Enumerable</th> - <th scope="col">Nonenumerable</th> - <th scope="col">Enumerable and Nonenumerable</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></p> - </td> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code> – filtered to exclude enumerables using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></p> - </td> - <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></td> - </tr> - </tbody> - </table> - </td> - <td> - <table> - <thead> - <tr> - <th scope="col">Enumerable</th> - <th scope="col">Nonenumerable</th> - <th scope="col">Enumerable and Nonenumerable</th> - </tr> - </thead> - <tbody> - <tr> - <td>Not available without extra code</td> - <td>Not available without extra code</td> - <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in</a></code></td> - </tr> - </tbody> - </table> - </td> - <td>Not available without extra code</td> - </tr> - <tr> - <td>Retrieval</td> - <td> - <table> - <thead> - <tr> - <th scope="col">Enumerable</th> - <th scope="col">Nonenumerable</th> - <th scope="col">Enumerable and Nonenumerable</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code> </p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p> - </td> - <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a> </code>– filtered to exclude enumerables using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p> - </td> - </tr> - </tbody> - </table> - </td> - <td>Not available without extra code</td> - <td>Not available without extra code</td> - </tr> - <tr> - <td>Iterable</td> - <td> - <table> - <thead> - <tr> - <th scope="col">Enumerable</th> - <th scope="col">Nonenumerable</th> - <th scope="col">Enumerable and Nonenumerable</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code> </p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p> - </td> - <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code> – filtered to exclude enumerables using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p> - </td> - </tr> - </tbody> - </table> - </td> - <td> - <table> - <thead> - <tr> - <th scope="col">Enumerable</th> - <th scope="col">Nonenumerable</th> - <th scope="col">Enumerable and Nonenumerable</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code></p> - - <p>(excluding symbols)</p> - </td> - <td>Not available without extra code</td> - <td>Not available without extra code</td> - </tr> - </tbody> - </table> - </td> - <td>Not available without extra code</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Obtaining_properties_by_enumerabilityownership">Obtaining properties by enumerability/ownership</h2> - - - -<p>아래는 모든 경우에 가장 효율적인 알고리즘은 아니지만 빠르게 코드를 작성하여 확인하기 좋습니다.</p> - -<ul> - <li>Detection can occur by <code>SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1</code></li> - <li>Iteration can occur by <code>SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {});</code> (or use<code> filter()</code>, <code>map()</code>, etc.)</li> -</ul> - -<pre class="brush: js notranslate">var SimplePropertyRetriever = { - getOwnEnumerables: function(obj) { - return this._getPropertyNames(obj, true, false, this._enumerable); - // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj); - }, - getOwnNonenumerables: function(obj) { - return this._getPropertyNames(obj, true, false, this._notEnumerable); - }, - getOwnEnumerablesAndNonenumerables: function(obj) { - return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable); - // Or just use: return Object.getOwnPropertyNames(obj); - }, - getPrototypeEnumerables: function(obj) { - return this._getPropertyNames(obj, false, true, this._enumerable); - }, - getPrototypeNonenumerables: function(obj) { - return this._getPropertyNames(obj, false, true, this._notEnumerable); - }, - getPrototypeEnumerablesAndNonenumerables: function(obj) { - return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable); - }, - getOwnAndPrototypeEnumerables: function(obj) { - return this._getPropertyNames(obj, true, true, this._enumerable); - // Or could use unfiltered for..in - }, - getOwnAndPrototypeNonenumerables: function(obj) { - return this._getPropertyNames(obj, true, true, this._notEnumerable); - }, - getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) { - return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable); - }, - // Private static property checker callbacks - _enumerable: function(obj, prop) { - return obj.propertyIsEnumerable(prop); - }, - _notEnumerable: function(obj, prop) { - return !obj.propertyIsEnumerable(prop); - }, - _enumerableAndNotEnumerable: function(obj, prop) { - return true; - }, - // Inspired by http://stackoverflow.com/a/8024294/271577 - _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) { - var props = []; - - do { - if (iterateSelfBool) { - Object.getOwnPropertyNames(obj).forEach(function(prop) { - if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) { - props.push(prop); - } - }); - } - if (!iteratePrototypeBool) { - break; - } - iterateSelfBool = true; - } while (obj = Object.getPrototypeOf(obj)); - - return props; - } -};</pre> - -<h2 id="Detection_Table">Detection Table</h2> - -<div style="overflow: auto; width: 100%;"> -<table> - <thead> - <tr> - <th scope="row"></th> - <th scope="col"><code>in</code></th> - <th scope="col"><code>for..in</code></th> - <th scope="col"><code>obj.hasOwnProperty</code></th> - <th scope="col"><code>obj.propertyIsEnumerable</code></th> - <th scope="col"><code>Object.keys</code></th> - <th scope="col"><code>Object.getOwnPropertyNames</code></th> - <th scope="col"><code>Object.getOwnPropertyDescriptors</code></th> - <th scope="col"><code>Reflect.ownKeys()</code></th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Enumerable</th> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - </tr> - <tr> - <th scope="row">Nonenumerable</th> - <td>true</td> - <td>false</td> - <td>true</td> - <td>false</td> - <td>false</td> - <td>true</td> - <td>true</td> - <td>true</td> - </tr> - <tr> - <th scope="row">Symbols keys</th> - <td>true</td> - <td>false</td> - <td>true</td> - <td>true</td> - <td>false</td> - <td>false</td> - <td>true</td> - <td>true</td> - </tr> - <tr> - <th scope="row">Inherited Enumerable</th> - <td>true</td> - <td>true</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - </tr> - <tr> - <th scope="row">Inherited Nonenumerable</th> - <td>true</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - </tr> - <tr> - <th scope="row">Inherited Symbols keys</th> - <td>true</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in</a></code></li> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code></li> - <li>{{jsxref("Object.hasOwnProperty()")}}</li> - <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> - <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> - <li>{{jsxref("Object.keys()")}}</li> - <li>{{jsxref("Object.getOwnPropertyDescriptors()")}}</li> -</ul> diff --git a/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.md b/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.md new file mode 100644 index 0000000000..8f4155cf84 --- /dev/null +++ b/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.md @@ -0,0 +1,467 @@ +--- +title: Enumerability and ownership of properties +slug: Web/JavaScript/Enumerability_and_ownership_of_properties +tags: + - Guide + - JavaScript +translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties +--- +{{JsSidebar("More")}} + +'Enumerable properties'(열거 가능한 속성)는 내부 열거 형 플래그가 true로 설정된 property로, 이는 간단한 할당 또는 property initializer ([Object.defineProperty](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)를 통해 정의 된 특성 및 이러한 기본 열거 형을 false로 정의한 특성)를 통해 작성된 property의 기본값입니다. + +등록 정보의 키가 [Symbol](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol)이 아니면 열거 가능한 등록 정보가 [for...in](/ko/docs/Web/JavaScript/Reference/Statements/for...in) 루프에 표시됩니다. 'Ownership of properties' (속성의 소유권)은 속성이 프로토 타입 체인이 아닌 개체에 직접 속하는지 여부에 따라 결정됩니다. 객체의 속성도 전체적으로 검색 할 수 있습니다. 개체 속성을 감지, 반복 / 열거 및 검색하는 여러 가지 기본 제공 방법이 있으며 아래 표와 같이 사용할 수 있습니다. 누락 된 범주를 얻는 방법을 보여주는 샘플 코드는 다음과 같습니다. + +## 객체 속성 감지, 검색 및 열거 + +개체 속성을 감지, 반복/열거 및 검색하는 여러 가지 기본 제공 수단이 있습니다. 아래 표에 요약되어 있습니다. + +### Detection + +<table> + <thead> + <tr> + <th></th> + <th>Own object</th> + <th>Own object and prototype chain</th> + <th>Prototype chain only</th> + </tr> + </thead> + <tbody> + <tr> + <th>Enumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" + >propertyIsEnumerable</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" + >hasOwnProperty</a + ></code + > + </p> + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + <tr> + <th>Nonenumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" + >hasOwnProperty</a + ></code + > + – filtered to exclude enumerables using + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" + >propertyIsEnumerable</a + ></code + > + </p> + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + <tr> + <th>Enumerable and Nonenumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" + >hasOwnProperty</a + ></code + > + </p> + </td> + <td> + <code + ><a href="/ko/docs/Web/JavaScript/Reference/Operators/in" + >in</a + ></code + > + </td> + <td>Not available without extra code</td> + </tr> + </tbody> +</table> + +### Retrieval + +<table> + <thead> + <tr> + <th></th> + <th>Own object</th> + <th>Own object and prototype chain</th> + <th>Prototype chain only</th> + </tr> + </thead> + <tbody> + <tr> + <th>Enumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" + >Object.keys</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" + >getOwnPropertyNames</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" + >getOwnPropertySymbols</a + ></code + > + </p> + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + <tr> + <th>Nonenumerable</th> + <td> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" + >getOwnPropertyNames</a + ></code + >, + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" + >getOwnPropertySymbols</a + ></code + > + – filtered to exclude enumerables using <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" + >propertyIsEnumerable</a + ></code + > + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + <tr> + <th>Enumerable and Nonenumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" + >getOwnPropertyNames</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" + >getOwnPropertySymbols</a + ></code + > + </p> + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + </tbody> +</table> + +### Iteration + +<table> + <thead> + <tr> + <th></th> + <th>Own object</th> + <th>Own object and prototype chain</th> + <th>Prototype chain only</th> + </tr> + </thead> + <tbody> + <tr> + <th>Enumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" + >Object.keys</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" + >getOwnPropertyNames</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" + >getOwnPropertySymbols</a + ></code + > + </p> + </td> + <td> + <p> + <code + ><a href="/ko/docs/Web/JavaScript/Reference/Statements/for...in" + >for..in</a + ></code + > + </p> + <p>(excluding symbols)</p> + </td> + <td>Not available without extra code</td> + </tr> + <tr> + <th>Nonenumerable</th> + <td> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" + >getOwnPropertyNames</a + ></code + >, + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" + >getOwnPropertySymbols</a + ></code + > + – filtered to exclude enumerables using <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" + >propertyIsEnumerable</a + ></code + > + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + <tr> + <th>Enumerable and Nonenumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" + >getOwnPropertyNames</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" + >getOwnPropertySymbols</a + ></code + > + </p> + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + </tbody> +</table> + +## Obtaining properties by enumerability/ownership + +아래는 모든 경우에 가장 효율적인 알고리즘은 아니지만 빠르게 코드를 작성하여 확인하기 좋습니다. + +- Detection can occur by `SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1` +- Iteration can occur by `SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {});` (or use` filter()`, `map()`, etc.) + +```js +var SimplePropertyRetriever = { + getOwnEnumerables: function(obj) { + return this._getPropertyNames(obj, true, false, this._enumerable); + // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj); + }, + getOwnNonenumerables: function(obj) { + return this._getPropertyNames(obj, true, false, this._notEnumerable); + }, + getOwnEnumerablesAndNonenumerables: function(obj) { + return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable); + // Or just use: return Object.getOwnPropertyNames(obj); + }, + getPrototypeEnumerables: function(obj) { + return this._getPropertyNames(obj, false, true, this._enumerable); + }, + getPrototypeNonenumerables: function(obj) { + return this._getPropertyNames(obj, false, true, this._notEnumerable); + }, + getPrototypeEnumerablesAndNonenumerables: function(obj) { + return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable); + }, + getOwnAndPrototypeEnumerables: function(obj) { + return this._getPropertyNames(obj, true, true, this._enumerable); + // Or could use unfiltered for..in + }, + getOwnAndPrototypeNonenumerables: function(obj) { + return this._getPropertyNames(obj, true, true, this._notEnumerable); + }, + getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) { + return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable); + }, + // Private static property checker callbacks + _enumerable: function(obj, prop) { + return obj.propertyIsEnumerable(prop); + }, + _notEnumerable: function(obj, prop) { + return !obj.propertyIsEnumerable(prop); + }, + _enumerableAndNotEnumerable: function(obj, prop) { + return true; + }, + // Inspired by http://stackoverflow.com/a/8024294/271577 + _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) { + var props = []; + + do { + if (iterateSelfBool) { + Object.getOwnPropertyNames(obj).forEach(function(prop) { + if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) { + props.push(prop); + } + }); + } + if (!iteratePrototypeBool) { + break; + } + iterateSelfBool = true; + } while (obj = Object.getPrototypeOf(obj)); + + return props; + } +}; +``` + +## Detection Table + +<table> + <thead> + <tr> + <th></th> + <th>Enumerable</th> + <th>Nonenumerable</th> + <th>Symbols keys</th> + <th>Inherited Enumerable</th> + <th>Inherited Nonenumerable</th> + <th>Inherited Symbols keys</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>in</code></th> + <td>true</td> + <td>true</td> + <td>true</td> + <td>true</td> + <td>true</td> + <td>true</td> + </tr> + <tr> + <th><code>for..in</code></th> + <td>true</td> + <td>false</td> + <td>false</td> + <td>true</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th><code>obj.hasOwnProperty</code></th> + <td>true</td> + <td>true</td> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th><code>obj.propertyIsEnumerable</code></th> + <td>true</td> + <td>false</td> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th><code>Object.keys</code></th> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th><code>Object.getOwnPropertyNames</code></th> + <td>true</td> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th><code>Object.getOwnPropertyDescriptors</code></th> + <td>true</td> + <td>true</td> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th><code>Reflect.ownKeys()</code></th> + <td>true</td> + <td>true</td> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + </tbody> +</table> + +## 같이보기 + +- [`in`](/ko/docs/Web/JavaScript/Reference/Operators/in) +- [`for..in`](/ko/docs/Web/JavaScript/Reference/Statements/for...in) +- {{jsxref("Object.hasOwnProperty()")}} +- {{jsxref("Object.propertyIsEnumerable()")}} +- {{jsxref("Object.getOwnPropertyNames()")}} +- {{jsxref("Object.keys()")}} +- {{jsxref("Object.getOwnPropertyDescriptors()")}} diff --git a/files/ko/web/javascript/equality_comparisons_and_sameness/index.html b/files/ko/web/javascript/equality_comparisons_and_sameness/index.html deleted file mode 100644 index 31d1778d5d..0000000000 --- a/files/ko/web/javascript/equality_comparisons_and_sameness/index.html +++ /dev/null @@ -1,503 +0,0 @@ ---- -title: 동치 비교 및 동일성 -slug: Web/JavaScript/Equality_comparisons_and_sameness -tags: - - Comparison - - Equality - - Intermediate - - JavaScript - - SameValue - - SameValueZero - - Sameness -translation_of: Web/JavaScript/Equality_comparisons_and_sameness ---- -<div>{{jsSidebar("Intermediate")}}</div> - -<div class="summary"> -<p>ES2015에는 4가지 같음(equality) 알고리즘이 있습니다:</p> - -<ul> - <li>추상적(abstract) 같음 비교 (<code>==</code>)</li> - <li>엄격한(strict) 같음 비교 (<code>===</code>): <code>Array.prototype.indexOf</code>, <code>Array.prototype.lastIndexOf</code> 및 <code>case</code> 절 매칭에 쓰임</li> - <li>등가0(SameValueZero): <code>Map</code> 및 <code>Set</code> 연산뿐만 아니라 <code>%TypedArray%</code> 및 <code>ArrayBuffer</code> 생성자, 그리고 ES2016에 예정된 <code>String.prototype.includes</code>에 쓰임</li> - <li>등가(SameValue): 그 외 모든 곳에 쓰임</li> -</ul> - -<p>JavaScript는 3가지 서로 다른 값 비교 연산을 제공합니다:</p> - -<ul> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">===</a>를 사용하는 엄격한 같음 (또는 "삼중 등호" 또는 "항등(identity)"),</li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">==</a>를 사용하는 느슨한(loose) 같음 ("이중 등호"),</li> - <li>그리고 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> (ECMAScript 2015에 새로 들임).</li> -</ul> - -<p>어느 연산을 쓸 지 그 선택은 당신이 어떤 종류의 비교를 수행하기 위해 찾고 있는 지에 달렸습니다.</p> - -<p> </p> - -<ul> - <li>이중 equals (<code>==</code>)는 두 가지를 비교할 때 유형 변환을 수행하고 IEEE 754를 준수하기 위해 <code>NaN</code>, <code>-0</code> 및 <code>+0</code>을 특별히 처리합니다 (그래서<code>NaN != NaN</code>이고 <code>-0 == +0</code>입니다);</li> - <li>트리플 equals (<code>===</code>)는 이중 equals (<code>NaN</code>, <code>-0</code> 및 <code>+0</code>의 특수 처리 포함)와 동일한 비교를 수행하지만 유형 변환은 수행하지 않습니다. 형식이 다른 경우 <code>false</code>가 반환됩니다.</li> - <li><code>Object.is</code>는 형식 변환을하지 않으며 <code>NaN</code>, <code>-0</code> 및 <code>+0</code>에 대한 특수 처리를 수행하지 않습니다 (특수 숫자 값을 제외하고는 <code>===</code>와 동일한 동작을 제공함).</li> -</ul> - -<p> </p> -</div> - -<p>이들 사이의 구분은 모두 원시형(primitive) 처리와 관련이 있습니다. 매개 변수가 구조적, 개념적으로 유사한 지 비교하는 것이 없습니다. 같은 구조를 가지지만 개체 자체가 각각인 비원시형(non-primitive) 개체 x 및 y의 경우 위의 모든 형태(form)는 false로 평가됩니다.</p> - -<h2 id="를_사용하는_엄격한_같음"><code>===</code>를 사용하는 엄격한 같음</h2> - -<p>엄격한 같음(strict equality)은 두 값이 같은 지 비교합니다. 어느 값도 비교되기 전에 어떤 다른 값으로 남몰래 변환되지 않습니다. 둘이 서로 다른 형이면, 둘은 같지 않다고 여깁니다. 그렇지 않고 둘이 같은 형이고 숫자가 아닌 경우, 같은 값이면 같다고 여깁니다. 끝으로, 둘이 숫자인 경우, 둘 다 <code>NaN</code>이 아닌 같은 값이거나 하나는 <code>+0</code> 또 하나는 <code>-0</code>인 경우 같다고 여깁니다.</p> - -<pre class="brush: js">var num = 0; -var obj = new String("0"); -var str = "0"; -var b = false; - -console.log(num === num); // true -console.log(obj === obj); // true -console.log(str === str); // true - -console.log(num === obj); // false -console.log(num === str); // false -console.log(obj === str); // false -console.log(null === undefined); // false -console.log(obj === null); // false -console.log(obj === undefined); // false -</pre> - -<p>엄격한 같음은 거의 항상 사용하는 올바른 비교 연산입니다. 숫자를 뺀 모든 값에 대해, 분명한 의미(semantics)를 사용합니다: 값은 그 자체와만 같습니다(/ 단지 그 자체입니다). 숫자는 서로 다른 두 극단 상황(edge case)을 얼버무리기(gloss over) 위해 약간 다른 의미를 사용합니다. 첫째는 부동 소수점 0은 양이든 음이든 하나의 부호를 지닙니다. 이는 특정 수학상의 해결책을 나타내는 데 유용하지만, 대부분의 상황에 <code>+0</code>과 <code>-0</code>의 차이에 신경쓰지 않기에, 엄격한 같음은 둘을 같은 값으로 다룹니다. 둘째는 부동 소수점은 not-a-number 값(<code>NaN</code>) 개념을 포함합니다, 특정 잘못 정의된(ill-defined) 수학 문제의 해결책을 보여주기 위해: 예를 들어, 양의 무한대(infinity)에 추가된 음의 무한대. 엄격한 같음은 <code>NaN</code>을 다른 모든 값과 같지 않게 다룹니다 -- 자신 포함. (<code>(x !== x)</code>가 <code>true</code>인 유일한 경우는 <code>x</code>가 <code>NaN</code>일 때입니다.)</p> - -<h2 id="를_사용하는_느슨한_같음">==를 사용하는 느슨한 같음</h2> - -<p>느슨한 같음(loose equality)은 두 값이 같은 지 비교합니다, 두 값을 공통(common) 형으로 변환한 <em>후</em>에. 변환 후 (하나 또는 양쪽이 변환을 거칠 수 있음), 최종 같음 비교는 꼭 <code>===</code>처럼 수행됩니다. 느슨한 같음은 대칭(<em>symmetric</em>)입니다: <code>A == B</code>는 <code>A</code> 및 <code>B</code>가 어떤 값이든 항상 <code>B == A</code>와 같은 의미를 갖습니다 (적용된 변환의 순서 말고는).</p> - -<p>같음 비교는 다양한 형의 피연산자에 대해 다음과 같이 수행됩니다:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row"> </th> - <th colspan="7" scope="col" style="text-align: center;">피연산자 B</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row"> </th> - <td> </td> - <td style="text-align: center;">Undefined</td> - <td style="text-align: center;">Null</td> - <td style="text-align: center;">Number</td> - <td style="text-align: center;">String</td> - <td style="text-align: center;">Boolean</td> - <td style="text-align: center;">Object</td> - </tr> - <tr> - <th colspan="1" rowspan="6" scope="row">피연산자 A</th> - <td>Undefined</td> - <td style="text-align: center;"><code>true</code></td> - <td style="text-align: center;"><code>true</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - </tr> - <tr> - <td>Null</td> - <td style="text-align: center;"><code>true</code></td> - <td style="text-align: center;"><code>true</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - </tr> - <tr> - <td>Number</td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>A === B</code></td> - <td style="text-align: center;"><code>A === ToNumber(B)</code></td> - <td style="text-align: center;"><code>A === ToNumber(B)</code></td> - <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td> - </tr> - <tr> - <td>String</td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>ToNumber(A) === B</code></td> - <td style="text-align: center;"><code>A === B</code></td> - <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td> - <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td> - </tr> - <tr> - <td>Boolean</td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>ToNumber(A) === B</code></td> - <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td> - <td style="text-align: center;"><code>A === B</code></td> - <td style="text-align: center;"><code>ToNumber(A) == ToPrimitive(B)</code></td> - </tr> - <tr> - <td>Object</td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td> - <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td> - <td style="text-align: center;"><code>ToPrimitive(A) == ToNumber(B)</code></td> - <td style="text-align: center;"><code>A === B</code></td> - </tr> - </tbody> -</table> - -<p>위 표에서, <code>ToNumber(A)</code>는 비교 전에 그 인수를 숫자로 변환하려고 시도합니다. 그 동작(behavior)은 <code>+A</code>(단항 + 연산자)에 해당합니다. <code>ToPrimitive(A)</code>는 그 객체 인수를 원시형 값으로 변환하려고 시도합니다, 다양한 순서로 <code>A</code>의 <code>A.toString</code> 및 <code>A.valueOf</code> 메서드 호출을 시도하여.</p> - -<p>전통 및 ECMAScript에 따르면, 모든 객체는 <code>undefined</code> 및 <code>null</code>과 느슨하게 같지 않습니다. 그러나 대부분의 브라우저는 일부 문맥(context)에서 <code>undefined</code>값을 모방하는(<em>emulate</em>) 것처럼 행동하기 위해 매우 좁은 부류의 객체(특히, 모든 페이지에 대한 <code>document.all</code> 객체)에 허용합니다. 느슨한 같음이 그러한 문맥 중 하나입니다: <code>null == A</code> 및 <code>undefined == A</code>는 A가 <code>undefined</code>를 <em>모방</em>하는 객체인 경우, 그리고 그 경우에만 true로 평가합니다. 다른 모든 경우에 객체는 결코 <code>undefined</code> 또는 <code>null</code>과 느슨하게 같지 않습니다.</p> - -<p> </p> - -<p>전통적으로 ECMAScript에 따르면 모든 객체는 <code>undefined</code> 및 <code>null</code>과 느슨하게 같지 않습니다. 그러나 대부분의 브라우저는 일부 문맥(context)에서 정의되지 않은 값(<code>undefined</code>)을 모방하는(<em>emulate</em>) 것처럼 동작하는 매우 좁은 개체 클래스 (특히 모든 페이지의 <code>document.all</code> 개체)를 허용합니다. Loose equality는 다음과 같은 컨텍스트 중 하나입니다. <code>null == A</code> 및 <code>undefined == A</code>는 <code>undefined</code>를 에뮬레이트하는 객체 인 경우에만 true로 평가됩니다. 다른 모든 경우에는 객체가 <code>undefined</code>거나 <code>null</code>이 될 수 없습니다.</p> - -<pre class="brush: js">var num = 0; -var obj = new String("0"); -var str = "0"; -var b = false; - -console.log(num == num); // true -console.log(obj == obj); // true -console.log(str == str); // true - -console.log(num == obj); // true -console.log(num == str); // true -console.log(obj == str); // true -console.log(null == undefined); // true - -// 둘 다 false, 드문 경우를 제외하고는 -console.log(obj == null); -console.log(obj == undefined); -</pre> - -<p>대부분의 경우 느슨한 같음을 사용하는 것은 바람직하지 않습니다. strict equality를 사용한 비교의 결과는 예측하기가 쉽고 형 강제(coercion) 변환이 일어나지 않기에 평가가 빠를 수 있습니다.</p> - -<p> </p> - -<h2 id="Same-value_equality">Same-value equality</h2> - -<p>등가(same-value) 같음은 최종 사용 사례(use case)를 다룹니다: 두 값이 모든 문맥에서 <em>기능상 같은지</em> 여부를 결정하는. (이 사용 사례는 <a href="https://ko.wikipedia.org/wiki/리스코프_치환_원칙" title="Liskov substitution principle">리스코프 치환 원칙</a>의 실례를 보입니다.) 다음은 불변 속성(property)을 변화시키려 시도할 때 일어나는 한 사례입니다:</p> - -<pre class="brush: js">// 불변(immutable) NEGATIVE_ZERO 속성을 Number 생성자에 추가. -Object.defineProperty(Number, "NEGATIVE_ZERO", - { value: -0, writable: false, configurable: false, enumerable: false }); - -function attemptMutation(v) -{ - Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v }); -} -</pre> - -<p><code>Object.defineProperty</code>는 변경 불가능한 속성을 변경하려고 시도 할 때 예외를 throw하지만 실제 변경이 요청되지 않으면 아무 것도 수행하지 않습니다. <code>v</code>가 <code>-0</code>이면, 변경 사항이 요청되지 않고 오류가 발생하지 않습니다. 내부적으로, 불변의 property가 재정의 (redefined)되었을 때, 새롭게 지정된 값은 같은 값의 동등성을 사용해 현재의 값과 비교됩니다.</p> - -<p>Same-value equality는 {{jsxref("Object.is")}} 메서드로 제공됩니다.</p> - -<h2 id="Same-value-zero_equality">Same-value-zero equality</h2> - -<p>등가 같음과 비슷하지만 +0과 -0이 같다고 여깁니다.</p> - -<h2 id="스펙_내_추상적_같음_엄격한_같음_및_등가">스펙 내 추상적 같음, 엄격한 같음 및 등가</h2> - -<p>In ES5, the comparison performed by <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>==</code></a> is described in <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">Section 11.9.3, The Abstract Equality Algorithm</a>. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> comparison is <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">11.9.6, The Strict Equality Algorithm</a>. (Go look at these. They're brief and readable. Hint: read the strict equality algorithm first.) ES5 also describes, in <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12">Section 9.12, The SameValue Algorithm</a> for use internally by the JS engine. It's largely the same as the Strict Equality Algorithm, except that 11.9.6.4 and 9.12.4 differ in handling {{jsxref("Number")}}s. ES2015 simply proposes to expose this algorithm through {{jsxref("Object.is")}}.</p> - -<p>We can see that with double and triple equals, with the exception of doing a type check upfront in 11.9.6.1, the Strict Equality Algorithm is a subset of the Abstract Equality Algorithm, because 11.9.6.2–7 correspond to 11.9.3.1.a–f.</p> - -<h2 id="같음_비교를_이해하기_위한_모델은">같음 비교를 이해하기 위한 모델은?</h2> - -<p>ES2015 이전에, 이중 등호 및 삼중 등호에 대해 하나가 다른 하나의 "확장"판이라고 (말)했을 지 모릅니다. 예를 들어, 누군가는 이중 등호는 삼중 등호의 확장판이라고 합니다, 전자는 후자가 하는 모든 것을 하지만 그 피연산자에 형 변환을 하기에. 가령, <code>6 == "6"</code>. (대신에, 이중 등호는 기준선이고 삼중 등호는 향상판이라고 하는 이도 있습니다, 두 피연산자가 같은 형이길 요구하고 그래서 별도 제약을 추가하기에. 어느 게 더 이해하기 좋은 모델인지는 당신이 상태(things)를 보기 위해 선택한 방법에 달렸습니다.)</p> - -<p>However, this way of thinking about the built-in sameness operators is not a model that can be stretched to allow a place for ES2015's {{jsxref("Object.is")}} on this "spectrum". {{jsxref("Object.is")}} isn't simply "looser" than double equals or "stricter" than triple equals, nor does it fit somewhere in between (i.e., being both stricter than double equals, but looser than triple equals). We can see from the sameness comparisons table below that this is due to the way that {{jsxref("Object.is")}} handles {{jsxref("NaN")}}. Notice that if <code>Object.is(NaN, NaN)</code>evaluated to <code>false</code>, we <em>could</em> say that it fits on the loose/strict spectrum as an even stricter form of triple equals, one that distinguishes between <code>-0</code> and <code>+0</code>. The {{jsxref("NaN")}} handling means this is untrue, however. Unfortunately, {{jsxref("Object.is")}} simply has to be thought of in terms of its specific characteristics, rather than its looseness or strictness with regard to the equality operators.</p> - -<p> </p> - -<table> - <caption>Sameness Comparisons</caption> - <thead> - <tr> - <th scope="col">x</th> - <th scope="col">y</th> - <th scope="col"><code>==</code></th> - <th scope="col"><code>===</code></th> - <th scope="col"><code>Object.is</code></th> - <th scope="col"><code>SameValueZero</code></th> - </tr> - </thead> - <tbody> - <tr> - <td><code>undefined</code></td> - <td><code>undefined</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>null</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>'foo'</code></td> - <td><code>'foo'</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>0</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>+0</code></td> - <td><code>-0</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>+0</code></td> - <td><code>0</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>-0</code></td> - <td><code>0</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>false</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>""</code></td> - <td><code>false</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>""</code></td> - <td><code>0</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>'0'</code></td> - <td><code>0</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>'17'</code></td> - <td><code>17</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>[1, 2]</code></td> - <td><code>'1,2'</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>new String('foo')</code></td> - <td><code>'foo'</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>undefined</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>undefined</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>{ foo: 'bar' }</code></td> - <td><code>{ foo: 'bar' }</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>new String('foo')</code></td> - <td><code>new String('foo')</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>null</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>NaN</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>'foo'</code></td> - <td><code>NaN</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>NaN</code></td> - <td><code>NaN</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - </tbody> -</table> - -<p> </p> - -<h2 id="jsxref(Object.is)_대신_삼중_등호를_사용하는_경우">{{jsxref("Object.is")}} 대신 삼중 등호를 사용하는 경우</h2> - -<p>In general, the only time {{jsxref("Object.is")}}'s special behavior towards zeros is likely to be of interest is in the pursuit of certain meta-programming schemes, especially regarding property descriptors, when it is desirable for your work to mirror some of the characteristics of {{jsxref("Object.defineProperty")}}. If your use case does not require this, it is suggested to avoid {{jsxref("Object.is")}} and use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> instead. Even if your requirements involve having comparisons between two {{jsxref("NaN")}} values evaluate to <code>true</code>, generally it is easier to special-case the {{jsxref("NaN")}} checks (using the {{jsxref("isNaN")}} method available from previous versions of ECMAScript) than it is to work out how surrounding computations might affect the sign of any zeros you encounter in your comparison.</p> - -<p>여기 당신 코드에서 그 자체를 드러내기 위해 <code>-0</code>과 <code>+0</code> 사이의 구별을 일으킬 수도 있는 철저하지 않은(in-exhaustive) 내장 메서드 및 연산자 목록이 있습니다:</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29"><code>- (unary negation)</code></a><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span></dt> -</dl> - -<pre class="syntaxbox">let stoppingForce = obj.mass * -obj.velocity</pre> - -<dl> - <dd> - <p><code>obj.velocity</code>가 <code>0</code>인 (또는 <code>0</code>으로 계산하는) 경우, <code>-0</code>이 그 자리에 소개되고 <code>stoppingForce</code>로 전해집니다. </p> - </dd> - <dt>{{jsxref("Math.atan2")}}</dt> - <dt>{{jsxref("Math.ceil")}}</dt> - <dt>{{jsxref("Math.pow")}}</dt> - <dt>{{jsxref("Math.round")}}<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span></dt> - <dd>In some cases,it's possible for a <code>-0</code> to be introduced into an expression as a return value of these methods even when no <code>-0</code> exists as one of the parameters. For example, using {{jsxref("Math.pow")}} to raise {{jsxref("Infinity", "-Infinity")}} to the power of any negative, odd exponent evaluates to <code>-0</code>. Refer to the documentation for the individual methods. </dd> -</dl> - -<dl> - <dt>{jsxref("Math.floor")}}</dt> - <dt>{{jsxref("Math.max")}}</dt> - <dt>{{jsxref("Math.min")}}</dt> - <dt>{{jsxref("Math.sin")}}</dt> - <dt>{{jsxref("Math.sqrt")}}</dt> - <dt>{{jsxref("Math.tan")}}<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span></dt> - <dd>It's possible to get a <code>-0</code> return value out of these methods in some cases where a <code>-0</code> exists as one of the parameters. E.g., <code>Math.min(-0, +0)</code> evaluates to <code>-0</code>. Refer to the documentation for the individual methods.</dd> -</dl> - -<dl> - <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">~</a></code></dt> - <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators"><<</a></code></dt> - <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">>></a></code></dt> - <dd>이러한 연산자 각각은 내부에서 ToInt32 알고리즘을 사용합니다. 내부 32-bit 정수형에는 0에 대해 한 표현만 있기에, <code>-0</code>은 역(inverse) 연산 후 왕복 여행(round trip, 이중 역 연산)에 살아남지 못합니다. 가령, <code>Object.is(~~(-0), -0)</code>와 <code>Object.is(-0 << 2 >> 2, -0)</code>는 <code>false</code>로 평가합니다.</dd> -</dl> - -<p>Relying on {{jsxref("Object.is")}} when the signedness of zeros is not taken into account can be hazardous. Of course, when the intent is to distinguish between <code>-0</code> and <code>+0</code>, it does exactly what's desired.</p> - -<h2 id="Caveat_jsxref(Object.is)_and_NaN">Caveat: {{jsxref("Object.is")}} and NaN</h2> - -<p>The {{jsxref("Object.is")}} specification treats all instances of {{jsxref("NaN")}} as the same object. However, since <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a> are available, we can have distinct instances, which don't behave identically in all contexts. For example:</p> - -<pre><code>var f2b = x => new Uint8Array(new Float64Array([x]).buffer); -var b2f = x => new Float64Array(x.buffer)[0]; -var n = f2b(NaN); -n[0] = 1; -var nan2 = b2f(n); -nan2; -// > NaN -Object.is(nan2, NaN); -// > true -f2b(NaN); -// > Uint8Array(8) [0, 0, 0, 0, 0, 0, 248,127) -f2b(nan2); -// > Uint8Array(8) [1, 0, 0, 0, 0, 0, 248,127)</code></pre> - -<h2 id="참조">참조</h2> - -<ul> - <li><a href="http://dorey.github.io/JavaScript-Equality-Table/">JS 비교 표</a></li> -</ul> diff --git a/files/ko/web/javascript/equality_comparisons_and_sameness/index.md b/files/ko/web/javascript/equality_comparisons_and_sameness/index.md new file mode 100644 index 0000000000..ac6d83901a --- /dev/null +++ b/files/ko/web/javascript/equality_comparisons_and_sameness/index.md @@ -0,0 +1,241 @@ +--- +title: 동치 비교 및 동일성 +slug: Web/JavaScript/Equality_comparisons_and_sameness +tags: + - Comparison + - Equality + - Intermediate + - JavaScript + - SameValue + - SameValueZero + - Sameness +translation_of: Web/JavaScript/Equality_comparisons_and_sameness +--- +{{jsSidebar("Intermediate")}} + +ES2015에는 4가지 같음(equality) 알고리즘이 있습니다: + +- 추상적(abstract) 같음 비교 (`==`) +- 엄격한(strict) 같음 비교 (`===`): `Array.prototype.indexOf`, `Array.prototype.lastIndexOf` 및 `case` 절 매칭에 쓰임 +- 등가0(SameValueZero): `Map` 및 `Set` 연산뿐만 아니라 `%TypedArray%` 및 `ArrayBuffer` 생성자, 그리고 ES2016에 예정된 `String.prototype.includes`에 쓰임 +- 등가(SameValue): 그 외 모든 곳에 쓰임 + +JavaScript는 3가지 서로 다른 값 비교 연산을 제공합니다: + +- [===](/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity)를 사용하는 엄격한 같음 (또는 "삼중 등호" 또는 "항등(identity)"), +- [==](/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality)를 사용하는 느슨한(loose) 같음 ("이중 등호"), +- 그리고 [`Object.is`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is) (ECMAScript 2015에 새로 들임). + +어느 연산을 쓸 지 그 선택은 당신이 어떤 종류의 비교를 수행하기 위해 찾고 있는 지에 달렸습니다. + + + +- 이중 equals (`==`)는 두 가지를 비교할 때 유형 변환을 수행하고 IEEE 754를 준수하기 위해 `NaN`, `-0` 및 `+0`을 특별히 처리합니다 (그래서`NaN != NaN`이고 `-0 == +0`입니다); +- 트리플 equals (`===`)는 이중 equals (`NaN`, `-0` 및 `+0`의 특수 처리 포함)와 동일한 비교를 수행하지만 유형 변환은 수행하지 않습니다. 형식이 다른 경우 `false`가 반환됩니다. +- `Object.is`는 형식 변환을하지 않으며 `NaN`, `-0` 및 `+0`에 대한 특수 처리를 수행하지 않습니다 (특수 숫자 값을 제외하고는 `===`와 동일한 동작을 제공함). + +이들 사이의 구분은 모두 원시형(primitive) 처리와 관련이 있습니다. 매개 변수가 구조적, 개념적으로 유사한 지 비교하는 것이 없습니다. 같은 구조를 가지지만 개체 자체가 각각인 비원시형(non-primitive) 개체 x 및 y의 경우 위의 모든 형태(form)는 false로 평가됩니다. + +## `===`를 사용하는 엄격한 같음 + +엄격한 같음(strict equality)은 두 값이 같은 지 비교합니다. 어느 값도 비교되기 전에 어떤 다른 값으로 남몰래 변환되지 않습니다. 둘이 서로 다른 형이면, 둘은 같지 않다고 여깁니다. 그렇지 않고 둘이 같은 형이고 숫자가 아닌 경우, 같은 값이면 같다고 여깁니다. 끝으로, 둘이 숫자인 경우, 둘 다 `NaN`이 아닌 같은 값이거나 하나는 `+0` 또 하나는 `-0`인 경우 같다고 여깁니다. + +```js +var num = 0; +var obj = new String("0"); +var str = "0"; +var b = false; + +console.log(num === num); // true +console.log(obj === obj); // true +console.log(str === str); // true + +console.log(num === obj); // false +console.log(num === str); // false +console.log(obj === str); // false +console.log(null === undefined); // false +console.log(obj === null); // false +console.log(obj === undefined); // false +``` + +엄격한 같음은 거의 항상 사용하는 올바른 비교 연산입니다. 숫자를 뺀 모든 값에 대해, 분명한 의미(semantics)를 사용합니다: 값은 그 자체와만 같습니다(/ 단지 그 자체입니다). 숫자는 서로 다른 두 극단 상황(edge case)을 얼버무리기(gloss over) 위해 약간 다른 의미를 사용합니다. 첫째는 부동 소수점 0은 양이든 음이든 하나의 부호를 지닙니다. 이는 특정 수학상의 해결책을 나타내는 데 유용하지만, 대부분의 상황에 `+0`과 `-0`의 차이에 신경쓰지 않기에, 엄격한 같음은 둘을 같은 값으로 다룹니다. 둘째는 부동 소수점은 not-a-number 값(`NaN`) 개념을 포함합니다, 특정 잘못 정의된(ill-defined) 수학 문제의 해결책을 보여주기 위해: 예를 들어, 양의 무한대(infinity)에 추가된 음의 무한대. 엄격한 같음은 `NaN`을 다른 모든 값과 같지 않게 다룹니다 -- 자신 포함. (`(x !== x)`가 `true`인 유일한 경우는 `x`가 `NaN`일 때입니다.) + +## ==를 사용하는 느슨한 같음 + +The behavior for performing loose equality using `==` is as follows: + +- 느슨한 같음(loose equality)은 두 값이 같은 지 비교합니다, 두 값을 공통(common) 형으로 변환한 후에. 변환 후 (하나 또는 양쪽이 변환을 거칠 수 있음), 최종 같음 비교는 꼭 `===`처럼 수행됩니다. +- 느슨한 같음은 대칭(_symmetric_)입니다: `A == B`는 `A` 및 `B`가 어떤 값이든 항상 `B == A`와 같은 의미를 갖습니다 (적용된 변환의 순서 말고는). +- `undefined` and `null` are loosely equal; that is, `undefined == null` is true, and `null == undefined` is true + +전통 및 ECMAScript에 따르면, 모든 객체는 `undefined` 및 `null`과 느슨하게 같지 않습니다. 그러나 대부분의 브라우저는 일부 문맥(context)에서 `undefined`값을 모방하는(_emulate_) 것처럼 행동하기 위해 매우 좁은 부류의 객체(특히, 모든 페이지에 대한 `document.all` 객체)에 허용합니다. 느슨한 같음이 그러한 문맥 중 하나입니다: `null == A` 및 `undefined == A`는 A가 `undefined`를 *모방*하는 객체인 경우, 그리고 그 경우에만 true로 평가합니다. 다른 모든 경우에 객체는 결코 `undefined` 또는 `null`과 느슨하게 같지 않습니다. + +Loose equality comparisons among other combinations of operand types are performed as shown in the tables below. The following notations are used in the tables: + +- `ToNumber(A)` attempts to convert its argument to a number before comparison. Its behavior is equivalent to `+A` (the unary + operator). +- `ToPrimitive(A)` attempts to convert its object argument to a primitive value, by invoking varying sequences of `A.toString()` and `A.valueOf()` methods on `A`. +- `ℝ(A)` attempts to convert its argument to an ECMAScript [mathematical value](https://tc39.es/ecma262/#mathematical-value). +- `StringToBigInt(A)` attempts to convert its argument to a `BigInt` by applying the ECMAScript [`StringToBigInt`](https://tc39.es/ecma262/#sec-stringtobigint) algorithm. + +**number** primitive `A` compared to operand `B`: + +| number | bigint | string | boolean | Object | +| --------- | ------------------ | ------------------- | ------------------- | --------------------- | +| `A === B` | `ℝ(A) equals ℝ(B)` | `A === ToNumber(B)` | `A === ToNumber(B)` | `A == ToPrimitive(B)` | + +**bigint** primitive `A` compared to operand `B`: + +| number | bigint | string | boolean | Object | +| ------------------ | --------- | ------------------------- | ------------------ | --------------------- | +| `ℝ(A) equals ℝ(B)` | `A === B` | `A === StringToBigInt(B)` | `A == ToNumber(B)` | `A == ToPrimitive(B)` | + +**string** primitive `A` compared to operand `B`: + +| number | bigint | string | boolean | Object | +| ------------------- | ------------------------- | --------- | ----------------------------- | --------------------- | +| `ToNumber(A) === B` | `StringToBigInt(A) === B` | `A === B` | `ToNumber(A) === ToNumber(B)` | `A == ToPrimitive(B)` | + +**boolean** primitive `A` compared to operand `B`: + +| number | bigint | string | boolean | Object | +| ------------------- | ------------------ | ----------------------------- | --------- | ------------------------------- | +| `ToNumber(A) === B` | `ToNumber(A) == B` | `ToNumber(A) === ToNumber(B)` | `A === B` | `ToNumber(A) == ToPrimitive(B)` | + +**Object** `A` compared to operand `B`: + +| number | bigint | string | boolean | Object | +| --------------------- | --------------------- | --------------------- | ------------------------------- | --------- | +| `ToPrimitive(A) == B` | `ToPrimitive(A) == B` | `ToPrimitive(A) == B` | `ToPrimitive(A) == ToNumber(B)` | `A === B` | + +In most cases, using loose equality is discouraged. The result of a comparison using strict equality is easier to predict, and may evaluate more quickly due to the lack of type coercion. + +### Example + +The following example demonstrates loose equality comparisons involving the number primitive `0`, the bigint primitive `0n`, the string primitive `'0'`, and an object whose `toString()` value is `'0'`. + +```js +const num = 0; +const big = 0n; +const str = '0'; +const obj = new String('0'); + +console.log(num == str); // true +console.log(big == num); // true +console.log(str == big); // true + +console.log(num == obj); // true +console.log(big == obj); // true +console.log(str == obj); // true +``` + +대부분의 경우 느슨한 같음을 사용하는 것은 바람직하지 않습니다. strict equality를 사용한 비교의 결과는 예측하기가 쉽고 형 강제(coercion) 변환이 일어나지 않기에 평가가 빠를 수 있습니다. + +## Same-value equality + +등가(same-value) 같음은 최종 사용 사례(use case)를 다룹니다: 두 값이 모든 문맥에서 _기능상 같은지_ 여부를 결정하는. (이 사용 사례는 [리스코프 치환 원칙](https://ko.wikipedia.org/wiki/리스코프_치환_원칙 "Liskov substitution principle")의 실례를 보입니다.) 다음은 불변 속성(property)을 변화시키려 시도할 때 일어나는 한 사례입니다: + +```js +// 불변(immutable) NEGATIVE_ZERO 속성을 Number 생성자에 추가. +Object.defineProperty(Number, "NEGATIVE_ZERO", + { value: -0, writable: false, configurable: false, enumerable: false }); + +function attemptMutation(v) +{ + Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v }); +} +``` + +`Object.defineProperty`는 변경 불가능한 속성을 변경하려고 시도 할 때 예외를 throw하지만 실제 변경이 요청되지 않으면 아무 것도 수행하지 않습니다. `v`가 `-0`이면, 변경 사항이 요청되지 않고 오류가 발생하지 않습니다. 내부적으로, 불변의 property가 재정의 (redefined)되었을 때, 새롭게 지정된 값은 같은 값의 동등성을 사용해 현재의 값과 비교됩니다. + +Same-value equality는 {{jsxref("Object.is")}} 메서드로 제공됩니다. + +## Same-value-zero equality + +등가 같음과 비슷하지만 +0과 -0이 같다고 여깁니다. + +## 스펙 내 추상적 같음, 엄격한 같음 및 등가 + +In ES5, the comparison performed by [`==`](/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) is described in [Section 11.9.3, The Abstract Equality Algorithm](https://ecma-international.org/ecma-262/5.1/#sec-11.9.3). The [`===`](/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) comparison is [11.9.6, The Strict Equality Algorithm](https://ecma-international.org/ecma-262/5.1/#sec-11.9.6). (Go look at these. They're brief and readable. Hint: read the strict equality algorithm first.) ES5 also describes, in [Section 9.12, The SameValue Algorithm](https://ecma-international.org/ecma-262/5.1/#sec-9.12) for use internally by the JS engine. It's largely the same as the Strict Equality Algorithm, except that 11.9.6.4 and 9.12.4 differ in handling {{jsxref("Number")}}s. ES2015 simply proposes to expose this algorithm through {{jsxref("Object.is")}}. + +We can see that with double and triple equals, with the exception of doing a type check upfront in 11.9.6.1, the Strict Equality Algorithm is a subset of the Abstract Equality Algorithm, because 11.9.6.2–7 correspond to 11.9.3.1.a–f. + +## 같음 비교를 이해하기 위한 모델은? + +ES2015 이전에, 이중 등호 및 삼중 등호에 대해 하나가 다른 하나의 "확장"판이라고 (말)했을 지 모릅니다. 예를 들어, 누군가는 이중 등호는 삼중 등호의 확장판이라고 합니다, 전자는 후자가 하는 모든 것을 하지만 그 피연산자에 형 변환을 하기에. 가령, `6 == "6"`. (대신에, 이중 등호는 기준선이고 삼중 등호는 향상판이라고 하는 이도 있습니다, 두 피연산자가 같은 형이길 요구하고 그래서 별도 제약을 추가하기에. 어느 게 더 이해하기 좋은 모델인지는 당신이 상태(things)를 보기 위해 선택한 방법에 달렸습니다.) + +However, this way of thinking about the built-in sameness operators is not a model that can be stretched to allow a place for ES2015's {{jsxref("Object.is")}} on this "spectrum". {{jsxref("Object.is")}} isn't simply "looser" than double equals or "stricter" than triple equals, nor does it fit somewhere in between (i.e., being both stricter than double equals, but looser than triple equals). We can see from the sameness comparisons table below that this is due to the way that {{jsxref("Object.is")}} handles {{jsxref("NaN")}}. Notice that if `Object.is(NaN, NaN)`evaluated to `false`, we *could* say that it fits on the loose/strict spectrum as an even stricter form of triple equals, one that distinguishes between `-0` and `+0`. The {{jsxref("NaN")}} handling means this is untrue, however. Unfortunately, {{jsxref("Object.is")}} simply has to be thought of in terms of its specific characteristics, rather than its looseness or strictness with regard to the equality operators. + + + +| x | y | `==` | `===` | `Object.is` | `SameValueZero` | +| ------------------- | ------------------- | ---------- | ---------- | ----------- | --------------- | +| `undefined` | `undefined` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `null` | `null` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `true` | `true` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `false` | `false` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `'foo'` | `'foo'` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `0` | `0` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `+0` | `-0` | `✅ true` | `✅ true` | `❌ false` | `✅ true` | +| `+0` | `0` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `-0` | `0` | `✅ true` | `✅ true` | `❌ false` | `✅ true` | +| `0n` | `-0n` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `0` | `false` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `""` | `false` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `""` | `0` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `'0'` | `0` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `'17'` | `17` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `[1, 2]` | `'1,2'` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `new String('foo')` | `'foo'` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `null` | `undefined` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `null` | `false` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `undefined` | `false` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `{ foo: 'bar' }` | `{ foo: 'bar' }` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `new String('foo')` | `new String('foo')` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `0` | `null` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `0` | `NaN` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `'foo'` | `NaN` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `NaN` | `NaN` | `❌ false` | `❌ false` | `✅ true` | `✅ true` | + +## {{jsxref("Object.is")}} 대신 삼중 등호를 사용하는 경우 + +In general, the only time {{jsxref("Object.is")}}'s special behavior towards zeros is likely to be of interest is in the pursuit of certain meta-programming schemes, especially regarding property descriptors, when it is desirable for your work to mirror some of the characteristics of {{jsxref("Object.defineProperty")}}. If your use case does not require this, it is suggested to avoid {{jsxref("Object.is")}} and use [`===`](/ko/docs/Web/JavaScript/Reference/Operators) instead. Even if your requirements involve having comparisons between two {{jsxref("NaN")}} values evaluate to `true`, generally it is easier to special-case the {{jsxref("NaN")}} checks (using the {{jsxref("isNaN")}} method available from previous versions of ECMAScript) than it is to work out how surrounding computations might affect the sign of any zeros you encounter in your comparison. + +여기 당신 코드에서 그 자체를 드러내기 위해 `-0`과 `+0` 사이의 구별을 일으킬 수도 있는 철저하지 않은(in-exhaustive) 내장 메서드 및 연산자 목록이 있습니다: + +- [-(unary negation)](/ko/docs/Web/JavaScript/Reference/Operators#-_.28unary_negation.29) + - ```js + let stoppingForce = obj.mass * -obj.velocity; + ``` + If `obj.velocity` is `0` (or computes to `0`), a `-0` is introduced at that place and propagates out into `stoppingForce`. +- {{jsxref("Math.atan2")}}, {{jsxref("Math.ceil")}}, {{jsxref("Math.pow")}}, {{jsxref("Math.round")}} + - : In some cases,it's possible for a `-0` to be introduced into an expression as a return value of these methods even when no `-0` exists as one of the parameters. For example, using {{jsxref("Math.pow")}} to raise {{jsxref("Infinity", "-Infinity")}} to the power of any negative, odd exponent evaluates to `-0`. Refer to the documentation for the individual methods. +- {{jsxref("Math.floor")}}, {{jsxref("Math.max")}}, {{jsxref("Math.min")}}, {{jsxref("Math.sin")}}, {{jsxref("Math.sqrt")}}, {{jsxref("Math.tan")}} + - : It's possible to get a `-0` return value out of these methods in some cases where a `-0` exists as one of the parameters. E.g., `Math.min(-0, +0)` evaluates to `-0`. Refer to the documentation for the individual methods. +- [`~`](/en-US/docs/Web/JavaScript/Reference/Operators), [`<<`](/en-US/docs/Web/JavaScript/Reference/Operators), [`>>`](/en-US/docs/Web/JavaScript/Reference/Operators) + - : Each of these operators uses the ToInt32 algorithm internally. Since there is only one representation for 0 in the internal 32-bit integer type, `-0` will not survive a round trip after an inverse operation. E.g., both `Object.is(~~(-0), -0)` and `Object.is(-0 << 2 >> 2, -0)` evaluate to `false`. + +Relying on {{jsxref("Object.is")}} when the signedness of zeros is not taken into account can be hazardous. Of course, when the intent is to distinguish between `-0` and `+0`, it does exactly what's desired. + +## Caveat: Object.is and NaN + +The {{jsxref("Object.is")}} specification treats all instances of {{jsxref("NaN")}} as the same object. However, since [typed arrays](/ko/docs/Web/JavaScript/Typed_arrays) are available, we can have distinct instances, which don't behave identically in all contexts. For example: + +```js +var f2b = x => new Uint8Array(new Float64Array([x]).buffer); +var b2f = x => new Float64Array(x.buffer)[0]; +var n = f2b(NaN); +n[0] = 1; +var nan2 = b2f(n); +nan2; +// > NaN +Object.is(nan2, NaN); +// > true +f2b(NaN); +// > Uint8Array(8) [0, 0, 0, 0, 0, 0, 248,127) +f2b(nan2); +// > Uint8Array(8) [1, 0, 0, 0, 0, 0, 248,127) +``` + +## 참조 + +- [JS 비교 표](http://dorey.github.io/JavaScript-Equality-Table/) diff --git a/files/ko/web/javascript/eventloop/index.html b/files/ko/web/javascript/eventloop/index.html deleted file mode 100644 index c7911fdbfb..0000000000 --- a/files/ko/web/javascript/eventloop/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: 동시성 모델과 이벤트 루프 -slug: Web/JavaScript/EventLoop -tags: - - 이벤트 루프 -translation_of: Web/JavaScript/EventLoop ---- -<div>{{JsSidebar("Advanced")}}</div> - -<p>자바스크립트는 코드 실행, 이벤트 수집과 처리, 큐에 놓인 하위 작업들을 담당하는 <strong>이벤트 루프</strong>에 기반한 동시성(concurrency) 모델을 가지고 있습니다. 이 모델은 C 또는 Java와 같은 언어와 완전히 다릅니다.</p> - -<h2 id="런타임_개념">런타임 개념</h2> - -<p>이어지는 섹션에서는 이론적 모델을 설명합니다. 모던 자바스크립트 엔진들은 아래 묘사된 개념들을 구현하고 최적화 합니다.</p> - -<h3 id="시각적_표현">시각적 표현</h3> - -<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p> - -<h3 id="Stack">Stack</h3> - -<p>함수 호출은 <em>프레임</em>들의 스택을 형성합니다.</p> - -<pre class="brush: js"><code>function foo(b) { - var a = 10; - return a + b + 11; -} - -function bar(x) { - var y = 3; - return foo(x * y); -} - -console.log(bar(7)); //returns 42</code></pre> - -<p><code>bar</code>를 호출할 때, <code>bar</code>의 인자와 지역 변수를 포함하는 첫 번째 프레임이 생성됩니다. <code>bar</code>가 <code>foo</code>를 호출하면 두 번째 프레임이 만들어져 <code>foo</code>의 인수와 지역 변수가 들어있는 첫 번째 프레임의 맨 위에 푸시됩니다. <code>foo</code>가 반환되면, 최상위 프레임 요소는 <code>bar</code>의 호출 프레임만을 남겨둔 채로 스택 밖으로 빠져나옵니다. <code>bar</code>가 반환되면, 스택은 비워집니다.</p> - -<h3 id="Heap">Heap</h3> - -<p>객체들은 힙 안에 할당됩니다. 힙은 구조화되지 않은 넓은 메모리 영역을 지칭합니다.</p> - -<h3 id="Queue">Queue</h3> - -<p>JavaScript 런타임은 처리 할 메시지 목록 인 메시지 대기열을 사용합니다. 각 메시지에는 메시지를 처리하기 위해 호출되는 관련 함수가 있습니다.</p> - -<p>{{anch("Event loop", "event loop")}} 중 어떤 시점에서 런타임은 대기열에서 가장 오래된 메시지부터 처리하기 시작합니다. 그렇게하기 위해, 메시지는 큐에서 제거되고 해당 기능이 메시지를 입력 매개 변수로 호출됩니다. 언제나 그렇듯이, 함수를 호출하면 그 함수의 사용을위한 새로운 스택 프레임이 생성됩니다.</p> - -<p>함수의 처리는 스택이 다시 비워 질 때까지 계속됩니다. 이벤트 루프는 큐의 다음 메시지를 처리합니다(존재할 경우).</p> - -<h2 id="Event_loop">Event loop</h2> - -<p><strong>Event loop</strong>는 그 구현 방식 때문에 붙은 이름이며 보통 다음과 유사합니다 :</p> - -<pre class="brush: js">while(queue.waitForMessage()){ - queue.processNextMessage(); -}</pre> - -<p><code>queue.waitForMessage()</code> 함수는 현재 아무 메시지도 없다면 새로운 메시지 도착을 동기적으로 기다립니다.</p> - -<h3 id="Run-to-completion">"Run-to-completion"</h3> - -<p>각 메시지는 다른 메시지가 처리되기 전에 완전히 처리됩니다.</p> - -<p>이것은 함수가 실행될 때마다 미리 비워질 수 없고 다른 코드가 실행되기 전에 완전히 실행되며 함수가 조작하는 데이터를 수정할 수 있다는 사실을 포함하여 프로그램에 대한 추론을 할 때 좋은 속성을 제공합니다. 이것은 C와는 다릅니다. 예를 들어 함수가 쓰레드에서 실행된다면 런타임 시스템이 다른 쓰레드에서 다른 코드를 실행하기 위해 어느 시점에서 멈출 수 있습니다.</p> - -<p>이 모델의 부정적인 면은 어떤 메시지가 완료되기 까지 지나치게 오래 걸린다면 웹 어플리케이션은 클릭이나 스크롤과 같은 사용자 인터랙션을 처리할 수 없게 됩니다. 브라우저는 이러한 상황을 "a script is taking too long to run"과 같은 대화상자로 완화 합니다. 추천되는 좋은 방법은 메시지 처리를 짧도록 만드는 것과 하나의 메시지를 여러개의 메시지로 나누는 것 입니다.</p> - -<h3 id="메시지_추가하기">메시지 추가하기</h3> - -<p>웹 브라우저에서 이벤트 리스너가 부착된 이벤트가 발생할 때마다 메시지가 추가됩니다. 리스너가 없으면 이벤트는 손실됩니다. 클릭 이벤트 핸들러가 있는 요소를 클릭하면 다른 이벤트와 마찬가지로 메시지가 추가됩니다.</p> - -<p><code><a href="/en-US/docs/Web/API/WindowTimers.setTimeout" title="/en-US/docs/window.setTimeout">setTimeout</a></code> 함수는 2 개의 인수, 대기열에 추가 할 메시지와 시간값(선택사항, 기본값은 0)으로 호출됩니다. 시간 값은 메시지가 실제로 큐에 푸시 될 때까지의 (최소) 지연을 나타냅니다. 대기열에 다른 메시지가 없으면 지연 직후에 메시지가 처리됩니다. 그러나 메시지가있는 경우 setTimeout 메시지는 다른 메시지가 처리 될 때까지 기다려야합니다. 따라서 두 번째 인수는 최소 시간을 나타내지 만 보장 된 시간은 아닙니다.</p> - -<p>다음은 이 개념에 대한 예제입니다 (<code>setTimeout</code>은 타이머 만료 직후에 실행되지 않습니다).</p> - -<pre class="brush: js"><code>const s = new Date().getSeconds(); - -setTimeout(function() { - // prints out "2", meaning that the callback is not called immediately after 500 milliseconds. - console.log("Ran after " + (new Date().getSeconds() - s) + " seconds"); -}, 500); - -while(true) { - if(new Date().getSeconds() - s >= 2) { - console.log("Good, looped for 2 seconds"); - break; - } -}</code></pre> - -<h3 id="Zero_delays">Zero delays</h3> - -<p>Zero delay는 실제로 0ms 후에 콜백이 시작된다는 의미는 아닙니다. 0ms 지연된 {{domxref("WindowTimers.setTimeout", "setTimeout")}}은 주어진 간격 후에 콜백 함수를 실행하지 않습니다.</p> - -<p>실행은 큐에 대기중인 작업 수에 따라 다릅니다. 아래 예에서, 콜백의 메시지가 처리되기 전에 콘솔에 "this is just message"메시지가 기록됩니다. 왜냐하면 지연(delay)은 보장된 시간이 아니라 요청을 처리하기 위해 필요한 최소의 시간이기 때문입니다.</p> - -<p>기본적으로 setTimeout은 setTimeout에 대한 특정 시간 제한을 지정 했더라도 대기중인 메시지의 모든 코드가 완료 될 때까지 대기해야합니다.</p> - -<pre class="brush: js"><code>(function() { - - console.log('this is the start'); - - setTimeout(function cb() { - console.log('this is a msg from call back'); - }); - - console.log('this is just a message'); - - setTimeout(function cb1() { - console.log('this is a msg from call back1'); - }, 0); - - console.log('this is the end'); - -})(); - -// "this is the start" -// "this is just a message" -// "this is the end" -// note that function return, which is undefined, happens here -// "this is a msg from call back" -// "this is a msg from call back1"</code></pre> - -<h3 id="몇가지_런타임_통신">몇가지 런타임 통신</h3> - -<p>웹워커 또는 크로스 오리진 <code>iframe</code>은 자신의 스택, 힙, 메시지 큐를 가지고 있습니다. 두 별개의 런타임들은 <a href="/en-US/docs/DOM/window.postMessage" title="/en-US/docs/DOM/window.postMessage"><code>postMessage</code></a> method를 통해서만 서로 통신할 수 있습니다. 이 메서드는 다른 런타임이 <code>message</code> 이벤트 핸들러를 등록하고 있다면 해당 런타임의 큐에 메시지를 추가합니다.</p> - -<h2 id="Never_blocking">Never blocking</h2> - -<p>이벤트 루프 모델의 무척 재밌는 부분은 다른 언어와 달리 자바스크립트는 결코 Block하지 않는다는 것입니다. I/O 처리는 흔히 이벤트와 콜백으로 처리 됩니다. 그래서 응용프로그램이 <a href="/en-US/docs/Web/API/IndexedDB_API" title="/en-US/docs/IndexedDB">IndexedDB</a> query 반환을 기다리고 있거나 <a href="/en-US/docs/Web/API/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XHR</a> 요청 반환을 기다릴 때에도 여전히 사용자 입력과 같은 다른 것을을 처리할 수 있습니다.</p> - -<p><code>alert</code> 또는 synchronous XHR과 같은 구현 예외가 존재 합니다. 그러나 그것들은 사용되지 않는 것이 좋다라고 여겨집니다. <a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">예외를 위한 예외</a>를 조심하세요 (그러나 보통 구현 버그일뿐 그이상 아무것도 아닙니다).</p> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">명세</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-loops', 'Event loops')}}</td> - </tr> - <tr> - <td><a href="https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop">Node.js Event Loop</a></td> - </tr> - </tbody> -</table> diff --git a/files/ko/web/javascript/eventloop/index.md b/files/ko/web/javascript/eventloop/index.md new file mode 100644 index 0000000000..2d7f39ffeb --- /dev/null +++ b/files/ko/web/javascript/eventloop/index.md @@ -0,0 +1,151 @@ +--- +title: 동시성 모델과 이벤트 루프 +slug: Web/JavaScript/EventLoop +tags: + - 이벤트 루프 + - Advanced + - Event Loop + - Event Management + - Event Queue + - Guide + - Handling Events + - JavaScript + - events +translation_of: Web/JavaScript/EventLoop +--- +{{JsSidebar("Advanced")}} + +자바스크립트는 코드 실행, 이벤트 수집과 처리, 큐에 놓인 하위 작업들을 담당하는 **이벤트 루프**에 기반한 동시성(concurrency) 모델을 가지고 있습니다. 이 모델은 C 또는 Java와 같은 언어와 완전히 다릅니다. + +## 런타임 개념 + +이어지는 섹션에서는 이론적 모델을 설명합니다. 모던 자바스크립트 엔진들은 아래 묘사된 개념들을 구현하고 최적화 합니다. + +### 시각적 표현 + + + +### Stack + +함수 호출은 *프레임*들의 스택을 형성합니다. + +```js +function foo(b) { + var a = 10; + return a + b + 11; +} + +function bar(x) { + var y = 3; + return foo(x * y); +} + +console.log(bar(7)); //returns 42 +``` + +`bar`를 호출할 때, `bar`의 인자와 지역 변수를 포함하는 첫 번째 프레임이 생성됩니다. `bar`가 `foo`를 호출하면 두 번째 프레임이 만들어져 `foo`의 인수와 지역 변수가 들어있는 첫 번째 프레임의 맨 위에 푸시됩니다. `foo`가 반환되면, 최상위 프레임 요소는 `bar`의 호출 프레임만을 남겨둔 채로 스택 밖으로 빠져나옵니다. `bar`가 반환되면, 스택은 비워집니다. + +### Heap + +객체들은 힙 안에 할당됩니다. 힙은 구조화되지 않은 넓은 메모리 영역을 지칭합니다. + +### Queue + +JavaScript 런타임은 처리 할 메시지 목록 인 메시지 대기열을 사용합니다. 각 메시지에는 메시지를 처리하기 위해 호출되는 관련 함수가 있습니다. + +[event loop](#event_loop) 중 어떤 시점에서 런타임은 대기열에서 가장 오래된 메시지부터 처리하기 시작합니다. 그렇게하기 위해, 메시지는 큐에서 제거되고 해당 기능이 메시지를 입력 매개 변수로 호출됩니다. 언제나 그렇듯이, 함수를 호출하면 그 함수의 사용을위한 새로운 스택 프레임이 생성됩니다. + +함수의 처리는 스택이 다시 비워 질 때까지 계속됩니다. 이벤트 루프는 큐의 다음 메시지를 처리합니다(존재할 경우). + +## Event loop + +**Event loop**는 그 구현 방식 때문에 붙은 이름이며 보통 다음과 유사합니다 : + +```js +while(queue.waitForMessage()){ + queue.processNextMessage(); +} +``` + +`queue.waitForMessage()` 함수는 현재 아무 메시지도 없다면 새로운 메시지 도착을 동기적으로 기다립니다. + +### "Run-to-completion" + +각 메시지는 다른 메시지가 처리되기 전에 완전히 처리됩니다. + +이것은 함수가 실행될 때마다 미리 비워질 수 없고 다른 코드가 실행되기 전에 완전히 실행되며 함수가 조작하는 데이터를 수정할 수 있다는 사실을 포함하여 프로그램에 대한 추론을 할 때 좋은 속성을 제공합니다. 이것은 C와는 다릅니다. 예를 들어 함수가 쓰레드에서 실행된다면 런타임 시스템이 다른 쓰레드에서 다른 코드를 실행하기 위해 어느 시점에서 멈출 수 있습니다. + +이 모델의 부정적인 면은 어떤 메시지가 완료되기 까지 지나치게 오래 걸린다면 웹 어플리케이션은 클릭이나 스크롤과 같은 사용자 인터랙션을 처리할 수 없게 됩니다. 브라우저는 이러한 상황을 "a script is taking too long to run"과 같은 대화상자로 완화 합니다. 추천되는 좋은 방법은 메시지 처리를 짧도록 만드는 것과 하나의 메시지를 여러개의 메시지로 나누는 것 입니다. + +### 메시지 추가하기 + +웹 브라우저에서 이벤트 리스너가 부착된 이벤트가 발생할 때마다 메시지가 추가됩니다. 리스너가 없으면 이벤트는 손실됩니다. 클릭 이벤트 핸들러가 있는 요소를 클릭하면 다른 이벤트와 마찬가지로 메시지가 추가됩니다. + +[`setTimeout`](/ko/docs/Web/API/WindowTimers.setTimeout) 함수는 2 개의 인수, 대기열에 추가 할 메시지와 시간값(선택사항, 기본값은 0)으로 호출됩니다. 시간 값은 메시지가 실제로 큐에 푸시 될 때까지의 (최소) 지연을 나타냅니다. 대기열에 다른 메시지가 없으면 지연 직후에 메시지가 처리됩니다. 그러나 메시지가있는 경우 setTimeout 메시지는 다른 메시지가 처리 될 때까지 기다려야합니다. 따라서 두 번째 인수는 최소 시간을 나타내지 만 보장 된 시간은 아닙니다. + +다음은 이 개념에 대한 예제입니다 (`setTimeout`은 타이머 만료 직후에 실행되지 않습니다). + +```js +const s = new Date().getSeconds(); + +setTimeout(function() { + // prints out "2", meaning that the callback is not called immediately after 500 milliseconds. + console.log("Ran after " + (new Date().getSeconds() - s) + " seconds"); +}, 500); + +while(true) { + if(new Date().getSeconds() - s >= 2) { + console.log("Good, looped for 2 seconds"); + break; + } +} +``` + +### Zero delays + +Zero delay는 실제로 0ms 후에 콜백이 시작된다는 의미는 아닙니다. `0`ms 지연된 [`setTimeout`](/ko/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)은 주어진 간격 후에 콜백 함수를 실행하지 않습니다. + +실행은 큐에 대기중인 작업 수에 따라 다릅니다. 아래 예에서, 콜백의 메시지가 처리되기 전에 콘솔에 `"this is just message"`메시지가 기록됩니다. 왜냐하면 지연(delay)은 보장된 시간이 아니라 요청을 처리하기 위해 필요한 최소의 시간이기 때문입니다. + +기본적으로 `setTimeout`은 `setTimeout`에 대한 특정 시간 제한을 지정 했더라도 대기중인 메시지의 모든 코드가 완료 될 때까지 대기해야합니다. + +```js +(function() { + + console.log('this is the start'); + + setTimeout(function cb() { + console.log('Callback 1: this is a msg from call back'); + }); // has a default time value of 0 + + console.log('this is just a message'); + + setTimeout(function cb1() { + console.log('Callback 2: this is a msg from call back'); + }, 0); + + console.log('this is the end'); + +})(); + +// "this is the start" +// "this is just a message" +// "this is the end" +// "Callback 1: this is a msg from call back" +// "Callback 2: this is a msg from call back" +``` + +### 몇가지 런타임 통신 + +웹워커 또는 크로스 오리진 `iframe`은 자신의 스택, 힙, 메시지 큐를 가지고 있습니다. 두 별개의 런타임들은 [`postMessage`](/ko/docs/DOM/window.postMessage) method를 통해서만 서로 통신할 수 있습니다. 이 메서드는 다른 런타임이 `message` 이벤트 핸들러를 등록하고 있다면 해당 런타임의 큐에 메시지를 추가합니다. + +## Never blocking + +이벤트 루프 모델의 무척 재밌는 부분은 다른 언어와 달리 자바스크립트는 결코 Block하지 않는다는 것입니다. I/O 처리는 흔히 이벤트와 콜백으로 처리 됩니다. 그래서 응용프로그램이 [IndexedDB](/ko/docs/Web/API/IndexedDB_API) query 반환을 기다리고 있거나 [XHR](/ko/docs/Web/API/XMLHttpRequest) 요청 반환을 기다릴 때에도 여전히 사용자 입력과 같은 다른 것을을 처리할 수 있습니다. + +`alert` 또는 synchronous XHR과 같은 구현 예외가 존재 합니다. 그러나 그것들은 사용되지 않는 것이 좋다라고 여겨집니다. [예외를 위한 예외](https://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311)를 조심하세요 (그러나 보통 구현 버그일뿐 그이상 아무것도 아닙니다). + +## 같이보기 + +- [Event loops in the HTML standard](https://html.spec.whatwg.org/multipage/webappapis.html#event-loops) +- [Node.js Event Loop](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop) diff --git a/files/ko/web/javascript/guide/control_flow_and_error_handling/index.html b/files/ko/web/javascript/guide/control_flow_and_error_handling/index.html index fa007d6997..ac94b0b90c 100644 --- a/files/ko/web/javascript/guide/control_flow_and_error_handling/index.html +++ b/files/ko/web/javascript/guide/control_flow_and_error_handling/index.html @@ -274,7 +274,7 @@ catch (e) { } </pre> -<h4 id="The_catch_Block" name="The_catch_Block"><code>catch</code> 블록</h4> +<h4 id="The_catch_Block"><code>catch</code> 블록</h4> <p><code>try</code> 블록에서 발생할수 있는 모든 예외를 처리하기 위해 <code>catch</code> 블록을 사용할 수 있습니다.</p> @@ -361,7 +361,7 @@ try { // OUTPUT // caught inner "bogus"</pre> -<h4 id="Nesting_try...catch_Statements" name="Nesting_try...catch_Statements">try...catch 문법 중첩하기</h4> +<h4 id="Nesting_try...catch_Statements">try...catch 문법 중첩하기</h4> <p> </p> diff --git a/files/ko/web/javascript/guide/functions/index.html b/files/ko/web/javascript/guide/functions/index.html index 99b92b7394..a5f1afa96b 100644 --- a/files/ko/web/javascript/guide/functions/index.html +++ b/files/ko/web/javascript/guide/functions/index.html @@ -190,9 +190,9 @@ function getScore () { getScore(); // Returns "Chamahk scored 5" </pre> -<h2 id="Scope_and_the_function_stack" name="Scope_and_the_function_stack">범위와 함수 스택</h2> +<h2 id="Scope_and_the_function_stack">범위와 함수 스택</h2> -<h3 id="Recursion" name="Recursion">재귀</h3> +<h3 id="Recursion">재귀</h3> <p>함수는 자신을 참조하고 호출할 수 있습니다. 함수가 자신을 참조하는 방법은 세 가지가 있습니다.</p> @@ -318,7 +318,7 @@ result = fn_inside(5); // returns 8 result1 = outside(3)(5); // returns 8 </pre> -<h3 id="Efficiency_considerations" name="Efficiency_considerations">변수의 보존</h3> +<h3 id="Efficiency_considerations">변수의 보존</h3> <p>중첩된 내부 함수가 반환될 때 외부 함수의 인수 <code>x</code>가 보존된다는 점을 알 수 있습니다. 클로저는 그것을 참조하는 모든 범위에서 인수와 변수를 보존해두어야 합니다. 매번 호출될 때마다 잠재적으로 다른 인수를 제공할 수 있기 때문에, 클로저는 외부 함수에 대하여 매번 새로 생성됩니다. 메모리는 그 무엇도 내부 함수에 접근하지 않을 때만 해제됩니다.</p> @@ -352,7 +352,7 @@ A(1); // logs 6 (1 + 2 + 3) <p>그러나 역은 사실이 아닙니다. A는 C에 접근 할 수 없습니다. 왜냐하면 A는 B의 인수와 변수(C는 B변수)에 접근할수 없기 때문입니다. 그래서 C는 B에게만 사적으로 남게됩니다.</p> -<h3 id="Name_conflicts" name="Name_conflicts">이름 충돌</h3> +<h3 id="Name_conflicts">이름 충돌</h3> <p>클로저의 범위에서 두 개의 인수 또는 변수의 이름이 같은 경우, <em>이름 충돌</em>이 있습니다. 더 안쪽 범위가 우선순위를 갖습니다. 그래서 가장 바깥 범위는 우선순위가 가장 낮은 반면에, 가장 안쪽 범위는 가장 높은 우선순위를 갖습니다. 이것이 범위 체인(scope chaini)입니다. <span class="atn">체인에서</span> 첫번째는 <span class="hps">가장 안쪽</span> <span class="atn hps">범위</span><span>이고,</span> <span class="atn hps">마지막</span><span>은</span> <span class="atn hps">가장 바깥 쪽</span><span class="atn">의 범위입니다</span><span>.</span> <span class="hps">다음 사항을 고려하세요:</span></p> diff --git a/files/ko/web/javascript/guide/introduction/index.html b/files/ko/web/javascript/guide/introduction/index.html index cac6b40ed4..537817b5b5 100644 --- a/files/ko/web/javascript/guide/introduction/index.html +++ b/files/ko/web/javascript/guide/introduction/index.html @@ -48,7 +48,7 @@ original_slug: Web/JavaScript/Guide/소개 <p>이것은 브라우저에서 JavaScript가 웹 페이지 (DOM)의 모양을 바꿀 수 있음을 의미합니다. 또한 서버의 Node.js JavaScript는 브라우저에 작성된 코드의 사용자 정의 요청에 응답 할 수 있습니다.</p> -<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript 와 Java</h2> +<h2 id="JavaScript_and_Java">JavaScript 와 Java</h2> <p>JavaScript 와 Java는 여러 면에서 비슷하지만 어떤 면에서는 근본적으로 다릅니다. JavaScript 언어는 Java를 닮았지만 Java의 정적 형지정(static typing)과 강한 형 검사(strong type checking)가 없습니다. JavaScript는 대부분의 Java 식 구문, 명명 규칙 및 기본적인 흐름 제어 구조를 따릅니다. 그것이 LiveScript에서 JavaScript로 이름이 바뀐 이유였습니다.</p> @@ -86,13 +86,13 @@ original_slug: Web/JavaScript/Guide/소개 <p>JavaScript와 Java의 차이에 대한 더 많은 정보는, <a href="/ko/docs/Web/JavaScript/Guide/객체_모델의_세부사항">객체 모델의 세부사항</a> 장을 보세요.</p> -<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript 와 ECMAScript 명세</h2> +<h2 id="JavaScript_and_the_ECMAScript_Specification">JavaScript 와 ECMAScript 명세</h2> <p>JavaScript는 JavaScript에 기반한 표준화된 국제 프로그래밍 언어를 제공하기 위해<a class="external" href="http://www.ecma-international.org/">Ecma International</a> 에서 표준화 됩니다 — European association for standardizing information and communication systems (ECMA는 이전에 European Computer Manufacturers Association의 두문자어였습니다). ECMAScript라 불리는 이 JavaScript의 표준화 버전은 표준을 지원하는 모든 어플리케이션에서 같은 방식으로 동작합니다. 회사들은 그들의 JavaScript 구현을 개발하기 위해 공개 표준 언어를 사용할 수 있습니다. ECMAScript 표준은 ECMA-262 명세(specification)에서 문서화되었습니다. JavaScript와 ECMAScript 명세 판의 여러 버전에 대한 더 많은 것을 배우려면 <a href="/ko/docs/Web/JavaScript/New_in_JavaScript">New in JavaScript</a> 을 보세요.</p> <p>ECMA-262 표준은 또한 IOS-16262로서 <a class="external" href="http://www.iso.ch/">ISO</a> (국제 표준화 기구) 에 의해 승인되었습니다. <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Ecma International website</a> 에서 그 명세를 찾을 수 있습니다. ECMAScript 명세는 <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> 나 <a href="https://whatwg.org/">WHATWG (Web Hypertext Application Technology Working Group)</a>에 의해 표준화된 Document Object Model (DOM)을 설명하지 않습니다. DOM은 여러분의 스크립트에 HTML 문서 객체를 드러내는 방법을 정의합니다. JavaScript로 프로그래밍을 할 때 사용되는 여러 기술들에 대한 정보를 얻으 시려면, <a href="/ko/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a> 를 참고하세요.</p> -<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript 문서 vs ECMAScript 명세</h3> +<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript 문서 vs ECMAScript 명세</h3> <p>ECMAScript 명세는 ECMAScript 구현을 위한 요구사항의 집합입니다; 여러분이 여러분의 ECMAScript 구현이나 엔진(가령 Firefox의 SpiderMonkey, 또는 Chrome의 v8)에서 표준을 따르는 언어의 기능을 구현하길 원할 때 유용합니다.</p> diff --git a/files/ko/web/javascript/guide/numbers_and_dates/index.html b/files/ko/web/javascript/guide/numbers_and_dates/index.html index 6a45e1ef7f..9a8a2c785e 100644 --- a/files/ko/web/javascript/guide/numbers_and_dates/index.html +++ b/files/ko/web/javascript/guide/numbers_and_dates/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Guide/Numbers_and_dates <h2 id="숫자">숫자</h2> -<p>JavaScript에서 모든 숫자는 <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-bit binary format IEEE 754</a> (즉, ±2<sup>−1022</sup> 과 ±2<sup>+1023</sup> 또는 대략 ±10<sup>−308</sup> to ±10<sup>+308</sup> 사이의 숫자이며 53bits의 수치정밀도 )로 구현되어 있습니다. ± 2<sup>53</sup> - 1까지의 정수 값을 정확하게 나타낼 수 있습니다.</p> +<p>JavaScript에서 모든 숫자는 <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-bit binary format IEEE 754</a> (즉, ±2^−1022 과 ±2^+1023 또는 대략 ±10^−308 to ±10^+308 사이의 숫자이며 53bits의 수치정밀도 )로 구현되어 있습니다. ±2^53 - 1까지의 정수 값을 정확하게 나타낼 수 있습니다.</p> <p>여기 부동 소수점 숫자를 나타낼 수 있으며, 숫자 형식은 세 개의 상징적인 값: <code>+</code>{{jsxref("Infinity")}}, <code>-</code>{{jsxref("Infinity")}}, and {{jsxref("NaN")}} (숫자가 아닌 값)을 갖습니다.</p> @@ -120,11 +120,11 @@ var notANum = Number.NaN; </tr> <tr> <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td> - <td>자바스크립트에서 안전한 최소의 정수.(−2<sup>53</sup> + 1, or <code>−9007199254740991</code>)</td> + <td>자바스크립트에서 안전한 최소의 정수.(−2^53 + 1, or <code>−9007199254740991</code>)</td> </tr> <tr> <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td> - <td>자바스크립트에서 안전한 최대의 정수.(+2<sup>53</sup> − 1, or <code>+9007199254740991</code>)</td> + <td>자바스크립트에서 안전한 최대의 정수.(+2^53 − 1, or <code>+9007199254740991</code>)</td> </tr> </tbody> </table> diff --git a/files/ko/web/javascript/guide/working_with_objects/index.html b/files/ko/web/javascript/guide/working_with_objects/index.html index 5c4a5eb82d..7dce2677f8 100644 --- a/files/ko/web/javascript/guide/working_with_objects/index.html +++ b/files/ko/web/javascript/guide/working_with_objects/index.html @@ -438,7 +438,7 @@ console.log(o.b) // Runs the getter, which yields a + 1 or 6 <p>Firefox 3.0 버전에서는 이미 정의된 속서에 대해 getter or setter를 정의 할 경우 예외가 발생됩니다. 이전 버전의 Firefox에서는 아니지만 해당 속성을 반드시 사전에 제거해야만 합니다. </p> </div> -<h4 id="Defining_getters_and_setters_See_also" name="Defining_getters_and_setters_See_also">추가로 볼 것들 </h4> +<h4 id="Defining_getters_and_setters_See_also">추가로 볼 것들 </h4> <ul> <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/JavaScript/Reference/Global_Objects/Object/defineSetter">Object.defineProperty</a></code></li> diff --git a/files/ko/web/javascript/language_resources/index.html b/files/ko/web/javascript/language_resources/index.html index d051af2d2e..ec37f4b7a7 100644 --- a/files/ko/web/javascript/language_resources/index.html +++ b/files/ko/web/javascript/language_resources/index.html @@ -23,20 +23,20 @@ original_slug: Web/JavaScript/언어_리소스 <th colspan="4">현재판</th> </tr> <tr> - <td>ECMA-262 10<sup>th</sup> Edition</td> + <td>ECMA-262 10th Edition</td> <td><a href="https://tc39.github.io/ecma262/">Working draft</a></td> <td>2019</td> <td>ECMAScript 2019 (제 10판), 명세 작업 중</td> </tr> <tr> - <td>ECMA-262 9<sup>th</sup> Edition</td> + <td>ECMA-262 9th Edition</td> <td><a href="http://ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-262/9.0/index.html#Title">HTML</a>, <br> <a href="https://tc39.github.io/ecma262/">Working draft</a>, <a href="https://github.com/tc39/ecma262">repository</a></td> <td>2018</td> <td>ECMAScript 2018 (제 9판)</td> </tr> <tr> - <td>ECMA-402 5<sup>th</sup> Edition</td> + <td>ECMA-402 5th Edition</td> <td><a href="http://tc39.github.io/ecma402/">Working draft</a>, <a href="https://github.com/tc39/ecma402">repository</a></td> <td>2018</td> <td>ECMAScript 2018 국제화 API 표준</td> @@ -127,7 +127,7 @@ original_slug: Web/JavaScript/언어_리소스 <td>ECMAScript 2017 (제8판).</td> </tr> <tr> - <td>ECMA-402 4<sup>th</sup> Edition</td> + <td>ECMA-402 4th Edition</td> <td><a href="http://www.ecma-international.org/ecma-402/4.0">HTML</a></td> <td>June 2017</td> <td>ECMAScript 국제화 API 4.0.</td> diff --git a/files/ko/web/javascript/reference/classes/extends/index.html b/files/ko/web/javascript/reference/classes/extends/index.html index 0ae81a9964..54de5b2f01 100644 --- a/files/ko/web/javascript/reference/classes/extends/index.html +++ b/files/ko/web/javascript/reference/classes/extends/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Classes/extends --- <div>{{jsSidebar("Classes")}}</div> -<p><strong><code>extends</code></strong> 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 <a href="/ko/docs/Web/JavaScript/Reference/Statements/class" title="class declarations">class 선언</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/class" title="class expressions">class 식</a>에 사용됩니다.</p> +<p><strong><code>extends</code></strong> 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 <a href="/ko/docs/Web/JavaScript/Reference/Statements/class">class 선언</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/class">class 식</a>에 사용됩니다.</p> <p>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</p> diff --git a/files/ko/web/javascript/reference/errors/bad_octal/index.html b/files/ko/web/javascript/reference/errors/bad_octal/index.html index 8a4590e668..9336c7efc2 100644 --- a/files/ko/web/javascript/reference/errors/bad_octal/index.html +++ b/files/ko/web/javascript/reference/errors/bad_octal/index.html @@ -17,7 +17,7 @@ Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant. <h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> -<p>10진법의 리터럴은 <code>0</code>을 가장 앞 자리에 표시하고 뒤따라 다른 10진 숫자가 오게 할 수 있지만, <code>0</code>으로 시작하여 그 뒤를 따르는 모든 숫자들이 8보다 작다면, 그 수는 8진수로 해석됩니다. 이런 경우에는 <code>08<font face="Open Sans, Arial, sans-serif">과</font> 09<font face="Open Sans, Arial, sans-serif">는 허용되지 않기 때문에</font><font face="Open Sans, Arial, sans-serif"> </font></code>JavaScript는 경고를 띄웁니다. </p> +<p>10진법의 리터럴은 <code>0</code>을 가장 앞 자리에 표시하고 뒤따라 다른 10진 숫자가 오게 할 수 있지만, <code>0</code>으로 시작하여 그 뒤를 따르는 모든 숫자들이 8보다 작다면, 그 수는 8진수로 해석됩니다. 이런 경우에는 <code>08</code>과 <code>09</code>는 허용되지 않기 때문에 JavaScript는 경고를 띄웁니다. </p> <p>8진 리터럴과 8진 escape sequence는 사라지고 추가적인 경고가 나타날 것임을 알아 두세요. ECMAScript 6와 그 이후 버전의 구문은, 맨 앞자리에 위치하는 <code>0</code>의 뒤에 소문자 또는 대문자의 라틴 문자 "O" 를 위치시키도록 합니다 (<code>0o</code> or <code>0O)</code>. 더 자세한 설명은 <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">lexical grammar</a> 페이지를 보세요.</p> diff --git a/files/ko/web/javascript/reference/errors/invalid_array_length/index.html b/files/ko/web/javascript/reference/errors/invalid_array_length/index.html index 6ddeb58f06..00bf7059c4 100644 --- a/files/ko/web/javascript/reference/errors/invalid_array_length/index.html +++ b/files/ko/web/javascript/reference/errors/invalid_array_length/index.html @@ -21,11 +21,11 @@ RangeError: Invalid array buffer length (Chrome) <p>다음과 같은 원인 때문이다:</p> <ul> - <li>2<sup>32</sup>와 같거나 이보다 긴, 혹은 음수의 길이를 가진 {{jsxref("Array")}}나 {{jsxref("ArrayBuffer")}}를 생성했기 때문에, 혹은</li> - <li>{{jsxref("Array")}} 속성을 2<sup>32</sup>와 같거나 이보다 긴 값으로 설정했기 때문이다.</li> + <li>2^32와 같거나 이보다 긴, 혹은 음수의 길이를 가진 {{jsxref("Array")}}나 {{jsxref("ArrayBuffer")}}를 생성했기 때문에, 혹은</li> + <li>{{jsxref("Array")}} 속성을 2^32와 같거나 이보다 긴 값으로 설정했기 때문이다.</li> </ul> -<p><code>Array와 ArrayBuffer의 길이에 제한을 둔 이유는, Array나 ArrayBuffer의 length 속성은 사인되지 않은(unsigned) 32 비트 정수로 반영되기 때문이다.</code> 즉 <code>Array나 ArrayBuffer는 오직 0 ~ </code>2<sup>32</sup>-1 사이의 값만을 저장할 수 있다.</p> +<p><code>Array와 ArrayBuffer의 길이에 제한을 둔 이유는, Array나 ArrayBuffer의 length 속성은 사인되지 않은(unsigned) 32 비트 정수로 반영되기 때문이다.</code> 즉 <code>Array나 ArrayBuffer는 오직 0 ~ </code>2^32-1 사이의 값만을 저장할 수 있다.</p> <p>Array의 length로 해석되는 첫번째 argument로서 문자열 표기를 통해 contructor를 사용하여 Array를 생성할 수 있다.</p> diff --git a/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html b/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html index 20e28cbe2b..119445c14b 100644 --- a/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html +++ b/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html @@ -21,7 +21,7 @@ RangeError: Invalid count value (Chrome) <p> {{jsxref("String.prototype.repeat()")}} 메소드가 사용되었습니다. 이 메소드는 문자열을 반복하는 수를 예측하는 카운트 파라메터를 가지고 있었습니다. 그리고 이 파라메터는 0보다 커야하며, 양의 {{jsxref("Infinity")}} 보다 작아야 했으며, 음수는 허용되지 않았습니다. 이 값의 허용 범위는 이렇게 표현될 수 있습니다. : [0, +∞). </p> -<p>결과인 문자열은 최대 문자열 크기보다 클 수 없지만, JavaScript 에서는 다를 수 있습니다. Firefox (SpiderMonkey) 에서의 최대 문자열 크기는 2<sup>28</sup> -1 (<code>0xFFFFFFF</code>)입니다.</p> +<p>결과인 문자열은 최대 문자열 크기보다 클 수 없지만, JavaScript 에서는 다를 수 있습니다. Firefox (SpiderMonkey) 에서의 최대 문자열 크기는 2^28 -1 (<code>0xFFFFFFF</code>)입니다.</p> <h2 id="예">예</h2> diff --git a/files/ko/web/javascript/reference/functions/arguments/callee/index.html b/files/ko/web/javascript/reference/functions/arguments/callee/index.html index 182e88e9dc..1ae32b72ef 100644 --- a/files/ko/web/javascript/reference/functions/arguments/callee/index.html +++ b/files/ko/web/javascript/reference/functions/arguments/callee/index.html @@ -18,7 +18,7 @@ browser-compat: javascript.functions.arguments.callee <p><code>callee</code>는 <code>arguments</code> 객체의 속성입니다. 그 함수의 몸통(body) 내에서 현재 실행 중인 함수를 참조하는 데 쓰일 수 있습니다. 이는 함수의 이름을 알 수 없는 경우에 유용합니다, 가령 이름 없는 함수 식(또한 "익명 함수"라 함) 내에서.</p> -<div class="warning"><strong>경고:</strong> ECMAScript 제5판(ES5) 은 <a href="/ko/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">엄격 모드</a>에서 <code>arguments.callee()</code>의 사용을 금합니다. function 식(expression)에 이름을 주거나 함수 자체를 호출해야 하는 곳에 function 선언을 사용하여 <code>arguments.callee()</code> 사용을 피하세요.</div> +<div class="warning"><strong>경고:</strong> ECMAScript 제5판(ES5) 은 <a href="/ko/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode">엄격 모드</a>에서 <code>arguments.callee()</code>의 사용을 금합니다. function 식(expression)에 이름을 주거나 함수 자체를 호출해야 하는 곳에 function 선언을 사용하여 <code>arguments.callee()</code> 사용을 피하세요.</div> <h3 id="arguments.callee는_왜_ES5_엄격_모드에서_제거되었나요"><code>arguments.callee</code>는 왜 ES5 엄격 모드에서 제거되었나요?</h3> @@ -85,9 +85,9 @@ sillyFunction();</pre> <h3 id="익명_재귀_함수에서_arguments.callee_사용하기">익명 재귀 함수에서 <code>arguments.callee</code> 사용하기</h3> -<p>재귀 함수는 자신을 참조할 수 있어야 합니다. 보통, 함수는 그 이름으로 자신을 참조합니다. 그러나, 익명 함수(<a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="function expression">함수 식</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function" title="Function constructor"><code>Function</code> 생성자</a>로 생성될 수 있는)는 이름이 없습니다. 그러므로 그를 참조하는 액세스 가능한 변수가 없는 경우, 함수가 자신을 참조할 수 있는 유일한 방법은 <code>arguments.callee</code>에 의해서입니다.</p> +<p>재귀 함수는 자신을 참조할 수 있어야 합니다. 보통, 함수는 그 이름으로 자신을 참조합니다. 그러나, 익명 함수(<a href="/ko/docs/Web/JavaScript/Reference/Operators/function">함수 식</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code> 생성자</a>로 생성될 수 있는)는 이름이 없습니다. 그러므로 그를 참조하는 액세스 가능한 변수가 없는 경우, 함수가 자신을 참조할 수 있는 유일한 방법은 <code>arguments.callee</code>에 의해서입니다.</p> -<p>다음 예는 차례로 팩토리얼 함수를 정의하고 반환하는 함수를 정의합니다. 이 예는 매우 실용적이지 않고 같은 결과가 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="named function expressions">유명 함수 식</a>으로 달성될 수 없는 경우가 거의 없습니다.</p> +<p>다음 예는 차례로 팩토리얼 함수를 정의하고 반환하는 함수를 정의합니다. 이 예는 매우 실용적이지 않고 같은 결과가 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">유명 함수 식</a>으로 달성될 수 없는 경우가 거의 없습니다.</p> <pre class="brush: js">function create() { return function(n) { diff --git a/files/ko/web/javascript/reference/functions/arguments/index.html b/files/ko/web/javascript/reference/functions/arguments/index.html index 98b5f1385b..3bebcf801b 100644 --- a/files/ko/web/javascript/reference/functions/arguments/index.html +++ b/files/ko/web/javascript/reference/functions/arguments/index.html @@ -51,7 +51,7 @@ arguments[2] var args = [].slice.call(arguments); </pre> -<p><code>arguments</code>를 실제 <code>Array</code>로 변환하기 위해 ES2015의 {{jsxref("Array.from()")}} 메서드 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">전개 연산자</a>를 사용할 수도 있습니다.</p> +<p><code>arguments</code>를 실제 <code>Array</code>로 변환하기 위해 ES2015의 {{jsxref("Array.from()")}} 메서드 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator">전개 연산자</a>를 사용할 수도 있습니다.</p> <pre class="brush: js">var args = Array.from(arguments); var args = [...arguments]; @@ -119,7 +119,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> <h3 id="나머지_기본_및_비구조화된_매개변수">나머지, 기본 및 비구조화된 매개변수</h3> -<p><code>arguments</code> 객체는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="destructured parameters">비구조화된 매개변수</a>와 함께 사용될 수 있습니다.</p> +<p><code>arguments</code> 객체는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">비구조화된 매개변수</a>와 함께 사용될 수 있습니다.</p> <pre class="brush: js">function foo(...args) { return arguments; @@ -127,7 +127,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> foo(1, 2, 3); // { "0": 1, "1": 2, "2": 3 } </pre> -<p>그러나, 비엄격 함수에서는 <strong>mapped <code>arguments</code> 객체</strong>는 함수가 어떤 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="destructured parameters">비구조화된 매개변수</a>든 포함하지 <strong>않는</strong> 경우에만 제공됩니다. 예를 들어, 기본 매개변수를 사용하는 다음 함수에서는, 100 대신에 <code>10</code>이 반환됩니다:</p> +<p>그러나, 비엄격 함수에서는 <strong>mapped <code>arguments</code> 객체</strong>는 함수가 어떤 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">비구조화된 매개변수</a>든 포함하지 <strong>않는</strong> 경우에만 제공됩니다. 예를 들어, 기본 매개변수를 사용하는 다음 함수에서는, 100 대신에 <code>10</code>이 반환됩니다:</p> <pre class="brush: js">function bar(a=1) { arguments[0] = 100; @@ -136,7 +136,7 @@ foo(1, 2, 3); // { "0": 1, "1": 2, "2": 3 } bar(10); // 10 </pre> -<p>이 예에서, 어떤 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="destructured parameters">비구조화된 매개변수</a>가 없는 경우에는, 100이 반환됩니다:</p> +<p>이 예에서, 어떤 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">비구조화된 매개변수</a>가 없는 경우에는, 100이 반환됩니다:</p> <pre class="brush: js">function zoo(a) { arguments[0] = 100; diff --git a/files/ko/web/javascript/reference/functions/arrow_functions/index.html b/files/ko/web/javascript/reference/functions/arrow_functions/index.html index a8eaa55b06..cb42f89ebc 100644 --- a/files/ko/web/javascript/reference/functions/arrow_functions/index.html +++ b/files/ko/web/javascript/reference/functions/arrow_functions/index.html @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Functions/애로우_펑션 --- <div>{{jsSidebar("Functions")}}</div> -<p>화살표 함수 표현(<strong>arrow function expression</strong>)은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="function expressions">function 표현</a>에 비해 구문이 짧고 자신의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/ko/docs/Web/JavaScript/Reference/Operators/super">super</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>을 바인딩 하지 않습니다. 화살표 함수는 항상 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/name" title="anonymous">익명</a>입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.</p> +<p>화살표 함수 표현(<strong>arrow function expression</strong>)은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">function 표현</a>에 비해 구문이 짧고 자신의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/ko/docs/Web/JavaScript/Reference/Operators/super">super</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>을 바인딩 하지 않습니다. 화살표 함수는 항상 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/name">익명</a>입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.</p> <p>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</p> @@ -36,11 +36,11 @@ original_slug: Web/JavaScript/Reference/Functions/애로우_펑션 <pre class="syntaxbox notranslate">// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음: <em>params</em> => ({<em>foo: bar</em>}) -// <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="Rest parameter">나머지 매개변수</a> 및 <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="Default parameter">기본 매개변수</a>를 지원함 +// <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> 및 <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a>를 지원함 (<em>param1</em>, <em>param2</em>, <strong>...rest</strong>) => { <em>statements</em> } (<em>param1</em> <strong>= defaultValue1</strong>, <em>param2</em>, …, paramN <strong>= defaultValueN</strong>) => { <em>statements</em> } -// 매개변수 목록 내 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="Destructuring">구조분해할당</a>도 지원됨 +// 매개변수 목록 내 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조분해할당</a>도 지원됨 var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6 </pre> @@ -100,7 +100,7 @@ elements.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" <ul> <li>이 함수가 생성자인 경우는 새로운 객체</li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a> 함수 호출에서는 <code>undefined</code> </li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a> 함수 호출에서는 <code>undefined</code> </li> <li>함수가 "객체 메서드"로서 호출된 경우 문맥 객체</li> <li>등등</li> </ul> @@ -133,7 +133,7 @@ var p = new Person();</pre> }, 1000); }</pre> -<p>이렇게 하는 대신에, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" title="bound function">바인딩한 함수</a>는 적절한 <code>this</code> 값이 <code>growUp()</code> 함수에 전달될 수 있도록 생성될 수 있습니다.</p> +<p>이렇게 하는 대신에, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">바인딩한 함수</a>는 적절한 <code>this</code> 값이 <code>growUp()</code> 함수에 전달될 수 있도록 생성될 수 있습니다.</p> <p>화살표 함수는 자신의 <code>this</code>가 없습니다. 대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 <code>this</code>가 사용됩니다; 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따릅니다. 때문에 현재 범위에서 존재하지 않는 <code>this</code>를 찾을 때, 화살표 함수는 바로 바깥 범위에서 <code>this</code>를 찾는것으로 검색을 끝내게 됩니다.</p> @@ -151,7 +151,7 @@ var p = new Person();</pre> <h4 id="엄격_모드와의_관계">엄격 모드와의 관계</h4> -<p><code>this</code>가 렉시컬(lexical, 정적)임을 감안하면, <code>this</code>에 관한 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a> 규칙은 그냥 무시됩니다.</p> +<p><code>this</code>가 렉시컬(lexical, 정적)임을 감안하면, <code>this</code>에 관한 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a> 규칙은 그냥 무시됩니다.</p> <pre class="notranslate">var f = () => { 'use strict'; return this; }; f() === window; // 혹은 전역객체</pre> @@ -260,7 +260,7 @@ function foo(n) { foo(1); // 2</code></pre> -<p>화살표 함수는 자신의 <code>arguments</code> 객체가 없지만, 대부분의 경우에 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>가 좋은 대안입니다:</p> +<p>화살표 함수는 자신의 <code>arguments</code> 객체가 없지만, 대부분의 경우에 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a>가 좋은 대안입니다:</p> <pre class="brush: js notranslate">function foo(n) { var f = (...args) => args[0] + n; diff --git a/files/ko/web/javascript/reference/functions/get/index.html b/files/ko/web/javascript/reference/functions/get/index.html index 7307865f55..55d7765229 100644 --- a/files/ko/web/javascript/reference/functions/get/index.html +++ b/files/ko/web/javascript/reference/functions/get/index.html @@ -36,12 +36,12 @@ translation_of: Web/JavaScript/Reference/Functions/get <div> <ul> <li>숫자나 문자열로 구성된 식별자를 이용할 수 있습니다.</li> - <li>getter는 절대로 매개변수를 가져서는 안 됩니다. (<a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> 를 참조하세요.)</li> + <li>getter는 절대로 매개변수를 가져서는 안 됩니다. (<a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments</a> 를 참조하세요.)</li> <li>하나의 객체 리터럴에 또다른 getter나 데이터 바인딩은 불가능합니다. (<code>{ get x() { }, get x() { } }</code> 나 <code>{ x: ..., get x() { } }</code> 는 사용할 수 없습니다.)</li> </ul> </div> -<p>getter는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete</a></code> 연산자를 이용해 삭제할 수 있습니다.</p> +<p>getter는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 연산자를 이용해 삭제할 수 있습니다.</p> <h2 id="예">예</h2> diff --git a/files/ko/web/javascript/reference/functions/index.html b/files/ko/web/javascript/reference/functions/index.html index 2052b67a93..22850ff865 100644 --- a/files/ko/web/javascript/reference/functions/index.html +++ b/files/ko/web/javascript/reference/functions/index.html @@ -14,7 +14,7 @@ translation_of: Web/JavaScript/Reference/Functions <p>JavaScript에서, 함수는 다른 객체처럼 속성 및 메서드를 가질 수 있기에 일급(first-class) 객체입니다. 다른 객체와 함수를 구별하는 것은 함수는 호출될 수 있다는 것입니다. 간단히 말해, 함수는 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code> 객체입니다.</p> -<p>더 많은 예제와 설명은, <a href="/ko/docs/Web/JavaScript/Guide/함수" title="JavaScript guide about functions">JavaScript 함수 안내서</a>를 참조하세요.</p> +<p>더 많은 예제와 설명은, <a href="/ko/docs/Web/JavaScript/Guide/함수">JavaScript 함수 안내서</a>를 참조하세요.</p> <h2 id="설명">설명</h2> @@ -61,7 +61,7 @@ function myFunc(theObject) { <h3 id="함수_선언_function_문">함수 선언 (<code>function</code> 문)</h3> -<p>함수 선언을 위한 특별한 구문이 있습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function" title="function statement">function 문</a> 참조):</p> +<p>함수 선언을 위한 특별한 구문이 있습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function">function 문</a> 참조):</p> <pre class="brush: js">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { <em>statements</em> @@ -85,7 +85,7 @@ function myFunc(theObject) { <h3 id="함수_표현식_function_식">함수 표현식 (<code>function</code> 식)</h3> -<p>함수 식(expression)은 함수 선언과 비슷하고 구문이 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="function expression">function 식</a> 참조):</p> +<p>함수 식(expression)은 함수 선언과 비슷하고 구문이 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">function 식</a> 참조):</p> <p>함수 표현식(expression)은 함수 선언과 비슷하고 구문이 같습니다 (자세한 내용은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> 참조). 함수 표현식은 더 큰 표현식의 일부일 수 있습니다. "이름이 붙은(named)"함수 표현식 (예 : 호출 스택에서 표현식 이름 사용하는경우) 또는 "익명"함수 표현식을 정의 할 수 있습니다. 함수 표현식은 선언이 되지 않은 상태에서 사용할 수 없기 때문에 함수를 사용하기 전에 코드에 함수코드가 존제해야 사용 할 수 있습니다.</p> @@ -106,7 +106,7 @@ function myFunc(theObject) { <dd>함수의 몸통을 구성하는 문.</dd> </dl> -<p>다음은 익명 함수 표현식의 예입니다 (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">이름</span></font> 이 사용되지 않음):</p> +<p>다음은 익명 함수 표현식의 예입니다 (<code>이름</code> 이 사용되지 않음):</p> <pre class="brush: js"><code>var myFunction = function() { statements @@ -177,7 +177,7 @@ function myFunc(theObject) { <h3 id="화살표_함수_표현식_>">화살표 함수 표현식 (=>)</h3> -<p>화살표 함수 식은 구문이 더 짧고 어휘상(lexically) <code>this</code> 값을 바인딩합니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션" title="arrow functions">화살표 함수</a> 참조):</p> +<p>화살표 함수 식은 구문이 더 짧고 어휘상(lexically) <code>this</code> 값을 바인딩합니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수</a> 참조):</p> <pre class="brush: js">([param[, param]]) => { statements @@ -247,11 +247,11 @@ param => expression <h3 id="기본_매개변수">기본 매개변수</h3> -<p>기본(default) 함수 매개변수는 전달된 값이 없거나 <code>undefined</code>인 경우 기본값으로 초기화되는 형식 매개변수를 허용합니다. 자세한 사항은, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 참조.</p> +<p>기본(default) 함수 매개변수는 전달된 값이 없거나 <code>undefined</code>인 경우 기본값으로 초기화되는 형식 매개변수를 허용합니다. 자세한 사항은, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a> 참조.</p> <h3 id="나머지_매개변수">나머지 매개변수</h3> -<p>나머지(rest) 매개변수 구문은 부정(indefinite)수인 인수를 배열로 나타내는 것을 허용합니다. 자세한 사항은, <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a> 참조.</p> +<p>나머지(rest) 매개변수 구문은 부정(indefinite)수인 인수를 배열로 나타내는 것을 허용합니다. 자세한 사항은, <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> 참조.</p> <h2 id="arguments_객체"><code>arguments</code> 객체</h2> @@ -456,7 +456,7 @@ function a() { <h2 id="블록_레벨_함수">블록 레벨 함수</h2> -<p>ES2015 (ES6)를 시작으로 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a>에서, 블록 내부 함수는 이제 그 블록 범위가 됩니다. ES6 이전에, 블록 레벨 함수는 엄격 모드에서 금지됐습니다.</p> +<p>ES2015 (ES6)를 시작으로 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>에서, 블록 내부 함수는 이제 그 블록 범위가 됩니다. ES6 이전에, 블록 레벨 함수는 엄격 모드에서 금지됐습니다.</p> <pre class="brush: js">'use strict'; @@ -490,7 +490,7 @@ f() === 1; // true <p>ES2015는 <code>shouldDefineZero</code>가 false인 경우, 그러면 <code>zero</code>는 결코 정의되어서는 안된다고 합니다, 그 블록이 실행된 적이 없기에. 그러나, 이는 표준의 새로운 일부입니다. 역사상, 이는 지정되지 않은 채 방치되었고 일부 브라우저는 블록이 실행됐든 아니든 <code>zero</code>를 정의할 겁니다.</p> -<p><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a>에서, ES2015를 지원하는 모든 브라우저는 이를 같은 식으로 다룹니다: <code>zero</code>는 <code>shouldDefineZero</code>가 true이고 <code>if</code> 블록 범위인 경우에만 정의됩니다.</p> +<p><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>에서, ES2015를 지원하는 모든 브라우저는 이를 같은 식으로 다룹니다: <code>zero</code>는 <code>shouldDefineZero</code>가 true이고 <code>if</code> 블록 범위인 경우에만 정의됩니다.</p> <p>조건부 함수를 정의하는 더 안전한 방법은 function 식을 변수에 할당하는 것입니다:</p> @@ -592,5 +592,5 @@ result = padZeros(5,4); // 반환값 "0005" <li>{{jsxref("Functions/get", "getter")}}</li> <li>{{jsxref("Functions/set", "setter")}}</li> <li>{{jsxref("Functions/Method_definitions", "메서드 정의")}}</li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">함수 및 함수 범위</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수 및 함수 범위</a></li> </ul> diff --git a/files/ko/web/javascript/reference/functions/method_definitions/index.html b/files/ko/web/javascript/reference/functions/method_definitions/index.html index a7147e91ae..33768fcaa9 100644 --- a/files/ko/web/javascript/reference/functions/method_definitions/index.html +++ b/files/ko/web/javascript/reference/functions/method_definitions/index.html @@ -129,5 +129,5 @@ console.log(bar.foo2()); // 2</pre> <ul> <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li> <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar" title="Lexical grammar">어휘 문법</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar">어휘 문법</a></li> </ul> diff --git a/files/ko/web/javascript/reference/functions/rest_parameters/index.html b/files/ko/web/javascript/reference/functions/rest_parameters/index.html index 7af5e4ddb4..250b7c2931 100644 --- a/files/ko/web/javascript/reference/functions/rest_parameters/index.html +++ b/files/ko/web/javascript/reference/functions/rest_parameters/index.html @@ -42,11 +42,11 @@ myFun("one", "two", "three", "four", "five", "six"); <h3 id="Rest_파라미터_및_arguments_객체간_차이">Rest 파라미터 및 <code>arguments</code> 객체간 차이</h3> -<p>Rest 파라미터와 <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a> 객체 사이에 세 가지 주요 차이점이 있습니다:</p> +<p>Rest 파라미터와 <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a> 객체 사이에 세 가지 주요 차이점이 있습니다:</p> <ul> <li>Rest 파라미터는 구분된 이름(예, 함수 표현에 정식으로 정의된 것)이 주어지지 않은 유일한 대상인 반면, <code>arguments</code> 객체는 함수로 전달된 모든 인수를 포함합니다.</li> - <li><code>arguments</code> 객체는 실제 배열이 아니고 rest 파라미터는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> 인스턴스로, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> 같은 메서드가 바로 인스턴스에 적용될 수 있음을 뜻합니다.</li> + <li><code>arguments</code> 객체는 실제 배열이 아니고 rest 파라미터는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> 인스턴스로, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"><code>sort</code></a>, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map"><code>map</code></a>, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach</code></a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop"><code>pop</code></a> 같은 메서드가 바로 인스턴스에 적용될 수 있음을 뜻합니다.</li> <li>즉 <code>arguments</code> 객체는 자체에 특정 추가 기능이 있습니다 (<code>callee</code> 속성처럼).</li> </ul> @@ -203,10 +203,10 @@ console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7 <h2 id="함께_보기">함께 보기</h2> <ul> - <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax" title="spread operator">Spread 문법</a> (또한 ‘<code>...</code>’)</li> - <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments 객체</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">함수</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Spread 문법</a> (또한 ‘<code>...</code>’)</li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments">Arguments 객체</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions">함수</a></li> <li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li> <li><a href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li> <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a></li> diff --git a/files/ko/web/javascript/reference/functions/set/index.html b/files/ko/web/javascript/reference/functions/set/index.html index 148e056c81..fcf58b0881 100644 --- a/files/ko/web/javascript/reference/functions/set/index.html +++ b/files/ko/web/javascript/reference/functions/set/index.html @@ -36,7 +36,7 @@ browser-compat: javascript.functions.set <div> <ul> <li>숫자혹은 문자로된 식별자를 가질 수 있다;</li> - <li>한 개의 파라메터만 가질 수 있다.(더 자세한 정보는 <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a>를 본다);</li> + <li>한 개의 파라메터만 가질 수 있다.(더 자세한 정보는 <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments</a>를 본다);</li> <li>오브젝트 리터럴에 동일한 property에 대한 다른 set나 데이터 항목이 올 수 없다.<br> ( <code>{ set x(v) { }, set x(v) { } }</code> 그리고 <code>{ x: ..., set x(v) { } }</code> 는 허용되지 않는다.)</li> </ul> @@ -58,7 +58,7 @@ browser-compat: javascript.functions.set } </pre> -<p><code><font face="Open Sans, Arial, sans-serif">다음 사항에 주의한다. </font>current는 정의 되지 않았고 이것에 접근하는 모든 시도는 undefined 값을 얻게될 것이다.</code></p> +<p>다음 사항에 주의한다. current는 정의 되지 않았고 이것에 접근하는 모든 시도는 undefined 값을 얻게될 것이다.</p> <h3 id="delete_operator로_setter를_제거하기"><code>delete</code> operator로 setter를 제거하기</h3> diff --git a/files/ko/web/javascript/reference/global_objects/array/@@species/index.html b/files/ko/web/javascript/reference/global_objects/array/@@species/index.html index 7b1bda0ca6..2afaff4a63 100644 --- a/files/ko/web/javascript/reference/global_objects/array/@@species/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/@@species/index.html @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species <pre class="brush: js">Array[Symbol.species]; // function Array()</pre> -<p>파생 콜렉션 개체(예시: 사용자 설정 배열인 <code>MyArray</code>)에서, <code>MyArray</code> 종<sup>species</sup>은 <code>MyArray</code> 생성자입니다. 그러나 이 속성을 재정의하면 파생 클래스 메서드에서 상위 <code>Array</code> 객체를 반환할 수 있습니다.</p> +<p>파생 콜렉션 개체(예시: 사용자 설정 배열인 <code>MyArray</code>)에서, <code>MyArray</code> 종(species)은 <code>MyArray</code> 생성자입니다. 그러나 이 속성을 재정의하면 파생 클래스 메서드에서 상위 <code>Array</code> 객체를 반환할 수 있습니다.</p> <pre class="brush: js">class MyArray extends Array { // MyArray species를 부모 Array 생성자로 재설정 diff --git a/files/ko/web/javascript/reference/global_objects/array/array/index.html b/files/ko/web/javascript/reference/global_objects/array/array/index.html index 3f3d60a4ec..58fc5c5b6c 100644 --- a/files/ko/web/javascript/reference/global_objects/array/array/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/array/index.html @@ -25,7 +25,7 @@ new Array(<var>arrayLength</var>)</pre> <dt><code>element<em>N</em></code></dt> <dd>JavaScript 배열을 초기화할 때 채워넣을 요소. 단, 항목이 하나 뿐이며 그 항목의 자료형이 숫자일 경우 아래의 <code>arrayLength</code> 매개변수로 간주합니다.</dd> <dt><code>arrayLength</code></dt> - <dd><code>Array</code> 생성자에 제공한 유일한 매개변수가 0에서 2<sup>32</sup>-1 이하의 정수인 경우, <code>length</code> 속성이 해당 값인 새로운 JavaScript 배열을 생성합니다. (<strong>참고:</strong> 이렇게 생성한 배열은 <code>arrayLength</code> 만큼의 빈 슬롯을 가지는 것으로, 실제 {{jsxref("undefined")}}를 채우는 것이 아닙니다.) 값이 범위 밖이거나 정수가 아닌 경우 {{jsxref("RangeError")}}가 발생합니다.</dd> + <dd><code>Array</code> 생성자에 제공한 유일한 매개변수가 0에서 2^32-1 이하의 정수인 경우, <code>length</code> 속성이 해당 값인 새로운 JavaScript 배열을 생성합니다. (<strong>참고:</strong> 이렇게 생성한 배열은 <code>arrayLength</code> 만큼의 빈 슬롯을 가지는 것으로, 실제 {{jsxref("undefined")}}를 채우는 것이 아닙니다.) 값이 범위 밖이거나 정수가 아닌 경우 {{jsxref("RangeError")}}가 발생합니다.</dd> </dl> <h2 id="예제">예제</h2> diff --git a/files/ko/web/javascript/reference/global_objects/array/every/index.html b/files/ko/web/javascript/reference/global_objects/array/every/index.html index d67b5e4671..24a77ec494 100644 --- a/files/ko/web/javascript/reference/global_objects/array/every/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/every/index.html @@ -115,13 +115,13 @@ every(function callbackFn(element, index, array) { ... }, thisArg) </p> <p> - <code>every</code>는 (이산)수학에서 전칭(∀) 정량자<sup>quantifier</sup>(한정자)처럼 행동합니다. + <code>every</code>는 (이산)수학에서 전칭(∀) 정량자(quantifier, 한정자)처럼 행동합니다. 특히, 빈 배열에 대해서는 <code>true</code>를 반환합니다. (이는 <a href="http://en.wikipedia.org/wiki/Empty_set#Common_problems">공집합</a>의 모든 요소가 어떠한 주어진 조건도 만족하는 <a href="http://en.wikipedia.org/wiki/Vacuous_truth#Vacuous_truths_in_mathematics" - title="vacuously true" + >공허한 참</a >입니다.) </p> diff --git a/files/ko/web/javascript/reference/global_objects/array/fill/index.html b/files/ko/web/javascript/reference/global_objects/array/fill/index.html index 5a18af7d24..04b50db326 100644 --- a/files/ko/web/javascript/reference/global_objects/array/fill/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/fill/index.html @@ -16,11 +16,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill <p>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</p> -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox"><code><var>arr</var>.fill(<var>value</var>[, <var>start<var>[, <var>end</var>]])</var></var></code></pre> -<h3 id="Parameters" name="Parameters">매개변수</h3> +<h3 id="Parameters">매개변수</h3> <dl> <dt><code>value</code></dt> @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill <p>변형한 배열.</p> -<h2 id="Description" name="Description">설명 </h2> +<h2 id="Description">설명 </h2> <p><code>fill</code> 메서드는 <code>value</code>, <code>start</code>, <code>end</code>의 3개 인자를 가집니다. <code>start</code>와 <code>end</code> 인자는 선택 사항으로써 기본값으로 각각 <code>0</code>과, <code>this</code> 객체의 <code>length</code>를 가집니다.</p> @@ -47,7 +47,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill <p><code>value</code>에 객체를 받을 경우 그 참조만 복사해서 배열을 채웁니다.</p> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <pre class="brush: js">[1, 2, 3].fill(4); // [4, 4, 4] [1, 2, 3].fill(4, 1); // [1, 4, 4] @@ -65,7 +65,7 @@ var arr = Array(3).fill({}); // [{}, {}, {}] arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] </pre> -<h2 id="Polyfill" name="Polyfill">폴리필</h2> +<h2 id="Polyfill">폴리필</h2> <pre><code>if (!Array.prototype.fill) { Object.defineProperty(Array.prototype, 'fill', { @@ -112,7 +112,7 @@ arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] }); }</code></pre> -<h2 id="Specifications" name="Specifications">명세</h2> +<h2 id="Specifications">명세</h2> <table class="standard-table"> <tbody> @@ -134,7 +134,7 @@ arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <div>{{Compat("javascript.builtins.Array.fill")}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/array/filter/index.html b/files/ko/web/javascript/reference/global_objects/array/filter/index.html index 9d1b623fd0..fe48a1146f 100644 --- a/files/ko/web/javascript/reference/global_objects/array/filter/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/filter/index.html @@ -153,7 +153,7 @@ console.log(filterItems('an')); // ['banana', 'mango', 'orange']</code></pre> <h2 id="폴리필">폴리필</h2> -<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">filter</span></font>는 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 환경에서도 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">filter</span></font>를 사용할 수 있습니다. 아래 알고리즘은 <code>fn.call</code>의 계산 값이 원래의 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다."><code>Function.prototype.call()</code></a>과 같고, {{jsxref("Array.prototype.push()")}}가 변형되지 않은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> +<p><code>filter</code>는 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 환경에서도 <code>filter</code>를 사용할 수 있습니다. 아래 알고리즘은 <code>fn.call</code>의 계산 값이 원래의 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call()</code></a>과 같고, {{jsxref("Array.prototype.push()")}}가 변형되지 않은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> <pre class="brush: js">if (!Array.prototype.filter){ Array.prototype.filter = function(func, thisArg) { diff --git a/files/ko/web/javascript/reference/global_objects/array/find/index.html b/files/ko/web/javascript/reference/global_objects/array/find/index.html index 92a0208a6b..3b9215f0fd 100644 --- a/files/ko/web/javascript/reference/global_objects/array/find/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/find/index.html @@ -9,6 +9,7 @@ tags: - Prototype - Reference - polyfill +browser-compat: javascript.builtins.Array.find translation_of: Web/JavaScript/Reference/Global_Objects/Array/find --- <div>{{JSRef}}</div> @@ -212,9 +213,7 @@ if (!Array.prototype.find) { <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div>{{Compat("javascript.builtins.Array.find")}}</div> - -<div id="compat-mobile"> </div> +<div>{{Compat}}</div> <h2 id="같이_보기">같이 보기</h2> diff --git a/files/ko/web/javascript/reference/global_objects/array/foreach/index.html b/files/ko/web/javascript/reference/global_objects/array/foreach/index.html index 809bc4d269..943cbf0064 100644 --- a/files/ko/web/javascript/reference/global_objects/array/foreach/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/foreach/index.html @@ -34,7 +34,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach <dt><code>index</code> {{optional_inline}}</dt> <dd>처리할 현재 요소의 인덱스.</dd> <dt><code>array</code> {{optional_inline}}</dt> - <dd><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">forEach()</span></font>를 호출한 배열.</dd> + <dd><code>forEach()</code>를 호출한 배열.</dd> </dl> </dd> <dt><code>thisArg</code> {{optional_inline}}</dt> @@ -61,7 +61,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach <p><code>forEach()</code>로 처리할 요소의 범위는 최초 <code>callback</code> 호출 전에 설정됩니다. <code>forEach()</code> 호출을 시작한 뒤 배열에 추가한 요소는 <code>callback</code>이 방문하지 않습니다. 배열의 기존 요소값이 바뀐 경우, <code>callback</code>에 전달하는 값은 <code>forEach()</code>가 요소를 방문한 시점의 값을 사용합니다. 방문하기 전에 삭제한 요소는 방문하지 않습니다.</p> -<p><code>forEach()</code>는 각 배열 요소에 대해 한 번씩 <code>callback</code> 함수를 실행합니다. {{jsxref("Array.prototype.map()", "map()")}}과 {{jsxref("Array.prototype.reduce()", "reduce()")}}와는 달리 {{jsxref("undefined")}}를 반환하기 때문에 메서드 체인의 중간에 사용할 수 없습니다. 대표적인 사용처는 메서드 체인 끝에서 부작용<sup>side effect</sup>을 실행하는 겁니다.</p> +<p><code>forEach()</code>는 각 배열 요소에 대해 한 번씩 <code>callback</code> 함수를 실행합니다. {{jsxref("Array.prototype.map()", "map()")}}과 {{jsxref("Array.prototype.reduce()", "reduce()")}}와는 달리 {{jsxref("undefined")}}를 반환하기 때문에 메서드 체인의 중간에 사용할 수 없습니다. 대표적인 사용처는 메서드 체인 끝에서 부작용(side effect)을 실행하는 겁니다.</p> <p><code>forEach()</code>는 배열을 변형하지 않습니다. 그러나 <code>callback</code>이 변형할 수는 있습니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/array/from/index.html b/files/ko/web/javascript/reference/global_objects/array/from/index.html index 537384cf56..1f0a5776ba 100644 --- a/files/ko/web/javascript/reference/global_objects/array/from/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/from/index.html @@ -18,12 +18,12 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/from -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox">Array.from(<em>arrayLike</em>[, <em>mapFn</em>[, <em>thisArg</em>]]) </pre> -<h3 id="Parameters" name="Parameters"><span>매개변수</span></h3> +<h3 id="Parameters"><span>매개변수</span></h3> <dl> <dt><code>arrayLike</code></dt> @@ -38,7 +38,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/from <p>새로운 {{jsxref("Array")}} 인스턴스.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p>다음과 같은 경우에 <code>Array.from()</code>으로새<code>Array</code>를 만들 수 있습니다.</p> @@ -126,7 +126,7 @@ range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x <h2 id="폴리필">폴리필</h2> -<p><code><font face="consolas, Liberation Mono, courier, monospace">Array.from</font></code>은 ECMA-262 표준 제6판에 추가됐습니다.따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도<code>Array.from</code>을 사용할 수 있습니다. 아래 알고리즘은<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object" title="객체(object) 생성자(constructor)는 객체 레퍼(wrapper)를 생성합니다."><code>Object</code></a>와<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError" title="TypeError 객체는 변수의 값이 원하는 타입이 아닐 때 발생하는 에러를 표현합니다."><code>TypeError</code></a>가 변형되지 않고,<code>callback.call</code>의 계산 값이 원래의<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다."><code>Function.prototype.call()</code></a>과 같은 경우ECMA-262 제6판이 명시한 것과 동일합니다.<span style="letter-spacing: -0.00278rem;">또한 반복가능자(iterable)는 완벽하게 폴리필 할 수 없기에 본 구현은 ECMA-262 제6판의 제네릭 반복가능자를 지원하지 않습니다.</span></p> +<p><code>Array.from</code>은 ECMA-262 표준 제6판에 추가됐습니다.따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도<code>Array.from</code>을 사용할 수 있습니다. 아래 알고리즘은<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>와<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>가 변형되지 않고,<code>callback.call</code>의 계산 값이 원래의<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call()</code></a>과 같은 경우ECMA-262 제6판이 명시한 것과 동일합니다. 또한 반복가능자(iterable)는 완벽하게 폴리필 할 수 없기에 본 구현은 ECMA-262 제6판의 제네릭 반복가능자를 지원하지 않습니다.</p> <pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1 if (!Array.from) { @@ -235,7 +235,7 @@ if (!Array.from) { <p>{{Compat("javascript.builtins.Array.from")}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Array")}}</li> diff --git a/files/ko/web/javascript/reference/global_objects/array/includes/index.html b/files/ko/web/javascript/reference/global_objects/array/includes/index.html index a646fd3bb4..6efcd759d6 100644 --- a/files/ko/web/javascript/reference/global_objects/array/includes/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/includes/index.html @@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes <h3 id="매개변수">매개변수</h3> <dl> - <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">valueToFind</span></font></dt> + <dt><code>valueToFind</code></dt> <dd>탐색할 요소. <div class="blockIndicator note"> <p><strong>참고</strong>: 문자나 문자열을 비교할 때, <code>includes()</code>는 <strong>대소문자를 구분</strong>합니다.</p> @@ -60,7 +60,7 @@ arr.includes('c', 100); // false</pre> <h3 id="0보다_작은_인덱스의_계산">0보다 작은 인덱스의 계산</h3> -<p><code>fromIndex</code> 가 음수라면, 이 계산된 인덱스는 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">valueToFind</span></font> 를 찾기 시작할 배열의 위치로 사용되기 위해 연산됩니다. 만약 계산된 인덱스가 <code>-1 * array.length</code> 보다 작거나 같다면, 전체 배열이 검색될 것입니다.</p> +<p><code>fromIndex</code> 가 음수라면, 이 계산된 인덱스는 <code>valueToFind</code> 를 찾기 시작할 배열의 위치로 사용되기 위해 연산됩니다. 만약 계산된 인덱스가 <code>-1 * array.length</code> 보다 작거나 같다면, 전체 배열이 검색될 것입니다.</p> <pre class="brush: js">// array length is 3 // fromIndex is -100 diff --git a/files/ko/web/javascript/reference/global_objects/array/length/index.html b/files/ko/web/javascript/reference/global_objects/array/length/index.html index b241e88045..2a0a48b3d1 100644 --- a/files/ko/web/javascript/reference/global_objects/array/length/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/length/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/length <h2 id="설명">설명</h2> -<p><code>length</code> 속성의 값은 양의 정수이며 2<sup>32</sup> 미만의 값을 가집니다.</p> +<p><code>length</code> 속성의 값은 양의 정수이며 2^32 미만의 값을 가집니다.</p> <pre class="brush: js line-numbers language-js">var namelistA = new Array(4294967296); // 2의 32제곱 = 4294967296 var namelistC = new Array(-100) // 음수 diff --git a/files/ko/web/javascript/reference/global_objects/array/map/index.html b/files/ko/web/javascript/reference/global_objects/array/map/index.html index b3f494a8e3..92b0776460 100644 --- a/files/ko/web/javascript/reference/global_objects/array/map/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/map/index.html @@ -17,11 +17,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/map <p>{{EmbedInteractiveExample("pages/js/array-map.html")}}</p> -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox"><code><var>arr</var>.map(<var>callback(currentValue</var>[, index[, array]])[, <var>thisArg</var>])</code></pre> -<h3 id="Parameters" name="Parameters">매개변수</h3> +<h3 id="Parameters">매개변수</h3> <dl> <dt><code>callback</code></dt> @@ -44,13 +44,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/map <p>배열의 각 요소에 대해 실행한 <code>callback</code>의 결과를 모은 새로운 배열.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p><code>map</code>은 <code>callback</code> 함수를 <strong>각각의 요소에 대해 한번씩 </strong>순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다. <code>callback</code> 함수는 ({{jsxref("undefined")}}도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다.</p> -<p><code>callback</code> 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 <code>map</code>을 호출한 원본 배열<span style="font-family: courier,andale mono,monospace;"> </span>3개의 인수를 전달받습니다.</p> +<p><code>callback</code> 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 <code>map</code>을 호출한 원본 배열 3개의 인수를 전달받습니다.</p> -<p><code>thisArg</code> 매개변수가 <code>map</code>에 전달된 경우 <code>callback</code> 함수의 <code>this</code>값으로 사용됩니다. 그 외의 경우 {{jsxref("undefined")}}값이 <code>this</code> 값으로 사용됩니다.<font face="Consolas, Liberation Mono, Courier, monospace"> </font><code>callback</code> 함수에서 최종적으로 볼 수 있는 <code>this</code> 값은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">함수 내 <code>this</code>를 정하는 일반적인 규칙</a>에 따라 결정됩니다.</p> +<p><code>thisArg</code> 매개변수가 <code>map</code>에 전달된 경우 <code>callback</code> 함수의 <code>this</code>값으로 사용됩니다. 그 외의 경우 {{jsxref("undefined")}}값이 <code>this</code> 값으로 사용됩니다. <code>callback</code> 함수에서 최종적으로 볼 수 있는 <code>this</code> 값은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">함수 내 <code>this</code>를 정하는 일반적인 규칙</a>에 따라 결정됩니다.</p> <p><code>map</code>은 호출한 배열의 값을 변형하지 않습니다. 단, <code>callback</code> 함수에 의해서 변형될 수는 있습니다.</p> @@ -58,7 +58,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/map <p>명세서에 정의된 알고리즘으로 인해 <code>map</code>을 호출한 배열의 중간이 비어있는 경우, 결과 배열 또한 동일한 인덱스를 빈 값으로 유지합니다.</p> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">배열에 들어있는 숫자들의 제곱근을 구하여 새로운 배열을 만들기</h3> @@ -158,9 +158,9 @@ function returnInt(element) { ['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300] </pre> -<h2 id="Polyfill" name="Polyfill">폴리필</h2> +<h2 id="Polyfill">폴리필</h2> -<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">map</span></font>은 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <code>map</code>을 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Array")}}가 변형되지 않고, <code>callback.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> +<p><code>map</code>은 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <code>map</code>을 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Array")}}가 변형되지 않고, <code>callback.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> <pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19 // Reference: http://es5.github.io/#x15.4.4.19 @@ -253,7 +253,7 @@ if (!Array.prototype.map) { } </pre> -<h2 id="Specifications" name="Specifications">명세</h2> +<h2 id="Specifications">명세</h2> <table class="standard-table"> <tbody> @@ -280,11 +280,11 @@ if (!Array.prototype.map) { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <div>{{Compat("javascript.builtins.Array.map")}}</div> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Array.prototype.forEach()")}}</li> diff --git a/files/ko/web/javascript/reference/global_objects/array/of/index.html b/files/ko/web/javascript/reference/global_objects/array/of/index.html index 9504e986ab..6aeba4a566 100644 --- a/files/ko/web/javascript/reference/global_objects/array/of/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/of/index.html @@ -22,11 +22,11 @@ Array(7); // [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3] </pre> -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre> -<h3 id="Parameters" name="Parameters">매개변수</h3> +<h3 id="Parameters">매개변수</h3> <dl> <dt><code>element<em>N</em></code></dt> @@ -37,18 +37,18 @@ Array(1, 2, 3); // [1, 2, 3] <p>새로운 {{jsxref("Array")}} 객체.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p>이 함수는 ECMAScript 2015 표준 일부입니다. 자세한 정보는 <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code>, <code>Array.from</code> 제안 사항</a>과 <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> 폴리필</a>에서 확인하실 수 있습니다.</p> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <pre class="brush: js">Array.of(1); // [1] Array.of(1, 2, 3); // [1, 2, 3] Array.of(undefined); // [undefined] </pre> -<h2 id="Polyfill" name="Polyfill">폴리필</h2> +<h2 id="Polyfill">폴리필</h2> <p>아래 코드를 다른 코드 이전에 포함하면 <code>Array.of</code>를 지원하지 않는 환경에서도 사용할 수 있습니다.</p> @@ -59,7 +59,7 @@ Array.of(undefined); // [undefined] } </pre> -<h2 id="Specifications" name="Specifications">명세</h2> +<h2 id="Specifications">명세</h2> <table class="standard-table"> <thead> @@ -93,7 +93,7 @@ Array.of(undefined); // [undefined] <p>{{Compat("javascript.builtins.Array.of")}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Array")}}</li> diff --git a/files/ko/web/javascript/reference/global_objects/array/reduce/index.html b/files/ko/web/javascript/reference/global_objects/array/reduce/index.html index bd3516865e..ead8d56505 100644 --- a/files/ko/web/javascript/reference/global_objects/array/reduce/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/reduce/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce <p><strong>리듀서</strong> 함수는 네 개의 인자를 가집니다.</p> <ol> - <li>누산기<sup>accumulator</sup> (acc)</li> + <li>누산기 (acc)</li> <li>현재 값 (cur)</li> <li>현재 인덱스 (idx)</li> <li>원본 배열 (src)</li> @@ -41,7 +41,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce <dd> <dl> <dt><code>accumulator</code></dt> - <dd>누산기<sup>accmulator</sup>는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 <code>initialValue</code>를 제공한 경우에는 <code>initialValue</code>의 값입니다.</dd> + <dd>누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 <code>initialValue</code>를 제공한 경우에는 <code>initialValue</code>의 값입니다.</dd> <dt><code>currentValue</code></dt> <dd>처리할 현재 요소.</dd> <dt><code>currentIndex</code> {{optional_inline}}</dt> @@ -260,7 +260,7 @@ var sum = [{x: 1}, {x:2}, {x:3}].reduce( console.log(sum) // logs 6</pre> -<h3 id="중첩_배열_펼치기flatten">중첩 배열 펼치기<sup>flatten</sup></h3> +<h3 id="중첩_배열_펼치기flatten">중첩 배열 펼치기</h3> <pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( function(accumulator, currentValue) { diff --git a/files/ko/web/javascript/reference/global_objects/array/reverse/index.html b/files/ko/web/javascript/reference/global_objects/array/reverse/index.html index 95b4c1a348..d9b08aaa8c 100644 --- a/files/ko/web/javascript/reference/global_objects/array/reverse/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/reverse/index.html @@ -6,6 +6,7 @@ tags: - JavaScript - Method - Prototype +browser-compat: javascript.builtins.Array.reverse translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse --- <div>{{JSRef}}</div> @@ -72,11 +73,7 @@ console.log(a); // [3, 2, 1]</code></pre> <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div>{{Compat("javascript.builtins.Array.reverse")}}</div> - -<div id="compat-desktop"> </div> - -<div id="compat-mobile"> </div> +<div>{{Compat}}</div> <h2 id="같이_보기">같이 보기</h2> diff --git a/files/ko/web/javascript/reference/global_objects/array/some/index.html b/files/ko/web/javascript/reference/global_objects/array/some/index.html index 8fbe19bcda..38283bdd1b 100644 --- a/files/ko/web/javascript/reference/global_objects/array/some/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/some/index.html @@ -130,7 +130,7 @@ getBoolean('true'); // true</pre> <h2 id="폴리필">폴리필</h2> -<p><code><font face="consolas, Liberation Mono, courier, monospace">some</font></code>은 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 환경에서도 <code>some</code>을 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}와 {{jsxref("TypeError")}}가 변형되지 않고, <code>fun.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> +<p><code>some</code>은 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 환경에서도 <code>some</code>을 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}와 {{jsxref("TypeError")}}가 변형되지 않고, <code>fun.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> <pre class="brush: js">// ECMA-262 5판, 15.4.4.17항의 작성 과정 // 출처: http://es5.github.io/#x15.4.4.17 diff --git a/files/ko/web/javascript/reference/global_objects/array/sort/index.html b/files/ko/web/javascript/reference/global_objects/array/sort/index.html index ddab9a428f..376c9afd96 100644 --- a/files/ko/web/javascript/reference/global_objects/array/sort/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/sort/index.html @@ -6,6 +6,7 @@ tags: - JavaScript - Method - Prototype +browser-compat: javascript.builtins.Array.sort translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort --- <div>{{JSRef}}</div> @@ -233,9 +234,7 @@ var result = mapped.map(function(el){ <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div>{{Compat("javascript.builtins.Array.sort")}}</div> - -<div id="compat-mobile"></div> +<div>{{Compat}}</div> <h2 id="같이_보기">같이 보기</h2> diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html index 8b5b0cd361..0b62cc1857 100644 --- a/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html +++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html @@ -92,6 +92,6 @@ const view = new Int32Array(buffer);</pre> <h2 id="같이_보기">같이 보기</h2> <ul> - <li><a href="/ko/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript 형식화 배열</a></li> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> <li>{{jsxref("SharedArrayBuffer")}}</li> </ul> diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html index c68d5e0ef3..c8ce643216 100644 --- a/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html +++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html @@ -72,5 +72,5 @@ ArrayBuffer.isView(dv); // true <h2 id="같이_보기">같이 보기</h2> <ul> - <li><a href="/ko/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript 형식화 배열</a></li> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> </ul> diff --git a/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html b/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html index dae782e412..52e4f2e886 100644 --- a/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html +++ b/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html @@ -36,9 +36,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction <div class="note"> <p><strong>주의:</strong> <code>AsyncFunction</code> 생성자로 만들어진 {{jsxref("Statements/async_function", "async functions")}} 객체는 클로저를 생성 컨텍스트에 만들지 않는다; 이 객체들은 항상 전역 범위에서 생성됩니다. </p> -<p><font><font>이객체들을 실행할 때, </font></font><code>AsyncFunction</code><font><font>생성자가 호출 </font><font>된 범위의 변수가 아니라 자신의 지역 변수와 전역 변수에만 액세스 할 수 있습니다 </font><font>.</font></font></p> +<p>이 객체들을 실행할 때, <code>AsyncFunction</code>생성자가 호출된 범위의 변수가 아니라 자신의 지역 변수와 전역 변수에만 액세스 할 수 있습니다.</p> -<p><font><font>이것은 비동기 함수 표현식을위한 코드와 함께 {{jsxref ( "Global_Objects / eval", "eval")}}을 사용하는 것과 다릅니다.</font></font></p> +<p>이것은 비동기 함수 표현식을위한 코드와 함께 {{jsxref ( "Global_Objects/eval", "eval")}}을 사용하는 것과 다릅니다.</p> </div> <p><code>AsyncFunction</code> 생성자를 (<code>new</code> 연산자를 사용하지 않고) 함수로 호출하는 것과 생성자로 동작시키는 것은 동일하다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/bigint/index.html b/files/ko/web/javascript/reference/global_objects/bigint/index.html index 22ce105c2e..d562b2cdbc 100644 --- a/files/ko/web/javascript/reference/global_objects/bigint/index.html +++ b/files/ko/web/javascript/reference/global_objects/bigint/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/BigInt --- <div>{{JSRef}}</div> -<p><strong><code>BigInt</code></strong>는 {{jsxref("Number")}} 원시 값이 안정적으로 나타낼 수 있는 최대치인 2<sup>53</sup> - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다.</p> +<p><strong><code>BigInt</code></strong>는 {{jsxref("Number")}} 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다.</p> <h2 id="설명">설명</h2> @@ -179,9 +179,9 @@ Boolean(12n) <dl> <dt>{{jsxref("BigInt.asIntN()")}}</dt> - <dd>주어진 <code>BigInt</code>를 <code>-2<sup>width-1</sup></code>과 <code>2<sup>width-1</sup> - 1</code>의 범위로 자릅니다.</dd> + <dd>주어진 <code>BigInt</code>를 <code>-2^(width - 1)</code>과 <code>2^(width - 1) - 1</code>의 범위로 자릅니다.</dd> <dt>{{jsxref("BigInt.asUintN()")}}</dt> - <dd>주어진 <code>BigInt</code>를 <code>0</code>과 <code>2<sup>width</sup> - 1</code>의 범위로 자릅니다.</dd> + <dd>주어진 <code>BigInt</code>를 <code>0</code>과 <code>2^width - 1</code>의 범위로 자릅니다.</dd> </dl> <h2 id="인스턴스_메서드">인스턴스 메서드</h2> @@ -199,7 +199,7 @@ Boolean(12n) <h3 id="변환">변환</h3> -<p><code>BigInt</code>를 {{jsxref("Number")}}로 변환하는 과정에서 정확도를 유실할 수 있으므로, 2<sup>53</sup>보다 큰 값을 예상할 수 있는 경우 <code>BigInt</code>만 사용하는 것이 좋습니다.</p> +<p><code>BigInt</code>를 {{jsxref("Number")}}로 변환하는 과정에서 정확도를 유실할 수 있으므로, 2^53보다 큰 값을 예상할 수 있는 경우 <code>BigInt</code>만 사용하는 것이 좋습니다.</p> <h3 id="암호화">암호화</h3> diff --git a/files/ko/web/javascript/reference/global_objects/date/getdate/index.html b/files/ko/web/javascript/reference/global_objects/date/getdate/index.html index fdacc321cf..e669ebb1ae 100644 --- a/files/ko/web/javascript/reference/global_objects/date/getdate/index.html +++ b/files/ko/web/javascript/reference/global_objects/date/getdate/index.html @@ -29,7 +29,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate <h3 id="getDate()_사용하기"><code>getDate()</code> 사용하기</h3> -<p>아래 코드의 두 번째 명령문은 <code>Xmas95</code>의 값에 기반하여 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">day</span></font>에 2를 할당합니다.</p> +<p>아래 코드의 두 번째 명령문은 <code>Xmas95</code>의 값에 기반하여 <code>day</code>에 2를 할당합니다.</p> <pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); var day = Xmas95.getDate(); diff --git a/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html b/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html index 48fe002a99..d4bcf4b613 100644 --- a/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html +++ b/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html @@ -86,7 +86,7 @@ console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95)); <p>{{Compat("javascript.builtins.Date.getMonth")}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li> diff --git a/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html b/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html index 1ded363e99..d8eaec04b9 100644 --- a/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html +++ b/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html @@ -1,6 +1,7 @@ --- title: Date.prototype.toDateString() slug: Web/JavaScript/Reference/Global_Objects/Date/toDateString +browser-compat: javascript.builtins.Date.toDateString translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString --- <div>{{JSRef}}</div> @@ -67,11 +68,7 @@ console.log(d.toDateString()); // logs Wed Jul 28 1993 <h2 id="브라우저_호환성">브라우저 호환성</h2> -<p>{{Compat("javascript.builtins.Date.toDateString")}}</p> - -<div> </div> - -<div id="compat-mobile"> </div> +<p>{{Compat}}</p> <h2 id="See_also">See also</h2> diff --git a/files/ko/web/javascript/reference/global_objects/error/index.html b/files/ko/web/javascript/reference/global_objects/error/index.html index b82f5dbbea..70b5662564 100644 --- a/files/ko/web/javascript/reference/global_objects/error/index.html +++ b/files/ko/web/javascript/reference/global_objects/error/index.html @@ -17,7 +17,7 @@ browser-compat: javascript.builtins.Error 아래 표준 내장 오류 유형을 참고하세요. </p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p>런타임 오류는 새로운 <code>Error</code> 객체를 생성하고 던집니다.</p> @@ -129,7 +129,7 @@ browser-compat: javascript.builtins.Error </dd> </dl> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <h3 id="Example:_Throwing_a_generic_error" @@ -281,7 +281,7 @@ try { } </pre> -<h2 id="Specification" name="Specification">명세</h2> +<h2 id="Specification">명세</h2> {{Specifications}} @@ -289,7 +289,7 @@ try { <p>{{Compat}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Error.prototype")}}</li> diff --git a/files/ko/web/javascript/reference/global_objects/eval/index.html b/files/ko/web/javascript/reference/global_objects/eval/index.html index f7acb577ce..52ec8665e2 100644 --- a/files/ko/web/javascript/reference/global_objects/eval/index.html +++ b/files/ko/web/javascript/reference/global_objects/eval/index.html @@ -122,7 +122,7 @@ console.log(runCodeWithDateFunction( <p>위 코드는 삼중 중첩 함수를 사용하기 때문에 매우 비효율적으로 보일 수 있지만, 이 방법의 이점을 우선 살펴봅시다.</p> -<p>1. <code>runCodeWithDateFunction</code>에 문자열로 전달된 코드를 최소화<sup>minify</sup>할 수 있다.</p> +<p>1. <code>runCodeWithDateFunction</code>에 문자열로 전달된 코드를 최소화할 수 있다.</p> <p>2. Function call overhead is minimal, making the far smaller code size well worth the benefit</p> @@ -147,7 +147,7 @@ var propname = getPropName(); // "a" 또는 "b"를 반환 eval( "var result = obj." + propname ); </pre> -<p>그러나 여기에서 <code>eval()</code>을 쓸 필요가 없고, 지양되어야 합니다. 그 대신 훨씬 빠르고 안전한 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">속성 접근자</a>를 사용하여야 합니다.</p> +<p>그러나 여기에서 <code>eval()</code>을 쓸 필요가 없고, 지양되어야 합니다. 그 대신 훨씬 빠르고 안전한 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a>를 사용하여야 합니다.</p> <pre class="brush:js notranslate">var obj = { a: 20, b: 30 }; var propname = getPropName(); // "a" 또는 "b"를 반환 @@ -200,21 +200,21 @@ setTimeout(function() { ... }, 1000); // elt.setAttribute("onclick", "...") 대신에 elt.addEventListener("click", function() { ... } , false); </pre> -<p>또한 <a href="/en-US/docs/Web/JavaScript/Closures" title="JavaScript/Guide/Closures">클로저</a>를 이용해 문자열을 합치는 등의 연산 없이 매개변수화된 함수를 생성할 수 있습니다.</p> +<p>또한 <a href="/en-US/docs/Web/JavaScript/Closures">클로저</a>를 이용해 문자열을 합치는 등의 연산 없이 매개변수화된 함수를 생성할 수 있습니다.</p> <h3 id="JSON_파싱_문자열을_JavaScript_객체로_변환">JSON 파싱 (문자열을 JavaScript 객체로 변환)</h3> -<p><code>eval()</code>을 호출하려는 문자열에 코드가 아니라 데이터가 포함되어 있다면(예를 들어 <code>"[1, 2, 3]"</code>과 같은 배열), 대신 JavaScript의 문법 일부를 이용해 문자열로 데이터를 표현할 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="JSON">JSON</a>을 사용하는 것을 고려해 보세요. <a href="/en-US/docs/Downloading_JSON_and_JavaScript_in_extensions" title="Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a>도 참고해 보세요.</p> +<p><code>eval()</code>을 호출하려는 문자열에 코드가 아니라 데이터가 포함되어 있다면(예를 들어 <code>"[1, 2, 3]"</code>과 같은 배열), 대신 JavaScript의 문법 일부를 이용해 문자열로 데이터를 표현할 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a>을 사용하는 것을 고려해 보세요. <a href="/en-US/docs/Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a>도 참고해 보세요.</p> -<p>JSON 문법은 JavaScript 문법에 비해 제약이 있기 때문에, 유효한 JavaScript 리터럴이 JSON으로 변환되지 않는 경우도 있습니다. 예를 들어, JSON에서는 배열이나 객체를 콤마로 끝낼 수 없고, 객체 리터럴에서 속성명(키)은 반드시 따옴표로 감싸야 합니다. 나중에 JSON으로 파싱할 문자열을 생성할 때는 JSON 직렬 변환기<sup>JSON serializer</sup>를 사용하여야 합니다.</p> +<p>JSON 문법은 JavaScript 문법에 비해 제약이 있기 때문에, 유효한 JavaScript 리터럴이 JSON으로 변환되지 않는 경우도 있습니다. 예를 들어, JSON에서는 배열이나 객체를 콤마로 끝낼 수 없고, 객체 리터럴에서 속성명(키)은 반드시 따옴표로 감싸야 합니다. 나중에 JSON으로 파싱할 문자열을 생성할 때는 JSON 직렬 변환기를 사용하여야 합니다.</p> <h3 id="코드_대신_데이터_전달하기">코드 대신 데이터 전달하기</h3> -<p>예를 들어, 웹 페이지의 내용을 추출하는 확장 프로그램은 JavaScript 코드 대신 <a href="/ko/docs/XPath" title="XPath">XPath</a>에 스크랩 규칙을 정의할 수 있습니다.</p> +<p>예를 들어, 웹 페이지의 내용을 추출하는 확장 프로그램은 JavaScript 코드 대신 <a href="/ko/docs/XPath">XPath</a>에 스크랩 규칙을 정의할 수 있습니다.</p> <h3 id="제한된_권한으로_코드_실행하기">제한된 권한으로 코드 실행하기</h3> -<p>제3자 코드를 실행해야 할 때는 제한된 권한으로 실행하는 것을 고려해야 합니다. 이는 주로 확장 프로그램이나 XUL 어플리케이션에 적용되며, 이때 <a href="/en-US/docs/Components.utils.evalInSandbox" title="Components.utils.evalInSandbox">Components.utils.evalInSandbox</a>를 사용할 수 있습니다.</p> +<p>제3자 코드를 실행해야 할 때는 제한된 권한으로 실행하는 것을 고려해야 합니다. 이는 주로 확장 프로그램이나 XUL 어플리케이션에 적용되며, 이때 <a href="/en-US/docs/Components.utils.evalInSandbox">Components.utils.evalInSandbox</a>를 사용할 수 있습니다.</p> <h2 id="예제">예제</h2> @@ -268,9 +268,7 @@ var fct1 = eval(fctStr1) // undefined를 반환 var fct2 = eval(fctStr2) // 함수를 반환 </pre> -<h2 id="sect1"></h2> - -<h2 id="브라우저_호환성"><span style="">브라우저 호환성</span></h2> +<h2 id="브라우저_호환성">브라우저 호환성</h2> <p>{{Compat("javascript.builtins.eval")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/function/apply/index.html b/files/ko/web/javascript/reference/global_objects/function/apply/index.html index 2c437e1f24..8232d9444e 100644 --- a/files/ko/web/javascript/reference/global_objects/function/apply/index.html +++ b/files/ko/web/javascript/reference/global_objects/function/apply/index.html @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply <p>지정한 <strong><code>this</code></strong> 값과 인수들로 호출한 함수의 결과.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p>이미 존재하는 함수를 호출할 때 다른 <code>this</code> 객체를 할당할 수 있습니다. <code>this</code> 는 현재 객체, 호출하는 객체를 참조합니다. <code>apply</code> 를 사용해, 새로운 객체마다 메소드를 재작성할 필요없이 한 번만 작성해 다른 객체에 상속시킬 수 있습니다.</p> @@ -51,7 +51,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply <div class="blockIndicator note">Chrome 14와 Internet Explorer 9를 포함한 대부분의 브라우저는 아직 유사배열객체를 apply에 사용할 수 없으며 오류가 출력됩니다.</div> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <h3 id="Example_Using_apply_to_chain_constructors" name="Example:_Using_apply_to_chain_constructors">배열에 배열을 붙이기 위해 <code>apply</code> 사용하기</h3> diff --git a/files/ko/web/javascript/reference/global_objects/function/bind/index.html b/files/ko/web/javascript/reference/global_objects/function/bind/index.html index d4d0b79681..c55cda7bc5 100644 --- a/files/ko/web/javascript/reference/global_objects/function/bind/index.html +++ b/files/ko/web/javascript/reference/global_objects/function/bind/index.html @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind <dl> <dt><code>thisArg</code></dt> - <dd>바인딩<span style="font-size: 13.3333px;"> </span>함수가 대상 함수(target function)의 <code>this</code>에 전달하는 값입니다. 바인딩 함수를 {{jsxref("Operators/new", "new")}} 연산자로 생성한 경우 무시됩니다. <code>bind</code>를 사용하여 <code>setTimeout</code> 내에 콜백 함수를 만들 때, <code>thisArg</code>로 전달된 원시 값은 객체로 변환됩니다. <code>bind</code>할 인수(argument)가 제공되지 않으면 실행 스코프 내의 <code>this</code>는 새로운 함수의 <code>thisArg</code>로 처리됩니다.</dd> + <dd>바인딩 함수가 대상 함수(target function)의 <code>this</code>에 전달하는 값입니다. 바인딩 함수를 {{jsxref("Operators/new", "new")}} 연산자로 생성한 경우 무시됩니다. <code>bind</code>를 사용하여 <code>setTimeout</code> 내에 콜백 함수를 만들 때, <code>thisArg</code>로 전달된 원시 값은 객체로 변환됩니다. <code>bind</code>할 인수(argument)가 제공되지 않으면 실행 스코프 내의 <code>this</code>는 새로운 함수의 <code>thisArg</code>로 처리됩니다.</dd> <dt><code>arg1, arg2, ...</code></dt> <dd>대상 함수의 인수 앞에 사용될 인수.</dd> </dl> @@ -36,7 +36,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind <h2 id="설명">설명</h2> -<p><code>bind()</code> 함수는 새로운 바인딩한 함수를 만듭니다. 바인딩한 함수는 원본 함수 객체를 감싸는 함수로, ECMAScript 2015에서 말하는 특이 함수 객체<sup>exotic function object</sup>입니다. 바인딩한 함수를 호출하면 일반적으로 래핑된 함수가 호출 됩니다.</p> +<p><code>bind()</code> 함수는 새로운 바인딩한 함수를 만듭니다. 바인딩한 함수는 원본 함수 객체를 감싸는 함수로, ECMAScript 2015에서 말하는 특이 함수 객체(exotic function object)입니다. 바인딩한 함수를 호출하면 일반적으로 래핑된 함수가 호출 됩니다.</p> <p>바인딩한 함수는 다음과 같은 내부 속성을 가지고 있습니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/function/index.html b/files/ko/web/javascript/reference/global_objects/function/index.html index 5d7dde941a..4eea5145e5 100644 --- a/files/ko/web/javascript/reference/global_objects/function/index.html +++ b/files/ko/web/javascript/reference/global_objects/function/index.html @@ -76,7 +76,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function <dt>{{jsxref("Function.prototype.call()")}}</dt> <dd>함수를 호출(실행)하고 <em>this</em>를 제공된 값으로 설정합니다, 인수는 그대로 전달될 수 있습니다.</dd> <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> - <dd>함수가 <a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators" title="generator">생성기</a>인 경우 <code>true</code>를 반환합니다; 그렇지 않으면 <code>false</code>를 반환합니다.</dd> + <dd>함수가 <a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators">생성기</a>인 경우 <code>true</code>를 반환합니다; 그렇지 않으면 <code>false</code>를 반환합니다.</dd> <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> <dd>함수의 소스 코드를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toSource")}} 메서드를 재정의(override)합니다.</dd> <dt>{{jsxref("Function.prototype.toString()")}}</dt> diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/index.html b/files/ko/web/javascript/reference/global_objects/intl/locale/index.html index a768a8bb5d..2ea2c72bcb 100644 --- a/files/ko/web/javascript/reference/global_objects/intl/locale/index.html +++ b/files/ko/web/javascript/reference/global_objects/intl/locale/index.html @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale <p>Traditionally, the Intl API used strings to represent locales, just as Unicode does. This is a simple and lightweight solution that works well. Adding a Locale class, however, adds ease of parsing and manipulating the language, script, and region, as well as extension tags.</p> -<p><span style="">The Intl.Locale object has the following properties and methods:</span></p> +<p>The Intl.Locale object has the following properties and methods:</p> <h3 id="Properties">Properties</h3> diff --git a/files/ko/web/javascript/reference/global_objects/isnan/index.html b/files/ko/web/javascript/reference/global_objects/isnan/index.html index a6fed21075..0e76c007d7 100644 --- a/files/ko/web/javascript/reference/global_objects/isnan/index.html +++ b/files/ko/web/javascript/reference/global_objects/isnan/index.html @@ -5,6 +5,7 @@ tags: - JavaScript - Method - Reference +browser-compat: javascript.builtins.isNaN translation_of: Web/JavaScript/Reference/Global_Objects/isNaN --- <div>{{jsSidebar("Objects")}}</div> @@ -180,7 +181,7 @@ isNaN() == isNaN(Number()) // 거짓, isNaN() == true 및 Number() == 0 때문 <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div id="compat-mobile">{{Compat("javascript.builtins.isNaN")}}</div> +<div>{{Compat}}</div> <h2 id="같이_보기">같이 보기</h2> diff --git a/files/ko/web/javascript/reference/global_objects/math/exp/index.html b/files/ko/web/javascript/reference/global_objects/math/exp/index.html index 567b8d68ab..3582752142 100644 --- a/files/ko/web/javascript/reference/global_objects/math/exp/index.html +++ b/files/ko/web/javascript/reference/global_objects/math/exp/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp --- <div>{{JSRef}}</div> -<p> <strong><code>Math.exp()</code></strong>함수는 <code>x</code>를 인수로 하는 <code>e<sup>x</sup></code> 값을 반환합니다. 그리고 <code>e</code>는 {{jsxref("Math.E", "오일러 상수(또는 네이피어 상수)", "", 1)}}는 자연 로그의 밑입니다.</p> +<p> <strong><code>Math.exp()</code></strong>함수는 <code>x</code>를 인수로 하는 <code>e^x</code> 값을 반환합니다. 그리고 <code>e</code>는 {{jsxref("Math.E", "오일러 상수(또는 네이피어 상수)", "", 1)}}는 자연 로그의 밑입니다.</p> <div>{{EmbedInteractiveExample("pages/js/math-exp.html")}}</div> @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp <h3 id="반환_값">반환 값</h3> -<p><code>e</code>는 {{jsxref("Math.E", "오일러 상수", "", 1)}}이고 <code>x</code>는 인수인 <code>e<sup>x</sup></code>값</p> +<p><code>e</code>는 {{jsxref("Math.E", "오일러 상수", "", 1)}}이고 <code>x</code>는 인수인 <code>e^x</code>값</p> <h2 id="Description">Description</h2> diff --git a/files/ko/web/javascript/reference/global_objects/math/index.html b/files/ko/web/javascript/reference/global_objects/math/index.html index 1bc5902a01..498d413491 100644 --- a/files/ko/web/javascript/reference/global_objects/math/index.html +++ b/files/ko/web/javascript/reference/global_objects/math/index.html @@ -82,7 +82,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}} </dt> <dd>숫자의 쌍곡코사인 값을 반환합니다.</dd> <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt> - <dd>E<sup>x</sup> 를 반환합니다. <var>x</var>는 인수이며 E 는 오일러 상수(<code>2.718</code>...) 또는 자연로그의 밑입니다.</dd> + <dd>E^x 를 반환합니다. <var>x</var>는 인수이며 E 는 오일러 상수(<code>2.718</code>...) 또는 자연로그의 밑입니다.</dd> <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}} </dt> <dd><code>exp(x)</code>에서 <code>1</code>을 뺀 값을 반환합니다.</dd> <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt> @@ -94,9 +94,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}} </dt> <dd>두 32비트 정수의 곱을 반환합니다.</dd> <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt> - <dd>숫자의 자연로그(log<sub>e</sub> 또는 ln) 값을 반환합니다.</dd> + <dd>숫자의 자연로그(e를 밑으로 하는 로그, 즉 ln) 값을 반환합니다.</dd> <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}} </dt> - <dd>숫자 <code>x</code>에 대해 <code>1 + x</code>의 자연로그(log<sub>e</sub> 또는 ln) 값을 반환합니다.</dd> + <dd>숫자 <code>x</code>에 대해 <code>1 + x</code>의 자연로그(e를 밑으로 하는 로그, ln) 값을 반환합니다.</dd> <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}} </dt> <dd>숫자의 밑이 10인 로그를 반환합니다.</dd> <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}} </dt> diff --git a/files/ko/web/javascript/reference/global_objects/math/log2/index.html b/files/ko/web/javascript/reference/global_objects/math/log2/index.html index 86d4f9f3db..12534d1c94 100644 --- a/files/ko/web/javascript/reference/global_objects/math/log2/index.html +++ b/files/ko/web/javascript/reference/global_objects/math/log2/index.html @@ -61,7 +61,7 @@ browser-compat: javascript.builtins.Math.log2 <h3 id="Return_value">반환 값</h3> <p> - 주어진 숫자는 log<sub>2</sub>(숫자)로 계산합니다. 만약 숫자가 + 주어진 숫자를 진수로, 2를 밑으로 하는 로그 계산 결과입니다. 만약 숫자가 음수라면 {{jsxref("NaN")}}를 반환합니다. </p> @@ -81,7 +81,7 @@ browser-compat: javascript.builtins.Math.log2 <p>이 함수는 Math.log(x) / Math.log(2)와 같습니다.</p> -<p>따라서 log<sub>2</sub>(e)는 {{jsxref("Math.LOG2E")}}와 같습니다. </p> +<p>따라서 <code>log2(e)</code>는 {{jsxref("Math.LOG2E")}}와 같습니다. </p> <p>그리고 위 함수는 1 / {{jsxref("Math.LN2")}}과 같습니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/math/pow/index.html b/files/ko/web/javascript/reference/global_objects/math/pow/index.html index 55ea3aa26a..78d729e70e 100644 --- a/files/ko/web/javascript/reference/global_objects/math/pow/index.html +++ b/files/ko/web/javascript/reference/global_objects/math/pow/index.html @@ -11,7 +11,7 @@ browser-compat: javascript.builtins.Math.pow <div>{{JSRef}}</div> -<strong><code>Math.pow()</code></strong>함수는<code>base<sup>exponent</sup></code>처럼 +<strong><code>Math.pow()</code></strong>함수는<code>base^exponent</code>처럼 <code><var>base</var></code> 에 <code><var>exponent</var></code>를 제곱한 값을 반환합니다. <div>{{EmbedInteractiveExample("pages/js/math-pow.html")}}</div> @@ -44,7 +44,7 @@ browser-compat: javascript.builtins.Math.pow <p> <strong><code>Math.pow()</code></strong>함수는 <code><var>base</var></code>의 <code><var>exponent</var></code> - 곱, 즉 <code>base<sup>exponent</sup></code>를 반환합니다. + 곱, 즉 <code>base^exponent</code>를 반환합니다. <code><var>base</var></code>와 <code><var>exponent</var></code>는 10진수입니다. </p> diff --git a/files/ko/web/javascript/reference/global_objects/math/random/index.html b/files/ko/web/javascript/reference/global_objects/math/random/index.html index 2aead8d88a..d030685609 100644 --- a/files/ko/web/javascript/reference/global_objects/math/random/index.html +++ b/files/ko/web/javascript/reference/global_objects/math/random/index.html @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math/random <h3 id="Math.random_사용"><code>Math.random()</code> 사용</h3> -<p>JavaScript의 수(number)는 가까운 짝수로 반올림되는(round-to-nearest-even behavior) IEEE 754 부동소수점 실수이므로, 아래 함수들(<code>Math.random()</code> 자체에 대한 사항은 제외)에 명시된 범위는 정확하지 않음을 유의하라. 지나치게 큰 범위(2<sup>53</sup> 이상)를 선택할 경우, <em>매우</em> 드문 경우 원래 포함되어서는 안 될 최댓값이 포함되는 경우가 있다.</p> +<p>JavaScript의 수(number)는 가까운 짝수로 반올림되는(round-to-nearest-even behavior) IEEE 754 부동소수점 실수이므로, 아래 함수들(<code>Math.random()</code> 자체에 대한 사항은 제외)에 명시된 범위는 정확하지 않음을 유의하라. 지나치게 큰 범위(2^53 이상)를 선택할 경우, <em>매우</em> 드문 경우 원래 포함되어서는 안 될 최댓값이 포함되는 경우가 있다.</p> <h3 id="0_이상_1_미만의_난수_생성하기">0 이상 1 미만의 난수 생성하기</h3> diff --git a/files/ko/web/javascript/reference/global_objects/math/sign/index.html b/files/ko/web/javascript/reference/global_objects/math/sign/index.html index 1a6697e9d8..0d62073b89 100644 --- a/files/ko/web/javascript/reference/global_objects/math/sign/index.html +++ b/files/ko/web/javascript/reference/global_objects/math/sign/index.html @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign <h3 id="반환_값">반환 값</h3> -<p>주어진 인수의 부호를 나타내는 수치. 인수가 양수, 음수, 양수인 영 또는 음수인 영이면, 이 함수는 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">1</span></font>, <code>-1</code>, <code>0,</code> <code>-0</code>을 각각 반환합니다. 그렇지 않으면, {{jsxref("NaN")}} 이 반환됩니다.</p> +<p>주어진 인수의 부호를 나타내는 수치. 인수가 양수, 음수, 양수인 영 또는 음수인 영이면, 이 함수는 <code>1</code>, <code>-1</code>, <code>0,</code> <code>-0</code>을 각각 반환합니다. 그렇지 않으면, {{jsxref("NaN")}} 이 반환됩니다.</p> <h2 id="설명">설명</h2> diff --git a/files/ko/web/javascript/reference/global_objects/nan/index.html b/files/ko/web/javascript/reference/global_objects/nan/index.html index 4e6e3a8c42..e2e4aa9bac 100644 --- a/files/ko/web/javascript/reference/global_objects/nan/index.html +++ b/files/ko/web/javascript/reference/global_objects/nan/index.html @@ -17,11 +17,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/NaN -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p><code>NaN</code>은 전역 객체의 속성입니다. 즉 전역 스코프의 변수입니다.</p> -<p><code>NaN</code>의 초기값은 Not-A-Number(숫자가 아님)로, {{jsxref("Number.NaN")}}의 값과 같습니다. 최신 브라우저에서 <code style="font-style: normal;">NaN</code>은 설정 불가, 쓰기 불가 속성입니다. 그렇지 않다고 하더라도 덮어쓰는건 피하는게 좋습니다.</p> +<p><code>NaN</code>의 초기값은 Not-A-Number(숫자가 아님)로, {{jsxref("Number.NaN")}}의 값과 같습니다. 최신 브라우저에서 <code>NaN</code>은 설정 불가, 쓰기 불가 속성입니다. 그렇지 않다고 하더라도 덮어쓰는건 피하는게 좋습니다.</p> <p><code>NaN</code>을 반환하는 연산에는 다섯 가지 종류가 있습니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html b/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html index 730fd8ae87..9ce1f1f503 100644 --- a/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON <h2 id="설명">설명</h2> -<p>이 <code>EPSILON</code> 속성은 대략 <code>2.2204460492503130808472633361816E-16</code> 또는 <code>2<sup>-52</sup></code>의 값을 갖습니다.</p> +<p>이 <code>EPSILON</code> 속성은 대략 <code>2.2204460492503130808472633361816E-16</code> 또는 <code>2^-52</code>의 값을 갖습니다.</p> <h2 id="예제">예제</h2> diff --git a/files/ko/web/javascript/reference/global_objects/number/index.html b/files/ko/web/javascript/reference/global_objects/number/index.html index 2a2592dcc8..84b12f0926 100644 --- a/files/ko/web/javascript/reference/global_objects/number/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number --- <div>{{JSRef}}</div> -<p><strong><code>Number</code></strong> 객체는 숫자 값으로 작업할 수 있게 해주는 래퍼<sup>wrapper</sup> 객체입니다. <code>Number</code> 객체는 <strong><code>Number()</code> 생성자</strong>를 사용하여 만듭니다. 원시 숫자 자료형은 <strong><code>Number()</code> 함수</strong>를 사용해 생성합니다.</p> +<p><strong><code>Number</code></strong> 객체는 숫자 값으로 작업할 수 있게 해주는 래퍼(wrapper) 객체입니다. <code>Number</code> 객체는 <strong><code>Number()</code> 생성자</strong>를 사용하여 만듭니다. 원시 숫자 자료형은 <strong><code>Number()</code> 함수</strong>를 사용해 생성합니다.</p> <h2 id="구문">구문</h2> @@ -41,11 +41,11 @@ var <em>b</em> = Number('123'); // b === 123은 true <dt>{{jsxref("Number.EPSILON")}}</dt> <dd>두 개의 표현 가능한 숫자 사이의 최소 간격.</dd> <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}}</dt> - <dd>JavaScript에서 안전한 최대 정수. (<code>2<sup>53</sup> - 1</code>)</dd> + <dd>JavaScript에서 안전한 최대 정수. (<code>2^53 - 1</code>)</dd> <dt>{{jsxref("Number.MAX_VALUE")}}</dt> <dd>표현 가능한 가장 큰 양수.</dd> <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}}</dt> - <dd>JavaScript에서 안전한 최소 정수. (<code>-(2<sup>53</sup> - 1)</code>)</dd> + <dd>JavaScript에서 안전한 최소 정수. (<code>-(2^53 - 1)</code>)</dd> <dt>{{jsxref("Number.MIN_VALUE")}}</dt> <dd>표현 가능한 가장 작은 양수. 즉, 0보다 크지만 0에 가장 가까운 양수.</dd> <dt>{{jsxref("Number.NaN")}}</dt> @@ -68,7 +68,7 @@ var <em>b</em> = Number('123'); // b === 123은 true <dt>{{jsxref("Number.isInteger()")}}</dt> <dd>주어진 값이 정수인지 확인합니다.</dd> <dt>{{jsxref("Number.isSafeInteger()")}}</dt> - <dd>주어진 값이 안전한 정수(<code>-(2<sup>53</sup> - 1)</code>과 <code>2<sup>53</sup> - 1</code> 사이의 정수)인지 확인합니다.</dd> + <dd>주어진 값이 안전한 정수(<code>-(2^53 - 1)</code>과 <code>2^53 - 1</code> 사이의 정수)인지 확인합니다.</dd> <dt><s class="obsoleteElement">{{jsxref("Number.toInteger()")}} {{obsolete_inline}}</s></dt> <dd><s class="obsoleteElement">전달 된 값을 평가하고 이를 정수(혹은 {{jsxref("Infinity", "Infinity")}})로 변환하는데 사용되지만, 제거되었습니다.</s></dd> <dt>{{jsxref("Number.parseFloat()")}}</dt> diff --git a/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html b/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html index 8c1af0e54d..b02cdc3a97 100644 --- a/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html @@ -24,9 +24,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger <li>IEEE-754 표현에 맞게 반올림하는 다른 정수의 결과가 아닌 IEEE-754 표현.</li> </ul> -<p>예를 들어, <code>2<sup>53</sup> - 1</code>은 안전한 정수입니다. 이 정수는 정확히 표현될 수 있으며, IEEE-754 반올림 모드에서 다른 정숫값이 이 값을 반올림하지 않습니다. 반면에, <code>2<sup>53</sup></code> 는 안전하지 않은 정수입니다. 이 정수는 정확히 IEEE-754로 표현될 수 있지만, 정수 <code>2<sup>53</sup> + 1</code>은 IEEE-754로 직접 표현될 수 없으며 가까운 수로 반올림하는 것과 0으로 반올림하는 것으로 <code>2<sup>53 </sup></code>을 반올림합니다.</p> +<p>예를 들어, <code>2^53 - 1</code>은 안전한 정수입니다. 이 정수는 정확히 표현될 수 있으며, IEEE-754 반올림 모드에서 다른 정숫값이 이 값을 반올림하지 않습니다. 반면에, <code>2^53</code> 는 안전하지 않은 정수입니다. 이 정수는 정확히 IEEE-754로 표현될 수 있지만, 정수 <code>2^53 + 1</code>은 IEEE-754로 직접 표현될 수 없으며 가까운 수로 반올림하는 것과 0으로 반올림하는 것으로 <code>2^53</code>을 반올림합니다.</p> -<p>안전한 정숫값은 <code>-(2<sup>53</sup> - 1)</code> 부터 <code>2<sup>53</sup> - 1</code> 사이의 모든 정수값으로 구성됩니다.</p> +<p>안전한 정숫값은 <code>-(2^53 - 1)</code> 부터 <code>2^53 - 1</code> 사이의 모든 정수값으로 구성됩니다.</p> <h2 id="구문">구문</h2> diff --git a/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html b/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html index dde69dc41f..428e6b255e 100644 --- a/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER --- <div>{{JSRef}}</div> -<p><strong><code>Number.MAX_SAFE_INTEGER</code></strong> 상수는 JavaScript에서 안전한 최대 정수값을 나타냅니다. (<code>2<sup>53</sup> - 1</code>).</p> +<p><strong><code>Number.MAX_SAFE_INTEGER</code></strong> 상수는 JavaScript에서 안전한 최대 정수값을 나타냅니다. (<code>2^53 - 1</code>).</p> <div>{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}</div> @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER <h2 id="설명">설명</h2> -<p><code>MAX_SAFE_INTEGER</code> 상수는 <code>9007199254740991</code>(9,007,199,254,740,991 또는 약 9000조)의 값을 갖고 있습니다. 이 값의 이유는 JavaScript가 <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a>에 기술된 <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">배정밀도 부동소숫점 형식 숫자체계</a>를 사용하기 때문으로, 이로 인해 <code>-(2<sup>53</sup> - 1)</code>과 <code>2<sup>53</sup> - 1</code> 사이의 수만 안전하게 표현할 수 있습니다.</p> +<p><code>MAX_SAFE_INTEGER</code> 상수는 <code>9007199254740991</code>(9,007,199,254,740,991 또는 약 9000조)의 값을 갖고 있습니다. 이 값의 이유는 JavaScript가 <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a>에 기술된 <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">배정밀도 부동소숫점 형식 숫자체계</a>를 사용하기 때문으로, 이로 인해 <code>-(2^53 - 1)</code>과 <code>2^53 - 1</code> 사이의 수만 안전하게 표현할 수 있습니다.</p> <p>여기서의 안전함이란 정수를 정확하고 올바르게 비교할 수 있음을 의미합니다. 예를 들어 <code>Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2</code>는 참으로 평가되며 이는 수학적으로 올바르지 않습니다. 더 자세한 내용은 {{jsxref("Number.isSafeInteger()")}}를 참고하세요.</p> diff --git a/files/ko/web/javascript/reference/global_objects/number/max_value/index.html b/files/ko/web/javascript/reference/global_objects/number/max_value/index.html index c80ae8f84a..04e389620b 100644 --- a/files/ko/web/javascript/reference/global_objects/number/max_value/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/max_value/index.html @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE <h2 id="설명">설명</h2> -<p><code>MAX_VALUE</code>의 값은 약 <code>1.79E+308</code>, 2<sup>1024</sup>입니다. <code>MAX_VALUE</code>보다 큰 값은 {{jsxref("Infinity")}}로 표현됩니다.</p> +<p><code>MAX_VALUE</code>의 값은 약 <code>1.79E+308</code>, 2^1024입니다. <code>MAX_VALUE</code>보다 큰 값은 {{jsxref("Infinity")}}로 표현됩니다.</p> <p><code>MAX_VALUE</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.MAX_VALUE</code> 형식으로 사용해야 합니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html b/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html index 38ef0f9484..32e7172a66 100644 --- a/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER --- <div>{{JSRef}}</div> -<p><strong><code>Number.MIN_SAFE_INTEGER</code></strong> 상수는 JavaScript에서 안전한 최소 정수값을 나타냅니다. (<code>-(2<sup>53</sup> - 1)</code>)</p> +<p><strong><code>Number.MIN_SAFE_INTEGER</code></strong> 상수는 JavaScript에서 안전한 최소 정수값을 나타냅니다. (<code>-(2^53 - 1)</code>)</p> <div>{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}</div> @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER <h2 id="설명">설명</h2> -<p><code>MIN_SAFE_INTEGER</code> 상수는 <code>-9007199254740991</code>(-9,007,199,254,740,991 또는 약 -9000조)의 값을 갖고 있습니다. 이 값의 이유는 JavaScript가 <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a>에 기술된 <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">배정밀도 부동소숫점 형식 숫자체계</a>를 사용하기 때문으로, 이로 인해 <code>-(2<sup>53</sup> - 1)</code>과 <code>2<sup>53</sup> - 1</code> 사이의 수만 안전하게 표현할 수 있습니다.</p> +<p><code>MIN_SAFE_INTEGER</code> 상수는 <code>-9007199254740991</code>(-9,007,199,254,740,991 또는 약 -9000조)의 값을 갖고 있습니다. 이 값의 이유는 JavaScript가 <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a>에 기술된 <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">배정밀도 부동소숫점 형식 숫자체계</a>를 사용하기 때문으로, 이로 인해 <code>-(2^53 - 1)</code>과 <code>2^53 - 1</code> 사이의 수만 안전하게 표현할 수 있습니다.</p> <p><code>MIN_SAFE_INTEGER</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.MIN_SAFE_INTEGER</code> 형식으로 사용해야 합니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html b/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html index b1012fcdbf..a9aacad926 100644 --- a/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html @@ -29,10 +29,10 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY <li>{{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}를 포함한 아무 음의 수와 <code>POSITIVE_INFINITY</code>를 곱한 결과는 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}입니다.</li> <li>아무 양의 수를 <code>POSITIVE_INFINITY</code>로 나눈 결과는 0입니다.</li> <li>아무 음의 수를 <code>POSITIVE_INFINITY</code>로 나눈 결과는 음의 부호를 가진 0입니다.</li> - <li>0을 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">POSITIVE_INFINITY</span></font>로 나눈 결과는 {{jsxref("NaN")}}입니다.</li> + <li>0을 <code>POSITIVE_INFINITY</code>로 나눈 결과는 {{jsxref("NaN")}}입니다.</li> <li>{{jsxref("NaN")}}에 <code>POSITIVE_INFINITY</code>를 곱한 결과는 {{jsxref("NaN")}}입니다.</li> <li><code>POSITIVE_INFINITY</code>를, {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}를 제외한 아무 음의 수로 나눈 결과는 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}입니다.</li> - <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">POSITIVE_INFINITY<code>를</code></span></font>, <code>POSITIVE_INFINITY</code>를 제외한 아무 양의 수로 나눈 결과는 <code>NEGATIVE_INFINITY</code>입니다.</li> + <li><code>POSITIVE_INFINITY</code>를, <code>POSITIVE_INFINITY</code>를 제외한 아무 양의 수로 나눈 결과는 <code>NEGATIVE_INFINITY</code>입니다.</li> <li><code>POSITIVE_INFINITY</code>를 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}} 또는 <code>POSITIVE_INFINITY</code>로 나눈 결과는 {{jsxref("NaN")}}입니다.</li> </ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/valueof/index.html b/files/ko/web/javascript/reference/global_objects/number/valueof/index.html index 344fa96ca2..a2fc8d883d 100644 --- a/files/ko/web/javascript/reference/global_objects/number/valueof/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/valueof/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf --- <div>{{JSRef}}</div> -<p><strong><code>valueOf()</code></strong> 메서드는 {{jsxref("Number")}} 객체가 감싼<sup>wrapped</sup> {{Glossary("primitive", "원시")}} 값을 반환합니다.</p> +<p><strong><code>valueOf()</code></strong> 메서드는 {{jsxref("Number")}} 객체가 감싼(wrapped) {{Glossary("primitive", "원시")}} 값을 반환합니다.</p> <div>{{EmbedInteractiveExample("pages/js/number-valueof.html")}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/object/assign/index.html b/files/ko/web/javascript/reference/global_objects/object/assign/index.html index 71f17c01b9..31d545dd4f 100644 --- a/files/ko/web/javascript/reference/global_objects/object/assign/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/assign/index.html @@ -11,8 +11,8 @@ tags: - 객체 - 레퍼런스 - 메소드 -translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign browser-compat: javascript.builtins.Object.assign +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign --- <div>{{JSRef}}</div> @@ -99,7 +99,7 @@ const copy = Object.assign({}, obj); console.log(copy); // { a: 1 } </pre> -<h3 id="Deep_Clone" name="Deep_Clone">깊은 복사에 대한 주의사항</h3> +<h3 id="Deep_Clone">깊은 복사에 대한 주의사항</h3> <p>깊은 복사를 위해서는, 다른 방법을 사용해야 합니다. 왜냐하면 <code>Object.assign()</code> 은 속성 값을 복사하기 때문입니다.</p> @@ -140,7 +140,7 @@ test();</pre> const o2 = { b: 2 }; const o3 = { c: 3 }; -<!-- const obj = Object.assign(o1, o2, o3); --> +const obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 }, 목표 객체 자체가 변경됨.</pre> diff --git a/files/ko/web/javascript/reference/global_objects/object/constructor/index.html b/files/ko/web/javascript/reference/global_objects/object/constructor/index.html index 0162140d9c..b4662df8be 100644 --- a/files/ko/web/javascript/reference/global_objects/object/constructor/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/constructor/index.html @@ -7,6 +7,7 @@ tags: - Property - Prototype - Reference +browser-compat: javascript.builtins.Object.constructor translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor --- <div>{{JSRef}}</div> @@ -150,6 +151,4 @@ function String() { <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div>{{Compat("javascript.builtins.Object.constructor")}}</div> - -<div id="compat-mobile"> </div> +<div>{{Compat}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/object/create/index.html b/files/ko/web/javascript/reference/global_objects/object/create/index.html index 1d8873600c..730ecbbdf0 100644 --- a/files/ko/web/javascript/reference/global_objects/object/create/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/create/index.html @@ -88,7 +88,7 @@ MyClass.prototype.myMethod = function() { <p><code>mixin</code> 함수는 상위(super)클래스 프로토타입에서 하위(sub)클래스 프로토타입으로 함수를 복사하고, mixin 함수는 사용자에 의해 공급될 필요가 있습니다. mixin 같은 함수의 예는 <a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a>입니다.</p> -<h3 id="Object.create()와_함께_propertiesObject_인수_사용하기"><code>Object.create()<font face="Open Sans, Arial, sans-serif">와 함께 </font></code><code>propertiesObject</code> 인수 사용하기</h3> +<h3 id="Object.create()와_함께_propertiesObject_인수_사용하기"><code>Object.create()</code>와 함께 <code>propertiesObject</code> 인수 사용하기</h3> <pre class="brush: js">var o; diff --git a/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html index 0d4a803316..bf3dabffdd 100644 --- a/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html @@ -42,9 +42,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty <h2 id="설명">설명</h2> -<p><code>defineProperty</code>는 객체의 속성을 정교하게 추가하거나 수정할 수 있습니다. 할당을 통해 속성을 추가하는 일반적인 방법을 사용하면 속성 열거<sup>enumeration</sup>({{jsxref("Statements/for...in", "for...in")}} 반복문이나 {{jsxref("Object.keys")}} 메서드)를 통해 노출되어 값을 변경하거나 {{jsxref("Operators/delete", "delete")}} 연산자로 삭제할 수 있습니다. <code>defineProperty</code>를 사용하면 이런 부분을 상세하게 조절할 수 있습니다. <code>Object.defineProperty()</code>로 추가한 속성은 기본적으로 불변합니다.</p> +<p><code>defineProperty</code>는 객체의 속성을 정교하게 추가하거나 수정할 수 있습니다. 할당을 통해 속성을 추가하는 일반적인 방법을 사용하면 속성 열거({{jsxref("Statements/for...in", "for...in")}} 반복문이나 {{jsxref("Object.keys")}} 메서드)를 통해 노출되어 값을 변경하거나 {{jsxref("Operators/delete", "delete")}} 연산자로 삭제할 수 있습니다. <code>defineProperty</code>를 사용하면 이런 부분을 상세하게 조절할 수 있습니다. <code>Object.defineProperty()</code>로 추가한 속성은 기본적으로 불변합니다.</p> -<p>속성 서술자<sup>property descriptors</sup>는 객체로 나타내며 데이터 서술자<sup>data descriptors</sup>와 접근자 서술자<sup>accessor descriptors</sup>의 두 가지 유형을 갖습니다. 데이터 서술자는 값을 가지는 속성으로, 덮어쓰거나 쓸 수 없습니다. 접근자 서술자는 접근자<sup>getter</sup>-설정자<sup>setter</sup> 한 쌍을 가지는 속성입니다. 서술자는 두 유형 중 하나여야 하며, 동시에 두 유형일 수는 없습니다.</p> +<p>속성 서술자는 객체로 나타내며 데이터 서술자(data descriptors)와 접근자 서술자(accessor descriptors)의 두 가지 유형을 갖습니다. 데이터 서술자는 값을 가지는 속성으로, 덮어쓰거나 쓸 수 없습니다. 접근자 서술자는 접근자(getter)-설정자(setter) 한 쌍을 가지는 속성입니다. 서술자는 두 유형 중 하나여야 하며, 동시에 두 유형일 수는 없습니다.</p> <p>데이터 서술자와 접근자 서술자 모두 객체이며 다음과 같은 키를 공유합니다.</p> @@ -286,7 +286,7 @@ delete o.a; // Nothing happens console.log(o.a); // logs 1 </pre> -<p><font face="Courier New">o.a</font>의 <font face="Courier New">configurable</font> 가 <font face="Courier New">true</font>라면, 위의 예외는 발생하지 않고 속성은 마지막에 제거되었을 것이다.</p> +<p>o.a의 configurable 가 true라면, 위의 예외는 발생하지 않고 속성은 마지막에 제거되었을 것이다.</p> <h3 id="속성에_기본값_추가하기">속성에 기본값 추가하기</h3> diff --git a/files/ko/web/javascript/reference/global_objects/object/freeze/index.html b/files/ko/web/javascript/reference/global_objects/object/freeze/index.html index 6eaca7b708..aa92c7f488 100644 --- a/files/ko/web/javascript/reference/global_objects/object/freeze/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/freeze/index.html @@ -23,11 +23,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox">Object.freeze(<var>obj</var>)</pre> -<h3 id="Parameters" name="Parameters">매개변수</h3> +<h3 id="Parameters">매개변수</h3> <dl> <dt><code>obj</code></dt> @@ -38,7 +38,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze <p>함수로 전달된 객체.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p>동결 객체의 속성 집합에는 어떠한 것도 추가하거나 제거할 수 없으며, 그리 하려는 모든 시도는 조용히 넘어가거나, {{jsxref("TypeError")}} 예외가 발생하며 실패합니다. 예외 발생은 보통 {{jsxref("Strict_mode", "엄격 모드", "", 1)}}인 경우 발생하지만, 반드시 엄격 모드로만 제한되는 것은 아닙니다.</p> @@ -46,7 +46,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze <p><code>freeze()</code>는 함수에 전달한 객체를 그대로 반환하며, 동결된 객체 사본을 생성하는 것이 아닙니다.</p> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <h3 id="객체_동결하기">객체 동결하기</h3> @@ -181,7 +181,7 @@ obj2.internal.a = 'anotherValue'; // 비엄격 모드에서 조용하게 실패 obj2.internal.a; // null </pre> -<h2 id="Notes" name="Notes">사용 노트</h2> +<h2 id="Notes">사용 노트</h2> <p>ES5에서는, 이 메소드에 대한 인자가 객체(원시형)가 아닐 경우, {{jsxref("TypeError")}}가 발생합니다. ES2015에서는, 비객체 인자가 동결된 평범한 객체인것처럼 다루어져 반환됩니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/object/index.html b/files/ko/web/javascript/reference/global_objects/object/index.html index ce7e6c6603..d76739238f 100644 --- a/files/ko/web/javascript/reference/global_objects/object/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/index.html @@ -93,7 +93,7 @@ new Object([<var>value</var>])</pre> <dd>주어진 객체의 열거가능한 모든 스트링 속성들의 값들을 포함하고 있는 배열을 반환합니다.</dd> </dl> -<h2 id="Object_instances" name="Object_instances"><code>Object</code> 인스턴스와 <code>Object</code> 프로토타입 객체</h2> +<h2 id="Object_instances"><code>Object</code> 인스턴스와 <code>Object</code> 프로토타입 객체</h2> <p>JavaScript에서 모든 객체들은 <code>Object</code>의 자손입니다. 모든 객체는 {{jsxref("Object.prototype")}}으로부터 메서드와 속성을 상속하는데, 나중에 덮어 쓸 수도 있습니다. 예를 들어, 다른 생성자의 프로토타입은 그 <code>constructor</code> 속성을 덮어쓰고 자신의 <code>toString()</code> 메소드들을 제공합니다. <code>Object</code> 프로토타입 객체에 대한 변경 내용은 그 변경 내용에 영향을 받는 속성들과 메소드들이 프로토타입 체인(chain)을 따라 더이상 무시되지 않는한, 모든 객체들로 전달됩니다.</p> @@ -105,9 +105,9 @@ new Object([<var>value</var>])</pre> <div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', '메서드') }}</div> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> -<h3 id="Example.3A_Using_Object_given_undefined_and_null_types" name="Example.3A_Using_Object_given_undefined_and_null_types"><code>undefined</code>와 <code>null</code>을 지정</h3> +<h3 id="Example.3A_Using_Object_given_undefined_and_null_types"><code>undefined</code>와 <code>null</code>을 지정</h3> <p>다음 예제는 변수 <code>o</code>에 빈 <code>Object</code> 객체를 저장합니다.</p> @@ -170,7 +170,7 @@ var o = new Object(Boolean()); <p>{{Compat("javascript.builtins.Object")}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li> diff --git a/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html b/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html index 0e9de96b41..b2cefcdb65 100644 --- a/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html @@ -17,18 +17,18 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf <p><strong>Note:</strong> <code>isPrototypeOf</code> 는 {{jsxref("Operators/instanceof", "instanceof")}} 연산자와 다릅니다. "<code>object instanceof AFunction</code>"표현식에서는 <code>object</code>의 프로토타입 체인을 AFunction 자체가 아니라 <code>AFunction.prototype에 대해 </code>확인을 합니다.</p> </div> -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox"><var>prototypeObj</var>.isPrototypeOf(<var>obj</var>)</pre> -<h3 id="Parameters" name="Parameters">매개변수</h3> +<h3 id="Parameters">매개변수</h3> <dl> <dt><code>object</code></dt> <dd>프로토타입 체인을 가지고 있는 객체가 검색될 것 입니다.</dd> </dl> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p><code>isPrototypeOf</code> 메소드는 또 다른 객체의 프로토타입 체인에 해당 객체가 존재하는지 여부를 확인할수 있습니다.</p> @@ -99,13 +99,13 @@ if (Fi.prototype.isPrototypeOf(fum)) { <p>{{Compat("javascript.builtins.Object.isPrototypeOf")}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> <li>{{jsxref("Object.getPrototypeOf()")}}</li> <li> - <div><span style="font-size: 14px; line-height: 1.5;">{{jsxref("Object.setPrototypeOf()")}}</span></div> + <div>{{jsxref("Object.setPrototypeOf()")}}</div> </li> <li>{{jsxref("Object.prototype.__proto__")}} </li> </ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/seal/index.html b/files/ko/web/javascript/reference/global_objects/object/seal/index.html index c04ca07dde..50bd0d7e08 100644 --- a/files/ko/web/javascript/reference/global_objects/object/seal/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/seal/index.html @@ -18,11 +18,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox">Object.seal(<var>obj</var>)</pre> -<h3 id="Parameters" name="Parameters">매개변수</h3> +<h3 id="Parameters">매개변수</h3> <dl> <dt><code>obj</code></dt> @@ -33,13 +33,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal <p>봉인한 객체.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> -<p>객체는 기본적으로 확장이 가능(<span style="line-height: 16.7999992370605px;">{{jsxref("Object.isExtensible()", "extensible", "", 1)}}</span>)합니다. 즉, 새로운 속성을 추가할 수 있습니다. 하지만 객체를 밀봉하면 그 객체에 새로운 속성을 추가할 수 없게되고, 그 객체 내에 존재하는 모든 속성이 설정 불가능(non-configurable)해 집니다. 객체를 밀봉하면 객체의 속성을 고정된 불변의 상태로 만듭니다. 모든 속성을 설정 불가능한 상태로 만드는 것은 데이터 속성(data properties)을 접근자 속성(accessor properties)으로, 또는 접근자 속성을 데이터 속성으로 변경할 수 없게 만듭니다. 하지만 객체를 완전히 얼려서 데이터 속성의 값도 변경할 수 없게 만드는 <code>Object.freeze()</code>와 달리, <code><strong>Object.seal()</strong></code>은 객체를 밀봉한 후에도 그 객체의 데이터 속성의 값은 여전히 변경할 수 있게 해줍니다. 다만, 밀봉한 후에는 객체를 얼리는 것과 마찬가지로 속성의 추가/삭제나 데이터 속성과 접근자 속성 사이의 전환은 암묵적이든, 아니면 <span style="line-height: 16.7999992370605px;">{{jsxref("Strict_mode", "strict mode", "", 1)}} 에서와 같이 명시적으로 {{jsxref("Global_Objects/TypeError", "TypeError")}} 예외를 발생시키든 모두 실패로 끝납니다.</span></p> +<p>객체는 기본적으로 확장이 가능({{jsxref("Object.isExtensible()", "extensible", "", 1)}})합니다. 즉, 새로운 속성을 추가할 수 있습니다. 하지만 객체를 밀봉하면 그 객체에 새로운 속성을 추가할 수 없게되고, 그 객체 내에 존재하는 모든 속성이 설정 불가능(non-configurable)해 집니다. 객체를 밀봉하면 객체의 속성을 고정된 불변의 상태로 만듭니다. 모든 속성을 설정 불가능한 상태로 만드는 것은 데이터 속성(data properties)을 접근자 속성(accessor properties)으로, 또는 접근자 속성을 데이터 속성으로 변경할 수 없게 만듭니다. 하지만 객체를 완전히 얼려서 데이터 속성의 값도 변경할 수 없게 만드는 <code>Object.freeze()</code>와 달리, <code>Object.seal()</code>은 객체를 밀봉한 후에도 그 객체의 데이터 속성의 값은 여전히 변경할 수 있게 해줍니다. 다만, 밀봉한 후에는 객체를 얼리는 것과 마찬가지로 속성의 추가/삭제나 데이터 속성과 접근자 속성 사이의 전환은 암묵적이든, 아니면 {{jsxref("Strict_mode", "strict mode", "", 1)}} 에서와 같이 명시적으로 {{jsxref("Global_Objects/TypeError", "TypeError")}} 예외를 발생시키든 모두 실패로 끝납니다.</p> -<p>프로토타입 체인은 밀봉 전이나 후나 달라지지 않습니다. 하지만 <span style="line-height: 16.7999992370605px;">{{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} 속성은 함께 밀봉됩니다.</span></p> +<p>프로토타입 체인은 밀봉 전이나 후나 달라지지 않습니다. 하지만 {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} 속성은 함께 밀봉됩니다.</p> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <pre class="brush: js">var obj = { prop: function() {}, @@ -80,9 +80,9 @@ Object.defineProperty(obj, 'ohai', { value: 17 }); // TypeErorr 발생 Object.defineProperty(obj, 'foo', { value: 'eit' }); // 속성값의 변경은 가능함 </pre> -<h2 id="Notes" name="Notes">참고</h2> +<h2 id="Notes">참고</h2> -<p>ES5에서는 <code><strong>Object.seal()</strong></code> 메서드의 인자가 객체가 아닐 때(즉, 원시형일 때)는 <span style="line-height: 16.7999992370605px;">{{jsxref("Global_Objects/TypeError", "TypeError")}}가 발생합니다. ES6에서는 원시형 인자도 밀봉된 객체라고 취급해서 {{jsxref("Global_Objects/TypeError", "TypeError")}}를 발생시키지 않고 원시형 인자를 그대로 반환합니다.</span></p> +<p>ES5에서는 <code><strong>Object.seal()</strong></code> 메서드의 인자가 객체가 아닐 때(즉, 원시형일 때)는 {{jsxref("Global_Objects/TypeError", "TypeError")}}가 발생합니다. ES6에서는 원시형 인자도 밀봉된 객체라고 취급해서 {{jsxref("Global_Objects/TypeError", "TypeError")}}를 발생시키지 않고 원시형 인자를 그대로 반환합니다.</p> <pre class="brush: js">> Object.seal(1) TypeError: 1 is not an object // ES5 code @@ -124,7 +124,7 @@ TypeError: 1 is not an object // ES5 code <p>{{Compat("javascript.builtins.Object.seal")}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Object.isSealed()")}}</li> diff --git a/files/ko/web/javascript/reference/global_objects/object/valueof/index.html b/files/ko/web/javascript/reference/global_objects/object/valueof/index.html index 863ba06a1e..cb8e14c16d 100644 --- a/files/ko/web/javascript/reference/global_objects/object/valueof/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/valueof/index.html @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf <p>JavaScript는 객체를 원시 값으로 변환할 때 <code>valueOf</code> 메서드를 호출합니다. 보통 원시 값을 필요로 할 때 알아서 사용하므로 직접 호출해야 하는 경우는 매우 드뭅니다.</p> -<p>기본적으로 {{jsxref("Object")}}의 모든 후손 객체는 <code>valueOf</code>를 상속받습니다. 내장된 핵심 객체는 모두 <code>valueOf</code>를 재정의<sup>override</sup>해 적합한 값을 반환합니다. 어떤 객체가 원시 값을 가지고 있지 않다면, <code>valueOf</code>는 객체 스스로를 반환합니다.</p> +<p>기본적으로 {{jsxref("Object")}}의 모든 후손 객체는 <code>valueOf</code>를 상속받습니다. 내장된 핵심 객체는 모두 <code>valueOf</code>를 재정의해 적합한 값을 반환합니다. 어떤 객체가 원시 값을 가지고 있지 않다면, <code>valueOf</code>는 객체 스스로를 반환합니다.</p> <p>여러분의 코드에서 <code>valueOf</code>를 호출해 내장 객체를 원시 값으로 변환할 수 있습니다. 사용자 정의 객체를 만들 땐 <code>valueOf</code>를 재정의해 {{jsxref("Object")}}의 메서드 대신 다른 행동을 부여할 수도 있습니다.</p> @@ -70,7 +70,7 @@ MyNumberType.prototype.valueOf = function() { var myObj = new MyNumberType(4); myObj + 3; // 7</pre> -<h3 id="단항_더하기_사용하기"><a name="Details_of_unary_plus">단항 더하기 사용하기</a></h3> +<h3 id="단항_더하기_사용하기">단항 더하기 사용하기</h3> <pre class="notranslate">+"5" // 5 (string to number) +"" // 0 (string to number) diff --git a/files/ko/web/javascript/reference/global_objects/parseint/index.html b/files/ko/web/javascript/reference/global_objects/parseint/index.html index 0539e1ba53..d52a6fcb41 100644 --- a/files/ko/web/javascript/reference/global_objects/parseint/index.html +++ b/files/ko/web/javascript/reference/global_objects/parseint/index.html @@ -4,6 +4,7 @@ slug: Web/JavaScript/Reference/Global_Objects/parseInt tags: - JavaScript - Reference +browser-compat: javascript.builtins.parseInt translation_of: Web/JavaScript/Reference/Global_Objects/parseInt --- <div>{{jsSidebar("Objects")}}</div> @@ -47,7 +48,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/parseInt <li>첫번째 non-whitespace 문자가 숫자로 변환되지 않는 경우</li> </ul> -<h2 id="설명_2"><a id="설명" name="설명">설명</a></h2> +<h2 id="설명_2">설명</h2> <p><code>parseInt</code> 함수는 첫 번째 인자를 문자열로 변환하고 파싱하고, 그 문자열을 파싱하여 정수나 <code>NaN</code>을 리턴합니다.</p> @@ -57,7 +58,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/parseInt <p>만약 <code>parseInt</code> 함수가 특정 진수를 나타내는 숫자가 아닌 글자를 마주치게 되면, 이 글자와 계속되는 글자들은 전부 무시되며, 파싱된 정수값을 리턴합니다. <code>parseInt</code> 함수는 정수값으로 숫자를 잘라버립니다. 맨 앞의 공백과 그 뒤의 공백들은 허용됩니다.</p> -<p>일부 숫자들은 문자열 표현에 e 문자를 사용하기 때문에(예: 6.022 × 10<sup>23</sup>의 경우 <code>6.022e23</code> ) 숫자를 자르기 위하여 <code>parseInt</code>를 사용하는 것은 매우 크거나 매우 작은 숫자에 사용하는 경우 예기치 않은 결과가 발생합니다. <code>parseInt</code>는 {{jsxref("Math.floor()")}}의 대체품으로 사용해서는 안 됩니다.</p> +<p>일부 숫자들은 문자열 표현에 e 문자를 사용하기 때문에(예: 6.022 × 10^23의 경우 <code>6.022e23</code> ) 숫자를 자르기 위하여 <code>parseInt</code>를 사용하는 것은 매우 크거나 매우 작은 숫자에 사용하는 경우 예기치 않은 결과가 발생합니다. <code>parseInt</code>는 {{jsxref("Math.floor()")}}의 대체품으로 사용해서는 안 됩니다.</p> <p><code>parseInt</code>는 양수를 의미하는 <code>+ </code>기호와 음수를 나타내는 <code>-</code> 기호를 정확히 이해합니다(ECMAScript 1 이후). 공백이 제거된 후 구문 분석의 초기 단계로 수행됩니다. 기호를 찾을 수 없으면 알고리즘이 다음 단계로 이동하고, 그렇지 않으면 기호를 제거하고 문자열의 나머지 부분에서 숫자 파싱을 실행합니다.</p> @@ -206,7 +207,7 @@ parseInt(1e+21,10); <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div id="compat-mobile">{{Compat("javascript.builtins.parseInt")}}</div> +<div>{{Compat}}</div> <h2 id="같이_보기">같이 보기</h2> diff --git a/files/ko/web/javascript/reference/global_objects/promise/finally/index.html b/files/ko/web/javascript/reference/global_objects/promise/finally/index.html index edf6025aef..80be4d88d2 100644 --- a/files/ko/web/javascript/reference/global_objects/promise/finally/index.html +++ b/files/ko/web/javascript/reference/global_objects/promise/finally/index.html @@ -48,7 +48,7 @@ p.finally(function() { </ul> <div class="note"> -<p><strong>Note:</strong> <code>finally</code> 콜백에서 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5); font-size: 16px;">throw</span></font> (또는 거부된 promise를 반환)하면 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5); font-size: 16px;">throw()</span></font>를 호출 할 때 지정된 거부 이유로 새롭게 만들어진 promise를 반환합니다.</p> +<p><strong>Note:</strong> <code>finally</code> 콜백에서 <code>throw</code> (또는 거부된 promise를 반환)하면 <code>throw()</code>를 호출 할 때 지정된 거부 이유로 새롭게 만들어진 promise를 반환합니다.</p> </div> <h2 id="예제">예제</h2> diff --git a/files/ko/web/javascript/reference/global_objects/promise/index.html b/files/ko/web/javascript/reference/global_objects/promise/index.html index cc9c9bc427..6a78ea5619 100644 --- a/files/ko/web/javascript/reference/global_objects/promise/index.html +++ b/files/ko/web/javascript/reference/global_objects/promise/index.html @@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise <li>거부(<em>rejected)</em>: 연산이 실패함.</li> </ul> -<p>대기 중인 프로미스는 값과 함께 <em>이행할</em> 수도, 어떤 이유(오류)로 인해 <em>거부</em>될 수 있습니다. 이행이나 거부될 때, 프로미스에 연결한 처리기는 그 프로미스의 <code>then</code> 메서드에 의해 대기열에 오릅니다. 이미 이행했거나 거부된 프로미스에 연결한 처리기도 호출하므로, 비동기 연산과 처리기 연결 사이에 경합 조건<sup>race condition</sup>은 없습니다.</p> +<p>대기 중인 프로미스는 값과 함께 <em>이행할</em> 수도, 어떤 이유(오류)로 인해 <em>거부</em>될 수 있습니다. 이행이나 거부될 때, 프로미스에 연결한 처리기는 그 프로미스의 <code>then</code> 메서드에 의해 대기열에 오릅니다. 이미 이행했거나 거부된 프로미스에 연결한 처리기도 호출하므로, 비동기 연산과 처리기 연결 사이에 경합 조건은 없습니다.</p> <p>{{jsxref("Promise.prototype.then()")}} 및 {{jsxref("Promise.prototype.catch()")}} 메서드의 반환 값은 다른 프로미스이므로, 서로 연결할 수 있습니다.</p> @@ -38,7 +38,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise </div> <div class="note"> -<p><strong>참고</strong>: 프로미스는 대기 중이지 않으며 이행 또는 거부됐을 때 처리(settled)됐다고 말합니다. 프로미스와 함께 쓰이는 단어 resolved는 프로미스가 다른 프로미스의 상태에 맞춰 처리됨, 또는 상태가 "잠김"되었다는 의미입니다. 용어에 관한 더 자세한 설명은 Domenic Denicola의 글 <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md" title="States and fates">States and fates</a>에서 볼 수 있습니다.</p> +<p><strong>참고</strong>: 프로미스는 대기 중이지 않으며 이행 또는 거부됐을 때 처리(settled)됐다고 말합니다. 프로미스와 함께 쓰이는 단어 resolved는 프로미스가 다른 프로미스의 상태에 맞춰 처리됨, 또는 상태가 "잠김"되었다는 의미입니다. 용어에 관한 더 자세한 설명은 Domenic Denicola의 글 <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a>에서 볼 수 있습니다.</p> </div> <h2 id="생성자">생성자</h2> diff --git a/files/ko/web/javascript/reference/global_objects/promise/race/index.html b/files/ko/web/javascript/reference/global_objects/promise/race/index.html index 618ae4ccb5..47b027024b 100644 --- a/files/ko/web/javascript/reference/global_objects/promise/race/index.html +++ b/files/ko/web/javascript/reference/global_objects/promise/race/index.html @@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race <h2 id="예제">예제</h2> -<h3 id="Promise.race의_비동기성"><font face="consolas, Liberation Mono, courier, monospace"><code>Promise.race</code>의 비동기성</font></h3> +<h3 id="Promise.race의_비동기성"><code>Promise.race</code>의 비동기성</h3> <p>다음 예제에서 <code>Promise.race</code>의 비동기성을 확인할 수 있습니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/promise/then/index.html b/files/ko/web/javascript/reference/global_objects/promise/then/index.html index 989b17b846..c4f1a1295a 100644 --- a/files/ko/web/javascript/reference/global_objects/promise/then/index.html +++ b/files/ko/web/javascript/reference/global_objects/promise/then/index.html @@ -41,7 +41,7 @@ p.then(function(value) { <h3 id="반환값">반환값</h3> -<p>{{jsxref("Promise")}}가 이행하거나 거부했을 때, 각각에 해당하는 핸들러 함수(<code style="font-style: normal; font-weight: normal;">onFulfilled</code>나 <code style="font-style: normal; font-weight: normal;">onRejected</code>)가 <strong>비동기적으로</strong> 실행됩니다. 핸들러 함수는 다음 규칙을 따라 실행됩니다.</p> +<p>{{jsxref("Promise")}}가 이행하거나 거부했을 때, 각각에 해당하는 핸들러 함수(<code>onFulfilled</code>나 <code>onRejected</code>)가 <strong>비동기적으로</strong> 실행됩니다. 핸들러 함수는 다음 규칙을 따라 실행됩니다.</p> <ul> <li>함수가 값을 반환할 경우, <code>then</code>에서 반환한 프로미스는 그 반환값을 자신의 결과값으로 하여 이행합니다.</li> diff --git a/files/ko/web/javascript/reference/global_objects/set/values/index.html b/files/ko/web/javascript/reference/global_objects/set/values/index.html index 37e019e3da..3d22a90f6d 100644 --- a/files/ko/web/javascript/reference/global_objects/set/values/index.html +++ b/files/ko/web/javascript/reference/global_objects/set/values/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/values --- <div>{{JSRef}}</div> -<p><code><strong>values()</strong></code> method는 <code>Set<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> 객체에 요소가 삽입된 순서대로 각 요소의 값을 순환할 수 있는 </span></font></code><code>Iterator</code> 객체를 반환합니다.</p> +<p><code><strong>values()</strong></code> method는 <code>Set</code> 객체에 요소가 삽입된 순서대로 각 요소의 값을 순환할 수 있는 <code>Iterator</code> 객체를 반환합니다.</p> <p>The <strong><code>keys()</code></strong> method is an alias for this method (for similarity with {{jsxref("Map")}} objects); it behaves exactly the same and returns <strong>values</strong> of <code>Set</code> elements.</p> diff --git a/files/ko/web/javascript/reference/global_objects/string/concat/index.html b/files/ko/web/javascript/reference/global_objects/string/concat/index.html index 1d5b4f2cd6..170f8d2bc1 100644 --- a/files/ko/web/javascript/reference/global_objects/string/concat/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/concat/index.html @@ -7,6 +7,7 @@ tags: - Prototype - Reference - String +browser-compat: javascript.builtins.String.concat translation_of: Web/JavaScript/Reference/Global_Objects/String/concat --- <div>{{JSRef}}</div> @@ -91,11 +92,7 @@ var greetList = ['Hello', ' ', 'Venkat', '!']; <h2 id="브라우저_호환성">브라우저 호환성</h2> -<p>{{Compat("javascript.builtins.String.concat")}}</p> - -<div></div> - -<div id="compat-mobile"></div> +<p>{{Compat}}</p> <h2 id="관련문서">관련문서</h2> diff --git a/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html index 98b1627666..9808f33355 100644 --- a/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html @@ -51,7 +51,7 @@ String.fromCharCode(0x12014) // 숫자 '1'은 무시해서 "—" <h2 id="더_큰_값과_사용하기">더 큰 값과 사용하기</h2> -<p>초기 JavaScript 표준화 과정에서 예상했던 것처럼, 대부분의 흔한 유니코드 값을 16비트 숫자로 표현할 수 있고, <code>fromCharCode()</code>가 많은 흔한 값에서 하나의 문자를 반환할 수 있지만, <strong>모든</strong> 유효한 유니코드 값(최대 21비트)을 처리하려면 <code>fromCharCode()</code>만으로는 부족합니다. 높은 코드 포인트의 문자는 써로게이트<sup>surrogate</sup> 값 두 개를 합쳐 하나의 문자를 표현하므로,{{jsxref("String.fromCodePoint()")}}(ES2015 표준) 메서드는 그러한 쌍을 높은 값의 문자로 변환할 수 있습니다.</p> +<p>초기 JavaScript 표준화 과정에서 예상했던 것처럼, 대부분의 흔한 유니코드 값을 16비트 숫자로 표현할 수 있고, <code>fromCharCode()</code>가 많은 흔한 값에서 하나의 문자를 반환할 수 있지만, <strong>모든</strong> 유효한 유니코드 값(최대 21비트)을 처리하려면 <code>fromCharCode()</code>만으로는 부족합니다. 높은 코드 포인트의 문자는 써로게이트 값 두 개를 합쳐 하나의 문자를 표현하므로,{{jsxref("String.fromCodePoint()")}}(ES2015 표준) 메서드는 그러한 쌍을 높은 값의 문자로 변환할 수 있습니다.</p> <h2 id="명세">명세</h2> diff --git a/files/ko/web/javascript/reference/global_objects/string/index.html b/files/ko/web/javascript/reference/global_objects/string/index.html index 48217dee18..2f677292dc 100644 --- a/files/ko/web/javascript/reference/global_objects/string/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/index.html @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String <p><strong><code>String</code></strong> 전역 객체는 문자열(문자의 나열)의 생성자입니다.</p> -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <p>문자열 리터럴은 다음과 같은 형식을 사용합니다.</p> @@ -127,9 +127,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String <p>두 예시 모두 동일한 문자열을 생성합니다.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> -<p>문자열은 텍스트 형태로 표현될 수있는 데이터를 보관하는 데 유용합니다. 문자열에서 가장 많이 사용되는 작업들은 문자열의 길이를 확인하는 ({{jsxref("String.length", "length")}}), 문자열을 생성하고 연결하는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/String_Operators" title="JavaScript/Reference/Operators/String_Operators">+ 와 += 문자열 연산자</a>, 서브문자열(substring)이 있는지 확인하고, 있으면 위치를 확인하는 {{jsxref("String.prototype.indexOf()", "indexOf()")}} 메서드, 서브문자열(substring)을 추출해내는 {{jsxref("String.prototype.substring()", "substring()")}} 메서드가 있습니다.</p> +<p>문자열은 텍스트 형태로 표현될 수있는 데이터를 보관하는 데 유용합니다. 문자열에서 가장 많이 사용되는 작업들은 문자열의 길이를 확인하는 ({{jsxref("String.length", "length")}}), 문자열을 생성하고 연결하는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/String_Operators">+ 와 += 문자열 연산자</a>, 서브문자열(substring)이 있는지 확인하고, 있으면 위치를 확인하는 {{jsxref("String.prototype.indexOf()", "indexOf()")}} 메서드, 서브문자열(substring)을 추출해내는 {{jsxref("String.prototype.substring()", "substring()")}} 메서드가 있습니다.</p> <h3 id="문자_접근">문자 접근</h3> @@ -145,9 +145,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String <p>브라켓([ ]) 표기법을 사용하여 문자에 접근하는 경우 , 이러한 프로퍼티들에 새로운 값을 할당하거나 삭제할 수는 없습니다. 포함되어 있는 프로퍼티들은 작성할 수도, 수정할 수도 없습니다. (더 자세한 정보는 {{jsxref("Object.defineProperty()")}}를 참고 바랍니다 .)</p> -<h3 id="Comparing_strings" name="Comparing_strings">문자열 비교</h3> +<h3 id="Comparing_strings">문자열 비교</h3> -<p>C 개발자는 문자열 비교를 위하여 <code><span style="font-family: courier new,andale mono,monospace;">strcmp()</span></code> 함수를 사용합니다. JavaScript에서는 단지 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" style="line-height: inherit;" title="JavaScript/Reference/Operators/Comparison_Operators">less-than와 greater-than 연산자</a>만을 사용하여 문자열을 비교할 수 있습니다<span style="line-height: inherit;"> </span><span style="line-height: inherit;">:</span></p> +<p>C 개발자는 문자열 비교를 위하여 <code>strcmp()</code> 함수를 사용합니다. JavaScript에서는 단지 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">less-than와 greater-than 연산자</a>만을 사용하여 문자열을 비교할 수 있습니다:</p> <pre class="brush: js">var a = "a"; var b = "b"; @@ -160,11 +160,11 @@ if (a < b) { // true } </pre> -<p>비슷한 결과를 얻을 수 있는 방법으로 <span style="font-family: courier new,andale mono,monospace;">String</span> 인스턴스에서 상속된 {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} 메서드를 사용할 수 있습니다.</p> +<p>비슷한 결과를 얻을 수 있는 방법으로 String 인스턴스에서 상속된 {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} 메서드를 사용할 수 있습니다.</p> <h3 id="문자열_원형과_String_객체의_차이">문자열 원형과 <code>String</code> 객체의 차이</h3> -<div>JavaScript는 <code>String</code> 오브젝트와 원형의 문자열을 다르게 취급한다는 것에 주의해야 합니다. ({{jsxref("Boolean")}}과 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects" title="JavaScript/Reference/Global_Objects/">숫자</a>의 true도 마찬가지입니다.)</div> +<div>JavaScript는 <code>String</code> 오브젝트와 원형의 문자열을 다르게 취급한다는 것에 주의해야 합니다. ({{jsxref("Boolean")}}과 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects">숫자</a>의 true도 마찬가지입니다.)</div> <div> </div> @@ -187,19 +187,19 @@ console.log(eval(s2)); // returns the string "2 + 2" <p>이러한 이유로, 비록 코드 상에서 원형 문자열을 사용하는 대신에 <code>String</code> 오브젝트를 사용하게 되면 코드가 손상될 수 있지만, 일반적인 개발자는 차이를 걱정할 필요는 없습니다.</p> -<p><code>String</code><span style="line-height: inherit;"> 오브젝트는 언제든지 </span>{{jsxref("String.prototype.valueOf()", "valueOf()")}} <span style="line-height: inherit;"> 메서드로 원형에 대응하도록 전환할 수 있습니다.</span></p> +<p><code>String</code> 오브젝트는 언제든지 </span>{{jsxref("String.prototype.valueOf()", "valueOf()")}} 메서드로 원형에 대응하도록 전환할 수 있습니다.</span></p> <pre class="brush: js">console.log(eval(s2.valueOf())); // returns the number 4 </pre> -<h2 id="Properties" name="Properties">속성</h2> +<h2 id="Properties">속성</h2> <dl> <dt>{{jsxref("String.prototype")}}</dt> <dd>String 오브젝트는 프로퍼티의 추가가 가능합니다.</dd> </dl> -<h2 id="Methods" name="Methods">메서드</h2> +<h2 id="Methods">메서드</h2> <dl> <dt>{{jsxref("String.fromCharCode()")}}</dt> @@ -216,15 +216,15 @@ console.log(eval(s2)); // returns the string "2 + 2" <p><strong><code>String</code> generic들은 비표준으로, 가까운 미래에 사라질 것입니다.</strong> 아래에서 제공하고 있는 방식을 사용하지 않으면, 브라우저들간의 호환성은 기대하기 어렵습니다. </p> </div> -<p><code>String</code><span style="line-height: inherit;"> 인스턴스 메서드는 JavScript 1.6으로 Firefox에서(ECMAScript 표준에 속하지는 않지만) 어떤 오브젝트라도 String 메서드에 적용하여 String 오브젝트에서 사용가능합니다:</span></p> +<p><code>String</code> 인스턴스 메서드는 JavScript 1.6으로 Firefox에서(ECMAScript 표준에 속하지는 않지만) 어떤 오브젝트라도 String 메서드에 적용하여 String 오브젝트에서 사용가능합니다:</p> <pre class="brush: js">var num = 15; console.log(String.replace(num, /5/, '2')); </pre> -<p class="brush: js">{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}}은<span style="line-height: inherit;"> </span>{{jsxref("Global_Objects/Array", "Array")}}<span style="line-height: inherit;"> 메서드에도 사용 가능합니다.</span></p> +<p>{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}}은 {{jsxref("Global_Objects/Array", "Array")}} 메서드에도 사용 가능합니다.</p> -<h2 id="String_instances" name="String_instances"><code>String</code> 인스턴스</h2> +<h2 id="String_instances"><code>String</code> 인스턴스</h2> <h3 id="속성">속성</h3> @@ -252,7 +252,7 @@ for (var i = 0, n = inputValues.length; i < n; ++i) { } </pre> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">명세</h2> +<h2 id="Browser_Compatibility">명세</h2> <table class="standard-table"> <tbody> @@ -284,7 +284,7 @@ for (var i = 0, n = inputValues.length; i < n; ++i) { </tbody> </table> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> +<h2 id="Browser_Compatibility">브라우저 호환성</h2> diff --git a/files/ko/web/javascript/reference/global_objects/string/repeat/index.html b/files/ko/web/javascript/reference/global_objects/string/repeat/index.html index 1e8398e41e..dfea5e722d 100644 --- a/files/ko/web/javascript/reference/global_objects/string/repeat/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/repeat/index.html @@ -44,7 +44,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat <h2 id="폴리필">폴리필</h2> -<p><code>repeat</code>은 ECMAScript 2015 명세에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 그러나 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">repeat</span></font>을 사용할 수 있습니다.</p> +<p><code>repeat</code>은 ECMAScript 2015 명세에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 그러나 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <code>repeat</code>을 사용할 수 있습니다.</p> <pre dir="rtl"><code>if (!String.prototype.repeat) { String.prototype.repeat = function(count) { diff --git a/files/ko/web/javascript/reference/global_objects/string/replace/index.html b/files/ko/web/javascript/reference/global_objects/string/replace/index.html index 3b189bfbf5..e2ad4f5cb0 100644 --- a/files/ko/web/javascript/reference/global_objects/string/replace/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/replace/index.html @@ -1,6 +1,7 @@ --- title: String.prototype.replace() slug: Web/JavaScript/Reference/Global_Objects/String/replace +browser-compat: javascript.builtins.String.replace translation_of: Web/JavaScript/Reference/Global_Objects/String/replace --- <div>{{JSRef}}</div> @@ -95,7 +96,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replace <td><code>p1,<br> p2,<br> ...</code></td> - <td>윗쪽의 $n 표현식과 동일합니다. (<code>$1</code>은 <code>p1</code>, <code>$2</code>는 <code>p2</code>...) 예를 들어, 만약 정규표현식 <code>/(\a+)(\b+)/</code> 이 주어진다면<code><font face="Open Sans, Arial, sans-serif"> </font></code><code>p1</code>은 <code>\a+</code>와 매치되고 <code>p2</code>는 <code>\b+</code>와 매치됩니다.</td> + <td>윗쪽의 $n 표현식과 동일합니다. (<code>$1</code>은 <code>p1</code>, <code>$2</code>는 <code>p2</code>...) 예를 들어, 만약 정규표현식 <code>/(\a+)(\b+)/</code> 이 주어진다면<code>p1</code>은 <code>\a+</code>와 매치되고 <code>p2</code>는 <code>\b+</code>와 매치됩니다.</td> </tr> <tr> <td><code>offset</code></td> @@ -277,18 +278,7 @@ console.log(retArr); <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div> </div> - -<div id="compat-mobile">{{Compat("javascript.builtins.String.replace")}}</div> - -<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> - -<ul> - <li>Starting with Gecko 27 {{geckoRelease(27)}}, this method has been adjusted to conform with the ECMAScript specification. When <code>replace()</code> is called with a global regular expression, the {{jsxref("RegExp.lastIndex")}} property (if specified) will be reset to <code>0</code> ({{bug(501739)}}).</li> - <li>Starting with Gecko 39 {{geckoRelease(39)}}, the non-standard <code>flags</code> argument is deprecated and throws a console warning ({{bug(1142351)}}).</li> - <li>Starting with Gecko 47 {{geckoRelease(47)}}, the non-standard <code>flags</code> argument is no longer supported in non-release builds and will soon be removed entirely ({{bug(1245801)}}).</li> - <li>Starting with Gecko 49 {{geckoRelease(49)}}, the non-standard <code>flags</code> argument is no longer supported ({{bug(1108382)}}).</li> -</ul> +<div>{{Compat}}</div> <h2 id="같이_보기">같이 보기</h2> diff --git a/files/ko/web/javascript/reference/global_objects/string/split/index.html b/files/ko/web/javascript/reference/global_objects/string/split/index.html index 83d8136caa..a5b0df228e 100644 --- a/files/ko/web/javascript/reference/global_objects/string/split/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/split/index.html @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/split <pre class="syntaxbox"><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</pre> <div class="warning"> -<p><strong>주의:</strong> 구분자로 빈 문자열(<code>""</code>)을 제공하면, 사용자가 인식하는 문자 하나(<a href="https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries">grapheme cluster</a>) 또는 유니코드 문자(코드포인트) 하나씩으로 나누는 것이 아니라, UTF-16 코드유닛으로 나누게 되며 <a href="http://unicode.org/faq/utf_bom.html#utf16-2">써로게이트 페어</a><sup>surrogate pair</sup>가 망가질 수 있습니다. 스택 오버플로우의 <a href="https://stackoverflow.com/a/34717402">How do you get a string to a character array in JavaScript?</a> 질문도 참고해 보세요.</p> +<p><strong>주의:</strong> 구분자로 빈 문자열(<code>""</code>)을 제공하면, 사용자가 인식하는 문자 하나(<a href="https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries">grapheme cluster</a>) 또는 유니코드 문자(코드포인트) 하나씩으로 나누는 것이 아니라, UTF-16 코드유닛으로 나누게 되며 <a href="http://unicode.org/faq/utf_bom.html#utf16-2">써로게이트 페어</a>가 망가질 수 있습니다. 스택 오버플로우의 <a href="https://stackoverflow.com/a/34717402">How do you get a string to a character array in JavaScript?</a> 질문도 참고해 보세요.</p> </div> <h3 id="매개변수">매개변수</h3> @@ -44,7 +44,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/split <p>문자열에서 <code>separator</code>가 등장하면 해당 부분은 삭제되고 남은 문자열이 배열로 반환됩니다. <code>separator</code>가 등장하지 않거나 생략되었을 경우 배열은 원본 문자열을 유일한 원소로 가집니다. <code>separator</code>가 빈 문자열일 경우, <code>str</code>은 문자열의 모든 문자를 원소로 가지는 배열로 변환됩니다. <code>separator</code>가 원본 문자열의 처음이나 끝에 등장할 경우 반환되는 배열도 빈 문자열로 시작하거나 끝납니다. 그러므로 원본 문자열에 <code>separator</code> 하나만이 포함되어 있을 경우 빈 문자열 두 개를 원소로 가지는 배열이 반환됩니다.</p> -<p><code>separator</code>가 포획 괄호<sup>capturing parentheses</sup>를 포함하는 정규표현식일 경우, <code>separator</code>가 일치할 때마다 포획 괄호의 (정의되지 않은 경우도 포함한) 결과가 배열의 해당 위치에 포함됩니다.</p> +<p><code>separator</code>가 포획 괄호를 포함하는 정규표현식일 경우, <code>separator</code>가 일치할 때마다 포획 괄호의 (정의되지 않은 경우도 포함한) 결과가 배열의 해당 위치에 포함됩니다.</p> <p>{{Note("<code>separator</code>가 배열일 경우 분할에 사용하기 전에 우선 문자열로 변환됩니다.")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/string/substring/index.html b/files/ko/web/javascript/reference/global_objects/string/substring/index.html index b4dbd8c170..269871d785 100644 --- a/files/ko/web/javascript/reference/global_objects/string/substring/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/substring/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/substring --- <div>{{JSRef}}</div> -<p><strong><code>substring()</code></strong><font><font>메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다. </font></font></p> +<p><strong><code>substring()</code></strong> 메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다.</p> <div>{{EmbedInteractiveExample("pages/js/string-substring.html")}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/string/tostring/index.html b/files/ko/web/javascript/reference/global_objects/string/tostring/index.html deleted file mode 100644 index 197b679edd..0000000000 --- a/files/ko/web/javascript/reference/global_objects/string/tostring/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: String.prototype.toString() -slug: Web/JavaScript/Reference/Global_Objects/String/toString -translation_of: Web/JavaScript/Reference/Global_Objects/String/toString ---- -<div><font><font>{{JSRef}}</font></font></div> - -<p><font><font>이 </font></font><strong><code>toString()</code></strong><font><font>메소드는 지정된 객체를 나타내는 문자열을 반환합니다.</font></font></p> - -<div><font><font>{{EmbedInteractiveExample ( "pages / js / string-tostring.html")}}</font></font></div> - -<h2 id="통사론"><font><font>통사론</font></font></h2> - -<pre class="syntaxbox"><code><var>str</var>.toString()</code></pre> - -<h3 id="반환_값"><font><font>반환 값</font></font></h3> - -<p><font><font>호출 객체를 나타내는 문자열</font></font></p> - -<h2 id="기술"><font><font>기술</font></font></h2> - -<p><font><font>{{jsxref ( "String")}} 오브젝트 </font></font><code>toString()</code><font><font>는 {{jsxref ( "Object")}} 오브젝트 </font><font>의 </font><font>메소드를 </font><font>대체 </font><font>합니다. </font><font>{{jsxref ( "Object.prototype.toString ()")}}을 상속하지 않습니다. </font><font>{{jsxref ( "String")}} 오브젝트의 경우 </font></font><code>toString()</code><font><font>메소드는 </font><font>오브젝트 </font><font>의 문자열 표시를 리턴하며 {{jsxref ( "String.prototype.valueOf ()")}} 메소드와 동일합니다.</font></font></p> - -<h2 id="예"><font><font>예</font></font></h2> - -<h3 id="사용_toString"><font><font>사용 </font></font><code>toString()</code></h3> - -<p><font><font>다음 예제는 {{jsxref ( "String")}} 오브젝트의 문자열 값을 표시합니다.</font></font></p> - -<pre class="brush: js"><font><font>var x = new String ( 'Hello world');</font></font> -<font><font> -console.log (x.toString ()); </font><font>// 'Hello world'를 기록합니다.</font></font> -</pre> - -<h2 id="명세서"><font><font>명세서</font></font></h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col"><font><font>사양</font></font></th> - </tr> - <tr> - <td><font><font>{{SpecName ( 'ESDraft', '# sec-string.prototype.tostring', 'String.prototype.toString')}}}</font></font></td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성"><font><font>브라우저 호환성</font></font></h2> - - -<p><font><font>{{Compat ( "javascript.builtins.String.toString")}}</font></font></p> - -<h2 id="또한보십시오"><font><font>또한보십시오</font></font></h2> - -<ul> - <li><font><font>{{jsxref ( "Object.prototype.toSource ()")}}</font></font></li> - <li><font><font>{{jsxref ( "String.prototype.valueOf ()")}}</font></font></li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/tostring/index.md b/files/ko/web/javascript/reference/global_objects/string/tostring/index.md new file mode 100644 index 0000000000..27d2453fd8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/tostring/index.md @@ -0,0 +1,56 @@ +--- +title: String.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/String/toString +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toString +browser-compat: javascript.builtins.String.toString +--- + +{{JSRef}} + +**`toString()`** 메서드는 객체의 문자열 표현을 반환합니다. + +{{EmbedInteractiveExample("pages/js/string-tostring.html")}} + +## 구문 + +```js +toString() +``` + +### 반환 값 + +메서드를 호출하는 객체의 문자열 표현. + +## 설명 + +{{jsxref("String")}} 객체는 {{jsxref("Object")}} 객체의 `toString()` 메서드를 상속하지 않고 재정의합니다. {{jsxref("String")}} 의 `toString()` 메서드는 객체의 문자열 표현을 반환하며 {{jsxref("String.prototype.valueOf()")}} 메서드와 동일합니다. + +## 예제 + +### `toString()` 사용하기 + +{{jsxref("String")}} 객체의 문자열 값을 표시하는 예제입니다. + +```js +var x = new String('Hello world') + +console.log(x.toString()) // logs 'Hello world' +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("String.prototype.valueOf()")}} diff --git a/files/ko/web/javascript/reference/global_objects/string/trimstart/index.html b/files/ko/web/javascript/reference/global_objects/string/trimstart/index.html deleted file mode 100644 index df264d0078..0000000000 --- a/files/ko/web/javascript/reference/global_objects/string/trimstart/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: String.prototype.trimStart() -slug: Web/JavaScript/Reference/Global_Objects/String/trimStart -tags: -- JavaScript -- Method -- Prototype -- Reference -- String -- Polyfill -browser-compat: javascript.builtins.String.trimStart -translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart ---- -<div>{{JSRef}}</div> - -<p><strong><code>trimStart()</code></strong>메서드는 문자열 시작부분의 공백을 제거합니다. 또한 <code>trimLeft()</code>라는 별칭으로 호출이 가능합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/string-trimstart.html")}}</div> - - -<h2 id="syntax">구문</h2> - -<pre class="brush: js"> -trimStart() - -trimLeft() -</pre> - -<h3 id="return_value">반환값</h3> - -<p><code><var>str</var></code>시작부분(왼쪽)에서 공백이 제거된 새 문자열을 반환합니다.</p> - -<p><code><var>str</var></code>에 공백이 없을시에도 에러가 발생하지 않고 여전히 새 문자열(본질적으로 <code><var>str</var></code>의 복사본)이 반환됩니다.</p> - -<h3 id="aliasing">별칭</h3> - -<p>{{jsxref("String.prototype.padStart")}}표준 메서드 이름과 같은 함수의 일관성을 위해서<code>trimStart</code>가 되었습니다. 그러나, - 웹 호환성을 위해서 <code>trimLeft</code> 이라는 별칭을 가집니다. 일부 엔진에서 이것은 다음 예시를 의미합니다.</p> - -<pre class="brush: js">String.prototype.trimLeft.name === "trimStart";</pre> - -<h2 id="examples">예제</h2> - -<h3 id="using_trimStart">trimStart() 사용</h3> - -<p>다음 예제는<code>'foo '</code>문자열을 표시합니다.</p> - -<pre class="brush: js highlight: [5]">var str = ' foo '; - -console.log(str.length); // 8 - -str = str.trimStart(); -console.log(str.length); // 5 -console.log(str); // 'foo ' -</pre> - -<h2 id="polyfill">폴리필</h2> - -<pre class="brush: js highlight: [5]">//https://github.com/FabioVergani/js-Polyfill_String-trimStart - -(function(w){ - var String=w.String, Proto=String.prototype; - - (function(o,p){ - if(p in o?o[p]?false:true:true){ - var r=/^\s+/; - o[p]=o.trimLeft||function(){ - return this.replace(r,'') - } - } - })(Proto,'trimStart'); - -})(window); - -/* -ES6: -(w=>{ - const String=w.String, Proto=String.prototype; - - ((o,p)=>{ - if(p in o?o[p]?false:true:true){ - const r=/^\s+/; - o[p]=o.trimLeft||function(){ - return this.replace(r,'') - } - } - })(Proto,'trimStart'); - -})(window); -*/</pre> - -<h2 id="specifications">명세서</h2> - -{{Specifications}} - -<h2 id="browser_compatibility">브라우저 호환성</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">같이 보기</h2> - -<ul> - <li><code>String.prototype.trimStart</code>의 폴리필은 <a href="https://github.com/zloirock/core-js#ecmascript-string-and-regexp"><code>core-js</code></a>를 참고하세요.</li> - <li>{{jsxref("String.prototype.trim()")}}</li> - <li>{{jsxref("String.prototype.trimEnd()")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/trimstart/index.md b/files/ko/web/javascript/reference/global_objects/string/trimstart/index.md new file mode 100644 index 0000000000..46291bea6b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/trimstart/index.md @@ -0,0 +1,106 @@ +--- +title: String.prototype.trimStart() +slug: Web/JavaScript/Reference/Global_Objects/String/trimStart +tags: +- JavaScript +- Method +- Prototype +- Reference +- String +- Polyfill +browser-compat: javascript.builtins.String.trimStart +translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart +--- +{{JSRef}} + +**`trimStart()`** 메서드는 문자열 시작부분의 공백을 제거합니다. 또한 `trimLeft()`라는 별칭으로 호출이 가능합니다. +{{EmbedInteractiveExample("pages/js/string-trimstart.html")}} + +## 구문 + +```js +trimStart() + +trimLeft() +``` + +### 반환값 + +`str` 시작부분(왼쪽)에서 공백이 제거된 새 문자열을 반환합니다. +`str` 에 공백이 없을시에도 에러가 발생하지 않고 여전히 새 문자열(본질적으로 `str` 의 복사본)이 반환됩니다. + +### 별칭 + +{{jsxref("String.prototype.padStart")}} 표준 메서드 이름과 같은 함수의 일관성을 위해서 `trimStart` 가 되었습니다. +그러나, 웹 호환성을 위해서 `trimLeft` 이라는 별칭을 가집니다. 일부 엔진에서 이것은 다음 예시를 의미합니다. + +```js +String.prototype.trimLeft.name === "trimStart"; +``` + +## 예제 + +### trimStart() 사용 + +다음 예제는 `'foo '` 문자열을 표시합니다. + +```js +var str = ' foo '; + +console.log(str.length); // 8 + +str = str.trimStart(); +console.log(str.length); // 5 +console.log(str); // 'foo ' +``` + +## 폴리필 + +```js +//https://github.com/FabioVergani/js-Polyfill_String-trimStart + +(function(w){ + var String=w.String, Proto=String.prototype; + + (function(o,p){ + if(p in o?o[p]?false:true:true){ + var r=/^\s+/; + o[p]=o.trimLeft||function(){ + return this.replace(r,'') + } + } + })(Proto,'trimStart'); + +})(window); + +/* +ES6: +(w=>{ + const String=w.String, Proto=String.prototype; + + ((o,p)=>{ + if(p in o?o[p]?false:true:true){ + const r=/^\s+/; + o[p]=o.trimLeft||function(){ + return this.replace(r,'') + } + } + })(Proto,'trimStart'); + +})(window); +*/ +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- `String.prototype.trimStart` 의 폴리필은 [`core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)를 참고하세요. +- {{jsxref("String.prototype.trim()")}} +- {{jsxref("String.prototype.trimEnd()")}} diff --git a/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html b/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html index 73badf1974..0002ae6039 100644 --- a/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html +++ b/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html @@ -95,7 +95,7 @@ try { } </pre> -<h2 id="명세" name="명세">명세</h2> +<h2 id="명세">명세</h2> {{Specifications}} diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html index eb7dd71f5f..ae40207524 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html @@ -66,7 +66,7 @@ fetch('simple.wasm').then(response => </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html index 40ba328985..2c7456515a 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html @@ -94,7 +94,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html index a713ca1c0d..31f5a3125a 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html @@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStrea <h3 id="Exceptions">Exceptions</h3> <ul> - <li><code>bufferSource</code>가 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a>가 아니면 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError" title="TypeError 객체는 변수의 값이 원하는 타입이 아닐 때 발생하는 에러를 표현합니다."><code>TypeError</code></a>가 발생합니다.</li> + <li><code>bufferSource</code>가 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a>가 아니면 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>가 발생합니다.</li> <li>컴파일에 실패하면 promise는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WebAssembly.CompileError</code></a>와 함께 reject가 반환됩니다.</li> </ul> @@ -62,7 +62,7 @@ WebAssembly.compileStreaming(fetch('simple.wasm')) </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html index c85d74b53c..710ad041e8 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html @@ -98,7 +98,7 @@ WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } }) </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/index.html index 8412c9f0e4..21e6b071af 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/index.html @@ -85,7 +85,7 @@ WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <div>{{Compat("javascript.builtins.WebAssembly")}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html index 3141c6809a..7dc39f1720 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html @@ -57,7 +57,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html index 69e6b38bf8..3359c25875 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html @@ -151,7 +151,7 @@ onmessage = function(e) { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> <p>{{Compat("javascript.builtins.WebAssembly.instantiate")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html index e1b2fde3b7..2b453ce77e 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html @@ -66,7 +66,7 @@ WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html index b9b5c3264c..e94c685edb 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html @@ -96,7 +96,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html index 96b1614fff..edb189e2ae 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html @@ -95,7 +95,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html index 814835fd00..f15f7a1098 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html @@ -66,7 +66,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html index ebd8da6f46..83a82c3d09 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html @@ -94,7 +94,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html index 9d86fe40c7..de67a5c318 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html @@ -113,7 +113,7 @@ console.log(tbl.get(1)); // "null"</pre> </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html index a5ea4850e5..acdba73a2f 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html @@ -58,7 +58,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/iteration_protocols/index.html b/files/ko/web/javascript/reference/iteration_protocols/index.html index d0c8a55456..eacacb8f0e 100644 --- a/files/ko/web/javascript/reference/iteration_protocols/index.html +++ b/files/ko/web/javascript/reference/iteration_protocols/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Iteration_protocols <p>2개의 protocol이 있습니다 : <a href="#iterable">iterable protocol</a> 과 <a href="#iterator">iterator protocol</a>.</p> -<h2 id="iterable" name="iterable">The iterable protocol</h2> +<h2 id="iterable">The iterable protocol</h2> <p><strong>iterable</strong> protocol 은 JavaScript 객체들이, 예를 들어 {{jsxref("Statements/for...of", "for..of")}} 구조에서 어떠한 value 들이 loop 되는 것과 같은 iteration 동작을 정의하거나 사용자 정의하는 것을 허용합니다. 다른 type 들({{jsxref("Object")}} 와 같은)이 그렇지 않은 반면에, 어떤 built-in type 들은 {{jsxref("Array")}} 또는 {{jsxref("Map")}} 과 같은 default iteration 동작으로 <a href="#Builtin_iterables">built-in iterables</a> 입니다.</p> @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Iteration_protocols <p>어떠한 객체가 반복(Iterate)되어야 한다면 이 객체의 <code>@@iterator</code> 메소드가 인수없이 호출되고, 반환된 <strong>iterator</strong>는 반복을 통해서 획득할 값들을 얻을 때 사용됩니다.</p> -<h2 id="iterator" name="iterator">The iterator protocol</h2> +<h2 id="iterator">The iterator protocol</h2> <p><strong>iterator </strong>protocol 은 value( finite 또는 infinite) 들의 sequence 를 만드는 표준 방법을 정의합니다. </p> diff --git a/files/ko/web/javascript/reference/operators/async_function/index.html b/files/ko/web/javascript/reference/operators/async_function/index.html index d1ec146ca4..fda50e9a4a 100644 --- a/files/ko/web/javascript/reference/operators/async_function/index.html +++ b/files/ko/web/javascript/reference/operators/async_function/index.html @@ -1,13 +1,14 @@ --- title: async function 표현식 slug: Web/JavaScript/Reference/Operators/async_function +browser-compat: javascript.operators.async_function translation_of: Web/JavaScript/Reference/Operators/async_function --- <div>{{jsSidebar("Operators")}}</div> <p><strong><code>async function</code></strong> 키워드는 표현식 내에서 <code>async</code> 함수를 정의하기 위해 사용됩니다.</p> -<p>또한 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" title="The async function keyword can be used to define async functions inside expressions.">async function statement</a>을 사용하여 async 함수를 정의할 수 있습니다.</p> +<p>또한 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function statement</a>을 사용하여 async 함수를 정의할 수 있습니다.</p> <h2 id="문법">문법</h2> @@ -83,9 +84,7 @@ add(10).then(v => { <h2 id="Browser_compatibility">Browser compatibility</h2> -<div>{{Compat("javascript.operators.async_function_expression")}} </div> - -<div id="compat-mobile"></div> +<div>{{Compat}}</div> <h2 id="See_also">See also</h2> diff --git a/files/ko/web/javascript/reference/operators/class/index.html b/files/ko/web/javascript/reference/operators/class/index.html index d15b532fbc..6ac133bf39 100644 --- a/files/ko/web/javascript/reference/operators/class/index.html +++ b/files/ko/web/javascript/reference/operators/class/index.html @@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Operators/class <p>class 식은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/class">class 문</a>과 구문이 비슷합니다. 그러나, class 식의 경우 클래스명("binding identifier")을 생략할 수 있는데 class 문으로는 할 수 없습니다.</p> -<p>class 문과 같이, class 식의 본체는 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a>에서 실행됩니다.</p> +<p>class 문과 같이, class 식의 본체는 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>에서 실행됩니다.</p> diff --git a/files/ko/web/javascript/reference/operators/delete/index.html b/files/ko/web/javascript/reference/operators/delete/index.html index 037c3bcd98..d2eafd97f1 100644 --- a/files/ko/web/javascript/reference/operators/delete/index.html +++ b/files/ko/web/javascript/reference/operators/delete/index.html @@ -6,6 +6,7 @@ tags: - Operator - Property - Reference +browser-compat: javascript.operators.delete translation_of: Web/JavaScript/Reference/Operators/delete --- <div>{{jsSidebar("Operators")}}</div> @@ -265,7 +266,7 @@ if (3 in trees) { <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div id="compat-mobile">{{Compat("javascript.operators.delete")}}</div> +<div>{{Compat}}</div> <h2 id="크로스_브라우저_참고사항">크로스 브라우저 참고사항</h2> diff --git a/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html index aae1bd3e00..e367513864 100644 --- a/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html +++ b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html @@ -341,7 +341,7 @@ whois(user); // "jdoe is John"</pre> <h3 id="계산된_속성_이름과_구조_분해">계산된 속성 이름과 구조 분해</h3> -<p>계산된 속성 이름(computed property name)은, <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names" title="object literals">객체 리터럴</a>과 비슷하게 구조 분해에도 사용될 수 있습니다.</p> +<p>계산된 속성 이름(computed property name)은, <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">객체 리터럴</a>과 비슷하게 구조 분해에도 사용될 수 있습니다.</p> <pre class="brush: js">let key = "z"; let { [key]: foo } = { z: "bar" }; @@ -404,6 +404,6 @@ console.log(fizzBuzz); // "true" <h2 id="같이_보기">같이 보기</h2> <ul> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="Assignment operators">할당 연산자</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">할당 연산자</a></li> <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li> </ul> diff --git a/files/ko/web/javascript/reference/operators/function/index.html b/files/ko/web/javascript/reference/operators/function/index.html index 5f4977bfc7..caa5edbfc0 100644 --- a/files/ko/web/javascript/reference/operators/function/index.html +++ b/files/ko/web/javascript/reference/operators/function/index.html @@ -37,7 +37,7 @@ translation_of: Web/JavaScript/Reference/Operators/function <h2 id="설명">설명</h2> -<p>함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function" title="function statement">function 문</a> 참조). 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로 <em>익명</em> 함수를 만들 경우 이 이름을 생략할 수 있습니다. 함수 표현식은 정의하자마자 실행되는 <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE (즉시 호출되는 함수 표현식)</a>로 사용될 수 있습니다. 더 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Reference/Functions" title="functions">함수</a> 장 참조.</p> +<p>함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function">function 문</a> 참조). 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로 <em>익명</em> 함수를 만들 경우 이 이름을 생략할 수 있습니다. 함수 표현식은 정의하자마자 실행되는 <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE (즉시 호출되는 함수 표현식)</a>로 사용될 수 있습니다. 더 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Reference/Functions">함수</a> 장 참조.</p> <h3 id="Function_expression_끌어올리기">Function expression 끌어올리기</h3> diff --git a/files/ko/web/javascript/reference/operators/index.html b/files/ko/web/javascript/reference/operators/index.html index 1ddd778228..16133a2db7 100644 --- a/files/ko/web/javascript/reference/operators/index.html +++ b/files/ko/web/javascript/reference/operators/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Operators --- <div>{{jsSidebar("Operators")}}</div> -<p>이 장은 JavaScript의 모든 연산자<sup>operator</sup>, 식<sup>expression</sup> 및 키워드를 나열합니다.</p> +<p>이 장은 JavaScript의 모든 연산자, 식 및 키워드를 나열합니다.</p> <h2 id="항목별_식_및_연산자">항목별 식 및 연산자</h2> @@ -28,7 +28,7 @@ translation_of: Web/JavaScript/Reference/Operators <dt>{{JSxRef("Operators/class", "class")}}</dt> <dd><code>class</code> 키워드는 클래스를 정의합니다.</dd> <dt>{{JSxRef("Operators/function*", "function*")}}</dt> - <dd><code>function*</code> 키워드는 생성기<sup>generator</sup> 함수 식을 정의합니다.</dd> + <dd><code>function*</code> 키워드는 생성기 함수 식을 정의합니다.</dd> <dt>{{JSxRef("Operators/yield", "yield")}}</dt> <dd>생성기 함수를 일시정지 및 재개합니다.</dd> <dt>{{JSxRef("Operators/yield*", "yield*")}}</dt> @@ -162,14 +162,14 @@ translation_of: Web/JavaScript/Reference/Operators <dt>{{JSxRef("Operators/Inequality", "!=")}}</dt> <dd>부등 연산자.</dd> <dt>{{JSxRef("Operators/Strict_equality", "===")}}</dt> - <dd>일치<sup>identity</sup> 연산자.</dd> + <dd>일치 연산자.</dd> <dt>{{JSxRef("Operators/Strict_inequality", "!==")}}</dt> <dd>불일치 연산자.</dd> </dl> <h3 id="비트_시프트_연산자">비트 시프트 연산자</h3> -<p>피연산자의 모든 비트를 이동<sup>shift</sup>하는 연산.</p> +<p>피연산자의 모든 비트를 시프트하는 연산.</p> <dl> <dt>{{JSxRef("Operators/Left_shift", "<<")}}</dt> diff --git a/files/ko/web/javascript/reference/operators/object_initializer/index.html b/files/ko/web/javascript/reference/operators/object_initializer/index.html index 3a4bb219af..b3bebf8541 100644 --- a/files/ko/web/javascript/reference/operators/object_initializer/index.html +++ b/files/ko/web/javascript/reference/operators/object_initializer/index.html @@ -90,7 +90,7 @@ var o = { <h3 id="속성_접근">속성 접근</h3> -<p>일단 객체를 생성하면, 읽거나 바꿀 수 있습니다. 객체 속성은 점 표기법 또는 각괄호 표기법을 사용하여 액세스될 수 있습니다. (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="property accessors">속성 접근자</a> 참조.)</p> +<p>일단 객체를 생성하면, 읽거나 바꿀 수 있습니다. 객체 속성은 점 표기법 또는 각괄호 표기법을 사용하여 액세스될 수 있습니다. (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a> 참조.)</p> <pre class="brush: js notranslate">object.foo; // "bar" object["age"]; // 42 @@ -185,7 +185,7 @@ var o = { <h3 id="계산된_속성명">계산된 속성명</h3> -<p>ECMAScript 2015를 시작으로, 객체 초기화 구문은 계산된 속성명(computed property name)도 지원합니다. 각괄호 <code>[]</code> 안에 식을 넣을 수 있고, 식이 계산되고 그 결과가 속성명으로 사용됩니다. 이는 이미 속성을 읽고 설정하는 데 사용했을 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="property accessor">속성 접근자</a> 구문의 각괄호 표기법을 연상시킵니다. </p> +<p>ECMAScript 2015를 시작으로, 객체 초기화 구문은 계산된 속성명(computed property name)도 지원합니다. 각괄호 <code>[]</code> 안에 식을 넣을 수 있고, 식이 계산되고 그 결과가 속성명으로 사용됩니다. 이는 이미 속성을 읽고 설정하는 데 사용했을 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a> 구문의 각괄호 표기법을 연상시킵니다. </p> <p>이제 당신은 객체 리터럴에서도 같은 구문을 쓸 수 있습니다:</p> @@ -288,5 +288,5 @@ assert(obj3.__proto__ === 17); <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a></li> <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/ko/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar" title="Lexical grammar">어휘 문법</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar">어휘 문법</a></li> </ul> diff --git a/files/ko/web/javascript/reference/operators/operator_precedence/index.html b/files/ko/web/javascript/reference/operators/operator_precedence/index.html index 0d37a262c5..9f9ea86a93 100644 --- a/files/ko/web/javascript/reference/operators/operator_precedence/index.html +++ b/files/ko/web/javascript/reference/operators/operator_precedence/index.html @@ -19,9 +19,9 @@ original_slug: Web/JavaScript/Reference/Operators/연산자_우선순위 <h2 id="우선순위와_결합성">우선순위와 결합성</h2> -<p>아래와 같이 표현할 수 있는 표현식을 생각해 봅시다. 연산자<sub>1</sub>과 연산자<sub>2</sub>의 자리에는 아무 연산자를 넣을 수 있습니다.</p> +<p>아래와 같이 표현할 수 있는 표현식을 생각해 봅시다. 연산자1과 연산자2의 자리에는 아무 연산자를 넣을 수 있습니다.</p> -<pre class="syntaxbox">a 연산자<sub>1</sub> b 연산자<sub>2</sub> c</pre> +<pre class="syntaxbox">a 연산자1 b 연산자2 c</pre> <p>두 연산자의 우선순위(아래 표 참조)가 다를 경우, 우선순위가 높은 연산자가 먼저 실행되고 결합성은 영향을 미치지 않습니다. 아래 예제에서는 덧셈이 곱셈보다 먼저 쓰였음에도 곱셈의 우선순위가 높기 때문에 먼저 실행됩니다.</p> @@ -30,7 +30,7 @@ console.log(3 + (10 * 2)); // 23을 출력, 괄호는 불필요함 console.log((3 + 10) * 2); // 26을 출력, 괄호로 인해 실행 순서가 바뀜 </pre> -<p>좌결합성(왼쪽에서 오른쪽으로)은 표현식이 <code>(a 연산자<sub>1</sub> b) 연산자<sub>2</sub> c</code>와 같이, 우결합성(오른쪽에서 왼쪽으로)은 <code>a 연산자<sub>1</sub> (b 연산자<sub>2</sub> c)</code>와 같이 계산된다는 의미입니다. 대입 연산자는 우결합성이므로 다음과 같은 코드를 작성할 수 있습니다.</p> +<p>좌결합성(왼쪽에서 오른쪽으로)은 표현식이 <code>(a 연산자1 b) 연산자2 c</code>와 같이, 우결합성(오른쪽에서 왼쪽으로)은 <code>a 연산자1 (b 연산자2 c)</code>와 같이 계산된다는 의미입니다. 대입 연산자는 우결합성이므로 다음과 같은 코드를 작성할 수 있습니다.</p> <pre class="brush: js">a = b = 5; // a = (b = 5);와 같음 </pre> diff --git a/files/ko/web/javascript/reference/operators/property_accessors/index.html b/files/ko/web/javascript/reference/operators/property_accessors/index.html index 83ae2e0b80..790ababd4e 100644 --- a/files/ko/web/javascript/reference/operators/property_accessors/index.html +++ b/files/ko/web/javascript/reference/operators/property_accessors/index.html @@ -93,7 +93,7 @@ console.log(object[bar]); <h3 id="메서드_바인딩">메서드 바인딩</h3> -<p>메서드는 해당 메서드의 객체에 바인딩되지 않습니다. 특히 <code>this</code>는 메서드 내에 고정되지 않으므로 <code>this</code>가 항상 현재 메서드를 포함하는 객체를 참조하는건 아닙니다. 대신, <code>this</code>는 함수 호출 방식에 따라 "전달"됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/this#bind_메서드" title="method binding">메서드 바인딩</a>을 참고하세요.</p> +<p>메서드는 해당 메서드의 객체에 바인딩되지 않습니다. 특히 <code>this</code>는 메서드 내에 고정되지 않으므로 <code>this</code>가 항상 현재 메서드를 포함하는 객체를 참조하는건 아닙니다. 대신, <code>this</code>는 함수 호출 방식에 따라 "전달"됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/this#bind_메서드">메서드 바인딩</a>을 참고하세요.</p> <h3 id="eval()_주의사항"><code>eval()</code> 주의사항</h3> diff --git a/files/ko/web/javascript/reference/operators/this/index.html b/files/ko/web/javascript/reference/operators/this/index.html index bc27366762..e74032c1c6 100644 --- a/files/ko/web/javascript/reference/operators/this/index.html +++ b/files/ko/web/javascript/reference/operators/this/index.html @@ -28,7 +28,7 @@ translation_of: Web/JavaScript/Reference/Operators/this <h2 id="전역_문맥">전역 문맥</h2> -<p>전역 실행 문맥<sup>global execution context</sup>에서 <code>this</code>는 엄격 모드 여부에 관계 없이 전역 객체를 참조합니다.</p> +<p>전역 실행 맥락에서 <code>this</code>는 엄격 모드 여부에 관계 없이 전역 객체를 참조합니다.</p> <pre class="brush: js notranslate">// 웹 브라우저에서는 window 객체가 전역 객체 console.log(this === window); // true @@ -142,7 +142,7 @@ console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty</pre> <h3 id="화살표_함수">화살표 함수</h3> -<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수</a>에서 <code>this</code>는 자신을 감싼 정적 범위<sup>lexical context</sup>입니다. 전역 코드에서는 전역 객체를 가리킵니다.</p> +<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수</a>에서 <code>this</code>는 자신을 감싼 정적 범위입니다. 전역 코드에서는 전역 객체를 가리킵니다.</p> <pre class="brush: js notranslate">var globalObject = this; var foo = (() => this); diff --git a/files/ko/web/javascript/reference/statements/async_function/index.html b/files/ko/web/javascript/reference/statements/async_function/index.html index ab34076481..28fbcaf016 100644 --- a/files/ko/web/javascript/reference/statements/async_function/index.html +++ b/files/ko/web/javascript/reference/statements/async_function/index.html @@ -38,9 +38,9 @@ translation_of: Web/JavaScript/Reference/Statements/async_function <dl> <dt><code>statements</code></dt> - <dd><font face="Consolas, Liberation Mono, Courier, monospace">함수본문을 구성하는 내용.</font></dd> + <dd>함수 본문을 구성하는 내용.</dd> <dt> - <h3 id="반환_값"><font face="Consolas, Liberation Mono, Courier, monospace">반환 값</font></h3> + <h3 id="반환_값">반환 값</h3> <p>Promise : async 함수에 의해 반환 된 값으로 해결되거나 async함수 내에서 발생하는 캐치되지 않는 예외로 거부되는 값.</p> </dt> diff --git a/files/ko/web/javascript/reference/statements/const/index.html b/files/ko/web/javascript/reference/statements/const/index.html index 1cbd7ea7aa..00f1eed2e9 100644 --- a/files/ko/web/javascript/reference/statements/const/index.html +++ b/files/ko/web/javascript/reference/statements/const/index.html @@ -34,7 +34,7 @@ translation_of: Web/JavaScript/Reference/Statements/const <p>상수는 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 문을 사용하여 정의된 변수와 마찬가지로 블록 범위(block-scope)입니다. 상수의 값은 재할당을 통해 바뀔 수 없고 재선언될 수 없습니다.</p> -<p><code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code>에 적용한 "<a href="/ko/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let" title="temporal dead zone">일시적 사각 지대</a>"에 관한 모든 고려는, <code>const</code>에도 적용합니다.</p> +<p><code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code>에 적용한 "<a href="/ko/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let">일시적 사각 지대</a>"에 관한 모든 고려는, <code>const</code>에도 적용합니다.</p> <p>상수는 같은 범위의 상수 또는 변수와 그 이름을 공유할 수 없습니다.</p> diff --git a/files/ko/web/javascript/reference/statements/do...while/index.html b/files/ko/web/javascript/reference/statements/do...while/index.html index 3e54d6367f..9cd6ed0e5c 100644 --- a/files/ko/web/javascript/reference/statements/do...while/index.html +++ b/files/ko/web/javascript/reference/statements/do...while/index.html @@ -30,7 +30,7 @@ while (<em>조건식</em>); <dd>루프가 실행될 때마다 평가되는 식입니다. 만약 조건식이 참으로 평가되었다면, <code>구문</code> 이 다시 실행됩니다. 만약 조건식이 거짓으로 평가되었다면, 자바스크립트는 <code>do...while</code>. 구문 밑에 있는 구문들을 실행시킵니다.</dd> </dl> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <h3 id="do...while"><code>do...while</code></h3> diff --git a/files/ko/web/javascript/reference/statements/export/index.html b/files/ko/web/javascript/reference/statements/export/index.html index 1c15d4e7f9..98cb2ee55a 100644 --- a/files/ko/web/javascript/reference/statements/export/index.html +++ b/files/ko/web/javascript/reference/statements/export/index.html @@ -148,7 +148,7 @@ console.log(foo); // 4.555806215962888</pre> <h3 id="기본_내보내기_사용">기본 내보내기 사용</h3> -<p>단일 값을 내보낼 때나 모듈의 폴백<sup>fallback</sup> 값이 필요할 땐 기본 내보내기를 사용할 수 있습니다.</p> +<p>단일 값을 내보낼 때나 모듈의 폴백 값이 필요할 땐 기본 내보내기를 사용할 수 있습니다.</p> <pre class="brush: js">// module "my-module.js" export default function cube(x) { @@ -160,7 +160,7 @@ export default function cube(x) { <pre class="brush: js">import cube from './my-module.js'; console.log(cube(3)); // 27</pre> -<p><code><font face="Open Sans, arial, sans-serif">e</font>xport default</code>를 사용할 때 <code>var</code>, <code>let</code>, <code>const</code>는 사용하지 못합니다.</p> +<p><code>export default</code>를 사용할 때 <code>var</code>, <code>let</code>, <code>const</code>는 사용하지 못합니다.</p> <h2 id="명세">명세</h2> diff --git a/files/ko/web/javascript/reference/statements/for...in/index.html b/files/ko/web/javascript/reference/statements/for...in/index.html index d51a3c79dc..f5e54dcac2 100644 --- a/files/ko/web/javascript/reference/statements/for...in/index.html +++ b/files/ko/web/javascript/reference/statements/for...in/index.html @@ -12,11 +12,11 @@ translation_of: Web/JavaScript/Reference/Statements/for...in <p>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</p> -<h2 id="Syntax" name="Syntax">문법</h2> +<h2 id="Syntax">문법</h2> <pre class="syntaxbox notranslate">for (<var>variable</var> in <var>object</var>) {<em> ... </em>}</pre> -<h3 id="Parameters" name="Parameters">파라미터</h3> +<h3 id="Parameters">파라미터</h3> <dl> <dt><code>variable</code></dt> @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Reference/Statements/for...in <dd>반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체.</dd> </dl> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p><code>for...in</code>문은 열거 가능한 non-Symbol 속성에 대해서만 반복합니다.<br> <code>Array</code>나 <code>Object</code> 등 내장 constructor를 통해 만들어진 객체는 {{jsxref("String")}}의 {{jsxref("String.indexOf", "indexOf()")}}, {{jsxref("Object")}}의 {{jsxref("Object.toString", "toString()")}}와 같이 <code>Object.prototype</code>, <code>String.prototype</code> 로부터 열거가 가능하지 않은 속성들을 상속해왔습니다. <code>for...in</code>문은 객체 자체의 모든 열거 가능한 속성들과 프로토타입 체인으로부터 상속받은 속성들에 대해 반복할 것입니다. (더 가까운 프로토타입의 속성들이 프로토타입 체인 객체로부터 더 멀리 떨어진 프로토 타입의 속성보다 더 우선합니다.)</p> @@ -58,7 +58,7 @@ translation_of: Web/JavaScript/Reference/Statements/for...in <p>이것은 쉽게 객체의 속성을 확인(콘솔이나 다른 방법으로 출력)할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있습니다. 배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 데이터의 경우(속성이 "key"의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용할 수 있습니다.</p> -<h2 id="Example" name="Example">예제</h2> +<h2 id="Example">예제</h2> <h3 id="for...in의_사용">for...in의 사용</h3> diff --git a/files/ko/web/javascript/reference/statements/for/index.html b/files/ko/web/javascript/reference/statements/for/index.html index cba49dbba6..57c0df4971 100644 --- a/files/ko/web/javascript/reference/statements/for/index.html +++ b/files/ko/web/javascript/reference/statements/for/index.html @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Statements/for <dl> <dt><code>initialization</code></dt> - <dd>식(할당식 포함) 또는 변수 선언. 주로 카운터 변수를 초기화할 때 사용합니다. <code>var</code> 또는 <code>let</code> 키워드를 사용해 새로운 변수를 선언할 수도 있습니다. <code>var</code> 키워드로 선언한 변수는 반복문에 제한되지 않습니다. 즉 <code>for</code> 문과 같은 범위<sup>scope</sup>에 위치합니다. <code>let</code> 키워드로 선언한 변수는 반복문의 지역 변수가 됩니다.<br> + <dd>식(할당식 포함) 또는 변수 선언. 주로 카운터 변수를 초기화할 때 사용합니다. <code>var</code> 또는 <code>let</code> 키워드를 사용해 새로운 변수를 선언할 수도 있습니다. <code>var</code> 키워드로 선언한 변수는 반복문에 제한되지 않습니다. 즉 <code>for</code> 문과 같은 범위에 위치합니다. <code>let</code> 키워드로 선언한 변수는 반복문의 지역 변수가 됩니다.<br> <br> 식의 결과는 버려집니다.</dd> <dt><code>condition</code></dt> diff --git a/files/ko/web/javascript/reference/statements/if...else/index.html b/files/ko/web/javascript/reference/statements/if...else/index.html index a6fb34c1ac..4e4c2abecc 100644 --- a/files/ko/web/javascript/reference/statements/if...else/index.html +++ b/files/ko/web/javascript/reference/statements/if...else/index.html @@ -29,7 +29,7 @@ translation_of: Web/JavaScript/Reference/Statements/if...else <dl> <dt><code>statement1</code></dt> <dd>조건이 참으로 평가될 경우 실행되는 문입니다.<br> - 중첩된 if구문을 포함하여 어떤 구문이든 쓸 수 있습니다. 다중구문을 사용할 경우 ({ ... })<a href="/en-US/docs/Web/JavaScript/Reference/Statements/block" title="en/JavaScript/Reference/Statements/block">블럭</a> 구문 으로 그룹화 하고 실행하지 않으려면 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">빈</a> 구문을 사용합니다.</dd> + 중첩된 if구문을 포함하여 어떤 구문이든 쓸 수 있습니다. 다중구문을 사용할 경우 ({ ... })<a href="/en-US/docs/Web/JavaScript/Reference/Statements/block">블럭</a> 구문 으로 그룹화 하고 실행하지 않으려면 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">빈</a> 구문을 사용합니다.</dd> </dl> <dl> diff --git a/files/ko/web/javascript/reference/statements/import/index.html b/files/ko/web/javascript/reference/statements/import/index.html index ce3a1536cb..8a4c9004e5 100644 --- a/files/ko/web/javascript/reference/statements/import/index.html +++ b/files/ko/web/javascript/reference/statements/import/index.html @@ -48,7 +48,7 @@ var promise = import("module-name");</pre> <h2 id="설명">설명</h2> -<p><code>name</code> 파라미터는 export 되는 멤버를 받을 오브젝트의 이름입니다. <code>member</code> 파라미터는 각각의 멤버를 지정하지만, <code>name</code> 파라미터는 모두를 가져옵니다. 모듈에서 <font face="Courier New, Andale Mono, monospace">name</font> 은 멤버 대신 하나의 default 파라미터를 통해 export 하는 경우에도 동작할 수 있습니다. 다음의 명확한 예제 문법을 살펴봅시다.</p> +<p><code>name</code> 파라미터는 export 되는 멤버를 받을 오브젝트의 이름입니다. <code>member</code> 파라미터는 각각의 멤버를 지정하지만, <code>name</code> 파라미터는 모두를 가져옵니다. 모듈에서 name 은 멤버 대신 하나의 default 파라미터를 통해 export 하는 경우에도 동작할 수 있습니다. 다음의 명확한 예제 문법을 살펴봅시다.</p> <p>모듈 전체를 가져옵니다. export 한 모든 것들을 현재 범위(스크립트 파일 하나로 구분되는 모듈 범위) 내에 <code>myModule</code> 로 바인딩되어 들어갑니다.</p> diff --git a/files/ko/web/javascript/reference/statements/index.html b/files/ko/web/javascript/reference/statements/index.html index cd83b9f1c0..bf423222d2 100644 --- a/files/ko/web/javascript/reference/statements/index.html +++ b/files/ko/web/javascript/reference/statements/index.html @@ -53,7 +53,7 @@ translation_of: Web/JavaScript/Reference/Statements <dt>{{jsxref("Statements/function", "function")}}</dt> <dd>지정된 매개변수를 갖는 함수를 선언합니다.</dd> <dt>{{jsxref("Statements/function*", "function*")}}</dt> - <dd><a href="/ko/docs/Web/JavaScript/Guide/The_Iterator_protocol" title="iterators">반복기</a>를 더 쉽게 작성할 수 있게 하는 생성기 함수.</dd> + <dd><a href="/ko/docs/Web/JavaScript/Guide/The_Iterator_protocol">반복기</a>를 더 쉽게 작성할 수 있게 하는 생성기 함수.</dd> <dt>{{jsxref("Statements/return", "return")}}</dt> <dd>함수에 의해 반환되는 값을 지정합니다.</dd> <dt>{{jsxref("Statements/class", "class")}}</dt> diff --git a/files/ko/web/javascript/reference/statements/switch/index.html b/files/ko/web/javascript/reference/statements/switch/index.html index b4eb68e5a7..46b13e380d 100644 --- a/files/ko/web/javascript/reference/statements/switch/index.html +++ b/files/ko/web/javascript/reference/statements/switch/index.html @@ -49,7 +49,7 @@ translation_of: Web/JavaScript/Reference/Statements/switch <p>If no matching <code>case</code> clause is found, the program looks for the optional <code>default</code> clause, and if found, transfers control to that clause, executing the associated statements. If no <code>default</code> clause is found, the program continues execution at the statement following the end of <code>switch</code>. By convention, the <code>default</code> clause is the last clause, but it does not need to be so.</p> -<p>The optional <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If <code>break</code> is omitted, the program continues execution at the next statement in the <code>switch</code> statement.</p> +<p>The optional <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a></code> statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If <code>break</code> is omitted, the program continues execution at the next statement in the <code>switch</code> statement.</p> <h2 id="예제">예제</h2> diff --git a/files/ko/web/javascript/reference/statements/var/index.html b/files/ko/web/javascript/reference/statements/var/index.html index 4366c3ed73..6b71309f7b 100644 --- a/files/ko/web/javascript/reference/statements/var/index.html +++ b/files/ko/web/javascript/reference/statements/var/index.html @@ -109,7 +109,7 @@ var a, b = a = "A"; console.log(x + y); // undefinedA </pre> -<p>여기, x와 y는 어떠한 코드 실행하기 전에 선언되었다, 할당은 후에 발생하였다. "<code>x = y</code>"가 실행될 때, <code>y<font face="Open Sans, Arial, sans-serif">는 존재하여 </font></code><code>ReferenceError를 출력하진 않고</code> 값은 '<code>undefined</code>' 입니다. 그래서, <code>x는</code> undefined 값이 할당 됩니다. 그리고나서, <code>y는 </code>'A' 값이 할당 됩니다. 결과적으로, 첫번째 줄 이후에, <code>x === undefined && y === 'A'</code>, 이와 같은 결과가 됩니다.</p> +<p>여기, x와 y는 어떠한 코드 실행하기 전에 선언되었다, 할당은 후에 발생하였다. "<code>x = y</code>"가 실행될 때, <code>y</code>는 존재하여 <code>ReferenceError를 출력하진 않고</code> 값은 '<code>undefined</code>' 입니다. 그래서, <code>x는</code> undefined 값이 할당 됩니다. 그리고나서, <code>y는 </code>'A' 값이 할당 됩니다. 결과적으로, 첫번째 줄 이후에, <code>x === undefined && y === 'A'</code>, 이와 같은 결과가 됩니다.</p> <h3 id="다수의_변수들의_초기화">다수의 변수들의 초기화</h3> diff --git a/files/ko/web/javascript/reference/strict_mode/index.html b/files/ko/web/javascript/reference/strict_mode/index.html index 031985846d..90e1c5709c 100644 --- a/files/ko/web/javascript/reference/strict_mode/index.html +++ b/files/ko/web/javascript/reference/strict_mode/index.html @@ -171,7 +171,7 @@ with (obj) // !!! 구문 에러 <p>이름이 짧은 변수에 객체를 할당한 후, 변수에 해당하는 프로퍼티에 접근하는 간단한 대안은 <code>with</code> 를 대체할 준비가 되었습니다.</p> -<p>둘째로, <a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">엄격모드 코드의 <code>eval</code> 은 새로운 변수를 주위 스코프에 추가하지 않습니다</a>. 일반적인 코드에서 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">eval("var x;")</span></font> 는 변수 <code>x</code> 를 주위 함수나 전역 스코프에 추가합니다. 이는, 일반적으로 <code>eval</code> 호출을 포함하는 함수에서 인수나 지역 변수를 참조하지 않는 모든 이름은 런타임에 특정 정의에 반드시 매핑되어야 함을 의미합니다(<code>eval</code> 이 외부 변수를 숨기는 새로운 변수를 추가했기 때문입니다). 엄격모드에서 <code>eval</code> 은 evaluated 된 코드에서만 변수를 생성하므로, 외부 변수나 일부 로컬 변수에 참조하는지에 영향을 주지 않습니다.</p> +<p>둘째로, <a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">엄격모드 코드의 <code>eval</code> 은 새로운 변수를 주위 스코프에 추가하지 않습니다</a>. 일반적인 코드에서 <code>eval("var x;")</code> 는 변수 <code>x</code> 를 주위 함수나 전역 스코프에 추가합니다. 이는, 일반적으로 <code>eval</code> 호출을 포함하는 함수에서 인수나 지역 변수를 참조하지 않는 모든 이름은 런타임에 특정 정의에 반드시 매핑되어야 함을 의미합니다(<code>eval</code> 이 외부 변수를 숨기는 새로운 변수를 추가했기 때문입니다). 엄격모드에서 <code>eval</code> 은 evaluated 된 코드에서만 변수를 생성하므로, 외부 변수나 일부 로컬 변수에 참조하는지에 영향을 주지 않습니다.</p> <pre class="brush: js notranslate">var x = 17; var evalX = eval("'use strict'; var x = 42; x"); @@ -268,7 +268,7 @@ console.assert(fun.bind(true)() === true); <p>즉, 브라우저에서 엄격모드의 함수내 에서는 더 이상 <code>window</code> 객체를 <code>this</code> 를 통해 참조할 수 없습니다.</p> -<p>둘째로, 엄격모드에서는 ECMAScript의 일반적으로 구현된 확장을 통해 자바스크립트 스택을 "걷는"것이 불가능합니다. 이러한 일반적인 확장 코드는, 함수 <code>fun</code> 이 호출되는 중간에, <code>fun.caller</code> 는 가장 최근에 <code>fun</code> 을 호출한 함수이고 <code>fun.arguments</code> 는 <code>fun</code>을 호출하기 위한 <code>인</code><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">수</span></font> 입니다. "권한있는"함수와 (잠재적으로 보안되지 않은) 인수에 접근을 허용하기때문에 두가지 확장 모두 자바스크립트의 "보안" 문제가 됩니다. <code>fun</code> 이 엄격모드인경우, both <code>fun.caller</code> 와 <code>fun.arguments</code> 모두 설정 또는 검색될때 삭제 불가능한 속성이 됩니다.</p> +<p>둘째로, 엄격모드에서는 ECMAScript의 일반적으로 구현된 확장을 통해 자바스크립트 스택을 "걷는"것이 불가능합니다. 이러한 일반적인 확장 코드는, 함수 <code>fun</code> 이 호출되는 중간에, <code>fun.caller</code> 는 가장 최근에 <code>fun</code> 을 호출한 함수이고 <code>fun.arguments</code> 는 <code>fun</code>을 호출하기 위한 인수입니다. "권한있는"함수와 (잠재적으로 보안되지 않은) 인수에 접근을 허용하기때문에 두가지 확장 모두 자바스크립트의 "보안" 문제가 됩니다. <code>fun</code> 이 엄격모드인경우, both <code>fun.caller</code> 와 <code>fun.arguments</code> 모두 설정 또는 검색될때 삭제 불가능한 속성이 됩니다.</p> <pre class="brush: js notranslate">function restricted() { @@ -340,7 +340,7 @@ function baz(){ // kosher <h2 id="브라우저에서의_엄격_모드">브라우저에서의 엄격 모드</h2> -<p>현재 주류의 브라우저들은 엄격 모드를 지원하고 있습니다. 하지만, 아직도 현실에서 사용되는 수 많은 브라우저의 버전들은 엄격 모드를 부분적으로만 지원하거나(<a href="http://caniuse.com/use-strict" rel="external" title="caniuse.com availability of strict mode">Browser versions used in the wild that only have partial support for strict mode</a>), 아예 지원을 하지 않고 있기 때문에, 맹목적으로 여기에 의지할 수는 없습니다. (예를 들면, Internet Explorer 10 버전 이하!) <em>엄격 모드는 시멘틱을 바꿉니다. </em>이 변화들에 의지하는 것은 실수와 엄격 모드를 지원하지 않는 브라우저의 에러를 야기할 것입니다. 엄격 모드를 사용하는 데에 주의하는 것을 익히세요, 그리고 피쳐 테스트로 엄격 모드를 사용하기에 적절한 부분인지 확인하고 보완하세요. 마지막으로, <em>엄격 모드를 지원하는 브라우저와 그렇지 않은 브라우저에서 작성한 코드의 테스트를 확실히 하도록 하세요.</em> </p> +<p>현재 주류의 브라우저들은 엄격 모드를 지원하고 있습니다. 하지만, 아직도 현실에서 사용되는 수 많은 브라우저의 버전들은 엄격 모드를 부분적으로만 지원하거나(<a href="http://caniuse.com/use-strict" rel="external">Browser versions used in the wild that only have partial support for strict mode</a>), 아예 지원을 하지 않고 있기 때문에, 맹목적으로 여기에 의지할 수는 없습니다. (예를 들면, Internet Explorer 10 버전 이하!) <em>엄격 모드는 시멘틱을 바꿉니다. </em>이 변화들에 의지하는 것은 실수와 엄격 모드를 지원하지 않는 브라우저의 에러를 야기할 것입니다. 엄격 모드를 사용하는 데에 주의하는 것을 익히세요, 그리고 피쳐 테스트로 엄격 모드를 사용하기에 적절한 부분인지 확인하고 보완하세요. 마지막으로, <em>엄격 모드를 지원하는 브라우저와 그렇지 않은 브라우저에서 작성한 코드의 테스트를 확실히 하도록 하세요.</em> </p> <h2 id="명세">명세</h2> diff --git a/files/ko/web/javascript/reference/trailing_commas/index.html b/files/ko/web/javascript/reference/trailing_commas/index.html index aeaded7640..020febe480 100644 --- a/files/ko/web/javascript/reference/trailing_commas/index.html +++ b/files/ko/web/javascript/reference/trailing_commas/index.html @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Trailing_commas arr; // [1, 2, 3] arr.length; // 3</pre> -<p>trailing comma가 여러 개 있을 경우 빈 슬롯("구멍")이 생깁니다. 구멍이 있는 배열을 성기다<sup>sparse</sup>고 합니다(조밀한<sup>dense</sup> 배열에는 구멍이 없습니다). {{jsxref("Array.prototype.forEach()")}}나 {{jsxref("Array.prototype.map()")}}을 이용해 배열을 순회할 때는 빈 슬롯을 무시합니다.</p> +<p>trailing comma가 여러 개 있을 경우 빈 슬롯("구멍")이 생깁니다. 구멍이 있는 배열을 성기다(sparse)고 합니다(조밀한(dense) 배열에는 구멍이 없습니다). {{jsxref("Array.prototype.forEach()")}}나 {{jsxref("Array.prototype.map()")}}을 이용해 배열을 순회할 때는 빈 슬롯을 무시합니다.</p> <pre class="brush: js notranslate">var arr = [1, 2, 3,,,]; arr.length; // 5 |
