From d53bae971e455859229bcb3246e29bcbc85179d2 Mon Sep 17 00:00:00 2001 From: MDN Date: Tue, 8 Mar 2022 00:12:08 +0000 Subject: [CRON] sync translated content --- .../javascript/asynchronous/promises/index.html | 414 +++++++++++++++++++++ 1 file changed, 414 insertions(+) create mode 100644 files/ko/conflicting/learn/javascript/asynchronous/promises/index.html (limited to 'files/ko/conflicting/learn/javascript/asynchronous/promises/index.html') 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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
+ +

Javascript에 대한 최신 추가 사항은 ECMAScript 2017 JavaScript 에디션의 일부인 async functions 그리고 await 키워드는 ECMAScript2017에 추가되었습니다. 이 기능들은 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 더 쉽도록 만들어줍니다. 비동식 코드는 구식 동기코드를 읽기 쉽게 만들기 때문에 학습할 가치가 있습니다. 이 글은 당신이 비동기에 알아야할 것을 알려줍니다.

+ + + + + + + + + + + + +
필수조건:기본 컴퓨터 사용능력, 자바스크립트 기초, 비동기코드에 대한 이해
목표:async/await에 대한 이해
+ +

async/await의 기초

+ +

async/await 코드는 두 가지 부분으로 나눠져있습니다.

+ +

비동기 키워드

+ +

먼저 비동기 함수를 async 함수로 만들기 위하여 function()앞에 async 키워드를 추가합니다. async function()은 await 키워드가 비동기 코드를 호출할 수 있게 해주는 함수 입니다.

+ +

브라우저의 JavaScript 콘솔에서 아래와 같이 입력해보세요. :

+ +
function hello() { return "Hello" };
+hello();
+ +

위의 함수는 "Hello"를 반환합니다. — 특별할게 없죠?

+ +

그러면 함수 앞에 async 키워드를 추가하면 어떻게 될까요?? 아래처럼 작성해봅시다.:

+ +
async function hello() { return "Hello" };
+hello();
+ +

이제 코드가 Promise를 반환합니다. 이것이 async 기능의 특징 중 하나 입니다. — 이 키워드를 사용하면 반환받는 값은 Promise가 됩니다..

+ +

async function expression을 사용하여 아래와 같이 만들 수도 있습니다. :

+ +
let hello = async function() { return "Hello" };
+hello();
+ +

화살표 함수를 사용하면 아래처럼 쓸 수 있습니다. :

+ +
let hello = async () => { return "Hello" };
+ +

기본적으로 두 가지는 모두 같습니다.

+ +

실제로는 fulfil Promise가 반환되기 때문에 반환된 값을 사용하기 위해선 .then() 블럭을 사용해야 합니다. :

+ +
hello().then((value) => console.log(value))
+ +

짧게 표현하면 아래와 같이 쓸 수 있습니다.

+ +
hello().then(console.log)
+ +

이전에 봤던 내용과 비슷하죠?.

+ +

정리하면, async 를 함수와 같이 사용하면 결과를 직접 반환하는게 아니라 Promise를 반환하게 합니다. 또한 동기식 함수는 await사용을 위한 지원과 함께 실행되는 잠재적인 오버헤드를 피할 수 있습니다. 함수가  async라고 선언될 때 필요한 핸들링만 추가하면 JavaScript엔진이 우리가 만든 프로그램을 최적화 할 수 있습니다. 끝내주죠?

+ +

비동기 키워드

+ +

비동기 함수를 await 키워드와 함께 쓰면 그 장점이 확실히 보입니다. 이것은 어떠한 Promise기반 함수 앞에 놓을 수 있습니다. 그리고 우리의 코드의 Promise가 fulfil될 때 까지 잠시 중단하고, 결과를 반환합니다. 그리고 실행을 기다리는 다른 코드들을 중지시키지 않고 그대로 실행되게 합니다.

+ +

await 키워드는 웹 API를 포함하여 Promise를 반환하는 함수를 호출할 때 사용할 수 있습니다.

+ +

여기 간단한 예가 있습니다. :

+ +
async function hello() {
+  return greeting = await Promise.resolve("Hello");
+};
+
+hello().then(alert);
+ +

