[JavaScript] Event Loop
자바스크립트를 잘 사용하기 위해서 알아야 하는 핵심 개념들이 있는데
싱글 스레드 언어인 자바스크립트의 동작 과정을 이해하기 위해 알아야 하는 개념인
Event Loop 에 대해서 알아보자! 😁
1. Event Loop 가 뭐지? 🤔
이벤트 루프? 처음 들었을때 이게 뭐지? 라는 생각부터 먼저 들었다 😵 생소한 단어라 가장 먼저 떠올린 단어는
Event Horizon 우리말로 사건의 지평선이 제일 먼저 떠올라 무슨 과학 용어 인줄 알았다.
Event Loop 란 딱 뭐라고 정의된 표현은 찾지 못했지만 내가 이해한 바로는 자바스크립트 엔진 내에 실행되어있는
프로그램 내지는 프로세스? 라고 정의 할 수 있다.
Event Loop 는 싱글 스레드 언어인 자바스크립트가 효율적인 동작을 할 수 있도록 자바스크립트 엔진에 있는 콜스택, 이벤트 큐, 마이크로태스크 큐 를 감시하면서 콜스택이 비었을때 이벤트,마이크로태스크 큐에 대기하고 있는 비동기 동작들을 콜 스택으로 넘겨 처리 해 효율적인 처리를 관리한다.
아래 이미지를 통해 이벤트 루프가 어떻게 생겨먹었는지 알아보자!
그림을 보면 Stack 과 Callback Queue 사이에서 돌고 있는 Event Loop를 볼 수 있다.
💡 Callback Queue 는 Event Queue 와 Microtask Queue로 구분되어있다.
2. Event Loop 의 동작 원리 🔧
Event Loop의 동작을 알기 위해선 먼저 위 그림에서 본 각 컴포넌트들이 무슨 일을 하는지 알아야 한다.😋
Event Loop 는 콜 스택, 이벤트 큐, 마이크로 태스크 큐 세가지의 컴포넌트들로 이루어져 있다.
아래는 각 컴포넌트 들이 무슨일을 하는지에 대한 설명이다.
1. 콜 스택 (Call Stack)
- 동기 작업에 대한 함수 호출을 저장하고 처리, 자바스크립트는 콜 스택을 사용하여 코드에서의 함수 호출을 추적하며, 호출된 코드를 차례대로 실행할 수 있다.
2. 이벤트 큐 (Event Queue)
- 비동기 작업, 예를 들어 타이머 이벤트 (setTimeout, setInterval) 및 DOM 이벤트 등의 콜백 함수를 저장하고 처리한다.
3. 마이크로 태스크 큐 (Microtask Queue)
- 비동기 작업 중 Promise와 관련된 콜백 함수 (then, catch, finally), MutationObserver, 그리고 Node.js 환경에서의 process.nextTick 등을 저장하고 처리한다.
이벤트 루프의 각 컴포넌트들의 역할이 무엇인지 알아봤으니 자바스크립트 엔진이 코드를 처리하는 순서를 그림과 코드로 살펴보자면
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();
- 자바스크립트 엔진이 위에서 아래로 코드를 읽어가면서 동기 함수실행문 bar()를 먼저 발견하고 콜스택에 넣고 실행하면 안에 있던 web api 인 setTimeout를 호출 하고 콜스택에서 bar를 제거한다.
- Web api 에서는 호출 받은 setTimeout의 동작을 수행하고 입력받은 시간이 지나면 콜백 큐에 넘겨받은 콜백을 메세지 형태로 넘긴다.
- foo() 실행을 발견하고 foo()를 콜스택에 넣고 실행하면 콘솔로그에 'First'가 나오고 foo를 콜스택에서 제거한다.
- 그 다음 실행문인 baz()를 발견 하고 baz를 실행 하면 콘솔로그에 'Third'가 찍혀 나온다.
- 모든 함수를 실행한 콜 스택이 비어있는걸 감지한 Event Loop가 콜백 큐에서 대기하고 있던 foo에서 넘겨받은 콜백 함수를 콜스택에 넘겨 실행한다.
- 콜백 큐에 있던 콜백을 넘겨 받은 콜스택은 콜백을 실행하고 콘솔에 'Second'가 찍혀 나온다.
- 모든 동작을 완료 했을때 콘솔에는 'First' , 'Third' , 'Second' 순서로 실행결과가 나온다.
여기서 대충 코드의 동작 과정을 보면서 Event Loop 의 동작을 이해한거 같은데 갑자기 Web API 라는게 등장한다.
💡 Web API 란?
Web API는 웹 브라우저와 같은 웹 플랫폼에서 제공하는 기능들의 집합으로, 자바스크립트 개발자가 웹 애플리케이션에서 사용할 수 있는 여러 인터페이스들을 제공합니다. 이를 통해 개발자들은 웹 페이지의 내용을 동적으로 변경하거나, 페이지 상호작용, 데이터 저장, 데이터 통신 등 다양한 기능을 사용할 수 있습니다.
Web API는 다음과 같은 기능을 제공합니다:
DOM (문서 객체 모델) 관련 API: 웹 페이지의 HTML 요소를 선택, 추가, 제거, 수정할 수 있게 해주는 API입니다. (예: getElementById, querySelector, appendChild, removeChild 등)XHR (XMLHttpRequest) 및 Fetch API: 서버와 데이터를 교환하고, 비동기 요청을 처리할 수 있는 API입니다.
이벤트 관련 API: 사용자 입력(키보드, 마우스), 타이머 설정, DOM 이벤트 등을 처리할 수 있는 API입니다. (예: addEventListener, setTimeout, setInterval 등)Web Storage API: 웹 브라우저에 데이터를 저장할 수 있는 로컬 스토리지와 세션 스토리지 API를 제공합니다.Geolocation API: 사용자의 현재 위치 정보를 얻을 수 있는 API입니다.
Web Workers API: 별도의 스레드에서 스크립트를 실행할 수 있는 멀티스레딩 기능을 제공하는 API입니다.Websockets API: 실시간 양방향 통신이 가능한 API로, 브라우저와 서버 간에 연결을 유지하고 데이터를 전송합니다.WebRTC API: 웹 브라우저 상에서 음성 및 비디오 통화 기능을 제공하는 API입니다.
이 외에도 많은 Web API들이 있으며, 웹 개발을 할 때 다양한 기능을 활용하여 사용자와의 상호작용 및 데이터 처리를 할 수 있습니다. 이들 API는 웹 애플리케이션을 더욱 풍부하게 만들어주고, 웹 개발의 기능 및 성능을 향상시킵니다.
위 설명에도 나와 있듯이 브라우저에서 제공하는 기능인데 자바스크립트 엔진과는 별도로 비동기 함수, 이벤트 API 등을 처리 하는 공간이 따로 있다.
자바스크립트는 브라우저 백그라운드에서 실행되는 Web API 를 통해서 비동기 작업을 수행한다.
즉 콜스택은 비동기 함수가 스택에 들어오면 직접 처리하는 것이 아니고 호출만 한 다음 Web API 에 비동기 함수의 처리를 맡기고 Web API 는 비동기 함수를 처리하고 나온 콜백 함수를 종류에 맞게 마이크로 태스크 큐 혹은 이벤트 큐에 넘기고 이벤트 루프는 이를 감지해서 콜스택이 비었을때 이런 콜백큐에 대기하고 있는 함수들을 콜스택으로 올려 처리하는 방식이다.
정리하자면
- 자바스크립트 엔진에서 코드를 실행하면서 동기 작업들은 콜 스택에서 처리된다.
- 비동기 작업(예: setTimeout, fetch, addEventListener 등)은 Web API 영역에서 처리된다.
- 비동기 작업이 완료되면 콜백 함수들은 마이크로태스크 큐 또는 이벤트 큐에 추가된다.
- 마이크로태스크 큐 가 이벤트 큐 보다 우선순위가 더 높다.
- 이벤트 루프는 콜 스택이 비어있을 때마다 마이크로태스크 큐와 이벤트 큐를 확인하고, 우선순위가 높은 마이크로태스크 큐의 콜백 함수를 콜 스택에 먼저 추가해 실행하고, 이벤트 큐의 첫 번째 콜백 함수를 콜 스택에 추가해 실행한다.
- 이 과정을 반복하여 자바스크립트는 비동기 작업을 처리한다.
- 이 과정을 Event Loop를 통해서 한다고 할 수 있다.
잘 이해가 안된다면
이 사이트에서 코드를 입력하고 동작을 확인 해보자
참고 블로그 : https://baeharam.netlify.app/posts/javascript/event-loop