📚 학습 범위

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

📆 학습 날짜

2023 / 12 / 23 (토)

👨🏻‍💻 학습 후 알게 된 내용

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

태스크 큐와 다르게, 마이크로 태스크 큐라는 것도 있다.
이벤트 루프는 하나의 마이크로 태스크 큐를 갖고 있는데, 기존의 태스크 큐와는 다른 태스크를 처리한다고한다. 여기에 들어가는 마이크로 태스크에는 대표적으로 Promise가 있다. 이 마이크로 태스크 큐는 기존 태스크 큐보다 우선권을 갖는다고한다.
즉, setTimeout과 setInterval은 Promise보다 늦게 실행된다.
마이크로 태스크 큐가 비어있을 때 까지 기존 태스크 큐의 실행은 뒤로 미루어진다고한다.

<script>
function foo() {
console.log('foo')
}

function bar() {
console.log('bar')
}

function baz() {
console.log('baz')
}


setTimeout(foo , 0)

Promise.resolve().then(bar).then(baz)

</script>

예제 코드를 실행하면 bar , baz , foo 순으로 실행된다.
확실히 Promise가 우선권이 있음을 알 수 있다.
각 태스크에 들어가는 대표적인 작업은 다음과 같다.

• 태스크 큐 : setTimeout , setInterval , setImmediate

• 마이크로 태스크 큐 : process.nextTick , Promises.queueMicroTask, MutationObserver

  그렇다면 렌더링은 언제 실행 되는것일까

  태스크 큐를 실행하기에 앞서 먼저 마이크로 태스크 큐를 실행하고,
  이 마이크로 태스크 큐를 실행한 뒤에 렌더링이 일어난다고한다.
  각 마이크로 태스크 큐 작업이 끝날 때마다 한 번씩 렌더링할 기회를 얻게 된다.

결론적으로 동기 코드는 물론이고 마이크로 태스크 또한
마찬가지로 렌더링에 영향을 미친다는 것이다.
따라서 만약 특정 렌더링이 자바스크립트 내 무거운 작업과 연관이 있다면
이를 어떤 식으로 분리해서 사용자에게 좋은 애플리케이션 경험을
제공해 줄지 고민해 보아야 한다.

🎯 정리

자바스크립트 환경에서 비동기 처리가 어떻게 이루어지는지 살펴보았다.
자바스크립트 코드를 실행하는 것 자체는 싱글 스레드로 이루어져서 비동기를 처리하기 어렵지만 자바스크립트 코드를 실행하는 것 이외에 태스크 큐 , 이벤트 루프 , 마이크로 태스크 큐 , 브라우저/Node.js API 등이 적절한 생태계를 이루고 있기 때문에 싱글 스레드로는 불가능한 비동기 이벤트 처리가 가능해진 것이라고한다.

➡️ 다음 글에서는 리액트에서 자주 사용하는 문법에 대해 살펴보자.