20190727 33-JS-Concepts :: 09 Message Queue & Event Loop

메시지 큐 & 이벤트 루프를 학습하기 이전에...

• 자바 스크립트는 싱글스레드 기반의 언어이다.
• 콜스택이 하나이기 때문에 하나의 함수가 오래 수행중이라면, 다른 것들은 블락킹이 되어버림
• 이를 해결하기 위해서 비동기 콜백 방식을 이용하고 있으며, 이와 관련된 내용이 메시지 큐와 이벤트 루프이다.
• 동시성이 가능하고, 논 블럭 IO 가 가능하다. 엄밀히 말하면 노드 js 가..

메시지 큐(Message Queue)

• Javascript 런타임은 처리할 메시지 리스트에 대해서 메시지 큐를 사용한다.
• 각 메시지는 메시지를 처리하기 위해 호출되는 함수가 있다.

이벤트 루프(Event Loop) 구현방식

while(queue.waitForMessage()) {
	queue.proecessNextMessage();
}

만약 queue.waitForMessage() 함수는 현재 아무 메시지도 없다면, 새로운 메시지 도착을 동기적으로 기다린다.

 

위의 두 가지를 잘 이해하기 위해선 Web API 도 알아야 한다.

 

Web API

• 브라우저에 내장되어 있다.
• 브라우저 및 주변 컴퓨터 환경의 데이터를 나타낼 수 있다.
• 자바스크립트 언어와는 속하진 않았지만 자바스크립트 언어기반으로 만들어졌기 때문에 자바스크립트 코드에서 사용할 수 있다.
• 예시로 setTimeout, AJAX, DOM 등이 있다.

setTimeout Sample Code (1)

function bar() {
    console.log("bar");
}

setTimeout(function foo() {
    console.log("foo");
}, 10000);
    
bar();

위의 코드는 bar 가 출력되고 10초 뒤에 foo 가 출력됨을 확인할 수 있다.

 

setTimeout Sample Code (2)

function bar() {
    console.log("bar");
}

setTimeout(function foo() {
    console.log("foo");
}, 0);
    
bar();

위의 코드는 0초 니깐 foo 이후 bar 가 출력될까??

정답은 틀렸다이다. setTimeout 은 web API 에 속하는데, 해당 foo() 메소드는 web API 영역에 들어갔다가 이후에 message Queue 영역에 들어가기 때문에 setTimeout Sample Cope (1) 과 동일한 결과가 나타난다.

 

setTImeout Sample Code (3)

setTimeout(function foo() {
    console.log("foo");
}, 0);
    
bar();

function main(){
    
    console.log('A');

    setTimeout(function exec(){ console.log('B'); }, 0);
    
    // 5초 뒤에 바로 수행
    runWhileLoopForNSeconds(5);

    console.log('C');
}

main();

function runWhileLoopForNSeconds(sec){

    let start = Date.now();
    now = start;

    while (now - start < (sec * 1000)) {    
        now = Date.now();
    }
}

setTImeout 으로 0초를 두었고, 또 다른 메소드인 runWhileLoopForNSeconds 는 sec 의 값을 인자로 받아서 해당 sec 만큼 while() 을 수행하고 있다. 즉 콜스택이 블락킹 되어버린 상태. 

 

setTimeout 은 0초 뒤에 수행되기 때문에 A 가 호출되고 while() 문이 돌고 있기 때문에 B, C 순서로 호출될 거라 생각하갰지만 결과는 A, C, B 순서로 콘솔에 출력된다. 왜냐하면 앞선 설명처럼 콜스택이 비어있지 않기 때문이다. sec 만큼 runWhileLoopForNSeconds(sec) 메소드를 수행하고 있기 때문이다. 

 

따라서 setTimeout 의 지연인수 값은 특정 시간이 지난이후에 바로 수행하라는 것이 아닌 특정 함수를 수행하기 이전의 최소한의 시간을 의미한다.

 

-

이 글은 이벤트 루프가 어떻게 동작하고, 메시지 큐가 어떻게 동작하는지 살펴보려고 했으나 자료가 워낙 방대하고 그들 따라서 내가 좋은 설명을 하기에도 부족하다고 판단해서 여러 링크를 대신해서 남기려고 한다. 

 

reference

자바스크립트와 이벤트 루프

Concurrency Model & Event Loop

https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

https://github.com/leonardomso/33-js-concepts