동시성은 소프트웨어 개발에서 중요한 주제 중 하나입니다. 자바스크립트에서 동시성을 다루기 위해 async/await라는 기능이 도입되었습니다. async/await는 비동기 코드를 동기 코드처럼 작성할 수 있게 해주는 문법입니다.
async/await란?
async/await는 비동기적으로 실행되는 코드를 동기적으로 작성할 수 있게 해주는 JavaScript의 기능입니다. async 키워드를 함수 앞에 사용하여 해당 함수가 비동기 함수임을 선언하고, function 내부에서 await를 사용하여 비동기 작업의 결과를 기다릴 수 있습니다.
await 키워드 사용하기
await 키워드는 async로 선언된 함수 내부에서만 사용할 수 있습니다. await는 Promise 객체를 받아들여 해당 Promise가 처리될 때까지 함수의 실행을 일시 중단합니다. 이후 Promise의 결과를 반환하고, 함수 실행을 다시 이어나갑니다.
예를 들어, 다음과 같은 비동기 함수가 있다고 가정해봅시다.
async function getData() {
const data = await fetch('https://api.example.com/data');
return data.json();
}
위의 예제에서 fetch 함수는 Promise를 반환하며, 해당 Promise가 처리될 때까지 await 키워드에 의해 함수의 실행이 일시 중단됩니다. 그리고 Promise가 처리된 후에는 data.json() 결과를 반환하여 해당 비동기 함수의 결과값으로 사용합니다.
async/await로 동시성 제어하기
async/await를 사용하면 비동기 작업을 동기적으로 표현하면서, 동시성을 제어할 수 있습니다. 예를 들어, 여러 개의 비동기 작업을 동시에 실행하고 모든 작업의 결과를 기다릴 수 있습니다.
다음 예제에서는 Promise.all과 await를 사용하여 여러 개의 비동기 작업을 동시에 실행한 후, 모든 작업이 완료될 때까지 대기하는 방법을 보여줍니다.
async function fetchData() {
const promises = [fetch('https://api.example.com/data1'), fetch('https://api.example.com/data2')];
const results = await Promise.all(promises);
// results[0]에는 첫 번째 비동기 작업의 결과가 들어있고, results[1]에는 두 번째 비동기 작업의 결과가 들어있다.
// 추가 작업 수행
}
위의 예제에서는 Promise.all 메서드를 사용하여 fetch 함수를 여러 번 호출하고, 이러한 호출들의 Promise를 배열에 저장합니다. 그리고 해당 배열 전체의 Promise들이 처리될 때까지 await 키워드를 사용하여 대기합니다. Promise들이 모두 처리되면, 각 Promise의 결과는 results 배열에 순서대로 담겨져 있습니다.
결론
async/await는 자바스크립트에서 동시성을 다루는 유용한 기능입니다. 이를 통해 비동기 코드를 동기적으로 작성하여 코드의 가독성을 향상시킬 수 있습니다. await 키워드를 사용하여 비동기 작업이 완료될 때까지 대기하고, Promise.all 메서드를 사용하여 여러 개의 비동기 작업을 동시에 실행하고 기다릴 수 있습니다. 동시성 제어를 위해 async/await를 적절하게 활용하면, 효과적인 비동기 코드를 작성할 수 있습니다.