"이벤트 루프가 뭐예요?" 누군가 나에게 이렇게 묻다면 나는 자신 있게 답을 할 수 있을까? 솔직히 현재의 나는 명쾌하게 대답할 자신이 없다. 그래서 이 글은 미래의 나를 위해, 그리고 이 질문에 답하기 위해 작성하는 정리 노트다.
1. 자바스크립트는 싱글 스레드인데 어떻게 멀티태스킹을 할까?
이벤트 루프를 논하기 전에 먼저 해결해야 할 의문이 있다. "자바스크립트는 싱글 스레드(Single Thread) 언어다." 이 말은 한 번에 하나의 작업만 할 수 있다는 뜻인데, 실제 우리가 쓰는 웹 사이트는 파일도 다운로드하고, 애니메이션도 보여주고, 서버 요청도 동시에 처리하는 것처럼 보인다. 이게 어떻게 가능한 걸까?
. 자바스크립트 엔진은 '요청'만 보내고, 실제로 시간이 오래 걸리는 작업(네트워크, 타이머 등)은 브라우저가 제공하는 Web APIs 영역에서 수행된다.
즉, 비동기 + 논블로킹(Async + Non-blocking) 방식이다.
비동기 + 논블로킹이란? 메인 스레드가 작업을 직접 붙들고 있는 게 아니라, 다른 곳(Web APIs)에 "이거 해줘"라고 위임하고 바로 다음 일을 처리하는 방식이다. 위임된 작업이 끝나면 결과만 나중에(Callback) 받아 처리한다.
이 과정에서 동작의 타이밍을 제어하고 조율하는 관리자가 바로 이벤트 루프(Event Loop)다.
2. 이벤트 루프(Event Loop)의 정의
이벤트 루프는 브라우저 내부에서 두 가지를 끊임없이 확인하고 중재하는 역할을 한다.
- 호출 스택(Call Stack)에 현재 실행 중인 코드가 있는가?
- 태스크 큐(Task Queue)에 대기 중인 작업이 있는가?
호출 스택이 텅 비어있다면, 태스크 큐에 대기 중인 작업을 꺼내와 실행시킨다. 이 단순한 반복 작업이 자바스크립트 비동기의 핵심이다.
3. 주요 구성 요소 뜯어보기
이벤트 루프를 이해하기 위해선 다음 세 가지 친구들을 알아야 한다.
① 호출 스택 (Call Stack)
호출 스택은 자바스크립트 엔진이 코드를 실행하는 공간이다.
- LIFO (Last In, First Out): 나중에 들어온 녀석이 먼저 나가는 '스택' 구조다.
- 함수가 실행되면 스택에 쌓이고(Push), 실행이 끝나면 스택에서 제거된다(Pop).
핵심: 자바스크립트는 싱글 스레드이므로 호출 스택이 딱 하나다. 한 번에 하나의 함수만 실행할 수 있다는 뜻이다. 만약 여기서 무거운 작업을 돌리면 브라우저는 멈춰버린다(Blocking).
② Web APIs:
브라우저가 제공하는 멀티 스레드 공간이다.
- setTimeout, fetch, DOM Event 등이 여기서 처리된다.
- 자바스크립트 엔진이 복잡하고 어려운 작업을 Web APIs에 요청하여 백그라운드에서 열심히 일을 처리한다. 일이 끝나면 결과물(콜백 함수)을 태스크 큐로 넘겨준다.
③ 태스크 큐 (Task Queue)
Web APIs에서 처리가 끝난 콜백 함수들이 실행되기 위해 기다리는 대기실이다.
- FIFO (First In, First Out): 먼저 들어온 녀석이 먼저 나간다.
- 이벤트 루프는 호출 스택이 비었을 때만 여기서 콜백을 꺼내간다.
4. 심화: 마이크로 태스크 vs 매크로 태스크
마이크로 태스크 큐 (Micro Task Queue)
- 대상: Promise (.then/catch/finally), async/await, MutationObserver 등
- 특징: 우선순위가 가장 높다.
- 호출 스택이 비면, 이벤트 루프는 매크로 태스크보다 마이크로 태스크 큐를 먼저 확인한다.
- 주의: 마이크로 태스크 큐에 있는 작업은 큐가 완전히 빌 때까지 계속해서 실행된다. 만약 마이크로 태스크가 계속 추가되면(무한 루프 등), 매크로 태스크는 실행 기회를 못 얻고 화면 갱신(렌더링)도 차단되어 브라우저가 먹통이 될 수 있다.
매크로 태스크 큐 (Macro Task Queue)
- 대상: setTimeout, setInterval, fetch, DOM 이벤트 등 일반적인 비동기 작업
- 특징: 마이크로 태스크 큐가 텅 비어야 실행된다.
- 일반적으로 매크로 태스크 하나를 실행한 후에는 브라우저가 화면을 다시 그릴(Render) 기회를 가질 수 있다.
5. 결론
이벤트 루프는 호출 스택이 비어 있는지를 지속적으로 확인하고,비어 있을 경우 태스크 큐에 대기 중인 작업을 호출 스택으로 옮겨 실행을 관리하는 메커니즘이다.
출처 및 참고 자료
'Stack > JavaScript' 카테고리의 다른 글
| Object.assign vs Spread Syntax (...) (2) | 2024.11.20 |
|---|---|
| 자바스크립트 javascript 2진수 8진수 16진수 변환 (1) | 2021.10.08 |