Colin's Blog
자바스크립트 엔진의 이벤트 루프(Event Loop)와 비동기 처리 방식에 대한 이해

개요

자바스크립트는 단일 스레드로 작동하는 프로그래밍 언어입니다. 이는 한번에 한 가지 작업만 처리할 수 있다는 의미입니다. 하지만, 자바스크립트는 비동기 처리 방식을 통해 여러 작업을 동시에 처리할 수 있는 효과를 얻을 수 있습니다. 이런 비동기 처리 방식을 가능하게 하는 것이 바로 이벤트 루프(Event Loop)입니다.

이벤트 루프(Event Loop)

이벤트 루프는 자바스크립트 엔진의 핵심 구성 요소 중 하나로, 비동기 작업을 관리하고 실행하는 메커니즘입니다. 이벤트 루프는 단일 스레드에서 실행되며, 작업을 순차적으로 처리합니다. 이벤트 루프는 크게 Call Stack, Event Queue, Callback Queue로 구성되어 있습니다.

  1. Call Stack: 함수 호출을 추적하는 스택입니다. 실행 중인 함수가 쌓이고 실행이 완료된 함수는 스택에서 제거됩니다.

  2. Event Queue: 비동기 작업에 대한 콜백 함수들이 대기하는 큐입니다. 비동기 작업이 완료되면 해당 콜백 함수가 이벤트 큐에 추가됩니다.

  3. Callback Queue: Event Loop는 Call Stack이 비어있을 때 이벤트 큐에서 콜백 함수를 꺼내어 실행합니다.

이렇게 이벤트 루프는 Call Stack이 비어 있는지 여부를 체크하고, 비어있다면 Callback Queue에서 콜백 함수를 꺼내어 실행하는 방식으로 비동기 작업을 처리합니다.

비동기 처리 방식

자바스크립트의 비동기 처리 방식에는 여러가지가 있지만, 주로 콜백 함수, 프로미스, 비동기 함수(Async/Await)을 사용합니다.

  1. 콜백 함수: 콜백 함수는 비동기 작업이 완료되면 호출되는 함수입니다. 콜백 함수를 사용하여 비동기 작업의 결과를 처리할 수 있습니다.
setTimeout(function() {
    console.log('비동기 작업 완료');
}, 1000);
  1. 프로미스: 프로미스는 비동기 작업의 결과를 나타내는 객체입니다. 비동기 작업이 성공하면 resolve 함수를 호출하고, 실패하면 reject 함수를 호출합니다. 프로미스는 then과 catch 메소드를 통해 성공 및 실패 처리를 할 수 있습니다.
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('데이터 로드 완료');
        }, 1000);
    });
}

fetchData()
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.log(error);
    });
  1. 비동기 함수(Async/Await): Async/Await는 ES2017부터 도입된 비동기 처리 방식입니다. async 키워드로 함수를 정의하고, await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다.
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('데이터 로드 완료');
        }, 1000);
    });
}

async function fetchDataAsync() {
    try {
        const result = await fetchData();
        console.log(result);
    } catch (error) {
        console.log(error);
    }
}

fetchDataAsync();

결론

자바스크립트 엔진의 이벤트 루프와 비동기 처리 방식은 자바스크립트의 핵심 개념 중 하나입니다. 이를 통해 비동기 작업을 효율적으로 처리하고, 웹 애플리케이션의 성능과 반응성을 향상시킬 수 있습니다. 따라서 자바스크립트 개발자는 이벤트 루프와 비동기 처리 방식에 대한 이해를 깊이 있게 갖추는 것이 중요합니다.

Reference: Mozilla Developer Network - Concurrency model and Event Loop #javascript #eventloop

© 2018 Colin. All rights reserved.