자바스크립트는 싱글스레드 언어라는 이야기를 들어보셨을 것입니다. 이 이벤트 루프는 상당히 어려운 개념이기도 하며 자바스크립트 면접에 단골 질문이기도 합니다.
왜냐하면 자바스크립트 언어만 사용을 하는 것이 아니라 브라우저나 다른 플랫폼위에서 자바스크립트를 사용하는 경우가 있기 때문입니다. 만약 이벤트 루프를 모른다면 실행방법에 대한 오해가 생길 수도 있습니다.
alert('Hello') // Web API
console.log('Hi')
개발자도구에서 위 코드를 실행시켜보면 alert창을 끝낼 때까지 'Hi'는 콘솔창에 출력이 되고 있지 않는 것을 확인 할 수 있습니다.
한가지 코드를 더 살펴보도록 하겠습니다.
setTimeout(() => alert('Hello'), 1000)
console.log('Hi')
1초 후에 alert이 트리거 되서 발동이 되면 확인을 누른 시점에 hi가 출력이 될 것 같지만 실제로는 콘솔창에 'Hi'가 출력되고 alert창이 출력되는 것을 확인할 수 있습니다.
이를 이해하기 위해서는 자바스크립트와 브라우저가 실행되는 환경에 들어가는 이벤트 루프를 이해해야합니다.
자바스크립트는 엔진은 한 번에 한개의 코드만 실행할 수 있는 싱글스레드 언어입니다. 하지만 사용자가 사용하는 환경은 동시에 많은 작업이 들어오는 경우 비효율적입니다. 따라서 비동기방식으로 동시성을 지원하는 방법을 도입했으며 그것이 바로 이벤트 루프입니다.
이벤트 루프를 공부하기 전에 필요한 언어와 기본 배경을 정리해보도록 하겠습니다.
함수를 실행하면 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가 실행되는 순서를 시각화해 볼 수 있겠습니다.
또한 아래 유트브 영상도 더불어 공부를 해보기를 권장드립니다.