이벤트 루프에 대해 검색해 보면 싱글 스레드에 대해 얘기한다.
싱글 스레드는 멀티 스레드가 아니므로 하나의 작업만 수행할 수 있다.
다시 말해 어떤 작업 목록이 있다면 순차적으로 처리하는 방식이 싱글 스레드이다.
브라우저에서 보이는 작업들이 싱글 스레드이지만 동시에 처리되는 것 같은 이유는 컴퓨터의 연산 속도가 매우 빠르므로
동시에 돌아가는 것처럼 착각하고 있는 것이다.
궁금증
앞에서 설명한 내용은 간단해서 이해가 빨랐다.
그런데 다음과 같은 고민은 쉽게 풀리지 않았다.
- 싱글 스레드인데 네트워크 작업이 처리되는 동안 다른 작업들은 어떻게 할까?
- 마찬가지
setInterval()같은 함수를 사용했을 때 시간을 재고 있는 동안 다른 작업을 어떻게 처리하지..?
지금 보면 쉽게 생각하겠지만 한창 비동기에 대해 공부할 때 엄청나게 혼란이 왔었다.
그래서 나와 같은 생각을 하는 사람이 있다면 이 글을 읽고 궁금증을 해결할 수 있으면 좋을 것 같아 작성했다.
시나리오
아주 간단한 예제를 가지고 이벤트 루프가 어떻게 동작하는지 설명하겠습니다.
- 해당 버튼을 클릭하면
- API 요청을 한다.
- 버튼의 텍스트가 '로딩 중'으로 변경된다.
- API 응답을 받으면서 버튼의 텍스트가 '완료'로 변경된다.
button.addEventListener('click', function() { // 1번
requestAjax(function() { // 2번
button.innerHTML = "완료"; // 4번
});
button.innerHTML = "로딩 중"; // 3번
});이벤트 큐
버튼을 클릭하면 위 그림에 보이는 작업 Queue에 이벤트(작업 n)가 적재된다. 1번 작업이다.
이벤트 루프는 할 일을 처리하다가 버튼 클릭 이벤트를 작업 Queue에서 꺼내면 클릭 이벤트를 처리하면서 해당 이벤트에 등록된 콜백을 실행한다.
콜백 안에 있는 작업은 2번과 3번 작업이다.
이때 2번 작업은 네트워크 작업이므로 이벤트 루프는 이 작업을 네트워크 요청 Queue에 적재시킨다.
2번 작업은 네트워크 요청 Queue로 보냈으니 3번 작업을 처리한다.
시간이 지나 네트워크 엔진이 요청 Queue에 쌓인 작업을 처리하다가 2번 작업인 AJAX 요청을 꺼내 처리한다.
처리와 동시에 이벤트가 발생하면서 4번 작업을 작업 Queue에 등록한다.
이벤트 루프는 할 일을 하다 4번 작업을 꺼내 처리한다.
이 처럼 EventLoop는 작업 Queue에 있는 작업만 처리하는 것이지 실질적인 네트워크 작업은 처리하지 않는다.
앞에서 setInterval() 함수를 언급했는데
이 부분도 이벤트 루프에서 시간을 재면서 처리하는 방식이 아닌 브라우저에서 제공되는 기능을 사용하는 방식이다.
