[2021.03.11] 이벤트 루프, 자바스크립트 엔진

[Tanney-102]

이벤트 루프

자바스크립트 엔진

chrome의 v8과 같은 자바스크립트 엔진은 다음과 같이 구성된다.

<출처: "캡틴 판교 블로그", https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/>

• 힙에는 생성된 객체를 할당하고 콜스택에는 실행 문맥을 저장한다.
• 자바스크립트는 싱글스레드로 동작한다. 즉, 자바스크립트 엔진은 하나의 콜스택으로 프로그램을 실행한다.
• 따라서 모든 코드는 한 번에 한 줄씩 '순차적으로' 실행된다.

이벤트 기반

• 자바스크립트를 사용하는 환경은 대부분 이벤트 기반으로 동작한다.

• 이벤트 기반

  ⇒ 미리 동작을 정해두고 이벤트가 발생할 때 실행한다.(콜백)

  ⇒ 네트워크 요청, 사용자 입력, 타이머 등

• 이벤트(입출력)는 느리다.

• 자바스크립트의 엔진은 싱글스레드이기 때문에 앞선 실행 문맥이 끝나지 않으면 다음을 실행할 수 없다.

• 즉, 상대적으로 '느린' 이벤트가 호출 스택에 push 되면 해당 이벤트에 대한 handle이 끝날 때까지 프로그램이 멈춘다.

  ⇒ 블로킹(앞선 작업이 다음 작업의 실행을 가로막는 방식)

• 따라서 적어도 '느린' 작업만큼은 '논블로킹'으로 처리해줄 필요가 있다.

이벤트 루프

• 자바스크립트의 런타임은 자바스크립트 엔진과 더불어 논블로킹 방식을 지원할 수 있는 api와 자료구조들을 제공한다.

<출처: "캡틴 판교 블로그", [https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/](https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/)>

• Web APIs : 이벤트가 발생하면 콜백을 큐에 넣어준다.

  • 이벤트가 발생하면?

  ⇒ 네트워크 요청에 대한 응답을 받으면, 사용자가 클릭을 하면, 타이머의 시간이 다 지나면....

• Callback Queue : web api가 보내 준 콜백을 순서대로 저장한다.

  ⇒ 태스크 큐, 마이크로 태스크 큐 등 여러 큐가 있지만 자세히 알 필요는 없음

• Event Loop : 콜스택이 비면 콜백 큐의 함수들을 하나씩 콜스택에 올린다.

참고 : 자바스크립트 런타임 실습, http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIGNvbnNvbGUubG9nKCdZb3UgY2xpY2tlZCB0aGUgYnV0dG9uIScpOyAgICAKfSk7Cgpjb25zb2xlLmxvZygiSGkhIik7CgpzZXRUaW1lb3V0KGZ1bmN0aW9uIHRpbWVvdXQoKSB7CiAgICBjb25zb2xlLmxvZygiQ2xpY2sgdGhlIGJ1dHRvbiEiKTsKfSwgNTAwMCk7Cgpjb25zb2xlLmxvZygiV2VsY29tZSB0byBsb3VwZS4iKTs%3D!!!PGJ1dHRvbj5jbGljayE8L2J1dHRvbj4%3D

setTimeout, setInterval, requestAnimationFrame

setTimeout

• 지정한 시간이 지나면 콜백을 실행한다.
• 마찬가지로 '느린' 이벤트이기 때문에 논블로킹 방식의 동작을 위해 web api 형태로 제공
• 정해진 시간이 지나면 콜백을 큐에 넘긴다.
• 큐에 콜백이 쌓여 있을 경우 실행되기까지 추가 시간이 소요될 수 있다.
• 따라서 정해진 시간이 지나자마자 실행! 보다는 실행 전까지 최소 delay 시간을 정해지는 것으로 보는것이 타당함.

setInterval

• 지정한 시간이 지날 때마다 콜백을 큐에 넣어줌
• 나머지 setTimeout의 특징을 공유

requestAnimationFrame

• 리페인트가 진행되는 시점에 (리페인트 전에) 콜백을 호출

  ⇒ 요청되는 콜백의 수는 보통 디스플레이의 주사율과 일치

  ⇒ 콜백에는 timestamp가 인자로 전달

• 보통 애니메이션에 사용

• 재귀를 통해 사용하며 cancelAnimationFrame을 통해 멈출 수 있음

export default class Spinner {
  constructor($spinnerElement, degSpeed) {
    this.$spinnerElement = $spinnerElement;
    this.degSpeed = degSpeed;
    this.deg = 0;
    this.stop = false;
  }

  spin() {
    this.deg++;
    this.$spinnerElement.style.transform = `rotate(${
      (this.deg % (360 / this.degSpeed)) * this.degSpeed
    }deg)`;

    const rafId = requestAnimationFrame(this.spin.bind(this));
    this.stop && cancelAnimationFrame(rafId);
  }

  render() {
    this.$spinnerElement.classList.add("material");
    this.spin();
  }

  clear() {
    this.stop = true;
    this.$spinnerElement.classList.remove("material");
  }
}