비동기가 뭐길래? 자바스크립트 Promise와 async/await 쉽게 풀어보기

비동기, Promise, async/await 확실히 이해하기 — 택배 배달로 비유해 보자!

자바스크립트를 공부하다 보면 꼭 마주치는 말:

비동기(Asynchronous)

그런데 도대체 “비동기”가 뭐길래 개발자들을 이토록 괴롭힐까요?
오늘은 택배 비유로 풀어보겠습니다.

---

동기(Synchronous)란?

→ 택배 아저씨 올 때까지 문 앞에서 꼼짝 않고 기다리는 것

• 작업이 순서대로 하나하나 끝나야 다음으로 넘어갑니다.
• 택배가 늦으면 다른 일은 못 하고 계속 기다림.

코드 예시

 

console.log("주문하기");
console.log("배송 도착");
console.log("택배 개봉");

 

출력:

 

주문하기
배송 도착
택배 개봉

---

비동기(Asynchronous)란?

→ 택배 시키고 다른 일 먼저 하다가, 택배 오면 다시 처리하는 것

• 택배가 오는 동안 다른 일을 할 수 있어요.
• 웹 개발에서 가장 흔한 비동기 작업: API 요청, 파일 읽기, 타이머 등

코드 예시

console.log("주문하기");
setTimeout(() => {
  console.log("배송 도착");
}, 3000);
console.log("다른 일 하기");

출력:

주문하기
다른 일 하기
(3초 후) 배송 도착

---

비동기 처리 방법 ① — 콜백(callback)

→ 택배기사님이 도착하면 “전화 주시라고” 부탁하는 것

• 콜백 지옥(callback hell) 문제가 생길 수 있음.
• 코드가 중첩되어 점점 읽기 어려워짐.

예:

setTimeout(() => {
  console.log("택배 도착!");
  setTimeout(() => {
    console.log("택배 개봉!");
  }, 1000);
}, 2000);

---

비동기 처리 방법 ② — Promise

→ 택배사에서 ‘배송 추적 번호’를 주는 것

• “언젠간 올 거”라는 약속을 반환.
• 성공(fulfilled) 또는 실패(rejected)를 알려줌.

비유

택배사가 “이 송장 번호로 배송 상황 확인하세요.”

코드:

let delivery = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("택배 도착!");
  }, 2000);
});

delivery.then((msg) => {
  console.log(msg);
});

출력:

(2초 후) 택배 도착!

---

비동기 처리 방법 ③ — async / await

→ 택배를 기다리긴 하되, 기다리는 동안 다른 일도 가능하고, 코드는 동기처럼 깔끔

• async 함수는 항상 Promise를 반환.
• await은 Promise가 끝날 때까지 기다려줌.
• 코드가 동기처럼 읽히니 가독성이 좋음!

비유

택배기사님이 오기 전까지 다른 일하다가,
문 두드리면 바로 문 열러 가는 것

코드:

async function getDelivery() {
  console.log("주문하기");
  let result = await new Promise((resolve) => {
    setTimeout(() => {
      resolve("택배 도착!");
    }, 2000);
  });
  console.log(result);
  console.log("택배 개봉");
}

getDelivery();

출력:

주문하기
(2초 후) 택배 도착!
택배 개봉

---

정리

• 동기(Sync) → 택배 올 때까지 아무것도 못함
• 비동기(Async) → 택배 기다리면서 다른 일 가능
• 콜백 → 택배기사님 전화
• Promise → 송장 번호로 배송 추적
• async/await → 깔끔하게 기다렸다 이어서 진행

자바스크립트에서 비동기 처리는 무조건 마주치게 되는 개념이에요.
헷갈릴 때는 “택배” 비유를 꼭 떠올려 보세요.
이해가 훨씬 수월해질 거예요!

혹시 더 깊이 다루고 싶은 부분이나, 다른 비유로 설명해보고 싶으신가요?