async_await 번역 추가, 오탈자 수정, en-us 동기화 (#1288)

* async_await 번역 추가, 오탈자 수정, en-us 동기화

* .DS_Store 제거

* 코드 리뷰 수정 사항 반영

1 files changed, 94 insertions, 64 deletions

diff --git a/files/ko/learn/javascript/asynchronous/async_await/index.html b/files/ko/learn/javascript/asynchronous/async_await/index.html
index 339a9dabdb..92a9d81dc6 100644
--- a/files/ko/learn/javascript/asynchronous/async_await/index.html
+++ b/files/ko/learn/javascript/asynchronous/async_await/index.html
@@ -1,34 +1,43 @@
 ---
-title: Making asynchronous programming easier with async and await
+title: async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기
 slug: Learn/JavaScript/Asynchronous/Async_await
-translation_of: Learn/JavaScript/Asynchronous/Async_await
+tags:
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Learn
+  - Promises
+  - async
+  - asynchronous
+  - await
 ---
 <div>{{LearnSidebar}}</div>
 
 <div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
 
-<p class="summary">Javascript에 대한 최신 추가 사항은 ECMAScript 2017 JavaScript 에디션의 일부인 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> 그리고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> 키워드 입니다.(<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>를 참조하세요). 이러한 기능들은 Promise기반 코드를 좀 더 쓰기 쉽고 읽기 쉽게 만들어줍니다. 이 기능을 사용하면 비동기 코드를 구식 동기 코드처럼 보여주기 때문에 충분히 배울 가치가 있습니다.이번 문서에서 위의 기능을 어떻게 사용하는지 배울 것 입니다.</p>
+<p class="summary">Javascript에 대한 최신 추가 사항은 ECMAScript 2017 JavaScript 에디션의 일부인 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> 그리고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> 키워드는 ECMAScript2017에 추가되었습니다. 이 기능들은 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 더 쉽도록 만들어줍니다. 비동식 코드는 구식 동기코드를 읽기 쉽게 만들기 때문에 학습할 가치가 있습니다. 이 글은 당신이 비동기에 알아야할 것을 알려줍니다. </p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals, an understanding of async code in general and promises.</td>
+   <th scope="row">필수조건:</th>
+   <td>기본 컴퓨터 사용능력, 자바스크립트 기초, 비동기코드에 대한 이해</td>
   </tr>
   <tr>
-   <th scope="row">Objective:</th>
-   <td>To understand promises and how to use them.</td>
+   <th scope="row">목표:</th>
+   <td>async/await에 대한 이해</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="The_basics_of_asyncawait">The basics of async/await</h2>
+<h2 id="The_basics_of_asyncawait">async/await의 기초</h2>
 
 <p>async/await 코드는 두 가지 부분으로 나눠져있습니다.</p>
 
-<h3 id="The_async_keyword">The async keyword</h3>
+<h3 id="The_async_keyword">비동기 키워드</h3>
 
-<p>먼저 비 동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>으로 만들기 위하여 function()앞에 <code>async</code> keyword를 추가합니다. async function()은 <code>await</code> 키워드가 비동기 코드를 호출할 수 있게 해주는 함수 입니다.</p>
+<p>먼저 비동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async 함수</a>로 만들기 위하여 function()앞에 <code>async</code> 키워드를 추가합니다. async function()은 <code>await</code> 키워드가 비동기 코드를 호출할 수 있게 해주는 함수 입니다.</p>
 
 <p>브라우저의 JavaScript 콘솔에서 아래와 같이 입력해보세요. :</p>
 
@@ -59,7 +68,7 @@ hello();</pre>
 
 <pre class="brush: js notranslate">hello().then((value) =&gt; console.log(value))</pre>
 
-<p>짧개 표현하면 아래와 같이 쓸 수 있습니다.</p>
+<p>짧게 표현하면 아래와 같이 쓸 수 있습니다.</p>
 
 <pre class="brush: js notranslate">hello().then(console.log)</pre>
 
@@ -67,7 +76,7 @@ hello();</pre>
 
 <p>정리하면, <code>async</code> 를 함수와 같이 사용하면 결과를 직접 반환하는게 아니라 Promise를 반환하게 합니다. 또한 동기식 함수는 <code>await</code>사용을 위한 지원과 함께 실행되는 잠재적인 오버헤드를 피할 수 있습니다. 함수가  <code>async</code>라고 선언될 때 필요한 핸들링만 추가하면 JavaScript엔진이 우리가 만든 프로그램을 최적화 할 수 있습니다. 끝내주죠?</p>
 
-<h3 id="The_await_keyword">The await keyword</h3>
+<h3 id="The_await_keyword">비동기 키워드</h3>
 
 <p>비동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> 키워드와 함께 쓰면 그 장점이 확실히 보입니다. 이것은 어떠한 Promise기반 함수 앞에 놓을 수 있습니다. 그리고 우리의 코드의 Promise가 fulfil될 때 까지 잠시 중단하고, 결과를 반환합니다. 그리고 실행을 기다리는 다른 코드들을 중지시키지 않고 그대로 실행되게 합니다.</p>
 
@@ -83,7 +92,7 @@ hello().then(alert);</pre>
 
 <p>물론 위의 예시는 그다지 쓸모있진 않습니다. 다만 어떻게 구문을 작성해야 하는지는 잘 나타내줍니다. 이제 실제 사례를 살펴봅시다.</p>
 
-<h2 id="Rewriting_promise_code_with_asyncawait">Rewriting promise code with async/await</h2>
+<h2 id="Rewriting_promise_code_with_asyncawait">async/await와 함께 다시 쓰는 promise code</h2>
 
 <p>이전 문서에서 봤던 간단한 fetch() 예제를 살펴봅시다. :</p>
 
@@ -122,7 +131,11 @@ myFetch()
 
 <pre class="brush: js notranslate">async function myFetch() {
   let response = await fetch('coffee.jpg');
-  return await response.blob();
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.blob();
+
 }
 
 myFetch().then((blob) =&gt; {
@@ -132,27 +145,23 @@ myFetch().then((blob) =&gt; {
   document.body.appendChild(image);
 }).catch(e =&gt; console.log(e));</pre>
 
-<p>예제를 직접 만들어보거나, 여기서 결과를 확인할 수 있습니다. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p>
+<p>예제를 직접 만들어보거나, 여기서 결과를 확인할 수 있습니다. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">예제</a> (여기서 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">소스코드</a>를 볼 수 있습니다.).</p>
 
-<h3 id="But_how_does_it_work">But how does it work?</h3>
+<h3 id="But_how_does_it_work">어떻게 작동할까요?</h3>
 
 <p>함수 안에 코드를 작성했고, <code>function</code> 키워드 앞에 <code>async</code> 키워드를 썼다는 것을 알 수 있습니다. 꼭 이렇게 써야합니다!! 비동기 코드를 실행할 블럭을 정의하려면 비동기 함수를 생성해야 합니다. <code>await</code>는 <code>async function</code> 안에서만 쓸 수 있습니다.</p>
 
-<div class="blockIndicator note">
-<p><strong>Note:</strong> It's worth saying again, in a box with an eye-catching background color: <code>await</code> only works inside async functions.</p>
-</div>
-
 <p><code>myFetch()</code> 함수 내에 코드가 이전의 Promise버전과 매우 유사하지만, 다른점이 있습니다. <code>.then()</code>블럭을 사용하여 작업을 이어가는 대신 메서드 호출 전에 <code>await</code> 키워드를 사용하여 반환된 결과를 변수에 할당합니다. <code>await</code> 키워드는 JavaScript 런타임이 이 라인에서 비동기 코드를 일시 중지하여 비동기 함수 호출이 결과를 반환할 때 까지 기다리게 합니다. 그러나 외부의 다른 동기 코드는 실행될 수 있도록 합니다. 작업이 완료되면 코드는 계속 이어져서 실행됩니다. 예를들면 아래와 같습니다. :</p>
 
 <pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre>
 
-<p>fullfilled된 <code>fetch()</code> Promise에서 반환된 응답은 해당 응답이 사용할 수 있게 되면 <code>response</code> 변수에 할당됩니다. 그리고 parser는 해당 응답이 발생할 때 까지 이 라인에서 일시 중지됩니다. response가 사용 가능하게 되면, parser 는 다음 라인으로 이동하게 되고 그 라인에서 <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> 을 생성하게 됩니다. 이라인도 Promise기반 비동기 메서드를 호출하므로, 여기서도<code>await</code> 을 사용합니다. 비동기 작업 결과가 반환되면, <code>myFetch()</code> 함수가 그 결과를 반환합니다.</p>
+<p>fulfilled된 <code>fetch()</code> Promise에서 반환된 응답은 해당 응답이 사용할 수 있게 되면 <code>response</code> 변수에 할당됩니다. 그리고 parser는 해당 응답이 발생할 때 까지 이 라인에서 일시 중지됩니다. response가 사용 가능하게 되면, parser 는 다음 라인으로 이동하게 되고 그 라인에서 <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> 을 생성하게 됩니다. 이라인도 Promise기반 비동기 메서드를 호출하므로, 여기서도<code>await</code> 을 사용합니다. 비동기 작업 결과가 반환되면, <code>myFetch()</code> 함수가 그 결과를 반환합니다.</p>
 
 <p><code>myFetch()</code> 함수를 호출하면, Promise를 반환하므로, 따라서 화면에 Blob을 표시해주는 <code>.then()</code> 코드 블럭 체이닝 할 수 있습니다.</p>
 
 <p>여기까지 왔으면 이 방법이 멋있다고 생각해야합니다! 왜냐하면 <code>.then()</code> 블럭이 줄어들고 대부분이 동기 코드처럼 보이기 때문에 정말 직관적입니다.</p>
 
-<h3 id="Adding_error_handling">Adding error handling</h3>
+<h3 id="Adding_error_handling">오류 처리 추가</h3>
 
 <p>그리고 오류 처리를 하려면 몇 가지 옵션이 있습니다.</p>
 
@@ -161,12 +170,16 @@ myFetch().then((blob) =&gt; {
 <pre class="brush: js notranslate">async function myFetch() {
   try {
     let response = await fetch('coffee.jpg');
-    let myBlob = await response.blob();
 
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    let myBlob = await response.blob();
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+
   } catch(e) {
     console.log(e);
   }
@@ -180,7 +193,11 @@ myFetch();</pre>
 
 <pre class="brush: js notranslate">async function myFetch() {
   let response = await fetch('coffee.jpg');
-  return await response.blob();
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.blob();
+
 }
 
 myFetch().then((blob) =&gt; {
@@ -198,28 +215,34 @@ myFetch().then((blob) =&gt; {
 <p>위의 예제 모두를 GitHub에서 찾아볼 수 있습니다. :</p>
 
 <ul>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">소스 코드</a>)</li>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">소스 코드</a>)</li>
 </ul>
 
 <h2 id="Awaiting_a_Promise.all">Awaiting a Promise.all()</h2>
 
-<p>async/await는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>의 상위에 만들어져 있기 때문에 Promise의 모든 기능을 사용할 수 있습니다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> 을 포함해서 말이죠 — 아래 보이는 코드처럼 <code>Promise.all()</code> 앞에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">async</span></font>키워드를 사용하여 동기식 코드처럼 작성할 수 있습니다. 이전 문서를 확인해봅시다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">an example we saw in our previous article</a>. 새로운 버전과 비교하기 위해 탭을 분리 해보세요.</p>
+<p>async/await는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>의 상위에 만들어져 있기 때문에 Promise의 모든 기능을 사용할 수 있습니다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> 을 포함해서 말이죠 — 아래 보이는 코드처럼 <code>Promise.all()</code> 앞에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">async</span></font>키워드를 사용하여 동기식 코드처럼 작성할 수 있습니다. 이전 문서를 확인해봅시다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">이전에 글에서 본 예제</a>. 새로운 버전과 비교하기 위해 탭을 분리 해보세요.</p>
 
-<p>Aasync/await 스타일로 변경한 코드는 아래와 같습니다. (see <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>) :</p>
+<p>async/await 스타일로 변경한 코드는 아래와 같습니다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">데모</a> 그리고 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">소스 코드</a>) :</p>
 
 <pre class="brush: js notranslate">async function fetchAndDecode(url, type) {
   let response = await fetch(url);
 
   let content;
 
-  if(type === 'blob') {
-    content = await response.blob();
-  } else if(type === 'text') {
-    content = await response.text();
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    if(type === 'blob') {
+      content = await response.blob();
+    } else if(type === 'text') {
+      content = await response.text();
+    }
   }
 
   return content;
+
+
 }
 
 async function displayContent() {
@@ -247,7 +270,7 @@ async function displayContent() {
 
 displayContent()
 .catch((e) =&gt;
-  console.log(e)
+  console.log(e)
 );</pre>
 
 <p>몇 가지 사항을 조금 수정했을 뿐인데 <code>fetchAndDecode()</code>함수를 쉽게 비동기 함수로 변환했습니다. <code>Promise.all()</code> 라인을 살펴보세요:</p>
@@ -259,12 +282,12 @@ displayContent()
 <p>마지막으로 에러를 다루기 위해 <code>.catch()</code> 블럭을 <code>displayContent()</code> 함수를 호출하는 곳에 추가했습니다. 이렇게 하면 두 함수에서 발생하는 에러를 처리할 수 있습니다.</p>
 
 <div class="blockIndicator note">
-<p><strong>Note</strong>: It is also possible to use a sync <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> block within an async function, in place of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> async block, to show a final report on how the operation went — you can see this in action in our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p>
+  <p><strong>Note</strong>: <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code>비동기 블록 대신 비동기 함수 내에서 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 동기 블록을 사용하여 작업이 어떻게 진행되었는지에 대한 최종 보고서를 표시할 수 있습니다. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">예제</a>에서도 확인이 가능합니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">소스 코드</a>).</p>
 </div>
 
-<h2 id="The_downsides_of_asyncawait">The downsides of async/await</h2>
+<h2 id="The_downsides_of_asyncawait">async/await의 단점</h2>
 
-<p>앞서 봤듯이 async/await 은매우 유용하지만 고려해야 할 몇 가지 단점이 있습니다.</p>
+<p>앞서 봤듯이 async/await은 매우 유용하지만 고려해야 할 몇 가지 단점이 있습니다.</p>
 
 <p>Async/await 는 우리의 코드를 마치 동기식 코드처럼 보이게 합니다. 그리고 어떤 면에서는 정말로 동기적으로 행동합니다. 함수 블럭에 여러 개의 <code>await</code> 키워드를 사용하면 Promise가 fulfilled되기 전 까지 다음 <code>await</code> 을 차단합니다. 그 동안 다른 태스크는 계속 실행이 되지만 정의한 함수 내에서는 동기적으로 작동할 것 입니다.</p>
 
@@ -272,15 +295,21 @@ displayContent()
 
 <p>이 문제를 완화할 수 있는 패턴이 있습니다. — 모든 <code>Promise</code> 오브젝트를 변수에 저장하여 미리 실행되게 하고 변수가 사용 가능할 때 꺼내서 쓰는 것 입니다. 어떻게 작동하는지 한번 살펴봅시다.</p>
 
-<p>두 가지 예시를 보여주겠습니다. — 느린 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) 그리고 빠른 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>)입니다. 두 예제에서  마치 비동기 작업인 것 처럼 보이기 위해 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 을 사용했습니다. :</p>
-
-<pre class="brush: js notranslate">function timeoutPromise(interval) {
-  return new Promise((resolve, reject) =&gt; {
-    setTimeout(function(){
-      resolve("done");
-    }, interval);
-  });
-};</pre>
+<p>두 가지 예시를 보여 드리겠습니다. — 느린 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">소스 코드</a>) 그리고 빠른 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">소스 코드</a>)입니다. 두 예제에서  마치 비동기 작업인 것 처럼 보이기 위해 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 을 사용했습니다. :</p>
+
+<pre class="brush: js notranslate">async function makeResult(items) {
+   let newArr = [];
+   for(let i=0; i &lt; items.length; i++) {
+     newArr.push('word_'+i);
+   }
+   return newArr;
+ }
+ 
+ async function getResult() {
+   let result = await makeResult(items); // Blocked on this line
+   useThatResult(result); // Will not be executed before makeResult() is done
+ }
+ </pre>
 
 <p>그리고 세 가지 <code>timeoutPromise()</code> 함수를 호출하는 <code>timeTest()</code>함수를 만들었습니다.</p>
 
@@ -329,9 +358,9 @@ timeTest().then(() =&gt; {
 
 <p>다른 아주 사소한 단점은 비동기로 실행될 Promise가 있다면 async함수 안에 항상 await을 써야한다는 것 입니다.</p>
 
-<h2 id="Asyncawait_class_methods">Async/await class methods</h2>
+<h2 id="Asyncawait_class_methods">Async/await class 메서드</h2>
 
-<p>마지막으로 보여줄 내용은 <code>async</code> 키워드를 class/object의 메서드에 사용하여 Promise를 반환하게 만들 수 있다는 것 입니다. 그리고 <code>await</code> 를 그 안에 넣을 수도 있습니다. 다음 문서를 살펴보세요 &gt; <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>, 그리고 보이는 코드를<code>async</code> 메서드로 수정한 아래의 내용과 비교 해보세요 :</p>
+<p>마지막으로 보여줄 내용은 <code>async</code> 키워드를 class/object의 메서드에 사용하여 Promise를 반환하게 만들 수 있다는 것 입니다. 그리고 <code>await</code> 를 그 안에 넣을 수도 있습니다. 다음 문서를 살펴보세요 &gt; <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">ES class code we saw in our object-oriented JavaScript article</a>, 그리고 보이는 코드를 <code>async</code> 메서드로 수정한 아래의 내용과 비교 해보세요 :</p>
 
 <pre class="brush: js notranslate">class Person {
   constructor(first, last, age, gender, interests) {
@@ -359,25 +388,26 @@ let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
 
 <pre class="brush: js notranslate">han.greeting().then(console.log);</pre>
 
-<h2 id="Browser_support">Browser support</h2>
+<h2 id="Browser_support">브라우저 지원</h2>
 
-<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p>
+<p>async/await 사용 여부를 결정할 때 고려해야 할 한가지 사항은 이전 브라우저에 대한 지원입니다. 
+  promises와 마찬가지로 대부분의 최신 브라우저에서 사용할 수 있습니다. 
+  주요 지원 문제는 Internet Explorer 그리고 Opera Mini에서 발생합니다.</p>
 
-<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p>
+<p>async/await을 사용하는데 브라우저 지원이 걱정되는 경우 <a href="https://babeljs.io/">BabelJS</a> 라이브러리를 사용하는 것을 고려해 볼 수 있습니다. BabelJS는 최신 자바스크립트를 사용하여 애플리케이션을 작성하고 사용자 브라우저에 필요한 변경사항을 Babel이 파악할 수 있도록 지원합니다. async/await를 지원하지 않는 브라우저를 만나면 Babel은 이전 브라우저에서 작동하는 polyfill를 자동으로 제공합니다.</p>
 
-<h2 id="Conclusion">Conclusion</h2>
+<h2 id="Conclusion">결론</h2>
 
-<p>And there you have it — async/await provide a nice, simplified way to write async code that is simpler to read and maintain. Even with browser support being more limited than other async code mechanisms at the time of writing, it is well worth learning and considering for use, both for now and in the future.</p>
+<p>async/await를 사용하면 읽기 쉽고 유지보수가 편리한 비동기 코드를 간단하게 작성할 수 있습니다. 브라우저 지원이 다른 비동기 코드에 비해 제한적이기는 하지만 현재는 물론 미래에도 사용을 위해 배울 가치는 충분합니다.</p>
 
 <p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</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/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
+  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+ </ul>