이벤트 루프 와 마이크로태스크큐 와 매크로 태스크 큐

자바스크립트의 특징 중에 단일 스레드라는 특징이 있습니다

단일 스레드랑 한 번에 하나의 작업만을 처리할 수 있다는 뜻입니다

하지만 실제로 자바스크립트로 코딩을 하고 구동을 해보면 여러 작업을 이 동시에 처리되는 것을 확인할 수 있습니다

 

그러면 단일 스레드인 자바스크립트가 어떻게 동시성을 구현했을까?라는 의문점이 생기게 됩니다

오늘은 그 의문점을 풀 수 있는 자바스크립트에 이벤트 루프와 마이크로 태스크 큐, 매크로 태스크 큐를 알아보도록 하겠습니다

 

이벤트 루프를 알기 전 자바스크립트 엔진에 구성에 대해서 먼저 알아보도록 하겠습니다

 

자바스크립트 엔진

자바스크립트는 위에서 설명했듯이 단일 스레드로 구성되어있는 언어입니다

즉 콜백을 처리할 공간이 한 가지만 존재한다는 뜻입니다

아래 사진에 JS 부분을 보게 되면 자바스크립트 엔진은 메모리 힙과 콜 스택으로 구분이 되어있습니다

Memory Heep : 코드에서 변수 나 함수를 선언하면 해당 공간에 적재가 되고 메모리가 할당되는 곳입니다

Call Stack : 실제 코드들이 실행되는 공간입니다 console.log 나 setTimeout 같은 코드들이 실행되는 공간입니다

콜 스택은 스택 구조이기에 가장 늦게 들어온 이벤트가 가장 먼저 실행이 되는 구조입니다

 

이벤트 루프

위에서 제가 CallStack은 코드가 실행되는 공간이라고 설명을 드렸습니다 즉 console.log 같은 코드들 실행되는 공간인데

만약 아래와 같은 코드를 실행하면 어떻게 될까요?

console.log("a");
setTimeout(()=>{
    console.log("b");
},1000)
console.log("c");

다른 언어에서 위와 비슷한 코드를 작성을 한다면 "a"가 출력되고 1초 뒤에 "b"가 출력되고 바로 다음 "c"가 출력된다고 생각할 수도 있습니다 그러나 자바스크립트에서 실행을 하게 되면 "a", "c"가 출력이 되고 1초 뒤에 "b"가 출력이 됩니다

 

이 부분을 이해하기 콜 스택에 위에 코드들이 어떻게 적재가 되었는지를 알아야 합니다

우선 처음 부분인 console.log("a")가 실행되면 콜 스택에 console.log("a")가 들어오게 됩니다

그다음 중요한 setTimeout 이 있는데 자바스크립트에서는 setTimeout 같은 비동기적으로 동작을 하거나  Ajax, 리스너 등과 같은 이벤트들을 WEB API라는 곳으로 보내버립니다

즉 setTimeout 같은 비동기적으로 동작해야 되는 코드들을 WEBAPI로 보내버리고 그다음 바로 console.log("c")가 들어와서 실행하게 됩니다

 

그러면 WEBAPI로 보내진 setTimeout는 어디로 갈까요?

WEBAPI로 보내진 코드들은 WEBAPI가 Callback Queue로 다시 보냅니다

쉽게 생각하면 대기열로 보냈다고 생각해주시면 됩니다

 

그러면 다시 의문이 듭니다 콜백 큐로 보내진 코드들은 언제 실행이 될까요?

이때 바로 이벤트 루프가 동작하게 됩니다

이벤트 루프는 CallStack이 비어있을 때 콜백 큐에서 코드들을 가지고 와서 콜 스택에 넣어주는 자바스크립트에 루프입니다

아래 그림처럼 콜 스택이 비어있을 때 큐에서 하나씩 가져오는 것을 볼 수 있습니다

 

 

마이크로 태스크 큐 와 매크로 태스크 큐

우선 아래 코드를 한번 보도록 하겠습니다

console.log("a");
setTimeout(()=>{
    console.log("b");
},0)
Promise.resolve().then(()=>{
	console.log("d")
})
console.log("c");

음.. 위에서 배운 대로 라면 a -> c -> b -> d 순서대로 출력하지 않을까?라는 생각을 하게 됩니다 그러나 위에 코드를 실제로 실행시켜보면 a -> c -> d -> b 순으로 출력되는 것을 확인할 수 있습니다 분명 코드가 더 아래 있으니 Promise가 나중에 실행이 되어야 하는지 먼저 실행이 되었습니다

 

이러한 원인은 콜백 큐를 자세히 뜯어보게 되면 콜 백큐 내에 마이크로 태스크 큐 와 매크로 태스크 큐로 구분이 되어있습니다

위와 같이 실행된 원인은 이벤트 루프는 마이크로 태스크 큐에 있는 코드들부터 콜백 스택으로 넣어주는 특징을 가지고 있습니다

 

또한 WEBAPI에서 큐로 보낼 때 마이크로 태스크 큐 와 매크로 태스크 큐를 구분하여 보내게 됩니다

그러면 어떠한 코드들이 마이크로 태스크 큐에 들어가게 될까요?

 

마이크로 태스크 큐 함수들

procress.nextTick,Promise,Object.observe,MutationObserver

 

매크로 태스크 큐 함수들

setTimeOut,setIterval,setImmediate,requestAnimationFrame,I/O,UI 렌더링

 

setTimeout, setInterval과 같은 함수들은 매크로 태스크 큐에 들어가게 되고, Promise, nextTick과 같은 함수들은 마이크로 태스크 큐에 들어가게 됩니다

 

이벤트 루프는 마이크로 테스트 큐 를 먼저 확인하기 때문에 Promise부터 실행시키고 그다음 setTimeout를 실행시키게 됩니다