macrotask, microtask, event... what the..?

자바스크립트 이벤트 루프에서 마이크로 태스크, 매크로 태스크란?

우선, 자바스크립트의 이벤트 루프를 설명하고자 합니다. 참고

자바스크립트의 동작 원리: 

싱글 스레드인 자바스크립트는 멀티태스킹을 못합니다.

멀티태스킹을 하기 위해서 Node.js나 브라우저, 동시성 업무가 가능한 프로그램을 호출해야 합니다.

이때 필요한 Web API를 통해 동시성 프로그램(node.js / browser) 호출합니다.

여기서 Web API에는 (Ajax, Events(onclick,onscroll...) , Timing(setTimeOut, setInterval)) 등이 있습니다.

Web API는 이것을 이벤트큐 또는 마이크로테스크큐에 넣어놓습니다. 

여기서 이벤트루프가 콜스텍에 자리가 비었나 확인합니다.

자리가 비었다면, 이벤트큐 또는 마이크로테스크큐에 있는 태스크들을 하나씩 콜스텍으로 넣어줍니다.

콜스텍은 일을 처리합니다.

---

매크로태스크란?

이벤트큐에 있는 일반적인 비동기 태스크입니다. Timing, Events

 

마이크로 태스크란?

마이크로 테스트 = 프로미스 잡

Promise 콜백함수 (.then/catch/finally)  & Async  (await)

---

각 태스크의 업무 방식 

 

마이크로 태스크 :

JS - function - WebAPI  ⇢ 마이크로태스크큐  ⇢ Event Loop  ⇢ Call stack ⇢ done.

 

매크로 태스크 :

JS - function - WebAPI  ⇢ 이밴트큐(매크로태스크큐)  ⇢ Event Loop  ⇢ Call stack ⇢ done.

 

동기 :

JS - function  ⇢ callStack  ⇢ done.

---

우선순위 :

동기 > 마이크로테스크 > 매크로테스크 

  setTimeout(() => { console.log('macrotask 1'); }, 0); 
  
  Promise.resolve()                         
    .then(() => { console.log('microtask 1'); })
    .then(() => { console.log('microtask 2'); })
    
  console.log('general stack')                      

   //'start'
   //'microtask 1'
   //'microtask 2'
   //'macrotask 1'

---

ps. 비동기 함수를 사용할 경우 주의해야 할 점 : 

A : 동기 함수

B : 비동기 함수

A안의 B를 실행 했을 경우, B는 이벤트 루프로 이벤트 큐에 들어가게됩니다.

그전에 A는 자신의 업무를 다했으니 콜스텍에서 사라집니다.

이렇게 A와 B는 분리됩니다.

B가 돌아왔을 땐, A와 별개의 함수로 인식되어버리니 A에서 try catch를 한다한들 B의 에러를 잡지 못합니다.

B에서 만약 서버와의 통신이 있었다면, B안에서 try catch를 해주어야 그 에러를 잡을 수 있게 됩니다.

콜백에러를 통해 확실히 에러를 잡긴 해야하지만 .. (이해X)