[javascript] 자바스크립트의 비동기 제어와 동시성 제어

08 Dec 2023

javascript

자바스크립트는 싱글 스레드 언어이며 비동기 동작을 위해 이벤트 루프를 사용합니다. 비동기 제어와 동시성 제어는 자바스크립트에서 중요한 주제 중 하나입니다. 이 블로그 포스트에서는 자바스크립트에서의 비동기 작업과 이를 효율적으로 제어하는 방법을 살펴보겠습니다.

비동기 작업

자바스크립트에서 비동기 작업은 네트워크 요청, 파일 읽기/쓰기, 타이머 등과 같은 작업을 말합니다. 이러한 작업은 일반적으로 콜백 함수나 Promise, async/await를 사용하여 처리됩니다. 콜백 함수는 비동기 작업이 완료되었을 때 실행되며, Promise와 async/await는 콜백 지옥(callback hell)을 피하기 위해 도입된 패턴입니다.

// 콜백 함수를 사용한 비동기 작업 제어
function fetchData(callback) {
    // 비동기 작업 수행
    setTimeout(function() {
        callback('Data received');
    }, 1000);
}

fetchData(function(data) {
    console.log(data);
});

// Promise를 사용한 비동기 작업 제어
function fetchData() {
    return new Promise(function(resolve, reject) {
        // 비동기 작업 수행
        setTimeout(function() {
            resolve('Data received');
        }, 1000);
    });
}

fetchData().then(function(data) {
    console.log(data);
});

// async/await를 사용한 비동기 작업 제어
async function fetchData() {
    return new Promise(function(resolve, reject) {
        // 비동기 작업 수행
        setTimeout(function() {
            resolve('Data received');
        }, 1000);
    });
}

async function getData() {
    const data = await fetchData();
    console.log(data);
}

getData();

동시성 제어

자바스크립트에서의 동시성은 이벤트 루프를 통해 달성됩니다. 동시성 제어는 비동기 작업 간의 실행 순서나 동시적으로 실행되는 작업의 수를 제어하는 것을 의미합니다. 이를 위해 비동기 처리를 위한 원시적인 방법인 콜백 함수, Promise, async/await뿐만 아니라, Web Worker, SharedArrayBuffer, Atomics과 같은 기술들도 활용됩니다.

동시성을 제어하는 여러 패턴 중에서 가장 흔히 사용되는 것이 Promise.all 및 Promise.race입니다. Promise.all은 병렬로 실행되는 여러 Promise를 기다리고, 모든 작업이 완료될 때까지 기다린 후 결과를 배열로 반환합니다. 반면, Promise.race는 여러 Promise 중 가장 빠르게 결과를 반환한 Promise를 선택합니다.

// Promise.all을 사용한 병렬 실행
const promises = [fetchData1(), fetchData2(), fetchData3()];
Promise.all(promises).then(function(results) {
    console.log(results);
});

// Promise.race를 사용한 경합
const promises = [fetchData1(), fetchData2(), fetchData3()];
Promise.race(promises).then(function(result) {
    console.log(result);
});

자바스크립트의 비동기 제어와 동시성 제어에 대한 더 자세한 내용은 MDN web docs 및 Node.js 공식 문서를 참고하시기 바랍니다.