매크로 태스크 (Macro Task) 와 마이크로 태스크 (Micro Task) 란?

마이크로 태스크 (Micro Task) 와 매크로 태스크 (Macro Task)

• 자바스크립트에서 비동기 작업에 대해 공부하다 보면, 마이크로 태스크 (Micro Task) 와 매크로 태스크 (Macro Task) 라는 용어가 나온다.
• 둘 다 즉시 실행되지 않고 일단 대기 후에 실행되는 비동기 작업이라는 공통점이 있지만 둘은 다르게 처리된다.

마이크로 태스크 (Micro Task) 란?

• 현재 수행 중인 작업이 끝난 뒤에 이어서 실행될 작업 (콜백) 을 말한다.
  • 프로미스 핸들러에서 볼 수 있는 then(), catch(), finally() 와 같은 예시가 있다.
  • Node.js 에서 process.nextTick() 과 같은 메서드가 있다.
    • nextTick() 에서 tick 은 이벤트 루프를 한 번 반복하는 행위를 의미한다.
      • 시계바늘이 한번 똑딱 가는 소리처럼 표현했다고 한다.
  • MutationObserver 콜백도 마이크로 태스크 (Micro Task) 에 속한다.
• 먼저 들어온 작업을 먼저 실행한다. (FIFO)
  • 어떤 작업을 순차적으로 실행하고 싶을 때 유용하다.
• 콜스택에 실행할 것이 아무것도 남아있지 않은 경우에만 마이크로 태스크 큐에 있는 작업이 실행된다.
• catch() 는 마이크로 태스크 큐 끝에서 Promise 에러가 처리되지 못할 때 발생한다.
• 모든 Promise 동작은 Promise Job 이라는 큐에서 처리된다.
• 매크로 태스크 (Macro Task) 보다 실행 우선순위가 높다.
• UI 업데이트, 리소스 청소, 다른 비동기 작업 수행 등에 사용된다.

매크로 태스크 (Macro Task) 란?

• 일반적으로 콜스택의 작업이 끝난 후에 실행되는 작업을 말한다.
  • 이 말은 즉, 콜스택의 작업이 끝나지 않으면 매크로 태스크 (Macro Task)는 실행되지 않는다.
• 스케쥴된 순서대로 실행된다.
• 자바스크립트에서는 setTimeout, setInterval, setImmediate (Node.js), requestAnimationFrame, 그 외 I/O 연산들이 Macro Task 이다.
• 보통 콜스택 작업 뒤에 시간이 오래걸리는 UI 업데이트 혹은 다른 Blocking operations 과 같은 작업을 수행하기 위해 사용한다.
• 마이크로 태스크 (Micro Task) 보다 낮은 우선순위를 가지고 있다.
  • 매크로 태스크 (Macro Task) 와 마이크로 태스크 (Micro Task) 가 동시에 큐에 있다면, 마이크로 태스크 (Micro Task) 부터 실행된다.

마이크로 태스크 (Micro Task) 와 매크로 태스크 (Macro Task) 의 공통점

• 콜스택에 있는 작업이 완료된 후에 실행되는 비동기 작업이다.
  • 동시에 두 종류의 작업이 대기중이라면, 마이크로 태스크가 우선순위를 갖는다.
• 자바스크립트 메인 스레드 밖에서 실행되어야 할 내용을 담고 있는 경우가 많다.
  • UI 가 먹통이 되는 현상을 막기 위해서는 필수적이다.
    • 비동기 로드가 길어지면, UI 는 응답 불가능해진다.
• 웹,앱의 응답성을 높이기 위해 사용한다.

레퍼런스

https://ko.javascript.info/microtask-queue