물론 위의 예시는 그다지 쓸모있진 않습니다. 다만 어떻게 구문을 작성해야 하는지는 잘 나타내줍니다. 이제 실제 사례를 살펴봅시다.

+ +

async/await와 함께 다시 쓰는 promise code

+ +

이전 문서에서 봤던 간단한 fetch() 예제를 살펴봅시다. :

+ +
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);
+});
+ +

지금 시점에서 우리는 Promise가 어떻게 작동하는지 잘 이해하고 있습니다. 그렇다면 지금부터 이 예제를 async/await 를 사용하여 더 간단하게 만들어봅시다. :

+ +
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);
+});
+ +

바꾸고 나니 더 이해하기 쉬워졌습니다. — 더 이상의 .then() 블럭은 찾아 볼 수 없습니다.

+ +

async 키워드가 함수를 Promise로 바꾸었기, 이제 promise 와 await의 하이브리드 접근방식을 사용하기 위해 코드를 리팩토링 할 수 있으며, 두 번째 .then()블럭을 함수 내부의 블럭으로 가져와 더 유연하게 만들 수 있습니다.

+ +
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));
+ +

예제를 직접 만들어보거나, 여기서 결과를 확인할 수 있습니다. 예제 (여기서 소스코드를 볼 수 있습니다.).

+ +

어떻게 작동할까요?

+ +

함수 안에 코드를 작성했고, function 키워드 앞에 async 키워드를 썼다는 것을 알 수 있습니다. 꼭 이렇게 써야합니다!! 비동기 코드를 실행할 블럭을 정의하려면 비동기 함수를 생성해야 합니다. await는 async function 안에서만 쓸 수 있습니다.

+ +

myFetch() 함수 내에 코드가 이전의 Promise버전과 매우 유사하지만, 다른점이 있습니다. .then()블럭을 사용하여 작업을 이어가는 대신 메서드 호출 전에 await 키워드를 사용하여 반환된 결과를 변수에 할당합니다. await 키워드는 JavaScript 런타임이 이 라인에서 비동기 코드를 일시 중지하여 비동기 함수 호출이 결과를 반환할 때 까지 기다리게 합니다. 그러나 외부의 다른 동기 코드는 실행될 수 있도록 합니다. 작업이 완료되면 코드는 계속 이어져서 실행됩니다. 예를들면 아래와 같습니다. :

+ +
let response = await fetch('coffee.jpg');
+ +

fulfilled된 fetch() Promise에서 반환된 응답은 해당 응답이 사용할 수 있게 되면 response 변수에 할당됩니다. 그리고 parser는 해당 응답이 발생할 때 까지 이 라인에서 일시 중지됩니다. response가 사용 가능하게 되면, parser 는 다음 라인으로 이동하게 되고 그 라인에서 Blob 을 생성하게 됩니다. 이라인도 Promise기반 비동기 메서드를 호출하므로, 여기서도await 을 사용합니다. 비동기 작업 결과가 반환되면, myFetch() 함수가 그 결과를 반환합니다.

+ +

myFetch() 함수를 호출하면, Promise를 반환하므로, 따라서 화면에 Blob을 표시해주는 .then() 코드 블럭 체이닝 할 수 있습니다.

+ +

여기까지 왔으면 이 방법이 멋있다고 생각해야합니다! 왜냐하면 .then() 블럭이 줄어들고 대부분이 동기 코드처럼 보이기 때문에 정말 직관적입니다.

+ +

오류 처리 추가

+ +

그리고 오류 처리를 하려면 몇 가지 옵션이 있습니다.

+ +

동기식 코드에서 쓰는 try...catch 구문을 async/await구조에서 사용할 수 있습니다. 이 예제는 위에서 설명한 첫 번째 코드를 수정한 것 입니다. :

+ +
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();
+ +

catch() {} 블록은 e 라고 부르는 에러 오브젝트를 통과시킵니다. 이제 콘솔에 코드가 던져준 에러 메시지를 출력할 수 있습니다.

+ +

