[심화] 06. Promise·async/await·Generator

JavaScript 심화

Promise·async/await·Generator: 비동기와 이터레이션의 핵심

Promise를 표준으로 정리하고, async/await로 읽기 쉬운 흐름을 만들며, Generator의 ‘단계 실행’ 개념까지 연결합니다.

형태 요약노트 대상 심화 포커스 비동기/이터레이션

그림 1. Promise·async/await·Generator 관계도

Promise: 비동기의 표준 패턴

Promise는 “비동기 작업의 결과(성공/실패)를 나중에 받는 객체”입니다. 상태(state)가 명확해서, 콜백 지옥을 줄이고 흐름을 깔끔하게 만들 수 있습니다.

const p = new Promise((resolve, reject) => {
  // resolve(value) 또는 reject(error)
});

p.then(v => console.log(v))
 .catch(e => console.error(e))
 .finally(() => console.log('done'));

자주 쓰는 조합

• Promise.all: 여러 작업을 병렬로 실행하고 모두 끝나면 결과 배열을 받습니다.
• Promise.race: 먼저 끝난 것 하나를 기준으로 진행합니다.
• Promise.allSettled: 성공/실패를 모두 수집합니다.

async/await: Promise를 더 읽기 쉽게

async/await는 Promise 위에서 동작하는 문법입니다. 결국 Promise를 쓰는 것이지만, 순차 흐름이 자연스럽게 읽히도록 도와줍니다.

async function load() {
  try {
    const a = await fetch('/a').then(r => r.json());
    const b = await fetch('/b').then(r => r.json());
    return {a, b};
  } catch (e) {
    console.error(e);
    throw e;
  }
}

실무 팁
서로 독립적인 작업은 await를 순차로 쓰기보다 Promise.all로 병렬 처리하면 성능에 도움이 됩니다.

Generator: ‘한 번에’가 아니라 ‘한 단계씩’

Generator는 iterator 프로토콜을 구현하는 함수입니다. yield로 실행을 잠시 멈췄다가, next()로 다음 단계로 진행할 수 있습니다.

function* gen() {
  yield 1;
  yield 2;
  return 3;
}

const it = gen();
console.log(it.next()); // {value:1, done:false}
console.log(it.next()); // {value:2, done:false}
console.log(it.next()); // {value:3, done:true}

• 큰 데이터를 한 번에 만들지 않고 필요한 만큼만 생성하는 패턴에 유용합니다.
• 라이브러리/런타임(예: redux-saga)에서 Generator가 활용되는 경우도 있습니다.

참고 링크

• MDN: Promise
• MDN: async function
• MDN: await
• MDN: Generator
• MDN: Iterator 프로토콜