마이크로태스크?

 Promise를 사용하다 보면, then/catch/finally의 콜백은 비동기적으로 호출 된다는 것을 알 것이다.

 아래와 같이 바로 시행 되는 코드라고 해도 말이다.

window.addEventListener('', () => console.log('test event'))
setTimeout(() => { console.log('setTimout') })
Promise.resolve().then(() => console.log('promise then'))
console.log('end')

 일단 코드를 보니, Promise의 then과 setTimout이 같은 비동기더라도, Promise then이 먼저 호출 되는 것을 알 수 있다. 뭐 물론, 이런식으로 딴지를 걸 수 있다. setTimout과 .then이 순서가 없지만, setTimeout의 타이머를 확인하느라 실행이 늦은 걸 수 있지 않냐.

 그러면 코드를 개선해서 가정을 확인해보자.

console.log('start')
setTimeout(() => { console.log('setTimout') })

const pr = Promise.resolve()

pr.then(() => {
  pr.then(() => console.log('promise then in promise then prev start'))
  console.log('promise then start')
  const cur = new Date()
  while (new Date() - cur < 1000) {}
  console.log('promise then end')
  pr.then(() => console.log('promise then in promise then after end'))
})
console.log('end')

 결과가 위처럼 나왔다. 만약에 .then과 setTimeout이 같은 방식으로 해소되는 부분이라면, 최소 "promise then in promise then after end" 보다는 "setTimout" 로그가 먼저 작성되어야 한다.

 자바스크립트 런타임?

 이 주제로 위와 같은 이미지를 본적이 있을 것이다. 이 그림에 대한 설명을 보면서 이벤트 루프는 스택에 현재 실행 중인 함수가 없으면 태스크 큐에서 작업 하나를 스택에 올려놓아 실행 하고, 일련과정을 반복한다. 뭐 이런식으로 설명 하는 것을 본적 있을 것이다.

 이벤트 루프?

 이벤트 루프는 일단 자바스크립트에서만 사용하는 개념은 아니다. 다른 환경에서도 비동기 처리를 위하여, 사용되는 개념이며,

 이벤트 루프는 먼저 이벤트 큐에서 이벤트를 가져온다. 이벤트 큐는 비동기적으로 발생한 이벤트를 저장하는 곳으로, 이벤트가 발생하면 이벤트 큐에 저장된다. 그 다음 이벤트 루프는 이벤트를 처리하기 위해 이벤트 처리기(콜백 함수)를 호출하게 된다.

 이벤트 큐에 이벤트가 없으면 이벤트 루프는 대기 상태에 들어가고, 이벤트 큐에 이벤트가 추가될 때까지 기다린다.

 mdn에 있는 코드를 보면 아래와 같다.

while (queue.waitForMessage()) {
  queue.processNextMessage()
}

<<https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop#%EC%9D%B4%EB%B2%A4%ED%8A%B8_%EB%A3%A8%ED%94%84>>

 뭐 아주 간단한 코드이다.

 자바스크립트는 단일 스레드 모델이기 때문에, 하나의 코드 실행이 끝날 때까지 다른 코드의 실행이 불가능하다. 이러한 블로킹 문제를 해결하기 위해 이벤트 루프를 사용하여 비동기적으로 실행될 코드를 큐에 넣고, 이벤트 처리기가 실행되면 실행하게 된다. 이를 통해 자바스크립트는 블로킹 없이 비동기적으로 코드를 실행할 수 있게 된다.

다중 스레드를 지원하였다면, 다른 방식으로도 논블로킹을 지원 할 수 있었을 것이다. 시간이 오래 걸리는 네트워크 io는 스레드를 열어서 처리하고, 데이터의 표현정도에만 메인 스레드를 사용 하는 방식 처럼 말이다.

 마이크로태스크

 일단 이벤트 루프 소개 말고, 어쨋든 왜 "setTimout"이 늦게 실행 되었는지 알아보자.

 이벤트 루프는 다음을 반복한다.

 1. 매크로태스크큐에서 가장 오래된 태스크를 꺼내서 실행시킨다.
 2. 마이크로태스크 큐에 있는 모든 태스크를 실행시킨다.
 3. 렌더링 작업을 실행한다.
 4. 매크로 태스크 큐에 새로운 매크로 태스크가 나타날 때까지 대기한다.
 5. 1번으로 돌아간다.

console.log('start')
setTimeout(() => { console.log('setTimout') })

const pr = Promise.resolve()

pr.then(() => {
  pr.then(() => console.log('promise then in promise then prev start'))
  console.log('promise then start')
  const cur = new Date()
  while (new Date() - cur < 1000) {}
  console.log('promise then end')
  pr.then(() => console.log('promise then in promise then after end'))
})
console.log('end')

 결국 코드가 실행 되는 순서는 이와 같다.

 1. 'start’를 출력한다.
 2. setTimeout 함수가 호출되어 타이머가 설정된다. 이 타이머는 나중에콜백 함수를 실행하기 위해 Web API에 의해 처리된다 
 3. Promise.resolve()가 호출되어 즉시 resolve된 Promise 객체 pr이 생성된다.
 4. pr.then(...)이 호출되어 첫 번째 then 핸들러가 등록된다.
 5. 'end’를 출력한다.
 6. 이벤트 루프는 마이크로태스크 큐에서 대기 중인 작업을 찾습니다. 여기서 첫 번째 then 핸들러가 발견되고 실행된다.
 7. 첫 번째 then 핸들러 내부에서 두 번째 then 핸들러와 세 번째 then 핸들러가 등록된다.
 8. console.log('promise then start')가 실행되어 'promise then start’를 출력한다.
 9. while 루프는 약 1초 동안 실행된다.
 10. 'promise then end’를 출력한다.
 11. 첫 번째 then 핸들러의 나머지 부분이 완료된 후, 이벤트 루프는 다시 마이크로태스크 큐에서 대기 중인 작업을 찾는다. 여기서 두 번째 then 핸들러와 세 번째 then 핸들러가 발견되고 순서대로 실행된다.
 12. 'promise then in promise then prev start’를 출력한다.
 13. 'promise then in promise then after end’를 출력한다.
 14. setTimeout()의 콜백 함수인 () => { console.log('setTimout') } 가 태스크 큐에서 대기하다 이벤트루프에 의해 call stack으로 옮겨져서 마지막으로 'setTimout'을 출력한다.

 아마도, 2번에서 setTimeout을 실행하는 순간 매크로태스크에 등록 되게 될 것이다. console.log('end')가 실행 된 이후에, 당연 콜스택은 비어있을 것이다. 그래서 이벤트 루프의 실행 순서를 보면 다음 매크로태스크인, setTimeout의 콜백을 실행 해야 한다고 오해 할수도 있다.

 하지만, 그렇게 생각하지말고, console.log('end')가 끝나고 나서의 상태는
 2. 마이크로태스크 큐에 있는 모든 태스크를 실행시킨다.

 2번 상태라는 것이다. 사실 저 코드 덩어리 자체가 매크로태스크라고 보아야 한다.