From 06bc06d023186d8d36f90c88e76a9e4c03446534 Mon Sep 17 00:00:00 2001 From: alattalatta Date: Thu, 16 Dec 2021 02:01:24 +0900 Subject: Remove notranslate from JS guides --- .../web/javascript/guide/introduction/index.html | 4 +- .../guide/iterators_and_generators/index.html | 12 ++-- .../guide/loops_and_iteration/index.html | 38 +++++------ files/ko/web/javascript/guide/modules/index.html | 74 +++++++++++----------- .../javascript/guide/numbers_and_dates/index.html | 28 ++++---- .../regular_expressions/assertions/index.html | 16 ++--- .../web/javascript/guide/using_promises/index.html | 52 +++++++-------- 7 files changed, 112 insertions(+), 112 deletions(-) (limited to 'files/ko/web/javascript/guide') 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/소개

이 콘솔은 eval과 완전히 동일하게 동작합니다:마지막 입력된 표현식이 반환되죠. 간단하게 생각해서, 콘솔에 뭔가 입력할 때마다 eval로 감싼 console.log로 둘러싸인 형태라고 보시면 됩니다.

-
function greetMe(yourName) { alert('Hello ' + yourName); } console.log(eval('3 + 5'));
+
function greetMe(yourName) { alert('Hello ' + yourName); } console.log(eval('3 + 5'));

Scratchpad

@@ -132,7 +132,7 @@ original_slug: Web/JavaScript/Guide/소개

JavaScript 작성을 시작하기 위해서, Scratchpad를 열고 첫 JavaScript 코드 "Hello World" 를 작성하세요.

