비동기 처리 어렵다고? 자바스크립트 콜백과 이벤트 루프까지 쉽게 설명해드립니다

✅ 1. 콜백 함수란?

콜백 함수는 다른 함수에 인자로 전달되어 나중에 실행되는 함수입니다.

function greet(name, callback) {
  console.log(`안녕, ${name}`);
  callback();
}

greet("지민", () => {
  console.log("처음 뵙겠습니다!");
});

📌 실행 결과:

안녕, 지민 처음 뵙겠습니다!

즉, 콜백 함수는 “나중에 호출(callback)될 함수”예요.

---

❗ 2. 콜백 헬(callback hell)

콜백을 너무 중첩해서 쓰다 보면, 다음과 같이 코드가 지옥처럼 꼬입니다.

login(id, function(result) {
  getUserInfo(result, function(user) {
    getPosts(user, function(posts) {
      show(posts);
    });
  });
});

😵 가독성↓ 유지보수↓ 디버깅↓

---

🔄 3. Promise로 구조 개선

Promise는 비동기 작업을 더 체계적으로 관리할 수 있는 객체입니다.

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("데이터 가져오기 성공!");
  }, 1000);
});

fetchData
  .then((res) => console.log(res))
  .catch((err) => console.error(err));

 

---

⏳ 4. async / await: 동기처럼 읽기 쉬운 비동기 코드

async/await는 Promise를 더 깔끔하게 사용할 수 있는 문법입니다.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function run() {
  console.log("1초 대기...");
  await delay(1000);
  console.log("끝!");
}

run();

📌 가독성이 확실히 좋아지죠!

---

❓ 5. 그런데… 실행 순서는 왜 이럴까?

다음 코드의 실행 순서를 예측해보세요.

console.log("A");

setTimeout(() => {
  console.log("B");
}, 0);

Promise.resolve().then(() => {
  console.log("C");
});

console.log("D");

결과는?

A D C B

😲 왜 이런 순서가 나올까요?

---

🧠 6. 자바스크립트의 이벤트 루프(Event Loop)

자바스크립트는 싱글 스레드 언어입니다.
하지만 비동기 작업도 잘 처리하죠. 그 이유는 바로 이벤트 루프 때문입니다.

📦 주요 개념

• Call Stack (콜 스택): 실행 중인 함수들이 쌓이는 공간
• Web APIs: 브라우저가 제공하는 비동기 처리 영역 (setTimeout, DOM 이벤트 등)
• Task Queue: setTimeout 같은 일반 비동기 작업이 기다리는 곳
• Microtask Queue: Promise.then 같은 작업이 기다리는 곳 (우선 순위 더 높음)

---

📊 7. 실행 순서 정리

순서내용

1	동기 코드(Call Stack) 먼저 실행
2	Microtask Queue (Promise.then) 처리
3	Task Queue (setTimeout, setInterval) 순서대로 실행

---

✅ 8. 요약

개념핵심 요약

콜백 함수	나중에 실행되는 함수
콜백 헬	콜백 중첩으로 인한 복잡성
Promise	콜백 대신 사용하는 비동기 처리 객체
async/await	Promise를 동기처럼 표현
이벤트 루프	비동기 코드 실행 순서를 결정하는 핵심 구조

---

🎯 결론

자바스크립트의 비동기 처리는
콜백 → Promise → async/await → 이벤트 루프
이 흐름으로 이어져요.

이걸 한 번에 이해하면 자바스크립트의 비동기 처리 능력이 확 올라갑니다! 💪