이벤트 루프

이벤트 루프 : 싱글 스레드인 자바스크립트의 작업을 멀티 스레드로 돌려 작업을 동시에 처리시키게 하던가, 여러 작업 중 어떤 작업을 우선으로 우선으로 동작시킬 것인지 결정하는 세심한 컨트롤을 하기 위해 존재하는 것

 

브라우전 내부의 call stack, callback Queue, Web api등의 요소들을 모니터링하면서 비동기적으로 실행되는 작업들을 관리하고 이를 순서대로 처리해서 프로그램의 실행흐름을 제어한다 = 브라우저의 동작 타이밍을 제어하는 관리자

 

자바스크립트의 setTimeout이나 fetch와 같은 비동기 자바스크립트 코드를 브라우저 Web APIs에게 맡기고, 백그라운드 작업이 끝난 결과를 콜백 함수 형태로 큐에 넣고 처리 준비가 되면 호출 스택(call stack)에 넣어 마무리 작업을 진행한다.

이 작업을 순회하는듯하여 이벤트루프라 부르는 것

 

이벤트 루프를 이용한 프로그램 방식을 이벤트 기반 프로그래밍이라고 한다.

이벤트 기반 프로그래밍은 프로그램의 흐름이 이벤트에 의해 결정되는 방식 

ex )  사용자의 클릭이나 키보드 입력과 같은 이벤트가 발생하면 그에 맞는 콜백함수가 실행 대표적으로 자바스크립트의 addEventListener가 있다.

 

이벤트 기반 프로그래밍은 비동기 작업을 쉽게 처리할 수 있고, 멀티 스레드 언어에 비해 단순하고 직관적인 코드 작성을 가능하게 하며, 브라우저와 같은 환경에서도 안정적인 실행을 가능하게 하여 사용자와의 상호작용을 높힐 수 있다.

따라서 이를 이해하고 적절한 방식으로 비동기 작업을 처리하는 것은 자바스크립트에서는 중요

 

call stack : 자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조

heap : 동적으로 생성된 자바스크립트 객체가 저장되는 공간

wepAPIs : 브라우저에서 제공하는 API 모음으로, 비동기적으로 실행되는 작업들을 전담하여 처리한다(AJAX호출, 타이머 함수, DOM 조작 등)

callback Queue : 비동기적 작업이 완료되면 실행되는 함수들이 대기하는 공간

Event Loop : 비동기 함수들을 적절한 시점에 실행시키는 관리자

Event Table : 특정 이벤트(timeout,click,mouse등) 가 발생했을 때 어떤 콜백함수가 호출되어야 하는 지 알고 있는 자료구조 

 

wepAPIs의 종류

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

 

대표적인 종류

DOM : HTML 문서의 구조와 내용을 표현하고 조작할 수 있는 객체

XMLHttpResquest : 서버와 비동기적으로 데이터를 교환할 수 있는 객체, AJAX기술의 핵심

Timer API : 일정한 시간 간격으로 함수를 실행하거나 지연시키는 메소드들을 제공

console API : 개발자 도구에서 콘솔 기능을 제공

Canvas API : <canvas> 요소를 통해 그래픽을 그리거나 애니메이션을 만들 수 있는 메소드들을 제공

Geolocaion API : 웹 브라우저에서 사용자의 현재 위치 정보를 얻을 수 있는 메소드들을  제공 

 

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

비동기로 동작하는 비동기 전용함수가 있는데 대표적을 setTimeout이나 fetch, addEventListener가 있다.

이벤트 루프는 이 비동기 함수 작업을 Web API에 옮기는 역할을 하고 작업이 완료되면 콜백을 큐에 적재했다가 다시 자바스크립트 엔진에 적재해 수행시키는 일종의 작업을 옮기는 역할만을한다. 작업을 처리하는 주체는 자바스크립트 엔진과 웹 API이다

이벤트 루프는 Call Stack에 현재 실행 중인 작업이 있는지 그리고 Task Queue에 대기 중인 작업이 있는지 반복적으로 확인하는 일종의 무한 루프만을 돌수 있도록 대기 작업이 있다면 작업을 옮겨주는 형태로 동작한다