diff options
Diffstat (limited to 'files/ko/conflicting/learn/javascript/asynchronous/promises/index.html')
| -rw-r--r-- | files/ko/conflicting/learn/javascript/asynchronous/promises/index.html | 414 |
1 files changed, 414 insertions, 0 deletions
diff --git a/files/ko/conflicting/learn/javascript/asynchronous/promises/index.html b/files/ko/conflicting/learn/javascript/asynchronous/promises/index.html new file mode 100644 index 0000000000..bbe8ee7812 --- /dev/null +++ b/files/ko/conflicting/learn/javascript/asynchronous/promises/index.html @@ -0,0 +1,414 @@ +--- +title: async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기 +slug: conflicting/Learn/JavaScript/Asynchronous/Promises +tags: + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - Promises + - async + - asynchronous + - await +original_slug: Learn/JavaScript/Asynchronous/Async_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> 키워드는 ECMAScript2017에 추가되었습니다. 이 기능들은 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 더 쉽도록 만들어줍니다. 비동식 코드는 구식 동기코드를 읽기 쉽게 만들기 때문에 학습할 가치가 있습니다. 이 글은 당신이 비동기에 알아야할 것을 알려줍니다. </p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">필수조건:</th> + <td>기본 컴퓨터 사용능력, 자바스크립트 기초, 비동기코드에 대한 이해</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>async/await에 대한 이해</td> + </tr> + </tbody> +</table> + +<h2 id="The_basics_of_asyncawait">async/await의 기초</h2> + +<p>async/await 코드는 두 가지 부분으로 나눠져있습니다.</p> + +<h3 id="The_async_keyword">비동기 키워드</h3> + +<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> + +<pre class="brush: js notranslate">function hello() { return "Hello" }; +hello();</pre> + +<p>위의 함수는 "Hello"를 반환합니다. — 특별할게 없죠?</p> + +<p>그러면 함수 앞에 async 키워드를 추가하면 어떻게 될까요?? 아래처럼 작성해봅시다.:</p> + +<pre class="brush: js notranslate">async function hello() { return "Hello" }; +hello();</pre> + +<p>이제 코드가 Promise를 반환합니다. 이것이 async 기능의 특징 중 하나 입니다. — 이 키워드를 사용하면 반환받는 값은 Promise가 됩니다..</p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>을 사용하여 아래와 같이 만들 수도 있습니다. :</p> + +<pre class="brush: js notranslate">let hello = async function() { return "Hello" }; +hello();</pre> + +<p>화살표 함수를 사용하면 아래처럼 쓸 수 있습니다. :</p> + +<pre class="brush: js notranslate">let hello = async () => { return "Hello" };</pre> + +<p>기본적으로 두 가지는 모두 같습니다.</p> + +<p>실제로는 fulfil Promise가 반환되기 때문에 반환된 값을 사용하기 위해선 <code>.then()</code> 블럭을 사용해야 합니다. :</p> + +<pre class="brush: js notranslate">hello().then((value) => console.log(value))</pre> + +<p>짧게 표현하면 아래와 같이 쓸 수 있습니다.</p> + +<pre class="brush: js notranslate">hello().then(console.log)</pre> + +<p>이전에 봤던 내용과 비슷하죠?.</p> + +<p>정리하면, <code>async</code> 를 함수와 같이 사용하면 결과를 직접 반환하는게 아니라 Promise를 반환하게 합니다. 또한 동기식 함수는 <code>await</code>사용을 위한 지원과 함께 실행되는 잠재적인 오버헤드를 피할 수 있습니다. 함수가 <code>async</code>라고 선언될 때 필요한 핸들링만 추가하면 JavaScript엔진이 우리가 만든 프로그램을 최적화 할 수 있습니다. 끝내주죠?</p> + +<h3 id="The_await_keyword">비동기 키워드</h3> + +<p>비동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> 키워드와 함께 쓰면 그 장점이 확실히 보입니다. 이것은 어떠한 Promise기반 함수 앞에 놓을 수 있습니다. 그리고 우리의 코드의 Promise가 fulfil될 때 까지 잠시 중단하고, 결과를 반환합니다. 그리고 실행을 기다리는 다른 코드들을 중지시키지 않고 그대로 실행되게 합니다.</p> + +<p><code>await</code> 키워드는 웹 API를 포함하여 Promise를 반환하는 함수를 호출할 때 사용할 수 있습니다.</p> + +<p>여기 간단한 예가 있습니다. :</p> + +<pre class="brush: js notranslate">async function hello() { + return greeting = await Promise.resolve("Hello"); +}; + +hello().then(alert);</pre> + +<p>물론 위의 예시는 그다지 쓸모있진 않습니다. 다만 어떻게 구문을 작성해야 하는지는 잘 나타내줍니다. 이제 실제 사례를 살펴봅시다.</p> + +<h2 id="Rewriting_promise_code_with_asyncawait">async/await와 함께 다시 쓰는 promise code</h2> + +<p>이전 문서에서 봤던 간단한 fetch() 예제를 살펴봅시다. :</p> + +<pre class="brush: js notranslate">fetch('coffee.jpg') +.then(response => response.blob()) +.then(myBlob => { + let objectURL = URL.createObjectURL(myBlob); + let image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); +}) +.catch(e => { + console.log('There has been a problem with your fetch operation: ' + e.message); +});</pre> + +<p>지금 시점에서 우리는 Promise가 어떻게 작동하는지 잘 이해하고 있습니다. 그렇다면 지금부터 이 예제를 async/await 를 사용하여 더 간단하게 만들어봅시다. :</p> + +<pre class="brush: js notranslate">async function myFetch() { + 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); +} + +myFetch() +.catch(e => { + console.log('There has been a problem with your fetch operation: ' + e.message); +});</pre> + +<p>바꾸고 나니 더 이해하기 쉬워졌습니다. — 더 이상의 <code>.then()</code> 블럭은 찾아 볼 수 없습니다.</p> + +<p><code>async</code> 키워드가 함수를 Promise로 바꾸었기, 이제 promise 와 await의 하이브리드 접근방식을 사용하기 위해 코드를 리팩토링 할 수 있으며, 두 번째 <code>.then()</code>블럭을 함수 내부의 블럭으로 가져와 더 유연하게 만들 수 있습니다.</p> + +<pre class="brush: js notranslate">async function myFetch() { + let response = await fetch('coffee.jpg'); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return await response.blob(); + +} + +myFetch().then((blob) => { + let objectURL = URL.createObjectURL(blob); + let image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); +}).catch(e => console.log(e));</pre> + +<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">어떻게 작동할까요?</h3> + +<p>함수 안에 코드를 작성했고, <code>function</code> 키워드 앞에 <code>async</code> 키워드를 썼다는 것을 알 수 있습니다. 꼭 이렇게 써야합니다!! 비동기 코드를 실행할 블럭을 정의하려면 비동기 함수를 생성해야 합니다. <code>await</code>는 <code>async function</code> 안에서만 쓸 수 있습니다.</p> + +<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>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">오류 처리 추가</h3> + +<p>그리고 오류 처리를 하려면 몇 가지 옵션이 있습니다.</p> + +<p>동기식 코드에서 쓰는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 구문을 <code>async</code>/<code>await</code>구조에서 사용할 수 있습니다. 이 예제는 위에서 설명한 첫 번째 코드를 수정한 것 입니다. :</p> + +<pre class="brush: js notranslate">async function myFetch() { + try { + let response = await fetch('coffee.jpg'); + + 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); + } +} + +myFetch();</pre> + +<p><code>catch() {}</code> 블록은 <code>e</code> 라고 부르는 에러 오브젝트를 통과시킵니다. 이제 콘솔에 코드가 던져준 에러 메시지를 출력할 수 있습니다.</p> + +<p>아래 코드는 처음 예제를 리팩토링한 두 번째 버전의 코드 입니다. 이 하이브리드 접근법을 사용하는 코드에서 에러를 탐지하고 싶으면 <code>.catch()</code> 블럭을 <code>.then()</code> 호출의 마지막에 작성합니다. :</p> + +<pre class="brush: js notranslate">async function myFetch() { + let response = await fetch('coffee.jpg'); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return await response.blob(); + +} + +myFetch().then((blob) => { + let objectURL = URL.createObjectURL(blob); + let image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); +}) +.catch((e) => + console.log(e) +);</pre> + +<p>이는 <code>.catch()</code> 블럭이 async 함수 호출과 Promise 체인 모두에서 발생하는 오류를 잡을 수 있기 때문입니다. 여기서 <code>try</code>/<code>catch</code> 블럭을 사용했더라도, <code>myFetch()</code> 에서 발생한 unhandled에러를 잡아낼 수 있습니다.</p> + +<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> (<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">이전에 글에서 본 예제</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 (!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() { + let coffee = fetchAndDecode('coffee.jpg', 'blob'); + let tea = fetchAndDecode('tea.jpg', 'blob'); + let description = fetchAndDecode('description.txt', 'text'); + + let values = await Promise.all([coffee, tea, description]); + + let objectURL1 = URL.createObjectURL(values[0]); + let objectURL2 = URL.createObjectURL(values[1]); + let descText = values[2]; + + let image1 = document.createElement('img'); + let image2 = document.createElement('img'); + image1.src = objectURL1; + image2.src = objectURL2; + document.body.appendChild(image1); + document.body.appendChild(image2); + + let para = document.createElement('p'); + para.textContent = descText; + document.body.appendChild(para); +} + +displayContent() +.catch((e) => + console.log(e) +);</pre> + +<p>몇 가지 사항을 조금 수정했을 뿐인데 <code>fetchAndDecode()</code>함수를 쉽게 비동기 함수로 변환했습니다. <code>Promise.all()</code> 라인을 살펴보세요:</p> + +<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre> + +<p>여기에 <code>await</code> 을 사용하여 세 가지 Promise의 결과가 반환되었을 때 <code>values</code> 배열에 담을 수 있습니다. 그리고 마치 동기화 코드처럼 보이죠. 우리가 작업한건 <code>displayContent()</code>에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">async</span></font>키워드를 추가하고, 모든 코드를<code>.then()</code> 블럭 바깥으로 빼냈습니다. 또한 아주 적은양의 코드 수정도 했죠. 이렇게 하니 더 단순하고, 유용하고 읽기 쉬운 프로그램이 되었습니다.</p> + +<p>마지막으로 에러를 다루기 위해 <code>.catch()</code> 블럭을 <code>displayContent()</code> 함수를 호출하는 곳에 추가했습니다. 이렇게 하면 두 함수에서 발생하는 에러를 처리할 수 있습니다.</p> + +<div class="blockIndicator note"> + <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">async/await의 단점</h2> + +<p>앞서 봤듯이 async/await은 매우 유용하지만 고려해야 할 몇 가지 단점이 있습니다.</p> + +<p>Async/await 는 우리의 코드를 마치 동기식 코드처럼 보이게 합니다. 그리고 어떤 면에서는 정말로 동기적으로 행동합니다. 함수 블럭에 여러 개의 <code>await</code> 키워드를 사용하면 Promise가 fulfilled되기 전 까지 다음 <code>await</code> 을 차단합니다. 그 동안 다른 태스크는 계속 실행이 되지만 정의한 함수 내에서는 동기적으로 작동할 것 입니다.</p> + +<p>이 말은 우리가 작성한 코드가 바로 이어지는 수 많은 Promise에 의해 느려질 수 있다는 것을 의미합니다. 각 <code>await</code> 는 이전의 작업이 끝날 때 까지 기다립니다(Promise 체이닝과 혼동하지 마세요). 그런데 우리가 원하는건 기다리는게 아니고 일제히 실행되는 것 입니다.</p> + +<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> (<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 < 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> + +<pre class="brush: js notranslate">async function timeTest() { + ... +}</pre> + +<p>그리고 두 개 예제 모두 시작 시간을 기록하고, <code>timeTest()</code> Promise가 fulfilled된 시간을 저장하여 두 시간의 차를 계산해 작업이 얼마나 걸렸는지 사용자에게 보여줍니다. :</p> + +<pre class="brush: js notranslate">let startTime = Date.now(); +timeTest().then(() => { + let finishTime = Date.now(); + let timeTaken = finishTime - startTime; + alert("Time taken in milliseconds: " + timeTaken); +})</pre> + +<p><code>timeTest()</code> 함수만 두 예제에서 차이가 있습니다.</p> + +<p><code>slow-async-await.html</code> 예제이서, <code>timeTest()</code> 함수는 아래와 같이 생겼습니다. :</p> + +<pre class="brush: js notranslate">async function timeTest() { + await timeoutPromise(3000); + await timeoutPromise(3000); + await timeoutPromise(3000); +}</pre> + +<p>아주 간단하게 <code>timeoutPromise()</code> 함수를 직접 호출했습니다. 각 작업은 3초씩 걸립니다. 그리고 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 키워드를 사용했기 때문에 이전 await 작업이 끝나야 다음으로 진행됩니다. — 첫 번째 예제를 실행하면, alert 박스에서 약 9초(9000밀리초)가 걸렸음을 확인할 수 있습니다.</p> + +<p>다음으로 <code>fast-async-await.html</code> 예제이서, <code>timeTest()</code> 은 아래와 같이 생겼습니다. :</p> + +<pre class="brush: js notranslate">async function timeTest() { + const timeoutPromise1 = timeoutPromise(3000); + const timeoutPromise2 = timeoutPromise(3000); + const timeoutPromise3 = timeoutPromise(3000); + + await timeoutPromise1; + await timeoutPromise2; + await timeoutPromise3; +}</pre> + +<p>여기선 세 가지 <code>Promise</code> 오브젝트를 변수에 저장하여 동시에 작업을 시작하도록 했습니다.</p> + +<p>그리고 그 변수에 await을 사용하여 결과를 호출합니다. — 작업이 거의 동시에 시작됐기 때문에, Promise도 거의 동시에 fulfilled될 것 입니다. 두 번째 예제를 실행하면 거의 3초(3000밀리초) 만에 작업이 끝났음을 확인할 수 있습니다.</p> + +<p>코드를 주의깊게 테스트 하고, 성능이 떨어지기 시작하면 위의 상황을 의심해봐야 합니다.</p> + +<p>다른 아주 사소한 단점은 비동기로 실행될 Promise가 있다면 async함수 안에 항상 await을 써야한다는 것 입니다.</p> + +<h2 id="Asyncawait_class_methods">Async/await class 메서드</h2> + +<p>마지막으로 보여줄 내용은 <code>async</code> 키워드를 class/object의 메서드에 사용하여 Promise를 반환하게 만들 수 있다는 것 입니다. 그리고 <code>await</code> 를 그 안에 넣을 수도 있습니다. 다음 문서를 살펴보세요 > <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) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + } + + async greeting() { + return await Promise.resolve(`Hi! I'm ${this.name.first}`); + }; + + farewell() { + console.log(`${this.name.first} has left the building. Bye for now!`); + }; +} + +let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre> + +<p>이제 클래스의 첫 번째 메서드를 아래와 같이 사용할 수 있습니다. :</p> + +<pre class="brush: js notranslate">han.greeting().then(console.log);</pre> + +<h2 id="Browser_support">브라우저 지원</h2> + +<p>async/await 사용 여부를 결정할 때 고려해야 할 한가지 사항은 이전 브라우저에 대한 지원입니다. + promises와 마찬가지로 대부분의 최신 브라우저에서 사용할 수 있습니다. + 주요 지원 문제는 Internet Explorer 그리고 Opera Mini에서 발생합니다.</p> + +<p>async/await을 사용하는데 브라우저 지원이 걱정되는 경우 <a href="https://babeljs.io/">BabelJS</a> 라이브러리를 사용하는 것을 고려해 볼 수 있습니다. BabelJS는 최신 자바스크립트를 사용하여 애플리케이션을 작성하고 사용자 브라우저에 필요한 변경사항을 Babel이 파악할 수 있도록 지원합니다. async/await를 지원하지 않는 브라우저를 만나면 Babel은 이전 브라우저에서 작동하는 polyfill를 자동으로 제공합니다.</p> + +<h2 id="Conclusion">결론</h2> + +<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">이 모듈에서</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/Choosing_the_right_approach">Choosing the right approach</a></li> + </ul> |