diff options
author | logic-finder <83723320+logic-finder@users.noreply.github.com> | 2021-08-16 09:10:51 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-08-16 09:10:51 +0900 |
commit | 4ad4ec00bd93c2344f9e8141508dce0baf22e00a (patch) | |
tree | 45eef5b246c3da9de45e900658dccbabbf619185 /files | |
parent | b06773332f8f14195691c638c82093250e739a32 (diff) | |
download | translated-content-4ad4ec00bd93c2344f9e8141508dce0baf22e00a.tar.gz translated-content-4ad4ec00bd93c2344f9e8141508dce0baf22e00a.tar.bz2 translated-content-4ad4ec00bd93c2344f9e8141508dce0baf22e00a.zip |
[ko] Overall modification for 'javascript building blocks' module (#1948)
* Overall modification
for javascript building blocks module.
* small fix
at introduction to event article.
* translation of word 'note' changed
노트 → 참고
Co-authored-by: hochan Lee <hochan049@gmail.com>
* translation of word 'module' changed
모듈 → 과정
Co-authored-by: hochan Lee <hochan049@gmail.com>
* Overall modification
* Small fixes
* delete contradictory content
* translate 'contact us'.
Co-authored-by: hochan Lee <hochan049@gmail.com>
Diffstat (limited to 'files')
12 files changed, 333 insertions, 319 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> |