자바스크립트 엔진 동작 원리 AND 블로킹

jsonLee·2023년 7월 3일

자바스크립트 동작 원리를 알아야하는 이유
자바스크립트 엔진 주요 구성 요소
블로킹 발생 예시 해결하는 방법

1. 자바스크립트 동작 원리를 알아야하는 이유

자바스크립트는 웹 개발에서 핵심적인 역할을 수행하는 프로그래밍 언어입니다. 이를 효율적으로 사용하려면 자바스크립트 엔진의 동작 원리를 이해하는 것이 중요합니다. 자바스크립트는 싱글스레드 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 따라서 비동기 작업, 블로킹 상황 등을 잘 다루기 위해 동작 원리를 알아야합니다.

2. 자바스크립트 엔진 주요 구성 요소

자바스크립트 엔진은 다음과 같은 주요 구성 요소로 구성되어 있습니다:

2.1. 엔진(Engine)

코드 해석 및 실행을 담당하는 핵심 역할을 수행합니다.
주요 엔진으로는 V8(Chrome), SpiderMonkey(Firefox), JavaScriptCore(Safari) 등이 있습니다.

2.2. Web API

브라우저 환경에서 제공하는 API로, 자바스크립트에서는 비동기 동작을 처리하거나 웹 브라우저의 기능에 접근하기 위해 사용됩니다.
대표적인 Web API로는 DOM API, XMLHttpRequest, Fetch API, setTimeout, setInterval 등이 있습니다.
이러한 Web API는 엔진 외부에서 구현되며 자바스크립트 엔진과는 별도로 동작합니다.

2.3. 이벤트 루프(Event Loop)

자바스크립트의 비동기 처리를 담당합니다.
이벤트 루프는 Call Stack, Task Queue(또는 Callback Queue)와 함께 동작하여 비동기 작업의 실행과 콜백 함수의 처리를 관리합니다.

2.4. Call Stack(호출 스택)

함수의 호출을 추적하는 자료 구조입니다.
함수가 호출되면 해당 함수의 실행 컨텍스트가 스택에 쌓이고, 함수의 실행이 완료되면 해당 컨텍스트가 스택에서 제거됩니다.
스택은 단일 스레드로 동작하는 자바스크립트에서 함수 호출의 순서와 실행 컨텍스트를 관리합니다.

2.5. Task Queue(또는 Callback Queue)

비동기 작업의 완료 후 실행될 콜백 함수들이 대기하는 대기열입니다.
Web API에서 비동기 작업이 완료되면 해당 콜백 함수가 Task Queue에 추가됩니다.

3. 블로킹 발생 예시 해결하는 방법

3.1. 블로킹 현상

자바스크립트는 기본적으로 단일 스레드로 동작하기 때문에 블로킹 현상이 발생할 수 있습니다. 블로킹은 코드 실행 중 다음 코드의 실행을 막고 대기해야 할 때 발생합니다. 다음은 일부 블로킹 현상이 나타날 수 있는 코드 예시입니다:

1.동기적인 HTTP 요청: XMLHttpRequest 객체를 사용하여 동기적인 방식으로 서버에 HTTP 요청을 보내는 경우, 서버로부터 응답이 올 때까지 코드 실행이 멈추고 대기합니다. 이는 브라우저 화면이 응답이 올 때까지 블로킹되는 것을 의미합니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', false); // 동기적 요청
xhr.send();

console.log(xhr.responseText); // 응답 받기 전까지 블로킹

2.긴 반복문: 긴 반복문을 실행하는 경우, 반복문이 끝날 때까지 코드 실행이 중단됩니다. 이는 다른 코드나 이벤트 처리가 지연되는 원인이 될 수 있습니다.

for (var i = 0; i < 1000000000; i++) {
  // 반복문이 끝날 때까지 블로킹
}

console.log('반복문 종료'); // 반복문 실행 중에는 실행되지 않음

3.사용자 입력 대기: 사용자 입력을 기다리는 경우, 코드 실행이 사용자의 입력을 기다리는 동안 멈추고 대기합니다. 이는 사용자가 다른 동작을 수행하기 전까지 블로킹되는 것을 의미합니다.

var input = prompt('이름을 입력하세요.'); // 사용자 입력 대기

console.log('입력한 이름:', input); // 입력을 받기 전까지 블로킹

3.2 블로킹 해결방법

비동기 함수와 콜백(Callback)
비동기 함수와 콜백은 블로킹 작업을 피하기 위한 흔히 사용되는 패턴입니다. 비동기 함수는 작업을 비차단적으로 처리하고, 작업이 완료되면 콜백 함수를 호출합니다. setTimeout, setInterVal등의 예가 있습니다.

// 비동기 함수
function longRunningTask() {
  for (var i = 0; i < 1000000000; i++) {
    // 반복문 실행
  }
  console.log('반복문 종료');
}

setTimeout(longRunningTask, 0);
console.log('비동기 함수 호출 이후'); // 비동기 함수 호출 이후 먼저 실행됨

3.3. Promise, async/await 사용

Promise는 콜백 지옥을 해결하고 비동기 작업의 결과를 다루는 데 도움을 주는 객체입니다. Promise는 비동기 작업의 성공, 실패, 완료 상태 등을 표현하며, 연속적인 비동기 작업의 흐름을 조작할 수 있습니다.

async/await는 Promise를 기반으로 비동기 코드를 동기적으로 작성할 수 있게 해주는 문법적인 편의 기능입니다. async 함수 내에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있고, 동기적인 코드처럼 작성할 수 있습니다.

// Promise 
function longRunningTask() {
  return new Promise(resolve => setTimeout(resolve, 10));
}

async function run() {
  for (var i = 0; i < 1000000000; i++) {
    await longRunningTask(); // 비동기 대기
  }
  
  console.log('반복문 종료');
}

run();