[javascript] 이벤트 루프와 자바스크립트 런타임의 렌더링 과정

14 Dec 2023

javascript

이 자바스크립트 블로그 포스트에서는 자바스크립트의 이벤트 루프와 런타임의 렌더링 과정에 대해 설명하겠습니다. 이해하고 있는 부분이 있거나 궁금한 점이 있다면 언제든지 물어보세요!

이벤트 루프

이벤트 루프는 자바스크립트의 비동기 동작을 담당하는 핵심 메커니즘입니다. 모든 이벤트 (예: 클릭, 네트워크 요청 완료, 타이머 완료 등)는 이벤트 큐에 순서대로 쌓이며, 이벤트 루프는 실행 스택이 비어있을 때 이벤트 큐에서 이벤트를 꺼내와 실행합니다. 이를 통해 비동기 함수의 실행이 가능하게 되며, 이로인해 웹앱은 병렬적으로 다양한 작업을 수행할 수 있습니다.

console.log('Hello');

setTimeout(function() {
  console.log('Async');
}, 2000);

console.log('World');

위의 코드는 “Hello”, “World”, “Async” 순서대로 출력됩니다. setTimeout 함수를 통해 2초를 기다린 뒤 “Async”를 출력하기 때문에, “World”가 먼저 출력된 후 “Async”가 출력됩니다.

자바스크립트 런타임의 렌더링 과정

자바스크립트가 런타임에 어떻게 렌더링되는지에 대해 간단히 알아봅시다.

파싱: 코드가 실행되기 전에, 브라우저는 코드를 파싱하여 AST(Abstract Syntax Tree) 라는 구조로 변환합니다.
렉시컬 환경 생성: 함수, 변수 및 스코프 등을 처리하여 렉시컬 환경을 생성합니다.
실행 컨텍스트 생성: 코드 블록이 실행될 때마다 실행 컨텍스트를 생성하여 해당 블록의 환경을 설정합니다.

function greet() {
  let message = 'Hello, ';
  function addName(name) {
    return message + name;
  }
  return addName;
}

let sayHello = greet();
console.log(sayHello('Alice'));

위의 코드에서 greet 함수가 실행되면 실행 컨텍스트가 생성되며, 렉시컬 환경과 addName 함수를 실행 컨텍스트 스택에 쌓게 됩니다.

이러한 이벤트 루프와 런타임의 렌더링 과정을 이해함으로써 자바스크립트 코드를 더 잘 이해하고 효율적으로 작성할 수 있습니다.

더 깊이있는 내용에 대해서는 Brendan Eich의 “Understanding ECMAScript 6” (ISBN 978-1593277574)을 참고하시기 바랍니다.

목차

이벤트 루프

자바스크립트 런타임의 렌더링 과정