[문서] JavaScript 비동기 프로그래밍 완벽 가이드: 콜백에서 async/await까지

비동기 작업은 웹 애플리케이션의 성능을 향상시키고, 사용자 경험을 개선하는 데 중요한 역할을 합니다.

 

1. 비동기 프로그래밍의 필요성

비동기 프로그래밍은 장기 실행 작업이 완료될 때까지 애플리케이션이 응답하지 않는 문제를 해결합니다. 웹 요청, 파일 읽기, 타이머 등 시간이 오래 걸리는 작업을 처리할 때 비동기 프로그래밍이 필요합니다.

 

2. 콜백 함수

콜백 함수는 JavaScript에서 비동기 프로그래밍을 구현하는 가장 기본적인 방법입니다.

하지만 콜백 함수가 중첩된다면 코드가 복잡해지고 가독성이 떨어집니다. 이를 콜백 지옥이라고 합니다.

async/await을 많이 사용하고 있지만, 여전히 콜백 함수를 사용하는 Legacy 코드가 다수 존재하고, DOM 이벤트 리스너 등 여러 상황에서 사용이 필요합니다.

function fetchData(callback) {
    setTimeout(() => {
        callback("Data fetched!");
    }, 2000);
}

fetchData((data) => {
    console.log(data);
});

 

3. 프로미스(Promise)

프로미스는 콜백 지옥 문제를 해결하기 위해 도입된 비동기 프로그래밍 방법입니다.

대기, 이행, 거부를 설정할 수 있고, .then()과 .catch() 메서드를 통해 비동기 작업 완료 후 처리를 정의할 수 있습니다.

 

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 2000);
    });
}

fetchData()
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

3-1 Promise 병렬 처리

Promise.all을 사용하면 여러 비동기 작업을 병렬로 처리할 수 있습니다.

async function fetchData1() {
    return new Promise(resolve => setTimeout(() => resolve("Data 1"), 1000));
}

async function fetchData2() {
    return new Promise(resolve => setTimeout(() => resolve("Data 2"), 2000));
}

async function main() {
    try {
        const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
        console.log(data1, data2);
    } catch (error) {
        console.error("Error fetching data:", error);
    }
}

main();

4. async/await

async/await는 비동기 작업을 더욱 간단하고 직관적으로 사용할 수 있게 해줍니다. 또한 비동기 작업을 동기식 코드처럼 작성할 수 있습니다. async 함수는 항상 실행됩니다. 이후 await 키워드가 함수 해결까지 기다립니다.

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 2000);
    });
}

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

main();

 

4-1. 에러 핸들링

비동기 프로그래밍에서 에러 핸들링은 중요합니다. try...catch 블록을 사용하여 async/await 코드의 에러를 처리할 수 있습니다.

async function main() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data:", error);
    }
}

main();

 

JavaScript 비동기 프로그래밍은 복잡해 보일 수 있지만, 콜백 함수, 프로미스, async/await를 잘 이해하면 쉽게 다룰 수 있습니다.