1. 한줄정리
자바스크립트는 단일 스레드 언어이지만, Event Loop와 Task Queue를 통해 비동기 동작을 가능하게 한다.
즉, 콜스택이 비면 큐에 쌓인 콜백을 순차적으로 실행하며 논블로킹 I/O를 구현한다.
2. 등장 배경
자바스크립트는 기본적으로 Single Thread(한 번에 한 작업만 수행) 언어다.
하지만 브라우저는 동시에 여러 일을 해야 한다.
예를 들어:
- 버튼 클릭 이벤트 기다리기
- 서버에서 데이터 가져오기(fetch)
- 애니메이션 프레임 렌더링
이 모든 걸 한 스레드로 처리하려면, 논블로킹 비동기 메커니즘이 필요하다.
그래서 등장한 개념이 이벤트 루프(Event Loop) 다.
3. 핵심 내용
자바스크립트의 비동기 구조
자바스크립트 엔진(예: V8)은
- Call Stack (호출 스택)
- Heap (메모리 공간) 을 가지고 있다. 하지만 비동기 처리는 브라우저(또는 Node.js)의 Web API + Event Loop + Task Queue가 담당한다.
구성 요소
| 구성요소 | 역할 |
|---|---|
| Call Stack | 실행 중인 함수 저장. 함수가 끝나면 pop. |
| Web APIs | 타이머, fetch, DOM 이벤트 등 브라우저가 제공하는 비동기 기능 담당. |
| Task Queue (Macrotask Queue) | setTimeout, setInterval 등 콜백이 대기하는 큐. |
| Microtask Queue | Promise, MutationObserver 등 콜백이 대기하는 큐. |
| Event Loop | 스택이 비면, 큐의 콜백을 스택으로 옮겨 실행. |
4. 동작 원리
1️⃣ Call Stack
- 함수가 호출될 때마다 스택에 쌓인다.
- 실행이 끝나면 pop 된다.
2️⃣ Web API
setTimeout,fetch등은 브라우저에서 비동기적으로 처리된다.- 지정된 시간이 끝나면 콜백을 Task Queue에 넣는다.
3️⃣ Task Queue (Macrotask Queue)
setTimeout,setInterval,I/O,UI 렌더링등 콜백이 쌓인다.
4️⃣ Microtask Queue
Promise.then,MutationObserver,queueMicrotask등 콜백이 쌓인다.- Microtask는 항상 Macrotask보다 우선 실행된다.
5️⃣ Event Loop
- 스택이 비었을 때,
- 먼저 Microtask Queue의 모든 콜백을 실행
- 그 다음 Macrotask Queue에서 하나 꺼내 실행
5. 장단점 분석
| 구분 | 장점 | 단점 |
|---|---|---|
| 단일 스레드 | 복잡한 동기화 문제 없음 | CPU 작업이 오래 걸리면 UI 멈춤 |
| 이벤트 루프 구조 | 논블로킹 I/O 가능 | 루프를 막는 동기 코드가 있으면 전체 지연 |
| 마이크로태스크 | 빠른 후속 처리 가능 | 무한 루프 가능성 있음 (Microtask 폭주) |
6. 코드 예시
console.log("start");
setTimeout(() => {
console.log("timeout");
}, 0);
Promise.resolve().then(() => {
console.log("promise");
});
console.log("end");
실행 순서:
"start"→"end"→ (Promise microtask)"promise"→ (Macrotask)"timeout"
출력 결과
start
end
promise
timeout
이유:
setTimeout→ Web API로 이동, 0초 후 Macrotask Queue에 등록Promise→ Microtask Queue에 등록- 콜스택이 비면, Event Loop가 먼저 Microtask부터 처리 →
"promise"출력 - 이후 Macrotask Queue의
"timeout"실행
7. 연관 개념 및 용어 정리
| 용어 | 설명 |
|---|---|
| Synchronous | 순차 실행, 이전 작업이 끝나야 다음으로 이동 |
| Asynchronous | 순서 상관없이 백그라운드에서 실행 후 콜백 호출 |
| Callback Queue | 대기 중인 콜백이 들어오는 큐 |
| Microtask / Macrotask | 이벤트 루프에서의 우선순위 분류 |
| Blocking / Non-blocking | 실행 흐름이 막히는지 여부 |
| Concurrency vs Parallelism | 동시성(한 스레드 내 여러 작업) vs 병렬성(여러 스레드에서 동시 실행) |
