[JavaScript] await Promise.all() 완벽 이해하기

 

 

두번째 회사에 처음 입사해서 node.js를 처음 했을 때

AI가 사수 역할을 해줬다.

node.js 금방 적응할 수 있었다.

 

---

JavaScript에서 비동기 처리를 하다 보면 자주 보게 되는 코드가 있습니다.

await Promise.all([...])

 

처음 보면 어렵게 느껴질 수 있지만, 실제로는 아주 중요한 개념입니다.
이번 글에서는 await Promise.all()이 무엇인지, 왜 사용하는지, 언제 사용해야 하는지를 쉽게 정리해보겠습니다.

---

1. Promise란?

먼저 Promise를 이해해야 합니다.

Promise는 "나중에 완료될 작업" 을 의미합니다.

예를 들어:

const promise = fetch('/api/users');

 

fetch()는 서버에 요청을 보내고 결과를 기다리는데 시간이 걸립니다.
즉시 결과가 나오지 않기 때문에 Promise를 반환합니다.

2. await란?

await는 Promise가 끝날 때까지 기다리는 문법입니다.

const response = await fetch('/api/users');

 

 

"fetch 작업이 끝날 때까지 기다렸다가 결과를 response에 넣어라"

단, await는 반드시 async 함수 안에서 사용해야 합니다.

async function example() {
  const response = await fetch('/api/users');
}

 

3. Promise.all()이란?

Promise.all()은 여러 개의 Promise를 동시에 실행할 때 사용합니다.

예시:

Promise.all([
  fetch('/api/users'),
  fetch('/api/posts'),
  fetch('/api/comments')
]);

 

위 코드는:

• users 요청
• posts 요청
• comments 요청

을 동시에 실행합니다.

그리고 모든 작업이 끝나면 결과를 반환합니다.

4. await Promise.all() 의미

이제 합쳐서 보면:

await Promise.all([...])

 

의 의미는:

"여러 비동기 작업을 동시에 실행하고, 모두 끝날 때까지 기다려라"

입니다.

5. 실제 예제

순차 실행 방식

const user = await fetchUser();
const posts = await fetchPosts();
const comments = await fetchComments();

 

이 코드는:

1. user 요청
2. 끝나면 posts 요청
3. 끝나면 comments 요청

순서로 실행됩니다.

즉, 느립니다.

Promise.all 사용

const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments()
]);

 

이 코드는:

• 세 요청을 동시에 시작
• 모두 완료되면 결과 반환

즉, 훨씬 빠릅니다.

6. 실행 흐름 이해하기

예를 들어 각각의 작업이 1초 걸린다고 가정하면:

순차 실행

await a(); // 1초
await b(); // 1초
await c(); // 1초

 

총 시간:

3초

 

Promise.all 실행

 

await Promise.all([
  a(),
  b(),
  c()
]);

 

총 시간:

1초

 

왜냐하면 동시에 실행되기 때문입니다.

7. 주의사항

1) 하나라도 실패하면 전체 실패

 

await Promise.all([
  successTask(),
  failTask(),
  successTask2()
]);

 

위 코드에서 failTask()가 실패하면 전체가 에러 발생합니다.

---

2) 실패 여부와 상관없이 모두 실행하고 싶다면

Promise.allSettled() 사용

await Promise.allSettled([
  task1(),
  task2(),
  task3()
]);

 

결과:

• 성공/실패 여부를 모두 반환
• 일부 실패해도 전체 중단 안 됨

---

8. 언제 Promise.all을 사용해야 할까?

사용하면 좋은 경우

• 서로 독립적인 작업
• 동시에 실행 가능
• 속도가 중요한 경우

예:

• 여러 API 호출
• 여러 DB 조회
• 여러 파일 읽기

---

사용하면 안 되는 경우

작업 순서가 중요한 경우

예:

1번 작업 완료 → 2번 작업 가능

 

이럴 때는 반드시 순차 실행해야 합니다.

await step1();
await step2();

 

10. 정리

문법의미

await	Promise 완료까지 기다림
Promise.all()	여러 Promise를 동시에 실행
await Promise.all()	동시에 실행 후 모두 완료될 때까지 기다림

---

핵심 요약

 

await Promise.all([...])

 

은:

"비동기 작업들을 병렬로 실행하고, 전부 끝날 때까지 기다리는 문법"

입니다.

실무에서 성능 최적화에 매우 자주 사용되므로 꼭 익혀두면 좋습니다.

 

---

#JavaScript
#PromiseAll
#AsyncAwait
#비동기처리
#JavaScript강의
#NodeJS
#프론트엔드
#백엔드개발
#웹개발
#개발공부