이벤트 루프의 동작 원리
1. Intro
자바스크립트는 싱글스레드 언어라는 이야기를 들어보셨을 것입니다. 이 이벤트 루프는 상당히 어려운 개념이기도 하며 자바스크립트 면접에 단골 질문이기도 합니다.
왜냐하면 자바스크립트 언어만 사용을 하는 것이 아니라 브라우저나 다른 플랫폼위에서 자바스크립트를 사용하는 경우가 있기 때문입니다. 만약 이벤트 루프를 모른다면 실행방법에 대한 오해가 생길 수도 있습니다.
alert('Hello') // Web API
console.log('Hi')개발자도구에서 위 코드를 실행시켜보면 alert창을 끝낼 때까지 'Hi'는 콘솔창에 출력이 되고 있지 않는 것을 확인 할 수 있습니다.
한가지 코드를 더 살펴보도록 하겠습니다.
setTimeout(() => alert('Hello'), 1000)
console.log('Hi')1초 후에 alert이 트리거 되서 발동이 되면 확인을 누른 시점에 hi가 출력이 될 것 같지만 실제로는 콘솔창에 'Hi'가 출력되고 alert창이 출력되는 것을 확인할 수 있습니다.
이를 이해하기 위해서는 자바스크립트와 브라우저가 실행되는 환경에 들어가는 이벤트 루프를 이해해야합니다.
2. 이벤트 루프란?
자바스크립트는 엔진은 한 번에 한개의 코드만 실행할 수 있는 싱글스레드 언어입니다. 하지만 사용자가 사용하는 환경은 동시에 많은 작업이 들어오는 경우 비효율적입니다. 따라서 비동기방식으로 동시성을 지원하는 방법을 도입했으며 그것이 바로 이벤트 루프입니다.
이벤트 루프를 공부하기 전에 필요한 언어와 기본 배경을 정리해보도록 하겠습니다.
2-1 언어 정리
- 프로세스 : 프로그램이 메모리에 할당되는 것입니다.
- 스레스 : 프로세스 내의 실행단위입니다. 프로세스 안에 수많은 스레드가 멀티스레드로 동작할 수 있습니다.(ex)소리출력, 화면출력, 입력 등)
- 스택: 자료구조중 하나로 Last In First Out구조를 가집니다.(ex)모바일 앱-뒤로가기, 수건쌓기 등)
- 큐: 자료구조중 하나로 First In First Out구조를 가집니다.(ex) 자판기-선입선출)
2-2 JS Engine
- Heap : 구조화 되어 있지 않은 단순한 영역(객체가 할당)
- Call Stack : 함수 처리를 저장하는 영역
- WEB API : 웹을 만들때 사용할 수 있는 모든 인터페이스(mouse event, click event 등)
- Task Queue : Web API에서 비동기 작업들이 실행된 후 호출되는 콜백 함수들이 대기
2-3 Event Loop
-
함수를 실행하면
Call Stack에 함수들이 쌓이게 됩니다. (해당 함수는Call Stack의 상단에 위치하게 됩니다. 함수의 실행이 끝나는 경우 해당함수를 호출 스택에서 제거를 합니다.) -
setTimeout과 같은 비동기작업은 JS엔진이WEB API에게 위임을 합니다. 이렇게 비동기 작업이 수행이 되면WEB API에서 자바스크립트 함수를 호출하게 됩니다. -
호출된 자바스크립트 함수는
Task Queue에서 대기를 하다가Call Stack이 비어있을 때 이벤트루프를 통해Call Stack으로 넘어가게 됩니다.
즉 자바스크리트가 함수를 실행하고 호출하고 없어지는 영역은 콜스택에서 이뤄지며, setTimeout과 같은 WEB API는 WEB API공간에서 위임된 형태로 있게 됩니다. 또한 setTimeout가 처리가 되면 그러한 콜백함수들은 Task Queue에서 쌓여 대기를 하다가 Call Stack이 비는 순간 순차적으로 들어오게 되는 것입니다.
아래 페이지를 통해 Event Loop가 실행되는 순서를 시각화해 볼 수 있겠습니다.
또한 아래 유트브 영상도 더불어 공부를 해보기를 권장드립니다.
