Remove notranslate from JS guides

7 files changed, 112 insertions, 112 deletions

diff --git a/files/ko/web/javascript/guide/introduction/index.html b/files/ko/web/javascript/guide/introduction/index.html
index 537817b5b5..e7ae8ee946 100644
--- a/files/ko/web/javascript/guide/introduction/index.html
+++ b/files/ko/web/javascript/guide/introduction/index.html
@@ -118,7 +118,7 @@ original_slug: Web/JavaScript/Guide/소개
 
 <p>이 콘솔은 eval과 완전히 동일하게 동작합니다:마지막 입력된 표현식이 반환되죠. 간단하게 생각해서, 콘솔에 뭔가 입력할 때마다 eval로 감싼 console.log로 둘러싸인 형태라고 보시면 됩니다.</p>
 
-<pre class="notranslate">function greetMe(yourName) { alert('Hello ' + yourName); } <code>console.log(eval('3 + 5'));</code></pre>
+<pre>function greetMe(yourName) { alert('Hello ' + yourName); } <code>console.log(eval('3 + 5'));</code></pre>
 
 <h3 id="Scratchpad">Scratchpad</h3>
 
@@ -132,7 +132,7 @@ original_slug: Web/JavaScript/Guide/소개
 
 <p>JavaScript 작성을 시작하기 위해서, Scratchpad를 열고 첫 JavaScript 코드 "Hello World" 를 작성하세요.</p>
 
