JavaScript 이벤트 루프 완전 정복｜콜 스택, 태스크 큐, 마이크로태스크 한눈에 이해하기
🧠 JavaScript 이벤트 루프 완전 정복｜콜 스택, 태스크 큐, 마이크로태스크의 작동 원리
안녕하세요, 퍼블리셔 노미입니다! 😊
오늘은 자바스크립트 개발자라면 반드시 알고 있어야 할 이벤트 루프(Event Loop)의 세계로 들어가 볼 거예요. 🔁
“왜 setTimeout()보다 Promise가 먼저 실행되지?”
“async/await은 정확히 언제 실행될까?”
이런 궁금증이 있다면, 오늘 글이 아주 큰 도움이 될 거예요! 📚 콜 스택, 태스크 큐, 마이크로태스크까지 비동기 타이밍의 핵심을 부드럽고 시각적으로 정리해드릴게요. 🧩
📌 자바스크립트는 싱글 스레드 언어
먼저 꼭 알아야 할 기본 개념! 자바스크립트는 싱글 스레드(Single Thread) 기반 언어예요. 🧵 즉, 한 번에 한 작업만 처리할 수 있다는 뜻이죠.
그런데도 비동기 처리가 되는 이유는?
- ✅ 비동기 작업은 JS 엔진이 아닌 브라우저(Web API)가 처리
- ✅ 완료된 작업은 태스크 큐(Task Queue)로 들어가서 이벤트 루프에 의해 실행됨
→ 이 구조를 정확히 이해하면 모든 비동기 타이밍을 예측할 수 있어요! 👀
🧱 콜 스택(Call Stack)이란?
콜 스택은 자바스크립트 코드가 실행되는 가장 기본적인 공간입니다. 한 줄 한 줄 동기적으로 실행되며, 함수가 호출될 때마다 위에 쌓이고, 실행이 끝나면 아래로 내려오면서 제거돼요. 📥📤
예시 코드
function greet() {
console.log('안녕!');
}
function start() {
greet();
console.log('시작합니다');
}
start();
실행 순서: start() → greet() → console.log('안녕!') → console.log('시작합니다')
- 🚶♂️ 동기적 처리만 담당
- 🚫 비동기 함수(setTimeout 등)는 처리 안 함
→ 자바스크립트는 콜 스택에 비동기 작업을 '맡기지 않아요' ❗
🪣 태스크 큐(Task Queue)
비동기 함수(ex. setTimeout(), setInterval())는 브라우저(Web API)가 맡아서 처리하고, 완료된 이후 태스크 큐에 등록돼요. 이때 이벤트 루프가 콜 스택이 비었는지 확인하고, 큐에 있는 작업을 스택으로 밀어 넣습니다. 🔄
예시
console.log('1');
setTimeout(() => {
console.log('2'); // 태스크 큐로 이동
}, 0);
console.log('3');
출력 순서: 1 → 3 → 2
- 📥 setTimeout은 Web API에게 위임
- 📤 완료되면 태스크 큐에 들어감
- 📦 콜 스택이 비었을 때 실행됨
⚡ 마이크로태스크(Microtask Queue)
Promise.then(), async/await, queueMicrotask()는 마이크로태스크 큐에 들어갑니다. 이 큐는 태스크 큐보다 우선순위가 높아요! 🥇
예시
console.log('A');
Promise.resolve().then(() => {
console.log('B');
});
setTimeout(() => {
console.log('C');
}, 0);
console.log('D');
출력 순서: A → D → B → C
✔️ B는 마이크로태스크 큐 ✔️ C는 태스크 큐
→ 마이크로태스크는 콜 스택이 비자마자 가장 먼저 실행돼요! ⚡
📊 실행 순서 실전 예제 정리
예제 1
console.log('1');
setTimeout(() => {
console.log('2');
}, 0);
Promise.resolve().then(() => {
console.log('3');
});
console.log('4');
실행 순서:
- 1️⃣ '1' → 동기
- 4️⃣ '4' → 동기
- 3️⃣ '3' → 마이크로태스크
- 2️⃣ '2' → 태스크 큐 (setTimeout)
최종 출력: 1 → 4 → 3 → 2 ✅
예제 2: async/await 포함
async function test() {
console.log('A');
await null;
console.log('B');
}
test();
console.log('C');
실행 순서:
- 🧱 A → 동기
- 🧠 await 이후 → 마이크로태스크
- 🧱 C → 동기
- ⚡ B → 마이크로태스크
결과: A → C → B
🎞️ 이벤트 루프 흐름 애니메이션 (텍스트 버전)
[1단계] 코드 실행 시작
↳ 동기 함수 → 콜 스택에 쌓임 → 실행됨
[2단계] 비동기 함수 호출
↳ setTimeout → 브라우저에 맡김
↳ Promise → 마이크로태스크 큐에 등록
[3단계] 콜 스택이 비면
↳ 마이크로태스크 큐 먼저 처리
↳ 그다음 태스크 큐 처리
→ 모든 흐름은 "콜 스택이 비었을 때" 순서대로 실행돼요! 🔄
🧠 마무리 요약
✔️ 핵심 키워드 정리
- 🧱 콜 스택 → 동기 실행의 중심
- 🪣 태스크 큐 → setTimeout 등 비동기 후 처리
- ⚡ 마이크로태스크 큐 → Promise, async/await → 우선순위 높음
- 🔁 이벤트 루프 → 스택이 비면 큐로부터 작업을 가져옴
🔥 꼭 기억하세요!
자바스크립트는 싱글 스레드지만 이벤트 루프 구조 덕분에 동시 처리가 가능합니다! 🧠 Promise나 setTimeout의 동작 순서가 궁금할 땐 “콜 스택 → 마이크로태스크 → 태스크 큐” 흐름을 꼭 떠올리세요!
다음 글에서는 📦 **requestAnimationFrame, 이벤트 위임 등 브라우저 내부 실행 메커니즘**도 이어서 소개할게요! 끝까지 읽어주셔서 감사합니다! 🙌✨
#JavaScript이벤트루프 #콜스택 #태스크큐 #마이크로태스크 #비동기실행순서 #퍼블리셔노미 #JS심화 #프론트엔드이론 #이벤트루프정리