면접관님: 메세지 큐와 이벤트루프가 뭔지 아시나요? (+ 유투브)

네. 압니다.

 

https://youtu.be/8AevEF4hOg8

 

나의 언어로 풀어본 최종 답변

 

이는 자바스크립트 동작원리에 관련이 있다고 말할 수 있습니다. 흔히 자바스크립트는 single thread라고 말하는데요, 이는 우리의 코드를 실행시켜주는 Stack이라는 공간이 단 하나뿐이고, 코드를 한번에 한줄씩만 순차적으로 실행시킨다는 것을 의미합니다. 이를 ‘동기적'이라고 표현하기도 하죠.

 

그런데 setTimeout같은 코드를 내 코드의 중간에 넣었다고 가정했을 때, 뒷사람들 다 기다리게 하면서 setTimeout함수가 실행되기를 기다릴 수는 없잖아요? 그래서 잠깐 대기실과 같은 역할을 하는 web APIs로 보내게 됩니다. 그곳에서 기다리다가 설정한 시간이 다 지나게 되면 바로 Stack에서 실행될 것 같지만! 그렇지 않고 Call back queue에 줄을 스게 됩니다. 이곳에서는 대기가 끝난 코드들이 차례대로 줄을 서게 되죠. 여기서 event loop가 이 줄서있는 함수들을 순서에 맞춰 Call Stack에 할당해주는 역할을 하는 것입니다. 여기서 중요한 점은 Stack이 비어있을때만 올려보낸다는 것입니다.

 

이렇게 자바스크립트는 본디 한 코드가 끝나야 그 다음 코드가 시작되는 동기적인 언어이지만 앞서 말한 일련의 과정들을 거치면서 마치 여러코드가 동시에 실행되는것처럼 비동기적인 처리가 가능하게 되는 것 입니다. Ajax, Dom, setTimeout 등이 비동기적으로 처리되는 대표적인 함수라고 할 수 있습니다.

 

 

 

자바스크립트 동작 원리를 알아야 함.

 

일단 우리의 코드를 실행해주는곳이 Stack이라는 공간인데, 특징은 하나밖에 없고, 코드를 한 줄 한 줄 실행시켜준다. 그래서 자슨 보통 single threaded language 라고 부른다.

느낌 알잖아? 선입선출.

그런데 setTimeout같은 코드는 바로 실행을 할 수 없는 코드인데, 그때까지 뒷사람들 다 기다리게할건가? 아니지 않나. 그래서 잠간 대기실로(Web APIs) 보낸다. 이렇게 제껴놓는 코드들이 정해져있는데,

: Ajax 요청코드, Dom , setTimeout등이 있다.

 

이런 single threaded의 특성(동기, Synchronous)은 call back queue를 사용한다면 비동기적(Asynchronous)으로 실행하게 해줄 수있다. 즉 뒷사람을 막지 않고 병렬적으로 일이 진행된다는 소리다.

 

대기실에서 따르릉 setTimeout시간 다됬는데요? 라는 신호를 보내면,

 

바로 Call Stack으로 가는게 아니라 call back queue로 이동하게 되는데, 여기에 대기가 끝난 코드들을 줄을 세운다. 이 대기실에서 기다리고 있으면 event loop가 기다린 순서에 따라 Stack으로 하나씩 올려보내서 실행되게 된다!

 

event loop: queue에 할당된 함수를 순서에 맞춰 Call Stack에 할당해주는것

queue스택에서 대기 끝난 코드들이 Stack에 들어가기만을 기다리고있다.

빈 스택에 event loop를 통해 하나씩 들어가는 모습(그림출처:애플코딩 유투브)

근데 조건이 하나가 있다. Stack이 비어있을때만 올려보낸다!

setTimeout이 0초라 해도 얄짤없다. 무조건 대기실로 보내기때문에 나중에 Stack이 비었을 때 실행된다.

 

그래서 만약 10초가 걸리는 무거운 for문이 있다면, 버튼누르면 모달창 띄워주라고 하는 이벤트리스너가 10초동안 실행이 안되는거다.

 

 

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

console.log('Start!');

setTimeout(()=>{
	console.log('Timeout!')
},0);

Promise.resolve('Promise!').then(res=> console.log(res));

console.log('End!')

실행결과

Timeout과 Promise 둘 다 웹 Api에 갔다오는 애들인데, setTimout이 아닌 Promise가 먼저 출력이 되었다. 

 

출처: https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke#syntax

이는 큐는 사실 하나가 아니라 중요도에 따라 여러개이기 때문! 

 

그 중에서도 잡 큐라고도 불리는 마이크로태스크 큐는 중요도가 높아 우선순위로 처리되며, 여기에 Promise나 async/await이 들어있다.

메세지 큐/매크로 큐/ 태스크 큐 등 많은 이름으로 불리는 이 매크로태스크 큐는 setTimeoout, setInterval 함수들 등이 들어가며 후순위로 처리되게 된다. 

 

마이크로태스크 큐가 다 빠지고 나서야 매크로태스크 안의 일들이 빠지는 걸 볼 수 있다.

 

오늘의 포인트

• 여전히 자바스크립트는 동기적인 언어다. 그런데 이런 일련의 과정들이 비동기적으로 일처리를 할 수 있게끔 도와주는거다. 착각ㄴ
• 사실 저 큐는 마이크로테스크 큐와 매크로태스크 큐로 나뉘고, 마이크로테스크 큐가 우선순위를 가진다. (추가예정)
• 스택과 queue를 바쁘게 만들지 말자. 

 

강추자료

https://ui.toast.com/fe-guide/ko_PERFORMANCE

성능 최적화

https://youtu.be/8aGhZQkoFbQ