Dev study 정리

javascript 이벤트 루프 / 태스크 큐 / 콜 스택 알아보기

2dubbing 2020. 7. 4. 16:38

# 이벤트 루프(event loop)

  • 이벤트 루프는 구현방식으로 인해 붙여진 이름이며, 이벤트 루프는 보통 아래 코드와 유사합니다.
while(queue.waitForMessage()) {
  queue.processNextMessage();
}
  • 이벤트 루프는 javascript 실행환경인 브라우저에서 관리합니다.

 

 

# 이벤트 루프 동작방식

  1. 비어있는 태스크 큐에 1개의 태스크가 들어온 경우, 이벤트 루프에 의해 태스크가 큐에서 pop 됩니다.
  2. pop 된 태스크가 실행되면 javascript engine 에 의해 실행 가능한 코드범위로 실행 컨텍스트가 생성됩니다.
  3. 생성된 실행 컨텍스트는 콜 스택(Call Stack) 에 push 되고 실행됩니다.
    • 코드 실행과정에서 생성되는 태스크는 태스큐 큐에 push 됩니다.
  4. 코드 실행이 완료되면 실행 컨텍스트는 콜 스택에서 pop 되고, 콜 스택이 비어지면 이벤트 루프는 태스크 큐를 확인하여 실행할 태스크가 있는지 확인합니다. 
  5. 1 ~ 4 과정을 계속 반복합니다.

 

 

# 태스크 큐(Task Queue)

  • 태스크 큐는 생성된 태스크가 적재되는 큐 입니다.
  • 태스크 큐는 javascript 실행환경인 브라우저에 위치합니다.
  • 태스크는 Web API 를 사용하는 경우 생성됩니다.
    • 대표적인 Web API 에는 Window, Document, Event, XMLHttpRequest, Fetch 가 있습니다.

 

 

# 콜 스택(Call Stack)

  • 실행 컨텍스트가 적재되는 스택 입니다.
  • 콜 스택은 javascript engine 에 위치합니다.
  • js 예제코드를 통한 콜 스택 설명은 '실행 컨텍스트 정리' 포스팅 글에서 확인 가능합니다.
 

실행 컨텍스트 (Execution context) 정리

실행 컨텍스트란 (Execution Context, E.C) 실행 가능한 javascript 코드 블럭이 실행되는 환경 실행 컨텍스트가 생성되는 시점 실행 가능한 코드(전역 코드, eval() 로 실행되는 코드, 함수 내부의 코드) �

2dubbing.tistory.com

 

 

 

# 참고문서 및 영상

 

동시성 모델과 이벤트 루프

자바스크립트는 코드 실행, 이벤트 수집과 처리, 큐에 놓인 하위 작업들을 담당하는 이벤트 루프에 기반한 동시성(concurrency) 모델을 가지고 있습니다. 이 모델은 C 또는 Java와 같은 언어와 완��

developer.mozilla.org

 

자바스크립트와 이벤트 루프 : TOAST Meetup

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

meetup.toast.com

Philip Roberts: Help, I’m stuck in an event-loop.