JavaScript(Event Loop)

■ Event Loop란?

웹 페이지의 이벤트루프는 자바스크립트의 실행 환경에서 비동기 작업을 처리하고 이벤트를 관리하는 핵심 메커니즘입니다.

이벤트 루프는 싱글 스레드 환경인 브라우저에서 동작하며, 원래는 동기식 처리를 하는 자바스크립트 코드의 비동기 동작을 지원하고 웹 페이지의 반응성을 유지하기 위해 중요한 역할을 합니다.

 

 

비동기 작업

동기적 작업은 코드가 순차적으로 실행되며, 이전 작업이 완료되어야 다음 작업이 실행됩니다.

비동기적 작업은 작업이 실행되고 결과를 기다리지 않고 다음 작업이 실행됩니다. 비동기 작업은 보통 시간이 오래 걸리는 작업이나 외부 리소스에 접근하는 작업에 사용됩니다.

비동기 작업에는 setTimeout, Ajax 등이 있습니다.

 

 

싱글 스레드

싱글 스레드는 한 번에 하나의 작업만을 처리할 수 있는 스레드입니다.

브라우저는 주로 싱글 스레드로 동작합니다. 따라서 자바스크립트 코드는 하나의 스레드에서 순차적으로 실행됩니다.

싱글 스레드 환경에서 비동기 작업이 중요한 이유는 긴 작업이나 블로킹 작업이 발생할 경우 다른 작업이 멈추게 되어 시스템의 반응성이 저하될 수 있기 때문입니다.

비동기 작업을 사용하면 긴 작업이나 블로킹 작업이 진행되는 동안에도 다른 작업을 처리할 수 있으므로, 웹 브라우저의 반응성을 유지할 수 있습니다.

 

 

 

■ Event Loop 동작원리

Call Stack

Call Stack은 자바스크립트 코드의 실행 컨텍스트를 저장하는 곳입니다. 함수 호출이 발생하면 해당 함수의 실행 컨텍스트에 스택이 쌓이고, 함수의 실행이 끝나면 스택에서 제거됩니다.

 

 

Web API

웹 브라우저는 자바스크립트 외에도 다양한 API를 제공합니다. 이러한 API는 비동기 작업을 수행하거나 웹 브라우저의 기능을 활용하는데 사용됩니다.

setTimeout, XMLHttpRequest 등의 비동기 작업은 Web API에 의해 처리됩니다.

 

 

Event Queue

Wep Apis를 통해 비동기 작업이 완료되면, 해당 작업의 콜백 함수나 이벤트 핸들러가 이벤트 큐에 추가됩니다.

이벤트 큐는 비동기 작업의 완료 순서대로 콜백 함수나 이벤트 핸들러를 저장합니다.

 

 

Event Loop

이벤트 루프는 Call Stack과 이벤트 큐를 감시하며, Call Stack이 비어있을 때 이벤트 큐에있는 콜백 함수나 이벤트 핸들러를 Call Stack으로 이동시킵니다.

이벤트 루프는 단일 스레드에서 순차적으로 동작하며, Call Stack이 비워질 때마다 이벤트 큐의 작업을 처리합니다.

 

참고: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif