2026-03-06

Promise와 async/await

자바스크립트 비동기 처리 방식

• 콜백함수
• Promise
• async/await

Promise

비동기 작업의 성공 또는 실패 결과를 나타내는 객체

• 콜백 지옥을 해결하기 위해 ES6에서 도입됨
• 비동기 작업의 완료 여부를 약속해주는 개념

Promise의 상태

기본 구조

const promise = new Promise((resolve, reject) => {
  if (성공) {
    resolve("성공");
  } else {
    reject("실패");
  }
});

• Promise 객체는 비동기 작업을 수행할 함수를 인자로 받아서 실행
• 이 함수는 resolve()와 reject()라는 두 가지 콜백을 받음
• resolve()는 비동기 작업이 성공했을 때 값을 전달하여 Promise를 fulfilled 상태로 전환
• reject()는 비동기 작업이 실패했을 때 오류를 전달하여 Promise를 rejected 상태로 전환

예시

login(user)
  .then((res) => getProfile(res.id))
  .then((profile) => updateProfile(profile))
  .catch((err) => console.error(err));

특징

• then()으로 체이닝 가능
• catch()로 에러 한 번에 처리
• 가독성 개선
• Promise.all(), allSettled() 등 메서드 통해 병렬로 비동기 작업 처리 가능

콜백과의 차이

Promise의 장점

• 콜백 지옥 해결
• 에러 처리 일관성
• 병렬 처리 가능

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

Promise의 단점

• 복잡한 에러 처리
• 콜백 지옥을 완전히 해결하지는 못한다 → then() 메서드가 연속해서 사용되며 가독성이 떨어짐 → async/await을 통해 개선

async / await

Promise를 더 읽기 쉽게 작성할 수 있는 문법 (ES2017)

기본 구조

async function process() {
  const result = await login(user);
}

특징

• async 함수는 항상 Promise 반환
• await는 Promise가 resolve될 때까지 대기

에러 처리

async function process() {
  try {
    const res = await login(user);
  } catch (err) {
    console.error(err);
  }
}

차이 비교

• 콜백 → Promise → async/await
  • 콜백: 기본 구조
  • Promise: 구조적 개선
  • async/await: 문법적 개선

이벤트 루프와의 연결

• Promise는 Microtask Queue에 등록
• setTimeout은 Task Queue
• async/await도 내부적으로 Promise

Promise와 async/await는 이벤트 루프와 밀접하게 연결되어 있다.

요약

콜백 함수는 다른 함수의 인자로 전달되어 특정 시점에 실행되는 함수입니다. 비동기 처리에 주로 사용되지만, 중첩 구조로 인해 가독성이 떨어지는 콜백 지옥 문제가 발생할 수 있습니다.

Promise는 비동기 작업의 결과를 나타내는 객체로, then과 catch를 사용해 체이닝 방식으로 작성할 수 있습니다. 이를 통해 콜백 지옥 문제를 구조적으로 개선하고, 에러 처리를 일관되게 할 수 있습니다

async/await는 Promise 기반의 문법으로, 비동기 코드를 동기 코드처럼 작성할 수 있게 해줍니다. 가독성이 뛰어나며 try/catch를 사용해 에러 처리를 간결하게 할 수 있습니다.