[TIL] 이벤트 루프
📌 이벤트 루프(Event Loop)
이벤트 발생시 호출되는 콜백 함수들을 관리하여 콜백(태스크큐, 이벤트큐)에 전달하고, 콜스택이 비어있을 때 콜백큐의 첫번째 콜백을 콜스택으로 보내준다.
-> 자바스크립트의 동시성(concurrency)을 지원
💡 왜? 싱글스레드 기반의 언어인 자바스크립트가 많은 작업을 동시에 처리할 수 있도록 해주기 위함.
💡 싱글스레드: 한번에 하나의 작업만을 처리할 수 있음.
📌 자바스크립트 엔진
메모리 힙(Memory Heap)과 콜스택(Call Stack)으로 구성됨.
💡 메모리 힙: 메모리 할당(선언한 변수, 함수 등이 담겨 있음)이 일어나는 영역
💡 콜스택: 코드가 실행됨에 따라 호출 스택이 쌓이는 영역
📌 런타임 환경
자바스크립트에는 이벤트 루프가 없다. 비동기 요청은 자바스크립트 엔진을 구동하는 런타임 환경(브라우저 또는 Node.js)이 담당.
💡 런타임 환경이 제공하는 것
- Web APIs (DOM, AJAX, Timeout..)
- Event Loop
📌 과정
-
코드가 스택에 쌓이고 실행되면 자바스크립트 엔진은 Web API에 비동기 작업(Ajax 요청, setTimeout, 이벤트리스너 등..)을 맡긴다.
-
Web API는 자신에게 주어진 작업을 수행하고, 콜백함수를 태스크큐(콜백큐)에 준다.
-> 콜백큐(Callback Queue): Web API의 콜백함수들이 대기하는 큐 -
이벤트루프는 콜스택에 쌓인 일이 없을 때 태스크큐(콜백큐)에서 대기하고 있는 콜백함수를 스택에 넘겨준다.
-
콜스택에 쌓인 콜백함수가 실행되고, 이는 콜스택에서 제거된다.
📌 예제
console.log('Hi')
setTimeout(function sayHiAgain(){
console.log('Hi, again')
}, 2000)
console.log('Bye')
-
Call Stack에 console.log('Hi')가 추가되고, 실행된 뒤 Call Stack에서 제거된다.
-
setTimeout(function sayHiAgain(){...})이 Call Stack에 추가되고, 실행되면서 Web API에 sayHiAgain의 타이머가 생성된다. 그리고 setTimeout(sayHiAgain(){...})는 Call Stack에서 사라진다.
-
Call Stack에 console.log('Bye')가 추가되고, 실행된 뒤 Call Stack에서 제거된다.
-
2초뒤, 타이머가 종료되고 비어있는 Callback Queue에 sayHiAgain을 보낸다.
-
Event Loop는 sayHiAgain을 Callback Queue에서 Call Stack으로 보낸다.
-
sayHiAgain은 실행되고, console.log('Hi, again')은 Call Stack에 추가된 뒤 실행되고, Call Stack에서 제거된다.
-
sayHiAgain이 Call Stack에서 제거된다.
📌 참고자료
💡 How JavaScript works: an overview of the engine, the runtime, and the call stack
💡 What the heck is the event loop anyway? | Philip Roberts | JSConf EU
Author And Source
이 문제에 관하여([TIL] 이벤트 루프), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jamieecode/TIL-이벤트-루프저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)