async/await는 어떻게 동작하나요?

Question

Accepted Answer

`async/await`는 비동기 코드를 동기 코드처럼 읽히게 작성할 수 있는 **Promise 위의 문법적 설탕(syntax sugar)**입니다. `async` 함수는 항상 Promise를 반환하고, `await`는 Promise가 결정될 때까지 함수를 일시 정지시킨 후 그 값과 함께 재개합니다.

```js
async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`); // 응답까지 일시 정지
    const user = await res.json();               // 파싱까지 일시 정지
    return user;                                  // resolve된 값이 된다
  } catch (err) {
    console.error(err); // 위 어떤 await의 거부든 잡는다
  }
}
```

## 순차 대 병렬 — 흔한 성능 실수

`await`는 작업을 **차례대로** 실행합니다. 두 요청이 서로 의존하지 않는다면, 순차적으로 await하는 것은 낭비스럽게 느립니다:

```js
// ❌ 순차 — 총 시간 = a + b
const a = await getA();
const b = await getB();

// ✅ 병렬 — 총 시간 = max(a, b)
const [a, b] = await Promise.all([getA(), getB()]);
```

## 에러 처리

`.catch` 대신 `try/catch`를 사용하세요. 거부된 await 대상 promise는 throw하므로, 하나의 `catch`가 블록 전체를 처리합니다.

## 내부 동작

여전히 Promise와 microtask 큐입니다 — `await`는 스레드를 막지 않습니다. 제어권을 양보하여 다른 코드가 실행되게 한 뒤 재개합니다. 잊지 마세요: `async` 함수를 `await`(또는 `.catch`) 없이 호출하면 에러가 삼켜질 수 있습니다.

## 왜 중요한가

async/await는 비동기 흐름을 읽기 쉽게 만들며 비동기 작업 순서화의 현대적 기본값입니다 — 다만 독립적인 작업은 `Promise.all`로 의식적으로 병렬화해야 합니다.