이벤트 루프(Event Loop)

• 이벤트 루프는 브라우저 동작을 제어하는 관리자이다.

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

• 이벤트 루프는 브라우저 내부의 호출 스택(Call Stack), 테스크 큐(Task Queue), Web API 등의 요소들을 모니터링하면서 비동기(asynchronous)적으로 실행되는 작업들을 관리하고, 이를 순서대로 처리하여 프로그램의 실행 흐름을 제어하는 녀석이다.

• 즉, 간단히 표현하자면 브라우저의 동작 타이밍을 제어하는 관리자라고 보면 된다.

• 이벤트 루프의 동작 과정을 간단히 살펴보자면, 자바스크립트의 setTimeout()이나 fetch()와 같은 비동기(asynchronous) 자바스크립트 코드를 브라우저 Web API에게 맡기고, 백그라운드 작업이 끝난 결과를 콜백 함수(Callback Function) 형태로 테스크 큐(Task Queue)에 넣고 처리 준비가 되면 호출 스택(Call Stack)에 넣어 마무리 작업을 진행한다.

이벤트 루프의 과정

1.호출 스택(Call Stack)

• 비동기(asynchronous) 작업과 일반 함수(Function)를 스택에 넣을지 말지 판별한다.
• 일반 함수(Function)라면 호출 스택(Call Stack)에 넣는다.
• 비동기(asynchronous) 작업이라면 백그라운드(Web API)로 보낸다.

2.백그라운드(Web API)

• 위 과정에서 백그라운드로 비동기(asynchronous) 작업이 넘어가는 순간 동시에 실행이 된다.

• 백그라운드는 다른 스레드에서 수행한다.

• 백그라운드에 들어가는 자바스크립트의 메서드(Method)들은 굉장히 제한적이기 때문에 사실상 자바스크립트는 싱글 스레드가 맞다.

• 즉, 백그라운드는 브라우저마다 자바스크립트가 아닌 C++ 등 네이티브 코드나 운영체제 API로 구현되어 있다(Node.js의 경우 libuv).

• 예를 들어 setTimeout()의 시간을 실행시킨다.

3.테스크 큐(Task Queue)

• 이제 백그라운드의 작업이 pop되면서 테스크 큐에 들어온다.
• 이 후 다시 호출 스택(Call Stack)에 하나씩 끌어와서 작업을 실행한다.

4. 마이크로태스크 큐(Microtask Queue)

• 테스크 큐(Task Queue)와는 별도로 마이크로태스크 큐가 존재한다.
• Promise의 .then/.catch/.finally 콜백 함수(Callback Function), queueMicrotask(), MutationObserver 콜백 등이 여기에 쌓인다.
• 이벤트 루프는 호출 스택(Call Stack)이 비었을 때 마이크로태스크 큐를 먼저 모두 비우고, 그 다음에 테스크 큐(Task Queue)에서 하나를 꺼내 실행한다.
• 즉, Promise 후속 작업은 setTimeout()/setInterval/I/O 같은 매크로태스크보다 항상 먼저 실행된다.

JavaScriptCopy

전체적인 흐름

• 따라서마치 순회(loop) 하는듯하여 이벤트 루프라 부르는 것이다.

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

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

• 예를 들어 사용자의 클릭이나 키보드 입력과 같은 이벤트(event)가 발생하면, 그에 맞는 콜백 함수(Callback Function)가 실행한다.

• 대표적으로 자바스크립트의 addEventListener()가 있다.

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

• 따라서 이를 이해하고 적절한 방식으로 비동기(asynchronous) 작업을 처리하는 것은, 자바스크립트를 이용한 웹 애플리케이션 개발에 있어서 매우 중요하다.