아래 코드는 처음 예제를 리팩토링한 두 번째 버전의 코드 입니다. 이 하이브리드 접근법을 사용하는 코드에서 에러를 탐지하고 싶으면 .catch() 블럭을 .then() 호출의 마지막에 작성합니다. :

+ +
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)
+);
+ +

이는 .catch() 블럭이 async 함수 호출과 Promise 체인 모두에서 발생하는 오류를 잡을 수 있기 때문입니다. 여기서 try/catch 블럭을 사용했더라도, myFetch() 에서 발생한 unhandled에러를 잡아낼 수 있습니다.

+ +

위의 예제 모두를 GitHub에서 찾아볼 수 있습니다. :

+ + + +

Awaiting a Promise.all()

+ +

async/await는 promises의 상위에 만들어져 있기 때문에 Promise의 모든 기능을 사용할 수 있습니다. Promise.all() 을 포함해서 말이죠 — 아래 보이는 코드처럼 Promise.all() 앞에 async키워드를 사용하여 동기식 코드처럼 작성할 수 있습니다. 이전 문서를 확인해봅시다. 이전에 글에서 본 예제. 새로운 버전과 비교하기 위해 탭을 분리 해보세요.

+ +

async/await 스타일로 변경한 코드는 아래와 같습니다. (데모 그리고 소스 코드) :

+ +
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)
+);
+ +

몇 가지 사항을 조금 수정했을 뿐인데 fetchAndDecode()함수를 쉽게 비동기 함수로 변환했습니다. Promise.all() 라인을 살펴보세요:

+ +
let values = await Promise.all([coffee, tea, description]);
+ +

여기에 await 을 사용하여 세 가지 Promise의 결과가 반환되었을 때 values 배열에 담을 수 있습니다. 그리고 마치 동기화 코드처럼 보이죠. 우리가 작업한건 displayContent()에 async키워드를 추가하고, 모든 코드를.then() 블럭 바깥으로 빼냈습니다. 또한 아주 적은양의 코드 수정도 했죠. 이렇게 하니 더 단순하고, 유용하고 읽기 쉬운 프로그램이 되었습니다.

+ +

마지막으로 에러를 다루기 위해 .catch() 블럭을 displayContent() 함수를 호출하는 곳에 추가했습니다. 이렇게 하면 두 함수에서 발생하는 에러를 처리할 수 있습니다.

+ +
+

Note: finally비동기 블록 대신 비동기 함수 내에서 .finally() 동기 블록을 사용하여 작업이 어떻게 진행되었는지에 대한 최종 보고서를 표시할 수 있습니다. 예제에서도 확인이 가능합니다. 소스 코드).

+
+ +

async/await의 단점

+ +

앞서 봤듯이 async/await은 매우 유용하지만 고려해야 할 몇 가지 단점이 있습니다.

+ +

Async/await 는 우리의 코드를 마치 동기식 코드처럼 보이게 합니다. 그리고 어떤 면에서는 정말로 동기적으로 행동합니다. 함수 블럭에 여러 개의 await 키워드를 사용하면 Promise가 fulfilled되기 전 까지 다음 await 을 차단합니다. 그 동안 다른 태스크는 계속 실행이 되지만 정의한 함수 내에서는 동기적으로 작동할 것 입니다.

+ +

이 말은 우리가 작성한 코드가 바로 이어지는 수 많은 Promise에 의해 느려질 수 있다는 것을 의미합니다. 각 await 는 이전의 작업이 끝날 때 까지 기다립니다(Promise 체이닝과 혼동하지 마세요). 그런데 우리가 원하는건 기다리는게 아니고 일제히 실행되는 것 입니다.

+ +

이 문제를 완화할 수 있는 패턴이 있습니다. — 모든 Promise 오브젝트를 변수에 저장하여 미리 실행되게 하고 변수가 사용 가능할 때 꺼내서 쓰는 것 입니다. 어떻게 작동하는지 한번 살펴봅시다.

+ +

두 가지 예시를 보여 드리겠습니다. — 느린 비동기 작업 slow-async-await.html (소스 코드) 그리고 빠른 비동기 작업 fast-async-await.html (소스 코드)입니다. 두 예제에서 마치 비동기 작업인 것 처럼 보이기 위해 setTimeout() 을 사용했습니다. :

