[Javascript] 이벤트루프에 관해서,,,

여러 블로그를 참고하여 혹시나 도움이 될까 해서 정리해본 글 입니다.
보다 깊게 공부하기 위해서는 참조 링크를 더 읽어봐주세요!

이벤트 루프란?

우리가 JavaScript를 학습 시, Node.js의 이벤트 루프에 대해 접하게 된다.
주로 이를 접하는 시기는 비동기 처리를 공부하는 중 일 것이다.
이벤트 루프를 검색하면 각기 다른 내용이 설명되어 있는 경우가 많아서, 순차적으로 정리해보려 한다.

Javascript는 메인 스레드가 싱글 스레드 이기에 하나의 작업만을 처리할 수 있다.
때문에, setTimeOut, I/O와 같은 시간이 오래 걸리는 작업은 기다리지 않고 비동기 방식으로 처리 한다.

Node.js의 공식문서에는 아래와 설명한다.

이벤트 루프는 가능하다면 언제나 시스템 커널에 작업을 떠넘겨서 Node.js가 논 블로킹 I/O 작업을 수행하도록 해줍니다.
출처 - https://nodejs.org/ko/docs/guides/event-loop-timers-and-nexttick/

Blocking과 Non-Blocking이 궁금하다면? 아래를 참고해 주세요!
참고 - https://medium.com/@rpf5573/nodejs-blocking-vs-non-blocking-8f92f2b522a7

위에서 메인스레드가 싱글 스레드라고 설명했는데, 다른 스레드가 존재한다는 것일까??
살펴보자!!

우선, 인터넷에 가장 많이 설명 되어있는 방식이다.

• 1 - setTimeout ( WebAPI) 가 호출되면, call stack에 쌓인다.
• 2 - setTimeout의 콜백 run은 백그라운드에서 수행된다.
• 3 - 백그라운드에서 설정된 시간이 지나면, callback queue로 콜백 함수가 이동한다.
  • 구글링 시, callback queue, task queue, job queue, event queue 등 다양한 용어들이 나온다.
  • microtask queue에 관한 내용은 조금 이따 다룰 예정이다. 큰 흐름을 이야기 하고 있기에 callback queue로 칭하려 한다.
  • (확실하진 않지만, 검색을 하다보면 task queue는 event queue와 같은 의미로 쓰이고 있고, microtask queue는 microtask queue와 같은 의미로 쓰이고 있다.)
  • 출처 - https://cbw1030.tistory.com/351
• 4 - call stack이 비워지면, callback queue의 콜백을 call stack으로 보낸다.
• Loupe에서 해당 동작 방식을 눈으로 확인할 수 있다.
• 영상 설명 도 참고하면 좋다.

이 내용을 이해했다면, microtask queue라는 개념을 추가해서 이해할 수 있다.

위에서 callback queue 에는 task queue와 microtask queue가 포함되어 있다고 언급했었다.
microtask queue는 task queue보다 높은 우선순위를 갖는다.

출처 - https://velog.io/@xortm854/Javascript%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%8C%EC%95%84%EA%B0%88%EA%B9%8C-2%ED%8E%B8-Event-Loop%EB%9E%80

위의 그림 처럼 queue가 한개가 아니라는 것을 알 수 있는데, microtask queue에 있는 내용이 먼저 수행된다. microtask queue의 모든 task를 처리하고 task queue의 내용을 처리한다.

• Task Queue
  • setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O 등
• Microtask Queue
  • process.nextTick, Promise, Object.observe, MutationObserver

=> Promise의 콜백이 setTimeout의 콜백보다 먼저 수행된다.

• 여기 링크!!!!!!!! 에서 동작 방식을 자세히 확인 할 수 있다.
• 처음의 내용에서 queue가 한개가 아니라는 점, queue 마다 우선 순위가 다르다는 점이 추가되었다.