Javascript에 대한 최신 추가 사항은 ECMAScript 2017 JavaScript 에디션의 일부인 async functions 그리고 await 키워드는 ECMAScript2017에 추가되었습니다. 이 기능들은 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 더 쉽도록 만들어줍니다. 비동식 코드는 구식 동기코드를 읽기 쉽게 만들기 때문에 학습할 가치가 있습니다. 이 글은 당신이 비동기에 알아야할 것을 알려줍니다.
| 필수조건: | 기본 컴퓨터 사용능력, 자바스크립트 기초, 비동기코드에 대한 이해 |
|---|---|
| 목표: | 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);
물론 위의 예시는 그다지 쓸모있진 않습니다. 다만 어떻게 구문을 작성해야 하는지는 잘 나타내줍니다. 이제 실제 사례를 살펴봅시다.
이전 문서에서 봤던 간단한 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에서 찾아볼 수 있습니다. :
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 는 우리의 코드를 마치 동기식 코드처럼 보이게 합니다. 그리고 어떤 면에서는 정말로 동기적으로 행동합니다. 함수 블럭에 여러 개의 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 키워드를 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")}}