자바스크립트의 비동기 처리에 대해 알아보자

자바스크립트는 싱글 쓰레드 기반으로 동작하는 언어입니다. 하지만 실제로는 여러 작업을 동시에 처리하는 것처럼 보이는데요. 이러한 비동기 처리가 어떻게 이루어지는지 자세히 알아보겠습니다.

비동기 처리의 핵심 요소

1. Call Stack

자바스크립트 엔진이 코드를 실행하는 메인 쓰레드입니다. 여기서는 동기적으로 코드가 순차적으로 실행됩니다.

2. Web APIs

브라우저에서 제공하는 API로, setTimeout, fetch, DOM 이벤트 등의 비동기 작업을 처리합니다. Node.js 환경에서는 C++ APIs가 이 역할을 담당합니다.

3. Callback Queue

비동기 작업이 완료된 후 실행될 콜백 함수들이 대기하는 곳입니다.

4. Event Loop

Call Stack이 비어있을 때, Callback Queue의 작업을 Call Stack으로 이동시키는 역할을 합니다.

코드로 보는 비동기 처리

console.log('시작');

setTimeout(() => {
    console.log('타이머 실행');
}, 0);

Promise.resolve()
    .then(() => console.log('프로미스 실행'));

console.log('끝');

// 실행결과:
// 시작
// 끝
// 프로미스 실행
// 타이머 실행

비동기 처리 방식의 발전

1. Callbacks

function getData(callback) {
    fetch('url')
        .then(data => callback(data));
}

2. Promise

function getData() {
    return new Promise((resolve, reject) => {
        fetch('url')
            .then(resolve)
            .catch(reject);
    });
}

3. Async/Await

async function getData() {
    try {
        const response = await fetch('url');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

마무리

자바스크립트는 싱글 쓰레드이지만, 이벤트 루프와 Web APIs를 통해 비동기 작업을 효율적으로 처리할 수 있습니다. Promise와 async/await의 도입으로 비동기 코드를 더욱 깔끔하게 작성할 수 있게 되었죠.