[Javascript] 이벤트 루프 Macro Task Queue & Micro Task Queue (매크로큐, 마이크로 큐)

위 사진은 자바스크립트의 이벤트루프의 동작 원리를 보여주는 사진이다.

 

이 때 Callback Queue는 하나의 큐 처럼 보이지만 실제로는 여러 큐로 나눠져 있다.

그 중 매크로 태스크 큐와 마이크로 태스크 큐에 대해 알아보려고 한다.

콜백 큐는 위 사진과 같이 매크로 태스크 큐와 마이크로 태스크 큐로 나뉘게 되는데 나누는 기준은 함수의 종류에 따라 나뉘게 된다.

 

Macro Task Quque

• setTimeoutm setInterval, setImmediate ...

Micro Task Queue

• Primise callback, process, nextTick, queueMicrotask, await ...

함수 종류에 따라 콜백 함수들이 큐에 들어갔다면 이벤트 루프가 함수를 내보내는 우선순위는

• (높음) 콜스택 > 마이크로 태스크 > 매크로 태스크 (낮음)

순서로 이루어지게 된다.

 

결과적으로 함수들의 실행 흐름을 사진으로 보자면

https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke

위와 같은 흐름으로 이벤트루프에서 함수를 처리하게 된다.

 

ex)

    console.log('start!'); // (A)

    setTimeout(()=> console.log('setTimeout')); // (B)

    Promise.resolve()
    .then(()=> console.log('Promise One')) // (C)
    .then(()=> console.log('Promise Two')); // (D)

    console.log('end!'); // (E)

위 함수를 실행 시키게 된다면

 

 

위와 같은 결과를 얻을 수 있는데 우선순위에 따라 처리가 된 부분을 볼 수 있다.

 

동기 함수인 (A), (E)가 우선적으로 실행 -> 마이크로 큐 (C), (D)의 실행 -> 매크로 큐 (B) 실행 -> 종료

 

순서로 함수가 처리 된 것을 볼 수 있다.

 

 

간단하게 내용을 정리하자면

• 태스크 큐의 종류는 매크로 큐, 마이크로 큐 로 나뉜다.
• 작업에 대한 우선순위는 동기작업(콜 스택) > 마이크로 큐 > 매크로 큐 순서 이다.