[TIL] #8. Message Queue and Event Loop

Message Queue and Event Loop

 

시작하기전에 일단 blocking 그리고 none blocking이 무엇인지 이해해야 한다. 자바스크립트는 none blocking이며, 파이썬은 blocking언어이다. 만약에 자바스크립트가 blocking 언어였다면, 웹사이트에 input이 있고, 유저가 이를 사용할 것인데 유저가 input에 이름을 쓸 때 유저는 타이핑을 할 수 가 없을 것이다. 그 이유는 자바스크립트는 API fetch를 핸들링하느라 바쁘기 때문일 것이다. 그게 blocking이며 자바스크립트는 한번에 하나밖에 할수없다. user, input, event, fetch 등 자바스크립트가 blocking 이였으면 웹사이트에서 아무것도 할 수 없을것이다. 하지만 자바스크립트도 다음과 같은 것이 있다. 예를 들면 alert 같은 경우, Blocking function 이다.

alert("Hello") // 작성하게되면 아무것도 할 수 가 없을 것이다.

alert("Hello")
console.log("hi") // 입력시 block 되어있어서 Hello만 뜨는것을 볼 수 있고 console.log는 실행되지않는다.

그 이유는 alert 이 Blocking function 이기 때문이다. 이런식으로 자바스크립트가 blocking 이었다면, 모든게 (fetch.request....) 이런식으로 block(차단) 되었을 것이다. 그렇기 때문에 자바스크립트는 nice하다고 볼수 있다. Events,callback 등을 사용하면 되기 때문이다.

예를 들면 버튼을 만들고 AddEventlistener click 할 수 있기 때문이다. 자바스크립트는 그 클릭이 실행되기를 기다려 줄 것이다.

이제 non blocking이 무엇인지 알았으니까 그렇다면 parallel로 넣은 것들은 어디로 가는걸까?

setTimeout(() => console.log("lalalala"), 5000)

이와 같은 것이 어디로 갈것인가에 대한 것을 볼 것이며 오늘 배운것의 Topic이다.(Eventloop, TimeOut)

setTimeout(() => console.log("hi"), 0)
console.log("bye") 

다음과 같이 작성하게 되면 bye가 먼저 실행되고 그 다음 hi가 나오는 것을 볼 것이다. 이걸 이해해야하는 것이다.

setTimeout,hi,bye가 stack에 다 넣어지게될것이고 자바스크립트는 이걸 보고 TimeOut 부분을 Web API로 가져갈 것이다.

그렇게 되면 이건 브라우저가 관리해야하는 것이며(hi) 그리고나서 stack에 남아있는 bye를 실행하게 될 것이다. 그러고는 두번째 인자를 살펴볼 것인데 작성해 놓은 것의 의미는 최소기다려야하는 시간으로 넣어둔 것이며 실행하기까지 최소 기다려야하는 시간인 것으로 0으로 설정해 놓았다. 그래서 API는 0초를 기다리고 그 함수는 message Queue로 가게 되고 만약에 stack에 아무것도 없다면(규칙이다.) 자바스크립트는 queue를 보고 (hi) 그리고 stack으로 보낼 것이다. 그렇기 때문에 bye가 먼저 나오고 hi가 나오게 된 것이다.

그렇다면 fetch는 어떻게 될까? 위에 작성한 것처럼 동일하게 작동이 될 것이다. 그래서 자바스크립트로 작업할 때 알아야할 엄청 중요한 것 까지는 아닌데 왜 callback, event가 있는지 이해하게 될 것이며 blocking 언어이기때문에 timeOut같은 것을 넣을 곳이 필요하다는것도 이해할 것이고 blocking 과 non blocking의 차이점을 알것이고 왜 non blocking 언어로 작업하는게 더 편한지도 알게 될 것이다.