이벤트루프

fromzoo·2021년 1월 19일
0

JS 엔진

  • 자바스크립트 엔진은 메모리힙콜스택으로 구성되어 있다.
    • 가장 유명한 것이 구글의 v8이다.
  • 자바스크립트는 단일 스레드(single thread) 프로그래밍 언어.
    • 이것은 콜스택이 하나라는 의미
    • 멀티가 되지않고, 하나씩 처리한다는 의미
  • 메모리힙
    • 메모리할당이 일어나는 곳 => 우리가 선언한 변수, 함수 등이 담겨져있다.
  • 콜스택
    • 코스가 실행될때 쌓이는 곳. stack 형태로 쌓인다.
    • stack이란? 자료구조 중 하나. 선입후출의 룰을 따른다.

Web API

  • 그림에서 봤을때 JS엔진 바깥에 그려져있다.
    • 즉, JS엔진이 아니다는 뜻.
  • 웹 api는 브라우저에서 제공하는 api로 timeoutajax, DOM이 있다.
  • 콜스택에서 실행된 비동기함수는 web api에서 호출하고, web api에서는 Callback Queue에 밀어넣는다.

Callback Queue

  • 비동기적으로 실행된 콜백함수가 보관되는 영역이다.
  • 예를들어, setTimeout에서 타이머 완료 후 실행되는 함수(1st 인자), addEventListener에서 click이벤트가 발생했을때 실행되는 함수(2nd 인자)등이 보관된다.
  • queue : 자료구조 중 하나, 선입선출의 룰을 따른다.

이벤트루프

  • 이벤트루프에서는 콜스택콜백큐의 상태를 체크하여 콜스택이 빈상태가 되면, 콜백큐의 첫번째 콜백을 콜스택에 밀어넣는다.
  • 이러한 반복적인 동작을 틱(tick)이라고 한다.

정리

  • v8엔진에서 코드가 실행되면, call st ack에 쌓인다.
  • stack은 선입후출의 룰을 따라서, 마지막에 들어온 함수가 먼저 실행되며 stack에 쌓여진 함수가 모두 실행된다.
    - 비동기함수가 실행되면, web api가 호출되고,
    - web api는 비동기함수의 콜백함수를 콜백큐에 밀어넣는다.
    - 이벤트루프는 콜스택이 빈상태가되면 콜백큐에서 첫번째콜백을 가져와 콜스택으로 이동시킨다.
  • 자바스크립트는 단일스레드 언어기 때문에 한번에 하나씩 실행된다.
  • 그러나 web api, 이벤트루프, callback queue 때문에 멀티스레드처럼 보인다.

출처

profile
프론트엔드 주니어 개발자 🚀

0개의 댓글