[JavaScript] 비동기 프로그래밍: 콜백, 프로미스, async/await

비동기 프로그래밍은 JavaScript에서 매우 중요한 부분을 차지하며, 웹 개발에서 자주 사용됩니다. JavaScript는 기본적으로 단일 스레드 언어이기 때문에, 비동기 작업을 효율적으로 처리할 수 있는 방법이 필요합니다. 이를 위해 콜백, 프로미스, 그리고 async/await 같은 패턴 및 구문이 사용됩니다.

콜백 (Callback)

콜백 함수는 다른 함수에 인자로 넘겨지는 함수로서, 어떤 이벤트가 발생한 후나 특정 작업이 완료된 후에 호출됩니다. 콜백은 비동기 프로그래밍에서 오랜 기간 사용된 패턴이지만, 너무 많이 중첩되면 코드가 복잡해지는 “콜백 지옥”이 발생할 수 있습니다.

const fs = require('fs'); // Node.js의 파일 시스템 모듈

fs.readFile('example.txt', 'utf8', function(err, data) {
    if (err) {
        console.error("에러 발생:", err);
    } else {
        console.log(data);
    }
});

위 코드에서 fs.readFile은 비동기 함수로서 파일을 읽은 후, 그 결과를 처리하기 위해 콜백 함수를 사용합니다.

프로미스 (Promise)

프로미스는 비동기 작업의 최종 성공 또는 실패를 나타내는 객체입니다. 프로미스는 비동기 작업을 간편하게 처리할 수 있게 해주며, 콜백 지옥 문제를 해결해줍니다. 프로미스는 then, catch, finally 메소드를 사용하여 결과를 처리합니다.

function fetchData(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            try {
                // 데이터 처리 로직 (예시)
                resolve('데이터 받기 성공');
            } catch (error) {
                reject('데이터 받기 실패');
            }
        }, 2000);
    });
}

fetchData('https://api.example.com/data')
    .then(data => console.log(data))
    .catch(error => console.error(error));

위 코드는 프로미스를 생성하고, 비동기적으로 데이터를 처리한 뒤 결과를 반환합니다. 성공 시 resolve가 호출되고, 실패 시 reject가 호출됩니다.

async/await

async와 await은 프로미스를 더욱 쉽게 사용할 수 있게 해주는 ES2017(ES8)의 추가 기능입니다. async 함수는 항상 프로미스를 반환하며, 함수 내부에서 await 키워드를 사용하여 프로미스의 결괏값을 기다릴 수 있습니다.

async function fetchData(url) {
    try {
        let response = await fetch(url); // `fetch`는 네트워크 요청을 위한 웹 API
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('데이터 가져오기 실패:', error);
    }
}

fetchData('https://api.example.com/data');

위 예시에서 fetchData 함수는 async 함수로 선언되어 있으며, fetch 함수의 프로미스가 해결될 때까지 기다린 후, 데이터를 처리합니다. await은 비동기 작업이 마치 동기적으로 수행되는 것처럼 코드를 작성할 수 있게 해줍니다.
이처럼 콜백, 프로미스, 그리고 async/await는 JavaScript의 비동기 프로그래밍을 위한 강력한 도구들로서, 복잡한 비동기 로직을 보다 효과적이고 이해하기 쉬운 방식으로 관리할 수 있게 도와줍니다.