자바스크립트는 싱글 스레드 언어!

자바스크립트는 기본적으로 싱글 스레드 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있으며, 모든 코드는 **콜 스택(Call Stack)**을 통해 순차적으로 실행됩니다.

그런데 현실 세계의 웹 애플리케이션에서는 시간이 오래 걸리는 작업(예: API 호출, 타이머, 이벤트 처리 등)을 자주 다뤄야 하고, 이 작업들이 실행될 때까지 자바스크립트가 멈추면 전체 애플리케이션이 멈추는 문제가 발생합니다. 그래서 등장한 개념이 바로 비동기 처리와 이를 지원하는 **이벤트 루프(Event Loop)**입니다.

🧩 비동기 작업 흐름 예시

console.log('1');

setTimeout(() => {
  console.log('2');
}, 1000);

console.log('3');

위 코드는 어떻게 실행될까요?

1. console.log('1') → 콜 스택에 쌓였다가 바로 실행
2. setTimeout(...) → Web API로 전달되고 타이머 시작 (콜 스택에서는 제거됨)
3. console.log('3') → 콜 스택에서 실행됨
4. 1초 뒤, Web API가 콜백을 **태스크 큐(Task Queue)**에 넣음
5. 이벤트 루프는 콜 스택이 비는 순간(동기 작업이 모두 끝난 시점)에 태스크 큐에서 콜백을 꺼내 실행함

🔄 이벤트 루프 구조 요약

• Call Stack: 현재 실행 중인 함수들을 담고 있는 구조
• Web APIs (또는 백그라운드 작업): setTimeout, DOM 이벤트, fetch 등이 처리되는 공간
• Task Queue: 비동기 작업의 콜백이 대기하는 큐 (setTimeout 등)
• Microtask Queue: Promise.then, MutationObserver 등 더 우선 순위가 높은 큐
• Event Loop: 콜 스택이 비었는지 체크하고, 비어 있으면 큐에서 콜백을 꺼내 실행함