이벤트 루프

참고한 블로그...

https://inpa.tistory.com/entry/🔄-자바스크립트-이벤트-루프-구조-동작-원리

🔄 자바스크립트 이벤트 루프 동작 구조 & 원리 끝판왕

 

https://blog.toktokhan.dev/t-767eb0fa38f3

자바스크립트의 이벤트 루프(Event Loop)란?

 

---

이벤트 루프(Event Loop)

자바스크립트에서 비동기 작업을 관리하는 메커니즘

브라우저의 동작 타이밍을 제어하는 관리자

 

싱글 스레드인 자바스크립트의 작업을 멀티 스레드로 돌려 작업을 동시에 처리시키거나

여러 작업 중 어떤 작업을 우선으로 동작시킬 것인지 결정하는 세심한 컨트롤을 위해 존재

 

호스트 환경(브라우저나 Node.js)이 제공하는 Call Stack / Web API / Task Queue / Microtask Queue 를 활용하여, 싱글 스레드 언어임에도 불구하고 멀티 스레드처럼 동시성을 지원합니다.

 

역할

• 브라우저 내부의 Call Stack, Callback Queue, Web APIs등의 요소 모니터링
• 비동기 작업 관리(동기적으로 처리)
• 프로그램의 실행 흐름 제어

동작 과정

• setTimeout이나 fetch와 같은 비동기 코드를 브라우저 Web APIs에게 맡깁
• 백그라운드 작업이 끝난 결과를 콜백 함수 형태로 큐(Callback Queue)에 넣음
• 처리 준비가 되면 호출 스택(Call Stack)에 넣어 마무리 작업 진행

이러한 이벤트 루프를 이용한 프로그램 방식을 이벤트 기반(Event Driven) 프로그래밍이라고 합니다.

 

이벤트 기반 프로그래밍

프로그램의 흐름이 이벤트에 의해 결정되는 방식

 

addEventListner(이벤트명, 콜백함수)

클릭이나 입력과 같은 이벤트 발생 시 그에 맞는 콜백 함수 실행

• 비동기 잡업 처리 용이
• 단순하고 직관적인 코드 작성 가능(멀티 스레드 언어 비해)
• 브라우저와 같은 환경에서 안정적인 실행 가능 → 사용자와의 상호작용 높일 수 있음

 

브라우저의 내부 구성도

구성 요소	설명	역할
Call Stack	자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조	동기 작업을 처리하며 함수 호출과 종료를 관리
Heap	동적으로 생성된 자바스크립트 객체가 저장되는 공간	객체나 데이터를 저장하기 위한 메모리 영역
Web APIs	브라우저에서 제공하는 API 모음 (AJAX, 타이머, DOM 조작 등)	비동기 작업을 실행하며 결과를 Callback Queue로 전달
Callback Queue	비동기 작업이 완료된 후 실행 대기 중인 함수들이 저장되는 공간	Call Stack이 비면 이벤트 루프에 의해 작업이 넘어가는 대기열
Event Loop	비동기 함수들을 적절한 시점에 실행시키는 관리자	Callback Queue에서 작업을 가져와 Call Stack으로 전달하여 실행
Event Table	특정 이벤트와 연결된 콜백 함수 정보를 저장하는 자료구조	이벤트 발생 시 연결된 콜백 함수를 Callback Queue에 등록

 

Web APIs의 종류

 

Web APIs

타이머, 네트워크 요청, 파일 입출력, 이벤트 처리 등 브라우저에서 제공하는 다양한 API를 포괄하는 총칭

 

Web API는 브라우저(Chrome)에서 멀티 스레드로 구현되어 있습니다. 그래서 브라우저는 비동기 작업에 대해 메인 스레드를 차단하지 않고 다른 스레드를 사용하여 동시에 처리할 수 있는 것입니다.

• setTimeout

Web APIs의 한 종류인 Timer API에서 타이머 스레드를 사용하여 타이머를 수행합니다.

 

• XMLHttpRequest, fetch

네트워크 관련 API는 네트워크 스레드를 사용하여 네트워크 요청과 응답을 처리합니다.

API	설명	역할
DOM	HTML 문서의 구조와 내용을 표현하고 조작할 수 있는 객체	HTML 요소의 생성, 수정, 삭제 및 이벤트 처리
XMLHttpRequest	서버와 비동기적으로 데이터를 교환할 수 있는 객체로, AJAX 기술의 핵심	데이터를 서버로 보내거나 서버에서 데이터를 받아오는 비동기 통신 구현
Timer API	일정 시간 간격으로 함수를 실행하거나 지연시키는 메소드 (setTimeout, setInterval)을 제공	타이머 기능 구현, 일정 시간 후 코드 실행 또는 반복 실행
Console API	개발자 도구에서 콘솔 기능을 제공 (console.log, console.error 등)	디버깅 및 개발 중 로그 기록, 경고, 에러 메시지 출력
Canvas API	<canvas> 요소를 통해 그래픽을 그리거나 애니메이션을 만들 수 있는 메소드들을 제공	2D 및 3D 그래픽 렌더링, 데이터 시각화, 게임 개발
Geolocation API	웹 브라우저에서 사용자의 현재 위치 정보를 얻을 수 있는 메소드들을 제공 (getCurrentPosition)	위치 기반 서비스 구현 (예: 지도, 내비게이션, 지역 정보 제공)

 

💡

모든 Web API들이 비동기로 동작되는 것이 아니다. Web API에는 동기적으로 처리되는 것과 비동기적으로 처리되는 것 모두 있다. 예를 들어 DOM API는 동기적으로 처리되고, XMLHttpRequest나 Timer API는 동기적으로 처리된다.

 

Callback Queue의 종류

여러가지의 종류의 Queue를 묶어 총칭하는 개념

(macro)task queue , microtask queue

구분	설명	예시	처리 우선순위
Task Queue	비동기로 처리되는 함수들의 콜백이 들어가는 큐. 보통 macrotask queue라고 불림.	setTimeout, setInterval, fetch, addEventListener	낮음 (Microtask Queue가 먼저 처리됨)
Microtask Queue	비동기로 처리되지만 우선적으로 실행되는 함수들의 콜백이 들어가는 큐.	Promise.then, process.nextTick, MutationObserver	높음 (Task Queue보다 먼저 실행)

 

처리 순서

1. Call Stack이 비어 있는 경우, Microtask Queue의 작업이 먼저 실행됩니다.
2. Microtask Queue가 비어 있으면, Task Queue에서 작업을 가져와 실행합니다.

 

자바스크립트 이벤트 루프 동작 과정

• 작업을 처리하는 주체자바스크립트엔진과 웹 API
• 작업을 옮기는 역할 이벤트 루프(Event Loop)

흐름 요약

• 비동기 함수 실행 → Web API로 이동
• 작업 완료 → Queue에 콜백 적재
• Event Loop → Call Stack이 비어 있는지 확인
• 대기 작업 발견 → Queue에서 작업을 Call Stack으로 옮김
• 작업 실행 완료 → 다음 대기 작업 반복

끊임없이 Call Stack과 Queue를 확인하며 작업을 이동시키는 "무한 루프" 역할을 합니다.

이를 통해 JavaScript가 단일 스레드로도 비동기 작업을 처리할 수 있습니다.