-<pre class="notranslate"><code>(function(){
+<pre><code>(function(){
   "use strict";
   /* Start of your code */
   function greetMe(yourName) {
diff --git a/files/ko/web/javascript/guide/iterators_and_generators/index.html b/files/ko/web/javascript/guide/iterators_and_generators/index.html
index 648b898504..7fea032059 100644
--- a/files/ko/web/javascript/guide/iterators_and_generators/index.html
+++ b/files/ko/web/javascript/guide/iterators_and_generators/index.html
@@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Guide/Iterators_and_Generators
 
 <p>여기에 실습할 수 있는 예제가 있습니다.  <code>start</code>에서 <code>end</code>까지 <code>step</code> 수 만큼 띄어진  정수 시퀀스를 정의하는 간단한 범위 반복자를 만들 수 있습니다. 최종적으로 시퀀스의 크기가 반환됩니다.</p>
 
-<pre class="notranslate"><code>function makeRangeIterator(start = 0, end = Infinity, step = 1) {
+<pre><code>function makeRangeIterator(start = 0, end = Infinity, step = 1) {
     var nextIndex = start;
     var n = 0;
 
@@ -55,7 +55,7 @@ translation_of: Web/JavaScript/Guide/Iterators_and_Generators
 
 <p>위의 반복자를 사용하면 아래와 같습니다:</p>
 
-<pre class="notranslate"><code>var it = makeRangeIterator(1, 4);
+<pre><code>var it = makeRangeIterator(1, 4);
 
 var result = it.next();
 while (!result.done) {
@@ -78,7 +78,7 @@ console.log("Iterated over sequence of size: ", result.value);</code>
 
 <p>위의 예제 코드에 생성자를 적용한 것입니다. 두 코드의 행위는 동일하지만, 생성자를 사용한 쪽이 쓰거나 읽기가 훨씬 쉽습니다. </p>
 
-<pre class="notranslate"><code>function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
+<pre><code>function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
     let n = 0;
     for (let i = start; i &lt; end; i += step) {
         n++;
@@ -99,7 +99,7 @@ console.log("Iterated over sequence of size: ", result.value);</code>
 
 <p>이와 같이 자신의 반복가능 객체를 만들 수 있습니다:</p>
 
-<pre class="notranslate"><code>var myIterable = {
+<pre><code>var myIterable = {
     *[Symbol.iterator]() {
         yield 1;
         yield 2;
@@ -126,7 +126,7 @@ or
 
 <p>일부 문(statement) 및 식(expression)은 iterable합니다, 가령 {{jsxref("Statements/for...of","for-of")}} 루프, {{jsxref("Operators/Spread_operator","spread syntax","","true")}}, {{jsxref("Operators/yield*","yield*")}} 및 {{jsxref("Operators/Destructuring_assignment","해체 할당","","true")}}.</p>
 
-<pre class="brush: js notranslate">for(let value of ['a', 'b', 'c']){
+<pre class="brush: js">for(let value of ['a', 'b', 'c']){
     console.log(value)
 }
 // "a"
@@ -155,7 +155,7 @@ a // "a"
 
 <p>여기 sequence(수열)을 재시작하기 위해 <code>next(x)</code>를 사용하는 피보나치 생성기가 있습니다:</p>
 
-<pre class="brush: js notranslate">function* fibonacci(){
+<pre class="brush: js">function* fibonacci(){
   var fn1 = 0;
   var fn2 = 1;
   while (true){
diff --git a/files/ko/web/javascript/guide/loops_and_iteration/index.html b/files/ko/web/javascript/guide/loops_and_iteration/index.html
index 4b0ac738b6..fe91f8b877 100644
--- a/files/ko/web/javascript/guide/loops_and_iteration/index.html
+++ b/files/ko/web/javascript/guide/loops_and_iteration/index.html
@@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Guide/Loops_and_iteration
 
 <p>반복문을 게임의 컴퓨터화된 버전이라고 생각해 보세요. 누군가에게 한 방향으로 X만큼 가게 시키고 다른 방향으로 Y만큼 더 가게 한다고 생각해 보십시오. 예를들어, "동쪽으로 5만큼 가세요"는 다음과 같이 반복문으로 표현 될 수 있습니다.</p>
 
-<pre class="brush: js notranslate">var step;
+<pre class="brush: js">var step;
 for (step = 0; step &lt; 5; step++) {
   // Runs 5 times, with values of step 0 through 4.
   console.log('Walking east one step');
@@ -35,7 +35,7 @@ for (step = 0; step &lt; 5; step++) {
 
 <p>for 반복문은 어떤 특정한 조건이 거짓으로 판별될 때까지 반복합니다. 자바스크립트의 반복문은 C의 반복문과 비슷합니다. for 반복문은 다음과 같습니다.</p>
 
-<pre class="syntaxbox notranslate">for ([초기문]; [조건문]; [증감문])
+<pre class="syntaxbox">for ([초기문]; [조건문]; [증감문])
   문장
 </pre>
 
@@ -52,7 +52,7 @@ for (step = 0; step &lt; 5; step++) {
 
 <p>다음 함수는 스크롤링 목록(다중 선택을 허용하는 요소 {{HTMLElement("select")}}). 에서 선택된 옵션들을 세는 for문 입니다. 이 for문은 변수 i 를 선언하고 0으로 초기화 시킵니다. 이것은 i 가  &lt;select&gt; 요소 안의 옵션 수가 i 보다 작은지 확인 합니다. 다음의 if문을 수행하고 각 루프를 빠져나간 뒤 i 를 1 증가시킵니다.</p>
 
-<pre class="brush: html notranslate">&lt;form name="selectForm"&gt;
+<pre class="brush: html">&lt;form name="selectForm"&gt;
   &lt;p&gt;
     &lt;label for="musicTypes"&gt;Choose some music types, then click the button below:&lt;/label&gt;
     &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
@@ -90,7 +90,7 @@ btn.addEventListener("click", function(){
 
 <p>do...while 문은 특정한 조건이 거짓으로 판별될 때까지 반복합니다. do...while 문은 다음과 같습니다.</p>
 
-<pre class="syntaxbox notranslate">do
+<pre class="syntaxbox">do
   문장
 while (조건문);
 </pre>
@@ -101,7 +101,7 @@ while (조건문);
 
 <p>다음 예제에서, do 반복문은 최소 한번은 반복됩니다. 그리고 i 가 5보다 작지 않을 때까지 계속 반복됩니다.</p>
 
-<pre class="brush: js notranslate">do {
+<pre class="brush: js">do {
   i += 1;
   console.log(i);
 } while (i &lt; 5);</pre>
@@ -110,7 +110,7 @@ while (조건문);
 
 <p>while 문은 어떤 조건문이 참이기만 하면 문장을 계속해서 수행합니다. while 문은 다음과 같습니다.</p>
 
-<pre class="syntaxbox notranslate">while (조건문)
+<pre class="syntaxbox">while (조건문)
   문장
 </pre>
 
@@ -124,7 +124,7 @@ while (조건문);
 
 <p>다음 while 반복문은 n이 3보다 작은 한, 계속 반복됩니다.</p>
 
-<pre class="brush: js notranslate">n = 0;
+<pre class="brush: js">n = 0;
 x = 0;
 while (n &lt; 3) {
   n++;
@@ -146,7 +146,7 @@ while (n &lt; 3) {
 
 <p>조건문은 항상 거짓이 될지라도 무한 루프는 피해야 합니다. 그렇지 않으면 그 반복문은 영원히 끝나지 않을 것입니다. 아래의 while 문은 조건문이 절대 거짓이 될 수 없으므로 영원히 반복될 것입니다.</p>
 
-<pre class="brush: js notranslate">// 다음과 같은 코드는 피하세요.
+<pre class="brush: js">// 다음과 같은 코드는 피하세요.
 while (true) {
   console.log("Hello, world");
 }</pre>
@@ -157,7 +157,7 @@ while (true) {
 
 <p>레이블 문의 구문은 다음과 같습니다:</p>
 
-<pre class="syntaxbox notranslate">label :
+<pre class="syntaxbox">label :
    statement
 </pre>
 
@@ -167,7 +167,7 @@ while (true) {
 
 <p>이 예에서, 레이블 markLoop는 while 루프를 식별합니다.</p>
 
-<pre class="brush: js notranslate">markLoop:
+<pre class="brush: js">markLoop:
 while (theMark == true) {
    doSomething();
 }</pre>
@@ -194,7 +194,7 @@ while (theMark == true) {
 
 <p>다음 예</p>
 
-<pre class="brush: js notranslate">for (i = 0; i &lt; a.length; i++) {
+<pre class="brush: js">for (i = 0; i &lt; a.length; i++) {
   if (a[i] == theValue) {
     break;
   }
@@ -202,7 +202,7 @@ while (theMark == true) {
 
 <h3 id="예시_2_Breaking_to_a_label"><strong>예시 2: </strong>Breaking to a label</h3>
 
-<pre class="brush: js notranslate">var x = 0;
+<pre class="brush: js">var x = 0;
 var z = 0
 labelCancelLoops: while (true) {
   console.log("Outer loops: " + x);
@@ -240,7 +240,7 @@ labelCancelLoops: while (true) {
 
 <p>다음의 예는 i 값이 3일 때 실행하는 continue 문과 함께 while 루프를 보여줍니다. 따라서, n은 값 1, 3, 7, 12를 취합니다.</p>
 
-<pre class="brush: js notranslate">i = 0;
+<pre class="brush: js">i = 0;
 n = 0;
 while (i &lt; 5) {
   i++;
@@ -257,7 +257,7 @@ while (i &lt; 5) {
 
 <p>continue가 checkiandj의 레이블을 가지고 있다면, 프로그램은 checkiandj 문 상단에서 계속될 것입니다.</p>
 
-<pre class="brush: js notranslate">checkiandj:
+<pre class="brush: js">checkiandj:
   while (i &lt; 4) {
     console.log(i);
     i += 1;
@@ -278,7 +278,7 @@ while (i &lt; 5) {
 
 <p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>  문은 객체의 열거 속성을 통해 지정된 변수를 반복합니다. 각각의 고유한 속성에 대해, JavaScript는 지정된 문을 실행합니다. for...in 문은 다음과 같습니다:</p>
 
-<pre class="syntaxbox notranslate">for (variable in object) {
+<pre class="syntaxbox">for (variable in object) {
   statements
 }
 </pre>
@@ -287,7 +287,7 @@ while (i &lt; 5) {
 
 <p>다음 함수는 객체와 객체의 이름을 함수의 인수로 취합니다. 그런 다음 모든 객체의 속성을 반복하고 속성 이름과 값을 나열하는 문자열을 반환합니다.</p>
 
-<pre class="brush: js notranslate">function dump_props(obj, obj_name) {
+<pre class="brush: js">function dump_props(obj, obj_name) {
   var result = "";
   for (var i in obj) {
     result += obj_name + "." + i + " = " + obj[i] + "&lt;br&gt;";
@@ -299,7 +299,7 @@ while (i &lt; 5) {
 
 <p>속성 make와 model을 가진 객체 car의 경우, 결과는 다음과 같습니다:</p>
 
-<pre class="brush: js notranslate">car.make = Ford
+<pre class="brush: js">car.make = Ford
 car.model = Mustang
 </pre>
 
@@ -311,13 +311,13 @@ car.model = Mustang
 
 <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> 문은 각각의 고유한 특성의 값을 실행할 명령과 함께 사용자 지정 반복 후크를 호출하여, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">반복 가능한 객체</a>({{jsxref("배열")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">인수</a> 객체 등을 포함)를 통해 반복하는 루프를 만듭니다.</p>
 
-<pre class="syntaxbox notranslate">for (<em>variable</em> of <em>object</em>) {
+<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) {
   <em>statement
 </em>}</pre>
 
 <p>다음 예는 for...of 루프와 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> 루프의 차이를 보여줍니다. 속성 이름을 통해 for...in이 반복하는 동안, for...of은 속성 값을 통해 반복합니다:</p>
 
-<pre class="brush:js notranslate">let arr = [3, 5, 7];
+<pre class="brush:js">let arr = [3, 5, 7];
 arr.foo = "hello";
 
 for (let i in arr) {
diff --git a/files/ko/web/javascript/guide/modules/index.html b/files/ko/web/javascript/guide/modules/index.html
index b52283a0fc..b64319b4da 100644
--- a/files/ko/web/javascript/guide/modules/index.html
+++ b/files/ko/web/javascript/guide/modules/index.html
@@ -41,7 +41,7 @@ translation_of: Web/JavaScript/Guide/Modules
 
 <p>첫 번째 예제(<a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>)를 보면 다음과 같은 파일 구조가 있습니다.</p>
 
-<pre class="notranslate">index.html
+<pre>index.html
 main.js
 modules/
     canvas.js
@@ -77,7 +77,7 @@ modules/
 
 <p>이를 사용하는 가장 쉬운 방법은 모듈 밖으로 내보내려는 항목 앞에 (export를) 배치하는 것입니다. 예를들면 다음과 같습니다.</p>
 
-<pre class="brush: js notranslate">export const name = 'square';
+<pre class="brush: js">export const name = 'square';
 
 export function draw(ctx, length, x, y, color) {
   ctx.fillStyle = color;
@@ -95,13 +95,13 @@ export function draw(ctx, length, x, y, color) {
 
 <p>여러 항목을 내보내는 더 편리한 방법은 모듈 파일 끝에 하나의 export 문을 사용하는 것입니다. 그 다음에 내보내려는 기능들을 쉼표로 구분하여 나열하고 중괄호로 묶습니다.</p>
 
-<pre class="brush: js notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre>
 
 <h2 id="Importing_features_into_your_script">Importing features into your script</h2>
 
 <p>모듈에서 일부 기능을 내보낸 후에는, 이를 사용할 수 있도록 우리가 사용할 스크립트로 가져와야 합니다. 가장 간단한 방법은 다음과 같습니다.</p>
 
-<pre class="brush: js notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre>
+<pre class="brush: js">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre>
 
 <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> 문(statement)을 사용하고, 가져올 목록을 쉼표로 구분하여 나열한 뒤 괄호로 묶습니다. 그 뒤에는 from을 쓰고 모듈 파일의 경로를 작성합니다. (사이트 루트에 연관된 경로로, 우리의 <code>basic-modules</code> 예제는 <code>/js-examples/modules/basic-modules</code> 입니다) <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>에서 이러한 코드를 볼 수 있습니다.</p>
 
@@ -109,11 +109,11 @@ export function draw(ctx, length, x, y, color) {
 
 <p>예를들면,</p>
 
-<pre class="notranslate"><code>/js-examples/modules/basic-modules/modules/square.js</code></pre>
+<pre><code>/js-examples/modules/basic-modules/modules/square.js</code></pre>
 
 <p>이렇게 쓸 수 있습니다.</p>
 
-<pre class="notranslate"><code>./modules/square.js</code></pre>
+<pre><code>./modules/square.js</code></pre>
 
 <p><code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>에서 이러한 코드를 볼 수 있습니다.</p>
 
@@ -123,7 +123,7 @@ export function draw(ctx, length, x, y, color) {
 
 <p>우리의 스크립트에 기능을 가져오면 동일한 파일 내에 정의한 것처럼 기능을 사용할 수 있습니다. 다음은 <code>main.js</code> 의 import 행 아래에 있습니다.</p>
 
-<pre class="brush: js notranslate">let myCanvas = create('myCanvas', document.body, 480, 320);
+<pre class="brush: js">let myCanvas = create('myCanvas', document.body, 480, 320);
 let reportList = createReportList(myCanvas.id);
 
 let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
@@ -137,7 +137,7 @@ reportPerimeter(square1.length, reportList);
 
 <p>이 스크립트를 모듈로 선언하려면 {{htmlelement("script")}} 요소(element)에 <code>type="module"</code> 을 포함시켜야 합니다.</p>
 
-<pre class="brush: js notranslate">&lt;script type="module" src="main.js"&gt;&lt;/script&gt;</pre>
+<pre class="brush: js">&lt;script type="module" src="main.js"&gt;&lt;/script&gt;</pre>
 
 <p>기본적으로 모듈 기능을 가져오는 스크립트는 최상위 모듈로 작동합니다. 이를 생략하면 파이어폭스로 예를들면, "SyntaxError: import declarations may only appear at top level of a module"라는 오류를 줍니다.</p>
 
@@ -164,23 +164,23 @@ reportPerimeter(square1.length, reportList);
 
 <p>예제를 가지고 어떻게 작동하는지 살펴보겠습니다. 예제 중 basic-modules 프로젝트의 <code>square.js</code> 파일에서 임의의 색상, 크기, 위치로 갖는 사각형을 만드는 <code>randomSquare()</code> 라는 함수를 찾을 수 있습니다. 이것을 기본값으로 export하려고 하므로, 파일의 맨 아래에 다음과 같이 씁니다.</p>
 
-<pre class="brush: js notranslate">export default randomSquare;</pre>
+<pre class="brush: js">export default randomSquare;</pre>
 
 <p>중괄호가 없음에 주의하세요.</p>
 
 <p>대신 함수 앞에 <code>export default</code> 를 추가하고, 다음과 같이 익명함수로 선언할 수 있습니다.</p>
 
-<pre class="brush: js notranslate">export default function(ctx) {
+<pre class="brush: js">export default function(ctx) {
   ...
 }</pre>
 
 <p><code>main.js</code> 파일에서 다음 코드처럼 사용하면, default function이 import 됩니다.</p>
 
-<pre class="brush: js notranslate">import randomSquare from './modules/square.js';</pre>
+<pre class="brush: js">import randomSquare from './modules/square.js';</pre>
 
 <p>다시 말하지만, 중괄호가 없다는 점에 유의하세요. 하나의 모듈은 하나의 default export만 허용하기 때문에 우리는 <code>randomSquare</code> 가 해당 모듈임을 알 수 있습니다. 위의 코드는 아래의 코드를 단축하여 사용한 것입니다.</p>
 
-<pre class="brush: js notranslate">import {default as randomSquare} from './modules/square.js';</pre>
+<pre class="brush: js">import {default as randomSquare} from './modules/square.js';</pre>
 
 <div class="blockIndicator note">
 <p><strong>주의</strong>: export한 항목의 이름을 바꾸는 구문은 {{anch("Renaming imports and exports")}} 섹션에서 설명합니다.</p>
@@ -198,7 +198,7 @@ reportPerimeter(square1.length, reportList);
 
 <p>예를들어 다음 두 가지 방법은 약간의 차이가 있지만, 두 방법 모두 동일한 작업을 수행하고 있습니다.</p>
 
-<pre class="brush: js notranslate">// inside module.js
+<pre class="brush: js">// inside module.js
 export {
   function1 as newFunctionName,
   function2 as anotherNewFunctionName
@@ -207,7 +207,7 @@ export {
 // inside main.js
 import { newFunctionName, anotherNewFunctionName } from './modules/module.js';</pre>
 
-<pre class="brush: js notranslate">// inside module.js
+<pre class="brush: js">// inside module.js
 export { function1, function2 };
 
 // inside main.js
@@ -218,11 +218,11 @@ import { function1 as newFunctionName,
 
 <p>이 모듈듈 각각에는 내부적으로 동일한 이름의 기능이 있습니다. 따라서 각각 하단에 동일한 export 문(statement)이 있습니다.</p>
 
-<pre class="brush: js notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre>
 
 <p>이것들을 <code>main.js</code>에 가져올 때 우리는 다음과 같이 시도할 수 있습니다.</p>
 
-<pre class="brush: js notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+<pre class="brush: js">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
 import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
 import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';</pre>
 
@@ -230,7 +230,7 @@ import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';
 
 <p>대신 import가 고유하도록(식별 가능하도록) 이름을 변경해야 합니다.</p>
 
-<pre class="brush: js notranslate">import { name as squareName,
+<pre class="brush: js">import { name as squareName,
          draw as drawSquare,
          reportArea as reportSquareArea,
          reportPerimeter as reportSquarePerimeter } from './modules/square.js';
@@ -247,13 +247,13 @@ import { name as triangleName,
 
 <p>다음과 같이 import하는 파일 대신 모듈 파일에서 문제를 해결할 수도 있습니다.</p>
 
-<pre class="brush: js notranslate">// in square.js
+<pre class="brush: js">// in square.js
 export { name as squareName,
          draw as drawSquare,
          reportArea as reportSquareArea,
          reportPerimeter as reportSquarePerimeter };</pre>
 
-<pre class="brush: js notranslate">// in main.js
+<pre class="brush: js">// in main.js
 import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';</pre>
 
 <p>그리고 이것은 똑같이 작동 할 것입니다. 사용하는 스타일은 개인의 취향이지만, 모듈 코드를 그대로 두고 import 를 변경하는 것이 더 합리적입니다. 특히 제어 권한이 없는 써드 파티 모듈에서 import를 사용하는 경우에 특히 유용합니다.</p>
@@ -262,21 +262,21 @@ import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from
 
 <p>위의 방법은 정상적으로 작동하지만, 다소 지저분하고 길어질 수 있습니다. 보다 나은 해결책은 각 모듈의 기능을 모듈 객체 내부로 가져오는 것입니다. 다음과 같은 구문을 사용합니다.</p>
 
-<pre class="brush: js notranslate">import * as Module from './modules/module.js';</pre>
+<pre class="brush: js">import * as Module from './modules/module.js';</pre>
 
 <p>이 모듈은 <code>module.js</code> 내에서 사용할 수 있는 모든 export를 가져옵니다. 그리고 그것들을 객체 <code>Module</code> 의 멤버로 만들고 우리 임의의 효과적인 네임스페이스를 제공합니다.</p>
 
-<pre class="brush: js notranslate">Module.function1()
+<pre class="brush: js">Module.function1()
 Module.function2()
 etc.</pre>
 
 <p>다시 한 번 실제 사례를 살펴보겠습니다. <a href="https://github.com/mdn/js-examples/tree/master/modules/module-objects">module-objects</a> 디렉토리로 가면 같은 예제를 볼 수 있지만, 새로운 구문을 이용하기 위해 다시 작성합니다. 모듈에서 export는 모두 다음과 같은 간단한 형식으로 이루어집니다.</p>
 
-<pre class="brush: js notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre>
 
 <p>반면에 import는 다음과 같습니다.</p>
 
-<pre class="brush: js notranslate">import * as Canvas from './modules/canvas.js';
+<pre class="brush: js">import * as Canvas from './modules/canvas.js';
 
 import * as Square from './modules/square.js';
 import * as Circle from './modules/circle.js';
@@ -284,7 +284,7 @@ import * as Triangle from './modules/triangle.js';</pre>
 
 <p>각각의 경우에, 지정한 객체 이름 아래에 있는 모듈의 import에 접근할 수 있습니다. 다음은 그 예시입니다.</p>
 
-<pre class="brush: js notranslate">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+<pre class="brush: js">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
 Square.reportArea(square1.length, reportList);
 Square.reportPerimeter(square1.length, reportList);</pre>
 
@@ -296,7 +296,7 @@ Square.reportPerimeter(square1.length, reportList);</pre>
 
 <p>우리의 <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a> 디렉토리에서 ES 클래스로 다시 작성된 도형 그리기 모듈의 예를 볼 수 있습니다. 예를들어 <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.js</a></code> 파일에는 모든 기능이 단일 클래스에 포함되어 있습니다.</p>
 
-<pre class="brush: js notranslate">class Square {
+<pre class="brush: js">class Square {
   constructor(ctx, listId, length, x, y, color) {
     ...
   }
@@ -310,15 +310,15 @@ Square.reportPerimeter(square1.length, reportList);</pre>
 
 <p>우리는 다음과 같이 export 합니다.</p>
 
-<pre class="brush: js notranslate">export { Square };</pre>
+<pre class="brush: js">export { Square };</pre>
 
 <p><code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.js</a></code> 에서 우리는 다음과 같이 import 합니다.</p>
 
-<pre class="brush: js notranslate">import { Square } from './modules/square.js';</pre>
+<pre class="brush: js">import { Square } from './modules/square.js';</pre>
 
 <p>그런다음 클래스를 이용하여 사각형을 그립니다.</p>
 
-<pre class="brush: js notranslate">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+<pre class="brush: js">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
 square1.draw();
 square1.reportArea();
 square1.reportPerimeter();</pre>
@@ -327,7 +327,7 @@ square1.reportPerimeter();</pre>
 
 <p>모듈을 모아야 할 때가 있을 것입니다. 여러 서브 모듈을 하나의 부모 모듈로 결합하여 여러 단계의 종속성을 가질 수 있습니다. 상위 모듈에서 다음 양식의 export 구문을 사용하할 수 있습니다.</p>
 
-<pre class="brush: js notranslate">export * from 'x.js'
+<pre class="brush: js">export * from 'x.js'
 export { name } from 'x.js'</pre>
 
 <div class="blockIndicator note">
@@ -336,7 +336,7 @@ export { name } from 'x.js'</pre>
 
 <p>예를들어 <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a> 디렉토리를 참조하겠습니다. 이 예제에서는 이전 클래스 예제를 기반으로 <code>circle.js</code>, <code>square.js</code>, <code>triangle.js</code> 의 모든 기능을 함께 모으는 <code>shapes.js</code>라는 추가 모듈이 있습니다. 또한 우리는 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">shapes</span></font> <code>모듈</code> 디렉토리 안에 있는 서브 디렉토리 내에서 서브 모듈을 이동 시켰습니다. 이제 모듈 구조는 다음과 같습니다.</p>
 
-<pre class="notranslate">modules/
+<pre>modules/
   canvas.js
   shapes.js
   shapes/
@@ -346,11 +346,11 @@ export { name } from 'x.js'</pre>
 
 <p>각 하위 모듈에서 export 형태는 같습니다. 예)</p>
 
-<pre class="brush: js notranslate">export { Square };</pre>
+<pre class="brush: js">export { Square };</pre>
 
 <p>다음은 집합(aggregation) 부분입니다. <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.js</a></code> 안에는 다음과 같은 내용이 포함되어 있습니다.</p>
 
-<pre class="brush: js notranslate">export { Square } from './shapes/square.js';
+<pre class="brush: js">export { Square } from './shapes/square.js';
 export { Triangle } from './shapes/triangle.js';
 export { Circle } from './shapes/circle.js';</pre>
 
@@ -362,13 +362,13 @@ export { Circle } from './shapes/circle.js';</pre>
 
 <p>이제 <code>main.js</code> 파일에서 우리는 세 개의 모듈 클래스를 모두 대체할 수 있습니다.</p>
 
-<pre class="brush: js notranslate">import { Square } from './modules/square.js';
+<pre class="brush: js">import { Square } from './modules/square.js';
 import { Circle } from './modules/circle.js';
 import { Triangle } from './modules/triangle.js';</pre>
 
 <p>다음과 같은 한 줄로 작성할 수 있습니다.</p>
 
-<pre class="brush: js notranslate">import { Square, Circle, Triangle } from '/js-examples/modules/module-aggregation/modules/shapes.js';</pre>
+<pre class="brush: js">import { Square, Circle, Triangle } from '/js-examples/modules/module-aggregation/modules/shapes.js';</pre>
 
 <h2 id="Dynamic_module_loading">Dynamic module loading</h2>
 
@@ -376,7 +376,7 @@ import { Triangle } from './modules/triangle.js';</pre>
 
 <p>이 새로운 기능을 통해 <code>import()</code> 를 함수로 호출하여 모듈 경로를 매개 변수(parameter)로 전달할 수 있습니다. 모듈 객체({{anch("Creating a module object")}} 참조)를 사용하여 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>를 반환하면 해당 객체의 export에 접근할 수 있습니다. </p>
 
-<pre class="brush: js notranslate">import('/modules/myModule.js')
+<pre class="brush: js">import('/modules/myModule.js')
   .then((module) =&gt; {
     // Do something with the module.
   });</pre>
@@ -387,11 +387,11 @@ import { Triangle } from './modules/triangle.js';</pre>
 
 <p><code>main.js</code> 에서 <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> 를 사용하여 각 버튼에 대한 참조를 가져왔습니다. 예를들면 다음과 같습니다.</p>
 
-<pre class="brush: js notranslate">let squareBtn = document.querySelector('.square');</pre>
+<pre class="brush: js">let squareBtn = document.querySelector('.square');</pre>
 
 <p>그런 다음 각 버튼에 이벤트 리스너를 연결하여 해당 모듈을 누르면, 동적으로 로드되어 도형을 그리는데 사용됩니다.</p>
 
-<pre class="brush: js notranslate">squareBtn.addEventListener('click', () =&gt; {
+<pre class="brush: js">squareBtn.addEventListener('click', () =&gt; {
   import('/js-examples/modules/dynamic-module-imports/modules/square.js').then((Module) =&gt; {
     let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
     square1.draw();
diff --git a/files/ko/web/javascript/guide/numbers_and_dates/index.html b/files/ko/web/javascript/guide/numbers_and_dates/index.html
index 9a8a2c785e..7185a3717b 100644
--- a/files/ko/web/javascript/guide/numbers_and_dates/index.html
+++ b/files/ko/web/javascript/guide/numbers_and_dates/index.html
@@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Guide/Numbers_and_dates
 
 <h3 id="10진수">10진수</h3>
 
-<pre class="brush: js notranslate">1234567890
+<pre class="brush: js">1234567890
 42
 
 // 앞에 0이 붙은 숫자를 조심하세요:
@@ -38,7 +38,7 @@ translation_of: Web/JavaScript/Guide/Numbers_and_dates
 
 <p>2진수 구문은 앞에 오는 0과 소문자 또는 대문자 라틴 문자 "B"(0B 또는 0b)를 사용합니다. 0b 다음의 숫자가 0 또는 1이 아니면 다음의 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a>가 발생합니다. "0b 이후에 누락 된 2 진수"("Missing binary digits after 0b")입니다.</p>
 
-<pre class="brush: js notranslate">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+<pre class="brush: js">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
 var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
 var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
 
@@ -46,26 +46,26 @@ var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
 
 <p>8 진수 구문은 앞에 0을 사용합니다. <code>0</code> 이후의 숫자가 0에서 7까지 범위 밖에 있는 경우, 숫자는 10진수로 해석됩니다.</p>
 
-<pre class="brush: js notranslate">var n = 0755; // 493
+<pre class="brush: js">var n = 0755; // 493
 var m = 0644; // 420
 </pre>
 
 <p>ECMAScript 5의 Strict 모드는 8 진수 구문을 금지합니다. 8 진수 구문은 ECMAScript 5의 일부가 아니지만, <code>0644 === 420</code> 및 <code>"\ 045"=== "%"</code>의 8 진수에 접두사를 붙이면 모든 브라우저에서 지원됩니다. ECMAScript 2015에서는 접두어가 <code>0o</code>인 경우 8 진수가 지원됩니다 (예 :</p>
 
-<pre class="notranslate"><code>var a = 0o10; // ES2015: 8</code></pre>
+<pre><code>var a = 0o10; // ES2015: 8</code></pre>
 
 <h3 id="16진수">16진수</h3>
 
 <p>16진수 구문은 앞에 0 다음에 소문자나 대문자 라틴어 문자 "X"(<code>0x</code> 또는 <code>0X</code>)를 사용합니다. 0X 이후 숫자가 범위(0123456789ABCDEF) 밖에 있는 경우, 다음 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a>가 발생합니다: "식별자는 숫자 리터럴 후 즉시 시작됩니다".</p>
 
-<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
 0x123456789ABCDEF   // 81985529216486900
 0XA                 // 10
 </pre>
 
 <h3 id="지수_계산">지수 계산</h3>
 
-<pre class="notranslate"><code>1E3   // 1000
+<pre><code>1E3   // 1000
 2e6   // 2000000
 0.1e2 // 10</code>
 </pre>
@@ -74,7 +74,7 @@ var m = 0644; // 420
 
 <p>{{jsxref("Number")}} 내장객체는 최대값, not-a-number, 무한대와 같은 숫자 상수를 위한 속성들이 있습니다. 여러분은 이러한 속성의 값을 변경 할 수 없고 다음과 같이 사용합니다:</p>
 
-<pre class="brush: js notranslate">var biggestNum = Number.MAX_VALUE;
+<pre class="brush: js">var biggestNum = Number.MAX_VALUE;
 var smallestNum = Number.MIN_VALUE;
 var infiniteNum = Number.POSITIVE_INFINITY;
 var negInfiniteNum = Number.NEGATIVE_INFINITY;
@@ -197,12 +197,12 @@ var notANum = Number.NaN;
 
 <p>내장 {{jsxref ( "Math")}} 객체는 수학 상수 및 함수에 대한 속성 및 메서드를 포함합니다. 예를 들어, <code>Math</code> 객체의 <code>PI</code> 속성에는 pi (3.141 ...) 값이 있습니다.이 값은 응용 프로그램에서 다음과 같이 사용합니다.</p>
 
-<pre class="brush: js notranslate">Math.PI
+<pre class="brush: js">Math.PI
 </pre>
 
 <p>마찬가지로 표준 수학 함수도 <code>Math</code>의 함수입니다. 여기에는 삼각 함수, 로그 함수, 지수 함수 및 기타 함수가 포함됩니다. 예를 들어 삼각 함수 sine을 사용하려면 다음과 같이 작성합니다.</p>
 
-<pre class="brush: js notranslate">Math.sin(1.56)
+<pre class="brush: js">Math.sin(1.56)
 </pre>
 
 <p><code>Math</code>의 모든 삼각 함수에는 라디안으로 매게변수를 입력해야 합니다.</p>
@@ -289,7 +289,7 @@ var notANum = Number.NaN;
 
 <p>Date 객체를 만들려면 :</p>
 
-<pre class="brush: js notranslate">var dateObjectName = new Date([parameters]);
+<pre class="brush: js">var dateObjectName = new Date([parameters]);
 </pre>
 
 <p>여기서 <code>dateObjectName</code>은 만들려는 <code>Date</code> 객체의 이름입니다. 새로운 객체 또는 기존 객체의 속성 일 수 있습니다.</p>
@@ -329,7 +329,7 @@ var notANum = Number.NaN;
 
 <p>예를 들어, 아래와 같이 값들을 정의해봅시다 :</p>
 
-<pre class="brush: js notranslate">var Xmas95 = new Date("December 25, 1995");
+<pre class="brush: js">var Xmas95 = new Date("December 25, 1995");
 </pre>
 
 <p>그러면 <code>Xmas95.getMonth()</code>는 11을 반환합니다, 그리고 <code>Xmas95.getFullYear()</code>는 1995를 반환합니다.</p>
@@ -338,7 +338,7 @@ var notANum = Number.NaN;
 
 <p>예를 들어, 다음 코드는 현재 년도에 남아 수를 표시합니다:</p>
 
-<pre class="brush: js notranslate">var today = new Date();
+<pre class="brush: js">var today = new Date();
 var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month
 endYear.setFullYear(today.getFullYear()); // Set year to this year
 var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day
@@ -350,7 +350,7 @@ var daysLeft = Math.round(daysLeft); //returns days left in the year
 
 <p><code>Parse</code> 함수는 날짜문자열부터 기존의 <code>Date</code>객체까지의 값을 할당하기에 유용합니다. 예를 들어, 다음 코드는 그 <code>IPOdate</code> 객체에 날짜값을 할당하기위해 <code>parse</code>와 <code>setTime</code>을 사용합니다;</p>
 
-<pre class="brush: js notranslate">var IPOdate = new Date();
+<pre class="brush: js">var IPOdate = new Date();
 IPOdate.setTime(Date.parse("Aug 9, 1995"));
 </pre>
 
@@ -358,7 +358,7 @@ IPOdate.setTime(Date.parse("Aug 9, 1995"));
 
 <p>다음 예제 에서 <code>JSClock()</code>는 digital 시계형식의 시간을 반환합니다.</p>
 
-<pre class="brush: js notranslate">function JSClock() {
+<pre class="brush: js">function JSClock() {
   var time = new Date();
   var hour = time.getHours();
   var minute = time.getMinutes();
diff --git a/files/ko/web/javascript/guide/regular_expressions/assertions/index.html b/files/ko/web/javascript/guide/regular_expressions/assertions/index.html
index 6a7cd8b8f1..329b51d884 100644
--- a/files/ko/web/javascript/guide/regular_expressions/assertions/index.html
+++ b/files/ko/web/javascript/guide/regular_expressions/assertions/index.html
@@ -110,7 +110,7 @@ original_slug: Web/JavaScript/Guide/정규식/Assertions
 
 <h3 id="General_boundary-type_overview_example">General boundary-type overview example</h3>
 
-<pre class="brush: js notranslate">// Using Regex boundaries to fix buggy string.
+<pre class="brush: js">// Using Regex boundaries to fix buggy string.
 buggyMultiline = `tey, ihe light-greon apple
 tangs on ihe greon traa`;
 
@@ -135,7 +135,7 @@ console.log(4, fixedMultiline); // fix  'greon' but does not touch 'on'.
 
 <p>입력 시작시 일치를 위해 <code>^</code>를 사용하십시오. 이 예에서는 <code>/^A/</code> regex로 'A'로 시작하는 결과를 얻습니다. 여기서 <code>^</code>는 한 가지 역할 만합니다. 적절한 결과를 보기위해 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표</a> 함수가있는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">필터</a> 메소드를 사용합니다.</p>
 
-<pre class="brush: js notranslate">let fruits = ["Apple", "Watermelon", "Orange", "Avocado", "Strawberry"];
+<pre class="brush: js">let fruits = ["Apple", "Watermelon", "Orange", "Avocado", "Strawberry"];
 
 // Select fruits started with 'A' by /^A/ Regex.
 // Here '^' control symbol used only in one role: Matching begining of an input.
@@ -146,7 +146,7 @@ console.log(fruitsStartsWithA); // [ 'Apple', 'Avocado' ]
 
 <p>두 번째 예제에서 <code>^</code>는 두 가지 모두에 사용됩니다 : 입력의 일치 시작점, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">그룹</a>에서 사용될 때 부정 또는 보완 문자 세트.</p>
 
-<pre class="brush: js notranslate">let fruits = ["Apple", "Watermelon", "Orange", "Avocado", "Strawberry"];
+<pre class="brush: js">let fruits = ["Apple", "Watermelon", "Orange", "Avocado", "Strawberry"];
 
 // Selecting fruits that dose not start by 'A' by a /^[^A]/ regex.
 // In this example, two meanings of '^' control symbol are represented:
@@ -160,7 +160,7 @@ console.log(fruitsStartsWithNotA); // [ 'Watermelon', 'Orange', 'Strawberry' ]</
 
 <h3 id="Matching_a_word_boundary">Matching a word boundary</h3>
 
-<pre class="brush: js notranslate">let fruitsWithDescription = ["Red apple", "Orange orange", "Green Avocado"];
+<pre class="brush: js">let fruitsWithDescription = ["Red apple", "Orange orange", "Green Avocado"];
 
 // Select descriptions that contains 'en' or 'ed' words endings:
 let enEdSelection = fruitsWithDescription.filter(descr =&gt; /(en|ed)\b/.test(descr));
@@ -169,7 +169,7 @@ console.log(enEdSelection); // [ 'Red apple', 'Green Avocado' ]</pre>
 
 <h3 id="Lookahead_assertion">Lookahead assertion</h3>
 
-<pre class="brush: js notranslate">// JS Lookahead assertion x(?=y)
+<pre class="brush: js">// JS Lookahead assertion x(?=y)
 
 let regex = /First(?= test)/g;
 
@@ -183,14 +183,14 @@ console.log('This is a First peach in a month.'.match(regex)); // null
 
 <p>For example, <code>/\d+(?!\.)/</code><span> matches a number only if it is not followed by a decimal point. </span><code>/\d+(?!\.)/.exec('3.141')</code> matches "141" but not "3.</p>
 
-<pre class="brush: js notranslate">console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]
+<pre class="brush: js">console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]
 </pre>
 
 <h3 id="Different_meaning_of_!_combination_usage_in_Assertions_and_Ranges">Different meaning of '?!' combination usage in Assertions and  Ranges </h3>
 
 <p>Different meaning of <code>?!</code> combination usage in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Assertions</a> <code>/x(?!y)/ </code>and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Ranges</a> <code>[^?!]</code>.</p>
 
-<pre class="brush: js notranslate">let orangeNotLemon = "Do you want to have an orange? Yes, I do not want to have a lemon!";
+<pre class="brush: js">let orangeNotLemon = "Do you want to have an orange? Yes, I do not want to have a lemon!";
 
 // Different meaning of '?!' combination usage in Assertions /x(?!y)/ and  Ranges /[^?!]/
 let selectNotLemonRegex = /[^?!]+have(?! a lemon)[^?!]+[?!]/gi
@@ -202,7 +202,7 @@ console.log(orangeNotLemon.match(selectNotOrangeRegex)); // [ ' Yes, I do not wa
 
 <h3 id="Lookbehind_assertion">Lookbehind assertion</h3>
 
-<pre class="brush: js notranslate">let oranges = ['ripe orange A ', 'green orange B', 'ripe orange C',];
+<pre class="brush: js">let oranges = ['ripe orange A ', 'green orange B', 'ripe orange C',];
 
 let ripe_oranges = oranges.filter( fruit =&gt; fruit.match(/(?&lt;=ripe )orange/));
 console.log(ripe_oranges); // [ 'ripe orange A ', 'ripe orange C' ]
diff --git a/files/ko/web/javascript/guide/using_promises/index.html b/files/ko/web/javascript/guide/using_promises/index.html
index abe9951baf..0f77bf8390 100644
--- a/files/ko/web/javascript/guide/using_promises/index.html
+++ b/files/ko/web/javascript/guide/using_promises/index.html
@@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Guide/Using_promises
 
 <p><code>createAudioFileAsync()</code>는 함수는 아래와 같이 사용됩니다.  </p>
 
-<pre class="notranslate"><code>function successCallback(result) {
+<pre><code>function successCallback(result) {
   console.log("Audio file ready at URL: " + result);
 }</code>
 
@@ -31,11 +31,11 @@ translation_of: Web/JavaScript/Guide/Using_promises
 
 <p>만약 <code>createAudioFileAsync()</code> 함수가 Promise를 반환해주도록 수정해본다면, 다음과 같이 간단하게 사용되어질 수 있습니다.</p>
 
-<pre class="notranslate"><code><span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace; font-style: inherit; font-weight: inherit;'>createAudioFileAsync(audioSettings).then(successCallback, failureCallback);</span></code></pre>
+<pre><code><span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace; font-style: inherit; font-weight: inherit;'>createAudioFileAsync(audioSettings).then(successCallback, failureCallback);</span></code></pre>
 
 <p>…조금 더 간단하게 써보자면:</p>
 
-<pre class="notranslate"><code>const promise = createAudioFileAsync(audioSettings);
+<pre><code>const promise = createAudioFileAsync(audioSettings);
 promise.then(successCallback, failureCallback);</code></pre>
 
 <p>우리는 이와 같은 것을 <em>비동기 함수 호출</em>이라고 부릅니다. 이런 관례는 몇 가지 장점을 갖고 있습니다. 각각에 대해 한번 살펴보도록 합시다.</p>
@@ -58,13 +58,13 @@ promise.then(successCallback, failureCallback);</code></pre>
 
 <p><code>then()</code> 함수는 새로운 promise를 반환합니다. 처음에 만들었던 promise와는 다른 새로운 promise입니다.</p>
 
-<pre class="brush: js notranslate">const promise = doSomething();
+<pre class="brush: js">const promise = doSomething();
 const promise2 = promise.then(successCallback, failureCallback);
 </pre>
 
 <p>또는</p>
 
-<pre class="brush: js notranslate">const promise2 = doSomething().then(successCallback, failureCallback);
+<pre class="brush: js">const promise2 = doSomething().then(successCallback, failureCallback);
 </pre>
 
 <p>두 번째 promise는 <code>doSomething()</code> 뿐만 아니라 <code>successCallback</code> or <code>failureCallback</code> 의 완료를 의미합니다. <code>successCallback</code> or <code>failureCallback</code> 또한 promise를 반환하는 비동기 함수일 수도 있습니다. 이 경우 <code>promise2</code>에 추가 된 콜백은 <code>successCallback</code>또는 <code>failureCallback</code>에 의해 반환된 promise 뒤에 대기합니다.</p>
@@ -73,7 +73,7 @@ const promise2 = promise.then(successCallback, failureCallback);
 
 <p>예전에는 여러 비동기 작업을 연속적으로 수행하면 고전적인 '지옥의 콜백 피라미드'가 만들어 졌었습니다.</p>
 
-<pre class="brush: js notranslate">doSomething(function(result) {
+<pre class="brush: js">doSomething(function(result) {
   doSomethingElse(result, function(newResult) {
     doThirdThing(newResult, function(finalResult) {
       console.log('Got the final result: ' + finalResult);
@@ -84,7 +84,7 @@ const promise2 = promise.then(successCallback, failureCallback);
 
 <p>모던한 방식으로 접근한다면, 우리는 콜백 함수들을 반환된 promise에 promise chain을 형성하도록 추가할 수 있습니다:</p>
 
-<pre class="brush: js notranslate">doSomething().then(function(result) {
+<pre class="brush: js">doSomething().then(function(result) {
   return doSomethingElse(result);
 })
 .then(function(newResult) {
@@ -98,7 +98,7 @@ const promise2 = promise.then(successCallback, failureCallback);
 
 <p><code>then</code> 에 넘겨지는 인자는 선택적(optional)입니다. 그리고 <code>catch(failureCallback)</code> 는 <code>then(null, failureCallback)</code> 의 축약입니다. 이 표현식을 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수</a>로 나타내면 다음과 같습니다.</p>
 
-<pre class="brush: js notranslate">doSomething()
+<pre class="brush: js">doSomething()
 .then(result =&gt; doSomethingElse(result))
 .then(newResult =&gt; doThirdThing(newResult))
 .then(finalResult =&gt; {
@@ -114,7 +114,7 @@ const promise2 = promise.then(successCallback, failureCallback);
 
 <p>chain에서 작업이 실패한 후에도 새로운 작업을 수행하는 것이 가능하며 매우 유용합니다. (예 : <code>catch</code>) 다음 예를 읽으십시오:</p>
 
-<pre class="brush: js notranslate">new Promise((resolve, reject) =&gt; {
+<pre class="brush: js">new Promise((resolve, reject) =&gt; {
     console.log('Initial');
 
     resolve();
@@ -134,7 +134,7 @@ const promise2 = promise.then(successCallback, failureCallback);
 
 <p>그러면 다음 텍스트가 출력됩니다.</p>
 
-<pre class="notranslate">Initial
+<pre>Initial
 Do that
 Do this, whatever happened before
 </pre>
@@ -145,7 +145,7 @@ Do this, whatever happened before
 
 <p>'콜백 지옥'에서 <code>failureCallback</code>이 3번 발생한 것을 기억 할 것입니다. promise chain에서는 단 한 번만 발생하는것과 비교되죠.</p>
 
-<pre class="notranslate"><code>doSomething()
+<pre><code>doSomething()
 .then(result =&gt; doSomethingElse(result))
 .then(newResult =&gt; doThirdThing(newResult))
 .then(finalResult =&gt; console.log(`Got the final result: ${finalResult}`))
@@ -153,7 +153,7 @@ Do this, whatever happened before
 
 <p>기본적으로 promise chain은 예외가 발생하면 멈추고 chain의 아래에서 catch를 찾습니다. 이것은 동기 코드가 어떻게 동작 하는지 모델링 한 것입니다.</p>
 
-<pre class="notranslate"><code>try {
+<pre><code>try {
   const result = syncDoSomething();
   const newResult = syncDoSomethingElse(result);
   const finalResult = syncDoThirdThing(newResult);
@@ -164,7 +164,7 @@ Do this, whatever happened before
 
 <p>비동기 코드를 사용한 이러한 대칭성은 ECMAScript 2017에서 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> 구문(Syntactic sugar) 에서 최고로 느낄 수 있습니다.</p>
 
-<pre class="notranslate"><code>async function foo() {
+<pre><code>async function foo() {
   try {
     const result = await doSomething();
     const newResult = await doSomethingElse(result);
@@ -196,7 +196,7 @@ Do this, whatever happened before
 
 <p>특히 유용한 사례 : {{Glossary("Node.js")}}로 코드를 작성할 때, 흔히 프로젝트에서 사용하는 모듈이 reject된 프로미스를 처리하지 않을 수 있습니다. 이런 경우 노드 실행시 콘솔에 로그가 남습니다. 이를 수집에서 분석하고 직접 처리할 수도 있습니다. 아니면 그냥 콘솔 출력을 어지럽히는 것을 막기 위해 그럴 수도 있죠. 이런 식으로 {{domxref("Window.unhandledrejection_event", "unhandledrejection")}}(<a href="/en-US/docs/Web/API/Window/unhandledrejection_event">영어</a>) 이벤트를 처리하는 핸들러를 추가하면 됩니다.</p>
 
-<pre class="notranslate"><code>window.addEventListener("unhandledrejection", event =&gt; {
+<pre><code>window.addEventListener("unhandledrejection", event =&gt; {
   /* You might start here by adding code to examine the
      promise specified by event.promise and the reason in
      event.reason */
@@ -214,14 +214,14 @@ Do this, whatever happened before
 
 <p>이상적인 프로그래밍 세계에서는 모든 비동기 함수는 promise을 반환해야 하지만. 불행히도 일부 API는 여전히 success 및 / 또는 failure 콜백을 전달하는 방식일거라 생각합니다.. 예를 들면 {{domxref ( "WindowTimers.setTimeout", "setTimeout ()")}} 함수가 있습니다.</p>
 
-<pre class="notranslate"><code>setTimeout(() =&gt; saySomething("10 seconds passed"), 10000);</code>
+<pre><code>setTimeout(() =&gt; saySomething("10 seconds passed"), 10000);</code>
 </pre>
 
 <p>예전 스타일의 콜백과 Promise를 합치는것 문제가 있습니다. 함수 <code>saySomething()</code>이 실패하거나 프로그래밍 오류가 있으면 아무 것도 잡아 내지 않습니다. <code>setTimeout</code>의 문제점 입니다.</p>
 
 <p>다행히도 우리는 <code>setTimeout</code>을 Promise로 감쌀 수 있습니다. 가장 좋은 방법은 가능한 가장 낮은 수준에서 문제가되는 함수를 래핑 한 다음 다시는 직접 호출하지 않는 것입니다.</p>
 
-<pre class="notranslate"><code>const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+<pre><code>const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
 
 wait(10000).then(() =&gt; saySomething("10 seconds")).catch(failureCallback);</code>
 </pre>
@@ -236,14 +236,14 @@ wait(10000).then(() =&gt; saySomething("10 seconds")).catch(failureCallback);</c
 
 <p>우리는 병렬로 작업을 시작하고 모든 작업이 다음과 같이 끝날 때까지 기다릴 수 있습니다.</p>
 
-<pre class="notranslate"><code>Promise.all([func1(), func2(), func3()])
+<pre><code>Promise.all([func1(), func2(), func3()])
 .then(([result1, result2, result3]) =&gt; { /* use result1, result2 and result3 */ });</code></pre>
 
 <p>Sequential composition is possible using some clever JavaScript:</p>
 
 <p>고급진 JavaScript를 사용하여 순차적 구성이 가능합니다.</p>
 
-<pre class="notranslate"><code>[func1, func2, func3].reduce((p, f) =&gt; p.then(f), Promise.resolve())
+<pre><code>[func1, func2, func3].reduce((p, f) =&gt; p.then(f), Promise.resolve())
 .then(result3 =&gt; { /* use result3 */ });</code>
 </pre>
 
@@ -251,19 +251,19 @@ wait(10000).then(() =&gt; saySomething("10 seconds")).catch(failureCallback);</c
 
 <p>이것은 재사용 가능한 작성 기능으로 만들 수 있는데, 이는 함수형 프로그래밍에서 일반적인 방식입니다.</p>
 
-<pre class="notranslate"><code>const applyAsync = (acc,val) =&gt; acc.then(val);
+<pre><code>const applyAsync = (acc,val) =&gt; acc.then(val);
 const composeAsync = (...funcs) =&gt; x =&gt; funcs.reduce(applyAsync, Promise.resolve(x));</code>
 </pre>
 
 <p><code>composeAsync()</code> 함수는 여러 함수를 인수로 받아들이고 composition 파이프 라인을 통해 전달되는 초기 값을 허용하는 새 함수를 반환합니다.</p>
 
-<pre class="notranslate"><code>const transformData = composeAsync(func1, func2, func3);
+<pre><code>const transformData = composeAsync(func1, func2, func3);
 const result3 = transformData(data);</code>
 </pre>
 
 <p>ECMAScript 2017에서는 async / await를 사용하여 순차적 구성을보다 간단하게 수행 할 수 있습니다.</p>
 
-<pre class="notranslate"><code>let result;
+<pre><code>let result;
 for (const f of [func1, func2, func3]) {
   result = await f(result);
 }
@@ -275,13 +275,13 @@ for (const f of [func1, func2, func3]) {
 
 <p>놀라움(역자 주. 에러가 난다거나, 코드가 문제가 생긴다거나..했을때의 그 놀라움..)을 피하기 위해 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code>에 전달 된 함수는 already-resolved promise에 있는 경우에도 동기적으로 호출되지 않습니다.</p>
 
-<pre class="notranslate"><code>Promise.resolve().then(() =&gt; console.log(2));
+<pre><code>Promise.resolve().then(() =&gt; console.log(2));
 console.log(1); // 1, 2</code>
 </pre>
 
 <p>즉시 실행되는 대신 전달 된 함수는 마이크로 태스크 대기열에 저장됩니다. 즉, 자바 스크립트 이벤트 루프의 현재 실행이 끝날 때 대기열이 비면 나중에 실행됩니다.</p>
 
-<pre class="notranslate"><code>const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+<pre><code>const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
 
 wait().then(() =&gt; console.log(4));
 Promise.resolve().then(() =&gt; console.log(2)).then(() =&gt; console.log(3));
@@ -299,7 +299,7 @@ console.log(1); // 1, 2, 3, 4</code></pre>
 
 <p>중첩은 <code>catch</code> 문 범위를 제한하는 제어 구조입니다. 특히, 중첩 된 <code>catch</code>는 중첩 된 범위 외부의 체인에있는 오류가 아닌 범위 및 그 이하의 오류 만 잡습니다. 올바르게 사용하면 오류 복구에서보다 정확한 결과를 얻을 수 있습니다.</p>
 
-<pre class="notranslate"><code>doSomethingCritical()
+<pre><code>doSomethingCritical()
 .then(result =&gt; doSomethingOptional(result)
   .then(optionalResult =&gt; doSomethingExtraNice(optionalResult))
   .catch(e =&gt; {})) // Ignore if optional stuff fails; proceed.
@@ -315,7 +315,7 @@ console.log(1); // 1, 2, 3, 4</code></pre>
 
 <p>promise chains을 작성할 때 주의해야 할 몇 가지 일반적인 실수는 다음과 같습니다. 이러한 실수 중 몇 가지는 다음 예제에서 나타납니다.</p>
 
-<pre class="notranslate"><code>// Bad example! Spot 3 mistakes!
+<pre><code>// Bad example! Spot 3 mistakes!
 
 doSomething().then(function(result) {
   doSomethingElse(result) // Forgot to return promise from inner chain + unnecessary nesting
@@ -332,7 +332,7 @@ doSomething().then(function(result) {
 
 <p>좋은 경험 법칙은 항상 약속의 사슬을 반환하거나 종결하는 것이며, 새로운 약속을 얻 자마자 즉각적으로 돌려서 물건을 평평하게하는 것입니다.</p>
 
-<pre class="notranslate"><code>doSomething()
+<pre><code>doSomething()
 .then(function(result) {
   return doSomethingElse(result);
 })