[Event Loop] 자바스크립트는 어떻게 비동기적으로 동작할까?

728x90

이벤트 루프(Event Loop) 

JavaScript는 싱글 스레드 언어입니다. 즉, 한 번에 한 작업만 처리할 수 있는 구조인데, 왜 우리는 setTimeout, fetch, Promise 같은 비동기 작업을 동시에 처리할 수 있을까요? 그 비밀은 바로 이벤트 루프(Event Loop)입니다.

 

---

1.  싱글 스레드란?

JavaScript는 하나의 Call Stack(호출 스택)에서 코드가 실행됩니다. 이 말은 곧, 모든 작업이 순서대로 하나씩 실행된다는 뜻이죠.

console.log('A');
console.log('B');
console.log('C');

A
B
C

그런데 왜 setTimeout은 뒤늦게 실행될까?

console.log('Start');
setTimeout(() => {
	console.log('Timeout');
}, 0);
console.log('End');

Start
End
Timeout

• 왜 setTimeout이 마지막에 실행될까요?

 

---

2.  자바스크립트 런타임 구조

JavaScript는 브라우저나 Node.js 런타임 환경 위에서 동작합니다. 이 런타임에는 다음 구성 요소가 있습니다:

• Call Stack : 현재 실행 중인 함수들의 스택
• Web APIs : setTimeout, fetch 등 브라우저가 제공하는 비동기 API
• Callback Queue (Task Queue) : 나중에 실행될 콜백이 대기하는 곳
• Event Loop : 스택이 비면 큐에서 콜백을 꺼내 실행하는 루프

이벤트 루프 흐름

1. 동기 코드는 Call Stack에 들어가 바로 실행
2. setTimeout, fetch 같은 비동기 함수는 Web API로 넘겨짐
3. 일정 시간이 지난 후, 해당 콜백은 Callback Queue로 이동
4. Call Stack이 비면, Event Loop가 큐에서 콜백을 꺼내 실행

 

---

3.  Promise와 마이크로태스크 큐

Promise는 또 다른 큐인 Microtask Queue에서 실행됩니다.

console.log('1');
Promise.resolve()
	.then(() => {
    	console.log('2'); 
    });
console.log('3');

 

실행 결과는?

1
3
2

• Microtask(Promise, MutationObserver 등)는 일반 Callback Queue보다 우선순위가 높아 Call Stack이 비면 즉시 실행됩니다.

 

---

4.  정리

싱글 스레드 + 이벤트 루프 = 비동기 처리 가능!

구성 요소	역할
Call Stack	함수 실행 공간
Web APIs	브라우저가 제공하는 비동기 기능
Callback Queue	setTimeout, 이벤트 핸들러 등 콜백 대기 장소
Microtask Queue	Promise의 .then() 등 높은 우선순위 큐
Event Loop	Stack이 비면 큐에서 작업을 꺼내 실행

 

---

5.  마무리

JavaScript는 싱글 스레드지만, 이벤트 루프와 큐 시스템로 비동기 처리를 완벽하게 지원합니다. 이 개념을 이해하면 다음과 같은 상황에서도 동작 순서를 예측하고 디버깅하기 쉬워집니다.

함께 보면 좋은 자료

• Youtube 프론트맨 - 프론트엔드 개발자 면접 단골 질문 5 | 이벤트 루프와 콜백

블로그 글 : 

[Promise] 비동기 처리의 핵심 개념

[async와 await] 비동기 코드를 동기처럼 쓰는 방법

[콜백 함수] 자바스크립트 함수의 함수스러운 사용법

 

---

반응형