async/await에서 병렬 처리 성능 개선

문제 상황

관리자 대시보드에서 여러 통계 데이터를 불러오는 API가 느렸다. 확인해보니 각 API 호출을 순차적으로 기다리고 있었다.

async function fetchDashboardData() {
  const users = await api.getUsers();
  const orders = await api.getOrders();
  const revenue = await api.getRevenue();
  const products = await api.getProducts();
  
  return { users, orders, revenue, products };
}

각 API가 평균 300ms씩 걸리니 총 1.2초가 소요됐다. 서로 의존성이 없는 호출인데 순차 처리할 이유가 없었다.

해결 방법

Promise.all을 사용해 병렬 처리로 변경했다.

async function fetchDashboardData() {
  const [users, orders, revenue, products] = await Promise.all([
    api.getUsers(),
    api.getOrders(),
    api.getRevenue(),
    api.getProducts()
  ]);
  
  return { users, orders, revenue, products };
}

응답 시간이 1.2초에서 350ms로 줄었다. 가장 느린 API 하나의 시간만 기다리면 되기 때문이다.

에러 핸들링

Promise.all은 하나라도 실패하면 전체가 실패한다. 일부 데이터만 실패해도 대시보드는 보여줘야 했기에 Promise.allSettled도 검토했지만, 아직 브라우저 지원이 불안정했다.

대신 각 Promise에 catch를 추가해 기본값을 반환하도록 했다.

const [users, orders, revenue, products] = await Promise.all([
  api.getUsers().catch(() => []),
  api.getOrders().catch(() => []),
  api.getRevenue().catch(() => 0),
  api.getProducts().catch(() => [])
]);

결론

async/await이 가독성은 좋지만 무의식적으로 순차 처리를 만들기 쉽다. 의존성 없는 비동기 작업은 Promise.all로 묶어서 처리하는 습관을 들였다.