Macrotask 와 Microtask의 두 Queue 제어 비교

function getData(){
	fetch('https://jsonplaceholder.typicode.com/todos/1')
	.then(response => response.json())
	.then(({title}) => console.log(`음답: ${title}`))
}

function handleHeavyTask(bFetch){
	if(bFetch) getData(); //fetch 비동기 요청
	else console.log('지연없이실행') //코드의 실행 순서 보장 못함.
}

(function(){
	console.log('안녕하세요');
	handleHeavyTask(false);
	console.log('무거운 작업이 시작됐어요.');
})();

결과) 👇🏻 이것은 동기와, 비동기 코드가 동시에 실행될때 코드실행 순서를 보장하지 못하는 상황의 코드 입니다. 이런것은 동기와, 비동기 코드가 섞여 있을때 충분히 생길수 있습니다.

1) 안녕하세요
2) 지연없이실행
3) 무거운 작업이 시작됐어요.

👉🏻코드의 실행 순서를 보장

그러면 이제 코드의 실행 순서를 보장해주는 코드로 변경해보겠습니다.

function getData(){
	fetch('https://jsonplaceholder.typicode.com/todos/1')
	.then(response => response.json())
	.then(({title}) => console.log(`음답: ${title}`))
}

function handleHeavyTask(bFetch){
	if(bFetch) getData(); //fetch 비동기 요청
	else setTimeout(() => console.log('지연없이실행')); //코드의 실행 순서를 보장함.
}

(function(){
	console.log('안녕하세요');
	handleHeavyTask(false);
	console.log('무거운 작업이 시작됐어요.');
})();

setTimeout를 사용해서 지연코드를 추가하므로써 코드의 실행 순서를 보장해줄수 있는 코드로 변경 했습니다.

1) 안녕하세요
2) 무거운 작업이 시작됐어요.
3) 지연없이실행

👉🏻비동기처리 중에서도 우선순위를 정할수 있다.

그럼 비동기로 처리되는 코드중에서도 우선순위를 정할수가 있는데요.
queueMicrotask함수를 사용할면 됩니다.
queueMicrotask (사용 전)

function getData(){
	fetch('https://jsonplaceholder.typicode.com/todos/1')
	.then(response => response.json())
	.then(({title}) => console.log(`음답: ${title}`))
}

function handleHeavyTask(bFetch){
	if(bFetch) getData(); //fetch 비동기 요청
	else setTimeout(() => console.log('지연없이실행')); //코드의 실행 순서를 보장함.
}

setTimeout(() => console.log('또 다른 비동기 코드')); 

(function(){
	console.log('안녕하세요');
	handleHeavyTask(false);
	console.log('무거운 작업이 시작됐어요.');
})();

1) 안녕하세요
2) 무거운 작업이 시작됐어요.
3) 또 다른 비동기 코드
4) 지연없이실행

queueMicrotask (사용 후)

function getData(){
	fetch('https://jsonplaceholder.typicode.com/todos/1')
	.then(response => response.json())
	.then(({title}) => console.log(`음답: ${title}`))
}

function handleHeavyTask(bFetch){
	if(bFetch) getData(); //fetch 비동기 요청
	else queueMicrotask(() => console.log('지연없이실행')); //비동기로 처리되는 코드중에서도 우선순위를 먼저 실행
}

setTimeout(() => console.log('또 다른 비동기 코드')); 

(function(){
	console.log('안녕하세요');
	handleHeavyTask(false);
	console.log('무거운 작업이 시작됐어요.');
})();

1) 안녕하세요
2) 무거운 작업이 시작됐어요.
3) 지연없이실행
4) 또 다른 비동기 코드

 👉🏻Microtask Queue가 Macrotask Queue 보다 우선순위가 더 높다.

이게 가능한 이유는 다음과 같다. 브라우저에서 비동기 처리되는 엔지를 살펴보면
Microtask Queue가 일반적인 Macrotask Queue 보다 우선순위가 더 높습니다..!!

Microtask Queue가 모두가 비어져 있어야만 Macrotask Queue가 실행되는것을 확인 할 수 있습니다.!

Microtask Queue, Macrotask Queue 비교

👉🏻정리

이와 같이 비동기 중에서도 Microtask, Macrotask가 나눠져 있습니다.
참고로 Promise.then().then()에 전달된 콜백함수에도 이제 Microtask Queue에 들어가서 높은 우선순위에 적용되어서 먼저 실행이됩니다. 동시성 문제에 마주하셨을때 해법으로 잘 사용하면 좋겠습니다.!👍🏻✨✅