자바스크립트에서 비동기적 코딩하는 방법

자바스크립트에서 크게 3번에 걸쳐 비동기 처리 기술이 발전되었다.

1. Callback 함수

• 가장 초창기에 쓰던 방식이다.
• 함수에게 오래 걸리는 일을 시키면서, 이 일이 끝나면 이어서 실행할 함수(콜백 함수)를 함께 전달하는 방식이다.
• 이런 작성 방식은 콜백 지옥에 빠지게 되어 코드를 읽기도, 에러를 잡기도 어렵다.

// 콜백 지옥 예시
getUser(1, function (user) {
  getPosts(user.id, function (posts) {
    getComments(posts[0].id, function (comments) {
      console.log(comments);
      // 점점 깊어지는 중첩...
    });
  });
});

• 위처럼 콜백 안에 콜백이 계속 중첩되면서 코드가 오른쪽으로 밀려나가는 것을 콜백 지옥이라고 한다.

2. Promise

• 콜백 지옥을 해결하기 위해 등장한 것이 프로미스이다.
• 콜백을 함수 안에 작성하지 않고, 결과물을 담은 빈 상자를 먼저 반환받는 방식이다.
• 일단 프로미스를 받고 나서 나중에 작업이 완료되면 .then()을 붙여서 성공 응답을 받는다.
• 실패하면 .catch()를 붙여서 에러 처리 방식을 작성한다.
• 이런 체인 방식으로 작성하여 콜백 지옥의 가독성 문제를 개선했다.

Promise의 3가지 상태

• Pending (대기): 비동기 처리가 아직 완료되지 않은 상태
• Fulfilled (이행): 비동기 처리가 성공적으로 완료되어 결과 값을 반환한 상태 → .then()으로 넘어간다
• Rejected (거부): 비동기 처리가 실패하거나 에러가 발생한 상태 → .catch()로 넘어간다

// Promise 체인 방식
getUser(1)
  .then((user) => getPosts(user.id))
  .then((posts) => getComments(posts[0].id))
  .then((comments) => console.log(comments))
  .catch((error) => console.error(error));

• 콜백 지옥과 비교하면 중첩 없이 .then()으로 이어지기 때문에 훨씬 읽기 쉽다.

Promise 동시 처리

여러 비동기 작업을 동시에 실행해야 하는 경우 Promise의 동시 처리 메서드를 사용한다.

엄밀히 말하면 "병렬(parallel)"이 아니라 "동시(concurrent)" 에 가깝다. 진짜 병렬은 여러 스레드가 동시에 작업하는 것인데, JS는 싱글 스레드라 그건 불가능하다. 실제로는 JS 엔진이 여러 요청을 연달아 Web API에 넘기고, 브라우저의 네트워크 레이어가 HTTP 요청을 동시에 처리하는 방식이다.

// 순차 실행 — 총 3초 (1초 + 1초 + 1초)
const a = await getA(); // 1초 기다림
const b = await getB(); // 그 다음 1초 기다림
const c = await getC(); // 그 다음 1초 기다림

// 동시 실행 — 총 1초 (셋 다 동시에 출발)
const [a, b, c] = await Promise.all([
  getA(),
  getB(),
  getC()
]);

• 순차 실행은 하나가 끝나야 다음 걸 시작하고, Promise.all은 셋 다 동시에 출발시키고 전부 끝날 때까지 기다린다.
• 실제 네트워크 요청을 동시에 처리하는 건 브라우저(Web API)의 역할이다.

Promise.all

• 전부 성공해야 결과를 반환한다.
• 하나라도 실패하면 전체가 실패 처리된다.
• 모든 API가 성공해야만 의미가 있는 경우에 사용한다.

const [user, posts, comments] = await Promise.all([
  getUser(1),
  getPosts(1),
  getComments(1)
]);
// 셋 중 하나라도 실패하면 catch로 빠진다

Promise.allSettled

• 성공/실패 상관없이 전부 완료되면 각각의 결과를 반환한다.
• 일부가 실패해도 나머지 결과는 사용하고 싶을 때 사용한다.

const results = await Promise.allSettled([
  getUser(1),
  getPosts(1),
  getComments(1)
]);
// results: [{ status: "fulfilled", value: ... }, { status: "rejected", reason: ... }, ...]

3. async/await

• Promise 방식으로 콜백 지옥의 가독성을 어느 정도 해결했지만, 여전히 체인 방식으로 길게 작성하는 것은 가독성 문제를 완전히 해결하지 못했다.
• 함수 앞에 async를 붙이고, 그 안에 오래 걸리는 비동기 작업 앞에 await를 명시한다.
• async/await 방식은 코드가 위에서 아래로 물 흐르듯이 아주 직관적이고 읽기 쉬워진다.
• async/await는 Promise의 문법적 설탕(syntactic sugar) 이다. 내부적으로는 Promise 기반으로 동작하지만, 마치 동기 코드처럼 작성할 수 있게 해주는 문법이다.

// async/await 방식
async function loadComments() {
  const user = await getUser(1);
  const posts = await getPosts(user.id);
  const comments = await getComments(posts[0].id);
  console.log(comments);
}

• 콜백 지옥, Promise 체인과 비교하면 마치 동기 코드처럼 위에서 아래로 읽을 수 있어 가장 직관적이다.

async/await 에러 처리

• Promise는 .catch()로 에러를 잡지만, async/await는 try/catch로 에러를 잡는다.

async function loadComments() {
  try {
    const user = await getUser(1);
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    console.log(comments);
  } catch (error) {
    console.error(error);
  }
}

• 동기 코드에서 에러를 잡는 방식과 동일하기 때문에 에러 처리도 직관적이다.

세 가지 방식 비교

최종 정리

자바스크립트의 비동기 처리는 Callback → Promise → async/await 순으로 발전해 왔습니다. Callback은 가장 초기 방식이지만 중첩이 깊어지는 콜백 지옥 문제가 있었고, 이를 해결하기 위해 Promise가 등장하여 .then() 체인 방식으로 가독성을 개선했습니다. Promise에는 Pending(대기), Fulfilled(이행), Rejected(거부) 세 가지 상태가 있습니다. async/await는 Promise의 문법적 설탕으로, 내부적으로는 Promise 기반이지만 마치 동기 코드처럼 위에서 아래로 읽을 수 있어 가장 직관적입니다. 에러 처리는 Promise가 .catch()를 사용하는 반면, async/await는 동기 코드와 동일한 try/catch를 사용합니다. 또한 여러 비동기 작업을 동시에 실행해야 할 때는 Promise.all이나 Promise.allSettled를 활용할 수 있는데, 이는 엄밀히 말하면 병렬이 아니라 동시(concurrent) 처리입니다. JS 엔진이 여러 요청을 Web API에 넘기고, 브라우저의 네트워크 레이어가 동시에 처리하는 방식이기 때문입니다.