2022-01-08

예전에 프론트엔드 분야에서 잘나가는 친구한테 기술 질문 몇 개 해달라고 했었는데

그 때 나온 질문 중 하나가 마이크로 태스크큐와 매크로 태스크큐의 차이에 대한 질문이었다.

당시 나는 태스크큐가 더 세분화될 수 있는 거였는지 몰랐었고

찾아봤더니 동작 방식이 다르고, 함수에 따라 나뉜다고 나와있었다.

그 내용은 다음과 같다.

• 매크로 태스크 큐의 작업보다 먼저 실행
• 큐에 새로운 작업이 들어오더라도 큐가 빈 상태가 될 때까지 계속해서 실행 | - requestAnimationFrame, I/O, UI rendering, setTimeout, setInterval, setImmediate
• 마이크로 태스크 큐의 작업들이 모두 끝난 후 실행
• 도중에 큐에 들어온 새로운 작업은 다음 이벤트 루프가 실행될 때까지 실행하지 않음 |

……

저 표는 나중에 보자. 개발자는 코드로 이야기한다.

다음 코드를 보고 결과를 예상해보자. /api에 요청하여 받는 응답은 'data!!' 라는 문자열이라 가정한다.

function main() {
    console.log("start");
    
    setTimeout(function () {
    	console.log("start api");
        fetch("/api").then(function (response) {
            setTimeout(function () {
                console.log(response.data)
            }, 0);
        });
        console.log("end api");
    }, 0);
    
    console.log("end");
}

main();

1. 스크립트를 실행하는 작업이 먼저 매크로 태스크 큐에 추가되고, 이벤트 루프는 이 작업을 먼저 실행한다.