-
(function(){
+
(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
 
 

여기에 실습할 수 있는 예제가 있습니다.  start에서 end까지 step 수 만큼 띄어진  정수 시퀀스를 정의하는 간단한 범위 반복자를 만들 수 있습니다. 최종적으로 시퀀스의 크기가 반환됩니다.

-
function makeRangeIterator(start = 0, end = Infinity, step = 1) {
+
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
 
 

위의 반복자를 사용하면 아래와 같습니다:

-
var it = makeRangeIterator(1, 4);
+
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);
 
 

위의 예제 코드에 생성자를 적용한 것입니다. 두 코드의 행위는 동일하지만, 생성자를 사용한 쪽이 쓰거나 읽기가 훨씬 쉽습니다. 

-
function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
+
function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
     let n = 0;
     for (let i = start; i < end; i += step) {
         n++;
@@ -99,7 +99,7 @@ console.log("Iterated over sequence of size: ", result.value);
 
 

이와 같이 자신의 반복가능 객체를 만들 수 있습니다:

-
var myIterable = {
+
var myIterable = {
     *[Symbol.iterator]() {
         yield 1;
         yield 2;
@@ -126,7 +126,7 @@ or
 
 

일부 문(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")}}.

-
for(let value of ['a', 'b', 'c']){
+
for(let value of ['a', 'b', 'c']){
     console.log(value)
 }
 // "a"
@@ -155,7 +155,7 @@ a // "a"
 
 

여기 sequence(수열)을 재시작하기 위해 next(x)를 사용하는 피보나치 생성기가 있습니다:

-
function* fibonacci(){
+
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
 
 

반복문을 게임의 컴퓨터화된 버전이라고 생각해 보세요. 누군가에게 한 방향으로 X만큼 가게 시키고 다른 방향으로 Y만큼 더 가게 한다고 생각해 보십시오. 예를들어, "동쪽으로 5만큼 가세요"는 다음과 같이 반복문으로 표현 될 수 있습니다.

-
var step;
+
var step;
 for (step = 0; step < 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 < 5; step++) {
 
 

for 반복문은 어떤 특정한 조건이 거짓으로 판별될 때까지 반복합니다. 자바스크립트의 반복문은 C의 반복문과 비슷합니다. for 반복문은 다음과 같습니다.

-
for ([초기문]; [조건문]; [증감문])
+
for ([초기문]; [조건문]; [증감문])
   문장
 
@@ -52,7 +52,7 @@ for (step = 0; step < 5; step++) {

다음 함수는 스크롤링 목록(다중 선택을 허용하는 요소 {{HTMLElement("select")}}). 에서 선택된 옵션들을 세는 for문 입니다. 이 for문은 변수 i 를 선언하고 0으로 초기화 시킵니다. 이것은 i 가  <select> 요소 안의 옵션 수가 i 보다 작은지 확인 합니다. 다음의 if문을 수행하고 각 루프를 빠져나간 뒤 i 를 1 증가시킵니다.

-
<form name="selectForm">
+
<form name="selectForm">
   <p>
     <label for="musicTypes">Choose some music types, then click the button below:</label>
     <select id="musicTypes" name="musicTypes" multiple="multiple">
@@ -90,7 +90,7 @@ btn.addEventListener("click", function(){
 
 

do...while 문은 특정한 조건이 거짓으로 판별될 때까지 반복합니다. do...while 문은 다음과 같습니다.

-
do
+
do
   문장
 while (조건문);
 
@@ -101,7 +101,7 @@ while (조건문);

다음 예제에서, do 반복문은 최소 한번은 반복됩니다. 그리고 i 가 5보다 작지 않을 때까지 계속 반복됩니다.

-
do {
+
do {
   i += 1;
   console.log(i);
 } while (i < 5);
@@ -110,7 +110,7 @@ while (조건문);

while 문은 어떤 조건문이 참이기만 하면 문장을 계속해서 수행합니다. while 문은 다음과 같습니다.

-
while (조건문)
+
while (조건문)
   문장
 
@@ -124,7 +124,7 @@ while (조건문);

다음 while 반복문은 n이 3보다 작은 한, 계속 반복됩니다.

-
n = 0;
+
n = 0;
 x = 0;
 while (n < 3) {
   n++;
@@ -146,7 +146,7 @@ while (n < 3) {
 
 

조건문은 항상 거짓이 될지라도 무한 루프는 피해야 합니다. 그렇지 않으면 그 반복문은 영원히 끝나지 않을 것입니다. 아래의 while 문은 조건문이 절대 거짓이 될 수 없으므로 영원히 반복될 것입니다.

-
// 다음과 같은 코드는 피하세요.
+
// 다음과 같은 코드는 피하세요.
 while (true) {
   console.log("Hello, world");
 }
@@ -157,7 +157,7 @@ while (true) {

레이블 문의 구문은 다음과 같습니다:

-
label :
+
label :
    statement
 
@@ -167,7 +167,7 @@ while (true) {

이 예에서, 레이블 markLoop는 while 루프를 식별합니다.

-
markLoop:
+
markLoop:
 while (theMark == true) {
    doSomething();
 }
@@ -194,7 +194,7 @@ while (theMark == true) {

다음 예

-
for (i = 0; i < a.length; i++) {
+
for (i = 0; i < a.length; i++) {
   if (a[i] == theValue) {
     break;
   }
@@ -202,7 +202,7 @@ while (theMark == true) {
 
 

예시 2: Breaking to a label

-
var x = 0;
+
var x = 0;
 var z = 0
 labelCancelLoops: while (true) {
   console.log("Outer loops: " + x);
@@ -240,7 +240,7 @@ labelCancelLoops: while (true) {
 
 

다음의 예는 i 값이 3일 때 실행하는 continue 문과 함께 while 루프를 보여줍니다. 따라서, n은 값 1, 3, 7, 12를 취합니다.

-
i = 0;
+
i = 0;
 n = 0;
 while (i < 5) {
   i++;
@@ -257,7 +257,7 @@ while (i < 5) {
 
 

continue가 checkiandj의 레이블을 가지고 있다면, 프로그램은 checkiandj 문 상단에서 계속될 것입니다.

-
checkiandj:
+
checkiandj:
   while (i < 4) {
     console.log(i);
     i += 1;
@@ -278,7 +278,7 @@ while (i < 5) {
 
 

for...in  문은 객체의 열거 속성을 통해 지정된 변수를 반복합니다. 각각의 고유한 속성에 대해, JavaScript는 지정된 문을 실행합니다. for...in 문은 다음과 같습니다:

-
for (variable in object) {
+
for (variable in object) {
   statements
 }
 
@@ -287,7 +287,7 @@ while (i < 5) {

다음 함수는 객체와 객체의 이름을 함수의 인수로 취합니다. 그런 다음 모든 객체의 속성을 반복하고 속성 이름과 값을 나열하는 문자열을 반환합니다.

-
function dump_props(obj, obj_name) {
+
function dump_props(obj, obj_name) {
   var result = "";
   for (var i in obj) {
     result += obj_name + "." + i + " = " + obj[i] + "<br>";
@@ -299,7 +299,7 @@ while (i < 5) {
 
 

속성 make와 model을 가진 객체 car의 경우, 결과는 다음과 같습니다:

-
car.make = Ford
+
car.make = Ford
 car.model = Mustang
 
@@ -311,13 +311,13 @@ car.model = Mustang

for...of 문은 각각의 고유한 특성의 값을 실행할 명령과 함께 사용자 지정 반복 후크를 호출하여, 반복 가능한 객체({{jsxref("배열")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, 인수 객체 등을 포함)를 통해 반복하는 루프를 만듭니다.

-
for (variable of object) {
+
for (variable of object) {
   statement
 }

다음 예는 for...of 루프와 for...in 루프의 차이를 보여줍니다. 속성 이름을 통해 for...in이 반복하는 동안, for...of은 속성 값을 통해 반복합니다:

-
let arr = [3, 5, 7];
+
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
 
 

첫 번째 예제(basic-modules)를 보면 다음과 같은 파일 구조가 있습니다.

-
index.html
+
index.html
 main.js
 modules/
     canvas.js
@@ -77,7 +77,7 @@ modules/
 
 

이를 사용하는 가장 쉬운 방법은 모듈 밖으로 내보내려는 항목 앞에 (export를) 배치하는 것입니다. 예를들면 다음과 같습니다.

-
export const name = 'square';
+
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) {
 
 

여러 항목을 내보내는 더 편리한 방법은 모듈 파일 끝에 하나의 export 문을 사용하는 것입니다. 그 다음에 내보내려는 기능들을 쉼표로 구분하여 나열하고 중괄호로 묶습니다.

-
export { name, draw, reportArea, reportPerimeter };
+
export { name, draw, reportArea, reportPerimeter };

Importing features into your script

모듈에서 일부 기능을 내보낸 후에는, 이를 사용할 수 있도록 우리가 사용할 스크립트로 가져와야 합니다. 가장 간단한 방법은 다음과 같습니다.

-
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

import 문(statement)을 사용하고, 가져올 목록을 쉼표로 구분하여 나열한 뒤 괄호로 묶습니다. 그 뒤에는 from을 쓰고 모듈 파일의 경로를 작성합니다. (사이트 루트에 연관된 경로로, 우리의 basic-modules 예제는 /js-examples/modules/basic-modules 입니다) main.js에서 이러한 코드를 볼 수 있습니다.

@@ -109,11 +109,11 @@ export function draw(ctx, length, x, y, color) {

예를들면,

-
/js-examples/modules/basic-modules/modules/square.js
+
/js-examples/modules/basic-modules/modules/square.js

이렇게 쓸 수 있습니다.

-
./modules/square.js
+
./modules/square.js

main.js에서 이러한 코드를 볼 수 있습니다.

@@ -123,7 +123,7 @@ export function draw(ctx, length, x, y, color) {

우리의 스크립트에 기능을 가져오면 동일한 파일 내에 정의한 것처럼 기능을 사용할 수 있습니다. 다음은 main.js 의 import 행 아래에 있습니다.

-
let myCanvas = create('myCanvas', document.body, 480, 320);
+
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);
 
 

이 스크립트를 모듈로 선언하려면 {{htmlelement("script")}} 요소(element)에 type="module" 을 포함시켜야 합니다.

-
<script type="module" src="main.js"></script>
+
<script type="module" src="main.js"></script>

기본적으로 모듈 기능을 가져오는 스크립트는 최상위 모듈로 작동합니다. 이를 생략하면 파이어폭스로 예를들면, "SyntaxError: import declarations may only appear at top level of a module"라는 오류를 줍니다.

@@ -164,23 +164,23 @@ reportPerimeter(square1.length, reportList);

예제를 가지고 어떻게 작동하는지 살펴보겠습니다. 예제 중 basic-modules 프로젝트의 square.js 파일에서 임의의 색상, 크기, 위치로 갖는 사각형을 만드는 randomSquare() 라는 함수를 찾을 수 있습니다. 이것을 기본값으로 export하려고 하므로, 파일의 맨 아래에 다음과 같이 씁니다.

-
export default randomSquare;
+
export default randomSquare;

중괄호가 없음에 주의하세요.

대신 함수 앞에 export default 를 추가하고, 다음과 같이 익명함수로 선언할 수 있습니다.

-
export default function(ctx) {
+
export default function(ctx) {
   ...
 }

main.js 파일에서 다음 코드처럼 사용하면, default function이 import 됩니다.

-
import randomSquare from './modules/square.js';
+
import randomSquare from './modules/square.js';

다시 말하지만, 중괄호가 없다는 점에 유의하세요. 하나의 모듈은 하나의 default export만 허용하기 때문에 우리는 randomSquare 가 해당 모듈임을 알 수 있습니다. 위의 코드는 아래의 코드를 단축하여 사용한 것입니다.

-
import {default as randomSquare} from './modules/square.js';
+
import {default as randomSquare} from './modules/square.js';

주의: export한 항목의 이름을 바꾸는 구문은 {{anch("Renaming imports and exports")}} 섹션에서 설명합니다.

@@ -198,7 +198,7 @@ reportPerimeter(square1.length, reportList);

예를들어 다음 두 가지 방법은 약간의 차이가 있지만, 두 방법 모두 동일한 작업을 수행하고 있습니다.

-
// inside module.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';
-
// inside module.js
+
// inside module.js
 export { function1, function2 };
 
 // inside main.js
@@ -218,11 +218,11 @@ import { function1 as newFunctionName,
 
 

이 모듈듈 각각에는 내부적으로 동일한 이름의 기능이 있습니다. 따라서 각각 하단에 동일한 export 문(statement)이 있습니다.

-
export { name, draw, reportArea, reportPerimeter };
+
export { name, draw, reportArea, reportPerimeter };

이것들을 main.js에 가져올 때 우리는 다음과 같이 시도할 수 있습니다.

-
import { name, draw, reportArea, reportPerimeter } from './modules/square.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';
@@ -230,7 +230,7 @@ import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';

대신 import가 고유하도록(식별 가능하도록) 이름을 변경해야 합니다.

-
import { name as squareName,
+
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,
 
 

다음과 같이 import하는 파일 대신 모듈 파일에서 문제를 해결할 수도 있습니다.

-
// in square.js
+
// in square.js
 export { name as squareName,
          draw as drawSquare,
          reportArea as reportSquareArea,
          reportPerimeter as reportSquarePerimeter };
-
// in main.js
+
// in main.js
 import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';

그리고 이것은 똑같이 작동 할 것입니다. 사용하는 스타일은 개인의 취향이지만, 모듈 코드를 그대로 두고 import 를 변경하는 것이 더 합리적입니다. 특히 제어 권한이 없는 써드 파티 모듈에서 import를 사용하는 경우에 특히 유용합니다.

@@ -262,21 +262,21 @@ import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from

위의 방법은 정상적으로 작동하지만, 다소 지저분하고 길어질 수 있습니다. 보다 나은 해결책은 각 모듈의 기능을 모듈 객체 내부로 가져오는 것입니다. 다음과 같은 구문을 사용합니다.

-
import * as Module from './modules/module.js';
+
import * as Module from './modules/module.js';

이 모듈은 module.js 내에서 사용할 수 있는 모든 export를 가져옵니다. 그리고 그것들을 객체 Module 의 멤버로 만들고 우리 임의의 효과적인 네임스페이스를 제공합니다.

-
Module.function1()
+
Module.function1()
 Module.function2()
 etc.

다시 한 번 실제 사례를 살펴보겠습니다. module-objects 디렉토리로 가면 같은 예제를 볼 수 있지만, 새로운 구문을 이용하기 위해 다시 작성합니다. 모듈에서 export는 모두 다음과 같은 간단한 형식으로 이루어집니다.

-
export { name, draw, reportArea, reportPerimeter };
+
export { name, draw, reportArea, reportPerimeter };

반면에 import는 다음과 같습니다.

-
import * as Canvas from './modules/canvas.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';

각각의 경우에, 지정한 객체 이름 아래에 있는 모듈의 import에 접근할 수 있습니다. 다음은 그 예시입니다.

-
let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+
let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
 Square.reportArea(square1.length, reportList);
 Square.reportPerimeter(square1.length, reportList);
@@ -296,7 +296,7 @@ Square.reportPerimeter(square1.length, reportList);

우리의 classes 디렉토리에서 ES 클래스로 다시 작성된 도형 그리기 모듈의 예를 볼 수 있습니다. 예를들어 square.js 파일에는 모든 기능이 단일 클래스에 포함되어 있습니다.

-
class Square {
+
class Square {
   constructor(ctx, listId, length, x, y, color) {
     ...
   }
@@ -310,15 +310,15 @@ Square.reportPerimeter(square1.length, reportList);

우리는 다음과 같이 export 합니다.

-
export { Square };
+
export { Square };

main.js 에서 우리는 다음과 같이 import 합니다.

-
import { Square } from './modules/square.js';
+
import { Square } from './modules/square.js';

그런다음 클래스를 이용하여 사각형을 그립니다.

-
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
 square1.draw();
 square1.reportArea();
 square1.reportPerimeter();
@@ -327,7 +327,7 @@ square1.reportPerimeter();

모듈을 모아야 할 때가 있을 것입니다. 여러 서브 모듈을 하나의 부모 모듈로 결합하여 여러 단계의 종속성을 가질 수 있습니다. 상위 모듈에서 다음 양식의 export 구문을 사용하할 수 있습니다.

-
export * from 'x.js'
+
export * from 'x.js'
 export { name } from 'x.js'
@@ -336,7 +336,7 @@ export { name } from 'x.js'

예를들어 module-aggregation 디렉토리를 참조하겠습니다. 이 예제에서는 이전 클래스 예제를 기반으로 circle.js, square.js, triangle.js 의 모든 기능을 함께 모으는 shapes.js라는 추가 모듈이 있습니다. 또한 우리는 shapes 모듈 디렉토리 안에 있는 서브 디렉토리 내에서 서브 모듈을 이동 시켰습니다. 이제 모듈 구조는 다음과 같습니다.

-
modules/
+
modules/
   canvas.js
   shapes.js
   shapes/
@@ -346,11 +346,11 @@ export { name } from 'x.js'

각 하위 모듈에서 export 형태는 같습니다. 예)

-
export { Square };
+
export { Square };

다음은 집합(aggregation) 부분입니다. shapes.js 안에는 다음과 같은 내용이 포함되어 있습니다.

-
export { Square } from './shapes/square.js';
+
export { Square } from './shapes/square.js';
 export { Triangle } from './shapes/triangle.js';
 export { Circle } from './shapes/circle.js';
@@ -362,13 +362,13 @@ export { Circle } from './shapes/circle.js';

이제 main.js 파일에서 우리는 세 개의 모듈 클래스를 모두 대체할 수 있습니다.

-
import { Square } from './modules/square.js';
+
import { Square } from './modules/square.js';
 import { Circle } from './modules/circle.js';
 import { Triangle } from './modules/triangle.js';

다음과 같은 한 줄로 작성할 수 있습니다.

-
import { Square, Circle, Triangle } from '/js-examples/modules/module-aggregation/modules/shapes.js';
+
import { Square, Circle, Triangle } from '/js-examples/modules/module-aggregation/modules/shapes.js';

Dynamic module loading

@@ -376,7 +376,7 @@ import { Triangle } from './modules/triangle.js';

이 새로운 기능을 통해 import() 를 함수로 호출하여 모듈 경로를 매개 변수(parameter)로 전달할 수 있습니다. 모듈 객체({{anch("Creating a module object")}} 참조)를 사용하여 promise를 반환하면 해당 객체의 export에 접근할 수 있습니다. 

-
import('/modules/myModule.js')
+
import('/modules/myModule.js')
   .then((module) => {
     // Do something with the module.
   });
@@ -387,11 +387,11 @@ import { Triangle } from './modules/triangle.js';

main.js 에서 document.querySelector() 를 사용하여 각 버튼에 대한 참조를 가져왔습니다. 예를들면 다음과 같습니다.

-
let squareBtn = document.querySelector('.square');
+
let squareBtn = document.querySelector('.square');

그런 다음 각 버튼에 이벤트 리스너를 연결하여 해당 모듈을 누르면, 동적으로 로드되어 도형을 그리는데 사용됩니다.

-
squareBtn.addEventListener('click', () => {
+
squareBtn.addEventListener('click', () => {
   import('/js-examples/modules/dynamic-module-imports/modules/square.js').then((Module) => {
     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
 
 

10진수

-
1234567890
+
1234567890
 42
 
 // 앞에 0이 붙은 숫자를 조심하세요:
@@ -38,7 +38,7 @@ translation_of: Web/JavaScript/Guide/Numbers_and_dates
 
 

2진수 구문은 앞에 오는 0과 소문자 또는 대문자 라틴 문자 "B"(0B 또는 0b)를 사용합니다. 0b 다음의 숫자가 0 또는 1이 아니면 다음의 SyntaxError가 발생합니다. "0b 이후에 누락 된 2 진수"("Missing binary digits after 0b")입니다.

-
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
 var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
 var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
@@ -46,26 +46,26 @@ var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607

8 진수 구문은 앞에 0을 사용합니다. 0 이후의 숫자가 0에서 7까지 범위 밖에 있는 경우, 숫자는 10진수로 해석됩니다.

-
var n = 0755; // 493
+
var n = 0755; // 493
 var m = 0644; // 420
 

ECMAScript 5의 Strict 모드는 8 진수 구문을 금지합니다. 8 진수 구문은 ECMAScript 5의 일부가 아니지만, 0644 === 420"\ 045"=== "%"의 8 진수에 접두사를 붙이면 모든 브라우저에서 지원됩니다. ECMAScript 2015에서는 접두어가 0o인 경우 8 진수가 지원됩니다 (예 :

-
var a = 0o10; // ES2015: 8
+
var a = 0o10; // ES2015: 8

16진수

16진수 구문은 앞에 0 다음에 소문자나 대문자 라틴어 문자 "X"(0x 또는 0X)를 사용합니다. 0X 이후 숫자가 범위(0123456789ABCDEF) 밖에 있는 경우, 다음 SyntaxError가 발생합니다: "식별자는 숫자 리터럴 후 즉시 시작됩니다".

-
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
 0x123456789ABCDEF   // 81985529216486900
 0XA                 // 10
 

지수 계산

-
1E3   // 1000
+
1E3   // 1000
 2e6   // 2000000
 0.1e2 // 10
 
@@ -74,7 +74,7 @@ var m = 0644; // 420

{{jsxref("Number")}} 내장객체는 최대값, not-a-number, 무한대와 같은 숫자 상수를 위한 속성들이 있습니다. 여러분은 이러한 속성의 값을 변경 할 수 없고 다음과 같이 사용합니다:

-
var biggestNum = Number.MAX_VALUE;
+
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;
 
 

내장 {{jsxref ( "Math")}} 객체는 수학 상수 및 함수에 대한 속성 및 메서드를 포함합니다. 예를 들어, Math 객체의 PI 속성에는 pi (3.141 ...) 값이 있습니다.이 값은 응용 프로그램에서 다음과 같이 사용합니다.

-
Math.PI
+
Math.PI
 

마찬가지로 표준 수학 함수도 Math의 함수입니다. 여기에는 삼각 함수, 로그 함수, 지수 함수 및 기타 함수가 포함됩니다. 예를 들어 삼각 함수 sine을 사용하려면 다음과 같이 작성합니다.

-
Math.sin(1.56)
+
Math.sin(1.56)
 

Math의 모든 삼각 함수에는 라디안으로 매게변수를 입력해야 합니다.

@@ -289,7 +289,7 @@ var notANum = Number.NaN;

Date 객체를 만들려면 :

-
var dateObjectName = new Date([parameters]);
+
var dateObjectName = new Date([parameters]);
 

여기서 dateObjectName은 만들려는 Date 객체의 이름입니다. 새로운 객체 또는 기존 객체의 속성 일 수 있습니다.

@@ -329,7 +329,7 @@ var notANum = Number.NaN;

예를 들어, 아래와 같이 값들을 정의해봅시다 :

-
var Xmas95 = new Date("December 25, 1995");
+
var Xmas95 = new Date("December 25, 1995");
 

그러면 Xmas95.getMonth()는 11을 반환합니다, 그리고 Xmas95.getFullYear()는 1995를 반환합니다.

@@ -338,7 +338,7 @@ var notANum = Number.NaN;

예를 들어, 다음 코드는 현재 년도에 남아 수를 표시합니다:

-
var today = new Date();
+
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
 
 

Parse 함수는 날짜문자열부터 기존의 Date객체까지의 값을 할당하기에 유용합니다. 예를 들어, 다음 코드는 그 IPOdate 객체에 날짜값을 할당하기위해 parsesetTime을 사용합니다;

-
var IPOdate = new Date();
+
var IPOdate = new Date();
 IPOdate.setTime(Date.parse("Aug 9, 1995"));
 
@@ -358,7 +358,7 @@ IPOdate.setTime(Date.parse("Aug 9, 1995"));

다음 예제 에서 JSClock()는 digital 시계형식의 시간을 반환합니다.

-
function JSClock() {
+
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
 
 

General boundary-type overview example

-
// Using Regex boundaries to fix buggy string.
+
// 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'.
 
 

입력 시작시 일치를 위해 ^를 사용하십시오. 이 예에서는 /^A/ regex로 'A'로 시작하는 결과를 얻습니다. 여기서 ^는 한 가지 역할 만합니다. 적절한 결과를 보기위해 화살표 함수가있는 필터 메소드를 사용합니다.

-
let fruits = ["Apple", "Watermelon", "Orange", "Avocado", "Strawberry"];
+
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' ]
 
 

두 번째 예제에서 ^는 두 가지 모두에 사용됩니다 : 입력의 일치 시작점, 그룹에서 사용될 때 부정 또는 보완 문자 세트.

-
let fruits = ["Apple", "Watermelon", "Orange", "Avocado", "Strawberry"];
+
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' ]Matching a word boundary
 
-
let fruitsWithDescription = ["Red apple", "Orange orange", "Green Avocado"];
+
let fruitsWithDescription = ["Red apple", "Orange orange", "Green Avocado"];
 
 // Select descriptions that contains 'en' or 'ed' words endings:
 let enEdSelection = fruitsWithDescription.filter(descr => /(en|ed)\b/.test(descr));
@@ -169,7 +169,7 @@ console.log(enEdSelection); // [ 'Red apple', 'Green Avocado' ]

Lookahead assertion

-
// JS Lookahead assertion x(?=y)
+
// 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
 
 

For example, /\d+(?!\.)/ matches a number only if it is not followed by a decimal point. /\d+(?!\.)/.exec('3.141') matches "141" but not "3.

-
console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]
+
console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]
 

Different meaning of '?!' combination usage in Assertions and  Ranges 

Different meaning of ?! combination usage in Assertions /x(?!y)/ and Ranges [^?!].

-
let orangeNotLemon = "Do you want to have an orange? Yes, I do not want to have a lemon!";
+
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
 
 

Lookbehind assertion

-
let oranges = ['ripe orange A ', 'green orange B', 'ripe orange C',];
+
let oranges = ['ripe orange A ', 'green orange B', 'ripe orange C',];
 
 let ripe_oranges = oranges.filter( fruit => fruit.match(/(?<=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
 
 

createAudioFileAsync()는 함수는 아래와 같이 사용됩니다.  

-
function successCallback(result) {
+
function successCallback(result) {
   console.log("Audio file ready at URL: " + result);
 }
 
@@ -31,11 +31,11 @@ translation_of: Web/JavaScript/Guide/Using_promises
 
 

만약 createAudioFileAsync() 함수가 Promise를 반환해주도록 수정해본다면, 다음과 같이 간단하게 사용되어질 수 있습니다.

-
createAudioFileAsync(audioSettings).then(successCallback, failureCallback);
+
createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

…조금 더 간단하게 써보자면:

-
const promise = createAudioFileAsync(audioSettings);
+
const promise = createAudioFileAsync(audioSettings);
 promise.then(successCallback, failureCallback);

우리는 이와 같은 것을 비동기 함수 호출이라고 부릅니다. 이런 관례는 몇 가지 장점을 갖고 있습니다. 각각에 대해 한번 살펴보도록 합시다.

@@ -58,13 +58,13 @@ promise.then(successCallback, failureCallback);

then() 함수는 새로운 promise를 반환합니다. 처음에 만들었던 promise와는 다른 새로운 promise입니다.

-
const promise = doSomething();
+
const promise = doSomething();
 const promise2 = promise.then(successCallback, failureCallback);
 

또는

-
const promise2 = doSomething().then(successCallback, failureCallback);
+
const promise2 = doSomething().then(successCallback, failureCallback);
 

두 번째 promise는 doSomething() 뿐만 아니라 successCallback or failureCallback 의 완료를 의미합니다. successCallback or failureCallback 또한 promise를 반환하는 비동기 함수일 수도 있습니다. 이 경우 promise2에 추가 된 콜백은 successCallback또는 failureCallback에 의해 반환된 promise 뒤에 대기합니다.

@@ -73,7 +73,7 @@ const promise2 = promise.then(successCallback, failureCallback);

예전에는 여러 비동기 작업을 연속적으로 수행하면 고전적인 '지옥의 콜백 피라미드'가 만들어 졌었습니다.

-
doSomething(function(result) {
+
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);
 
 

모던한 방식으로 접근한다면, 우리는 콜백 함수들을 반환된 promise에 promise chain을 형성하도록 추가할 수 있습니다:

-
doSomething().then(function(result) {
+
doSomething().then(function(result) {
   return doSomethingElse(result);
 })
 .then(function(newResult) {
@@ -98,7 +98,7 @@ const promise2 = promise.then(successCallback, failureCallback);
 
 

then 에 넘겨지는 인자는 선택적(optional)입니다. 그리고 catch(failureCallback) 는 then(null, failureCallback) 의 축약입니다. 이 표현식을 화살표 함수로 나타내면 다음과 같습니다.

-
doSomething()
+
doSomething()
 .then(result => doSomethingElse(result))
 .then(newResult => doThirdThing(newResult))
 .then(finalResult => {
@@ -114,7 +114,7 @@ const promise2 = promise.then(successCallback, failureCallback);
 
 

chain에서 작업이 실패한 후에도 새로운 작업을 수행하는 것이 가능하며 매우 유용합니다. (예 : catch) 다음 예를 읽으십시오:

-
new Promise((resolve, reject) => {
+
new Promise((resolve, reject) => {
     console.log('Initial');
 
     resolve();
@@ -134,7 +134,7 @@ const promise2 = promise.then(successCallback, failureCallback);
 
 

그러면 다음 텍스트가 출력됩니다.

-
Initial
+
Initial
 Do that
 Do this, whatever happened before
 
@@ -145,7 +145,7 @@ Do this, whatever happened before

'콜백 지옥'에서 failureCallback이 3번 발생한 것을 기억 할 것입니다. promise chain에서는 단 한 번만 발생하는것과 비교되죠.

-
doSomething()
+
doSomething()
 .then(result => doSomethingElse(result))
 .then(newResult => doThirdThing(newResult))
 .then(finalResult => console.log(`Got the final result: ${finalResult}`))
@@ -153,7 +153,7 @@ Do this, whatever happened before
 
 

기본적으로 promise chain은 예외가 발생하면 멈추고 chain의 아래에서 catch를 찾습니다. 이것은 동기 코드가 어떻게 동작 하는지 모델링 한 것입니다.

-
try {
+
try {
   const result = syncDoSomething();
   const newResult = syncDoSomethingElse(result);
   const finalResult = syncDoThirdThing(newResult);
@@ -164,7 +164,7 @@ Do this, whatever happened before
 
 

비동기 코드를 사용한 이러한 대칭성은 ECMAScript 2017에서 async/await 구문(Syntactic sugar) 에서 최고로 느낄 수 있습니다.

-
async function foo() {
+
async function foo() {
   try {
     const result = await doSomething();
     const newResult = await doSomethingElse(result);
@@ -196,7 +196,7 @@ Do this, whatever happened before
 
 

특히 유용한 사례 : {{Glossary("Node.js")}}로 코드를 작성할 때, 흔히 프로젝트에서 사용하는 모듈이 reject된 프로미스를 처리하지 않을 수 있습니다. 이런 경우 노드 실행시 콘솔에 로그가 남습니다. 이를 수집에서 분석하고 직접 처리할 수도 있습니다. 아니면 그냥 콘솔 출력을 어지럽히는 것을 막기 위해 그럴 수도 있죠. 이런 식으로 {{domxref("Window.unhandledrejection_event", "unhandledrejection")}}(영어) 이벤트를 처리하는 핸들러를 추가하면 됩니다.

-
window.addEventListener("unhandledrejection", event => {
+
window.addEventListener("unhandledrejection", event => {
   /* 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
 
 

이상적인 프로그래밍 세계에서는 모든 비동기 함수는 promise을 반환해야 하지만. 불행히도 일부 API는 여전히 success 및 / 또는 failure 콜백을 전달하는 방식일거라 생각합니다.. 예를 들면 {{domxref ( "WindowTimers.setTimeout", "setTimeout ()")}} 함수가 있습니다.

-
setTimeout(() => saySomething("10 seconds passed"), 10000);
+
setTimeout(() => saySomething("10 seconds passed"), 10000);
 

예전 스타일의 콜백과 Promise를 합치는것 문제가 있습니다. 함수 saySomething()이 실패하거나 프로그래밍 오류가 있으면 아무 것도 잡아 내지 않습니다. setTimeout의 문제점 입니다.

다행히도 우리는 setTimeout을 Promise로 감쌀 수 있습니다. 가장 좋은 방법은 가능한 가장 낮은 수준에서 문제가되는 함수를 래핑 한 다음 다시는 직접 호출하지 않는 것입니다.

-
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
 
 wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);
 
@@ -236,14 +236,14 @@ wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);우리는 병렬로 작업을 시작하고 모든 작업이 다음과 같이 끝날 때까지 기다릴 수 있습니다.

-
Promise.all([func1(), func2(), func3()])
+
Promise.all([func1(), func2(), func3()])
 .then(([result1, result2, result3]) => { /* use result1, result2 and result3 */ });

Sequential composition is possible using some clever JavaScript:

고급진 JavaScript를 사용하여 순차적 구성이 가능합니다.

-
[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve())
+
[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve())
 .then(result3 => { /* use result3 */ });
 
@@ -251,19 +251,19 @@ wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);이것은 재사용 가능한 작성 기능으로 만들 수 있는데, 이는 함수형 프로그래밍에서 일반적인 방식입니다.

-
const applyAsync = (acc,val) => acc.then(val);
+
const applyAsync = (acc,val) => acc.then(val);
 const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
 

composeAsync() 함수는 여러 함수를 인수로 받아들이고 composition 파이프 라인을 통해 전달되는 초기 값을 허용하는 새 함수를 반환합니다.

-
const transformData = composeAsync(func1, func2, func3);
+
const transformData = composeAsync(func1, func2, func3);
 const result3 = transformData(data);
 

ECMAScript 2017에서는 async / await를 사용하여 순차적 구성을보다 간단하게 수행 할 수 있습니다.

-
let result;
+
let result;
 for (const f of [func1, func2, func3]) {
   result = await f(result);
 }
@@ -275,13 +275,13 @@ for (const f of [func1, func2, func3]) {
 
 

놀라움(역자 주. 에러가 난다거나, 코드가 문제가 생긴다거나..했을때의 그 놀라움..)을 피하기 위해 then()에 전달 된 함수는 already-resolved promise에 있는 경우에도 동기적으로 호출되지 않습니다.

-
Promise.resolve().then(() => console.log(2));
+
Promise.resolve().then(() => console.log(2));
 console.log(1); // 1, 2
 

즉시 실행되는 대신 전달 된 함수는 마이크로 태스크 대기열에 저장됩니다. 즉, 자바 스크립트 이벤트 루프의 현재 실행이 끝날 때 대기열이 비면 나중에 실행됩니다.

-
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
 
 wait().then(() => console.log(4));
 Promise.resolve().then(() => console.log(2)).then(() => console.log(3));
@@ -299,7 +299,7 @@ console.log(1); // 1, 2, 3, 4

중첩은 catch 문 범위를 제한하는 제어 구조입니다. 특히, 중첩 된 catch는 중첩 된 범위 외부의 체인에있는 오류가 아닌 범위 및 그 이하의 오류 만 잡습니다. 올바르게 사용하면 오류 복구에서보다 정확한 결과를 얻을 수 있습니다.

-
doSomethingCritical()
+
doSomethingCritical()
 .then(result => doSomethingOptional(result)
   .then(optionalResult => doSomethingExtraNice(optionalResult))
   .catch(e => {})) // Ignore if optional stuff fails; proceed.
@@ -315,7 +315,7 @@ console.log(1); // 1, 2, 3, 4

promise chains을 작성할 때 주의해야 할 몇 가지 일반적인 실수는 다음과 같습니다. 이러한 실수 중 몇 가지는 다음 예제에서 나타납니다.

-
// Bad example! Spot 3 mistakes!
+
// 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) {
 
 

좋은 경험 법칙은 항상 약속의 사슬을 반환하거나 종결하는 것이며, 새로운 약속을 얻 자마자 즉각적으로 돌려서 물건을 평평하게하는 것입니다.

-
doSomething()
+
doSomething()
 .then(function(result) {
   return doSomethingElse(result);
 })
-- 
cgit v1.2.3-54-g00ecf