+ +
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
+ }
+
+ +

그리고 세 가지 timeoutPromise() 함수를 호출하는 timeTest()함수를 만들었습니다.

+ +
async function timeTest() {
+  ...
+}
+ +

그리고 두 개 예제 모두 시작 시간을 기록하고, timeTest() Promise가 fulfilled된 시간을 저장하여 두 시간의 차를 계산해 작업이 얼마나 걸렸는지 사용자에게 보여줍니다. :

+ +
let startTime = Date.now();
+timeTest().then(() => {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  alert("Time taken in milliseconds: " + timeTaken);
+})
+ +

timeTest() 함수만 두 예제에서 차이가 있습니다.

+ +

slow-async-await.html 예제이서, timeTest() 함수는 아래와 같이 생겼습니다. :

+ +
async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}
+ +

아주 간단하게 timeoutPromise() 함수를 직접 호출했습니다. 각 작업은 3초씩 걸립니다. 그리고 await 키워드를 사용했기 때문에 이전 await 작업이 끝나야 다음으로 진행됩니다. — 첫 번째 예제를 실행하면, alert 박스에서 약 9초(9000밀리초)가 걸렸음을 확인할 수 있습니다.

+ +

다음으로 fast-async-await.html 예제이서, timeTest() 은 아래와 같이 생겼습니다. :

+ +
async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}
+ +

여기선 세 가지 Promise 오브젝트를 변수에 저장하여 동시에 작업을 시작하도록 했습니다.

+ +

그리고 그 변수에 await을 사용하여 결과를 호출합니다. — 작업이 거의 동시에 시작됐기 때문에, Promise도 거의 동시에 fulfilled될 것 입니다. 두 번째 예제를 실행하면 거의 3초(3000밀리초) 만에 작업이 끝났음을 확인할 수 있습니다.

+ +

코드를 주의깊게 테스트 하고, 성능이 떨어지기 시작하면 위의 상황을 의심해봐야 합니다.

+ +

다른 아주 사소한 단점은 비동기로 실행될 Promise가 있다면 async함수 안에 항상 await을 써야한다는 것 입니다.

+ +

Async/await class 메서드

+ +

마지막으로 보여줄 내용은 async 키워드를 class/object의 메서드에 사용하여 Promise를 반환하게 만들 수 있다는 것 입니다. 그리고 await 를 그 안에 넣을 수도 있습니다. 다음 문서를 살펴보세요 > ES class code we saw in our object-oriented JavaScript article, 그리고 보이는 코드를 async 메서드로 수정한 아래의 내용과 비교 해보세요 :

+ +
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']);
+ +

이제 클래스의 첫 번째 메서드를 아래와 같이 사용할 수 있습니다. :

+ +
han.greeting().then(console.log);
+ +

브라우저 지원

+ +

async/await 사용 여부를 결정할 때 고려해야 할 한가지 사항은 이전 브라우저에 대한 지원입니다. + promises와 마찬가지로 대부분의 최신 브라우저에서 사용할 수 있습니다. + 주요 지원 문제는 Internet Explorer 그리고 Opera Mini에서 발생합니다.

+ +

async/await을 사용하는데 브라우저 지원이 걱정되는 경우 BabelJS 라이브러리를 사용하는 것을 고려해 볼 수 있습니다. BabelJS는 최신 자바스크립트를 사용하여 애플리케이션을 작성하고 사용자 브라우저에 필요한 변경사항을 Babel이 파악할 수 있도록 지원합니다. async/await를 지원하지 않는 브라우저를 만나면 Babel은 이전 브라우저에서 작동하는 polyfill를 자동으로 제공합니다.

+ +

결론

+ +

async/await를 사용하면 읽기 쉽고 유지보수가 편리한 비동기 코드를 간단하게 작성할 수 있습니다. 브라우저 지원이 다른 비동기 코드에 비해 제한적이기는 하지만 현재는 물론 미래에도 사용을 위해 배울 가치는 충분합니다.

+ +

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}

+ +

이 모듈에서

+ + -- cgit v1.2.3-54-g00ecf