자바스크립트 async/await와 병렬 처리의 성능 비교

10 Sep 2023

javascript

자바스크립트는 비동기 작업을 처리하기 위해 다양한 방법을 제공합니다. 그중에서도 async/await와 병렬 처리는 가장 많이 사용되는 방법 중 하나입니다. 이번 글에서는 async/await와 병렬 처리의 성능을 비교해보고, 각각의 장단점을 살펴보겠습니다.

`async/await`와는 무엇인가?

async/await는 ES2017부터 도입된 문법으로, 비동기적인 코드를 동기적으로 작성할 수 있게 해줍니다. async 키워드를 함수 앞에 붙여서 해당 함수가 비동기 함수임을 나타내고, await 키워드를 이용하여 비동기 작업의 결과를 기다립니다.

예를 들어, HTTP 요청을 비동기적으로 보내고 결과를 받아오는 코드를 보겠습니다.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

위의 코드에서 fetchData 함수는 fetch 함수를 이용하여 비동기적으로 데이터를 가져옵니다. await 키워드를 이용하여 fetch 함수가 완료될 때까지 기다립니다. 그리고 response를 다시 비동기적으로 파싱하여 data로 변환한 후 반환합니다.

병렬 처리란?

병렬 처리는 CPU의 여러 코어를 사용하여 작업을 동시에 처리하는 기술입니다. 자바스크립트에서는 여러 가지 방법으로 병렬 처리를 할 수 있습니다. 예를 들어, Promise.all을 이용하거나 Web Worker를 사용할 수 있습니다. 여기서는 Promise.all을 이용한 병렬 처리에 대해서만 다루겠습니다.

Promise.all은 여러 개의 프로미스를 동시에 실행하고, 모든 프로미스가 완료될 때까지 기다리는 기능을 제공합니다. 이를 이용하면 비동기 작업을 병렬로 처리할 수 있습니다.

async function fetchAllData() {
  const promises = [
    fetch('https://api.example.com/data1'),
    fetch('https://api.example.com/data2'),
    fetch('https://api.example.com/data3')
  ];

  const responses = await Promise.all(promises);
  const data = await Promise.all(responses.map(response => response.json()));
  
  return data;
}

위의 코드에서는 Promise.all을 이용하여 세 개의 HTTP 요청을 병렬로 보냅니다. 각각의 요청이 완료되면 responses 배열에 저장되고, 그 이후에 response.json()을 이용하여 모든 데이터를 비동기적으로 파싱합니다. 이렇게 병렬로 처리함으로써 작업의 속도를 향상시킬 수 있습니다.

성능 비교

이제 async/await와 병렬 처리의 성능을 비교해보겠습니다. 예를 들어, 서버로부터 100개의 데이터를 가져오는 작업을 가정해봅시다. 먼저 async/await를 이용하여 순차적으로 작업하는 코드를 작성해보겠습니다.

async function fetchData() {
  const data = [];
  
  for (let i = 1; i <= 100; i++) {
    const response = await fetch(`https://api.example.com/data/${i}`);
    const item = await response.json();
    data.push(item);
  }
  
  return data;
}

위의 코드에서는 반복문을 돌면서 fetch 함수를 호출하고, await을 이용하여 각각의 데이터를 가져옵니다. 이러한 방식으로 작업을 순차적으로 처리하기 때문에 앞선 작업이 완료되어야 다음 작업을 수행할 수 있습니다.

반면에, Promise.all을 이용하여 병렬로 처리하는 코드는 다음과 같습니다.

async function fetchDataParallel() {
  const promises = [];
  
  for (let i = 1; i <= 100; i++) {
    promises.push(fetch(`https://api.example.com/data/${i}`));
  }
  
  const responses = await Promise.all(promises);
  const data = await Promise.all(responses.map(response => response.json()));
  
  return data;
}

위의 코드에서는 반복문을 돌면서 fetch 함수 호출을 예약한 후, Promise.all을 이용하여 동시에 실행합니다. 그리고 await을 이용하여 모든 작업이 완료될 때까지 기다린 후 결과를 반환합니다.

여기서 질문은 어떤 방식이 더 성능이 좋은가입니다. 결과적으로는 병렬 처리가 순차적 처리보다 성능이 좋을 수 있습니다. 이는 여러 개의 작업을 동시에 처리하기 때문에 속도가 향상되기 때문입니다.

하지만 병렬 처리는 CPU 자원을 더 많이 사용하기 때문에, 단일 CPU 환경에서는 순차적 처리와 비교했을 때 성능의 차이가 크게 나타나지 않을 수 있습니다. 또한, 단일 작업이 다른 작업에 의존하는 경우에는 병렬 처리가 적합하지 않을 수 있습니다.

따라서, 어떤 방식을 선택할지는 작업의 종류와 환경에 따라 다를 수 있습니다. 성능을 고려하고 병렬 처리가 가능한 작업이라면 Promise.all을 이용한 병렬 처리 방식을 고려해보는 것도 좋습니다.

결론

자바스크립트의 async/await와 병렬 처리는 비동기 작업을 처리하기 위한 강력한 도구입니다. async/await를 이용하여 비동기 작업을 동기적으로 작성하거나, Promise.all을 이용하여 병렬 처리를 할 수 있습니다.

성능적으로는 병렬 처리가 순차적 처리보다 우수할 수 있지만, 작업의 종류와 환경에 따라 선택해야 합니다. 단일 CPU 환경이거나 작업 간 의존성이 있는 경우에는 순차적 처리가 더 적합할 수 있습니다.

따라서, 비동기 작업을 수행할 때는 작업의 특성을 고려하여 적절한 방식을 선택하는 것이 중요합니다.

async/await와는 무엇인가?

병렬 처리란?

성능 비교

결론

`async/await`와는 무엇인가?