JavaScript의 이벤트 루프란?

흔히 자바스크립트를 배우다 보면 비동기 함수를 배울 때 처음 듣게 되는 자바스크립트의 이벤트 루프. 

이번엔 이벤트 루프가 뭔지 설명해보려고 한다. 

 

난 하나씩 처리하지 

자바스크립트는 싱글 스레드 언어이다. 스레드?

나는 컴퓨터 조립을 몇 번 하면서 CPU를 구매할 때 처음 알게된 단어이다. 지금 검색창에 cpu를 쳐서 아무 cpu나 들어가 보길 바란다. 가보면 

스레드 표시를 볼 수 있다. 스레드는 쉽게 말해 일꾼이다. 일을 처리할 수 있는 일꾼의 수라고 생각하면 된다. 그 말은 일을 처리할 일꾼이 많으면 많을 수록 한 번에 많은 양의 일을 처리 할 수 있다는 뜻이다. 

 

자바스크립트는  싱글 스레드라고? 그럼 한 번에 한 개만 가능하다는 것인가? 그렇다. 왜 그렇게 만들어졌을까? 

자바스크립트는 웹 페이지에서 보조적인 기능들을 수행하던 경량적 언어였다. (한 번 과거의 웹 페이지를 상상해보자... 아니면 밑에 주소로 들어가서 직접 보고 와보자! )

https://archive.org/web/

 

자바스크립트는 무겁고 대응하기 힘든 부분들을 피하기 위해 싱글 스레드로 구현되었다. 

 

결론. 자바스크립트는 한 번에 한 개의 일만 처리할 수 있는 싱글 스레드 언어이다. 한줄 한줄 씩 동기적(요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식) 으로 즉 차례대로 실행되는 언어이다. 

 

아니야 난 비동기 함수를 배웠는데?

자바스크립트로 비동기 처리를 구현할 수 있는 이유는 비동기 처리를 도와주는 것들이 있기 때문이다. 예를 들면 브라우저이다. 브라우저의 web api는 자바스크립트의 비동기 처리를 돕는다. 

 

자바스크립트에선 처리 해야 할 일이 발생할 때 마다 Call Stack에 쌓이게 된다. 콜스택은 후입 선출 구조를 가진다. 자바스크립트 엔진은 자바스크립트 코드를 해석하며 차례대로 콜스택에 넣는다. 실행되면 스택에서 pop된다. 

브라우저의 web api는 비동기적으로 작동 하는 코드를 처리한다. 3초 후에 작동되어야 하는 코드라면 3초를 세준다. 하지만 3초가 끝난다고 바로 콜스택에 껴들기 할 수는 없다. 이때 이벤트 루프와 테스크 큐가 활약을 하게 된다.  비동기로 실행되어야 할 코드는 테스크 큐에 들어가게 되고, 이벤트 루프는 계속 콜스택을 주시하고 있는다. 콜스택이 비었을 때 테스크큐의 이벤트가 콜 스택으로 들어가게 된다. 

 

 

아직 이해가 안 갈수도 있다. 아래의 영상을 강력 추천한다. 

https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=1258s 

https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop

이벤트 루프 - JavaScript | MDN