JavaScript의 비동기 프로그래밍: 콜백부터 Promise까지

MicaelKnife·2024년 8월 21일

목록 보기

12/19

들어가며: 코드의 시간 여행

여러분은 ever JavaScript로 복잡한 웹 애플리케이션을 만들다가 갑자기 "왜 이 코드가 예상대로 동작하지 않지?"라고 생각한 적이 있나요? 아마도 그 순간, 여러분은 JavaScript의 비동기 프로그래밍이라는 미지의 영역에 발을 들였을 겁니다.

오늘 우리는 JavaScript의 비동기 프로그래밍 세계로의 모험을 떠나볼 겁니다. 이 여정에서 우리는 콜백 함수라는 오래된 친구를 만나고, 콜백 지옥이라는 위험한 협곡을 지나, 마침내 Promise라는 현대적인 도구를 발견하게 될 것입니다. 준비되셨나요? 그럼 시작해봅시다!

1. 콜백 함수: 비동기의 시작

1.1 콜백 함수란?

콜백 함수는 다른 함수에 인자로 전달되어, 그 함수의 실행이 끝난 뒤에 실행되는 함수를 말합니다. 이는 JavaScript에서 비동기 작업을 처리하는 가장 기본적인 방법입니다.

function greet(name, callback) {
    console.log('Hello ' + name);
    callback();
}

greet('John', function() {
    console.log('The greeting has finished!');
});

이 예제에서 익명 함수 function() { console.log('The greeting has finished!'); }가 콜백 함수입니다.

1.2 왜 콜백 함수를 사용하나요?

비동기 처리: JavaScript는 싱글 스레드 언어입니다. 콜백을 사용하면 긴 작업이 완료될 때까지 기다리지 않고 다른 코드를 실행할 수 있습니다.
유연성: 함수에 다른 함수를 인자로 전달함으로써, 코드의 재사용성과 모듈화를 높일 수 있습니다.

2. 콜백 지옥: 비동기의 함정

2.1 콜백 지옥이란?

콜백 지옥(Callback Hell)은 콜백 함수를 중첩해서 사용할 때 발생하는 코드 구조를 말합니다. 이는 코드의 가독성을 떨어뜨리고 유지보수를 어렵게 만듭니다.

getData(function(a) {
    getMoreData(a, function(b) {
        getMoreData(b, function(c) {
            getMoreData(c, function(d) {
                getMoreData(d, function(e) {
                    // 여기서 뭔가를 합니다
                });
            });
        });
    });
});

2.2 콜백 지옥의 문제점

가독성 저하: 중첩된 구조로 인해 코드를 읽기 어려워집니다.
에러 처리의 어려움: 각 단계마다 에러 처리를 해야 해서 코드가 복잡해집니다.
디버깅의 어려움: 에러가 발생했을 때 어느 단계에서 발생했는지 파악하기 힘듭니다.

3. Promise: 비동기의 혁명

3.1 Promise란?

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 이는 콜백 지옥을 해결하고 더 깔끔한 코드를 작성할 수 있게 해줍니다.

let myPromise = new Promise((resolve, reject) => {
    // 비동기 작업 수행
    let condition = true;
    if(condition) {
        resolve('Success!');
    } else {
        reject('Failure!');
    }
});

myPromise.then((message) => {
    console.log(message);
}).catch((message) => {
    console.log(message);
});

3.2 Promise의 장점

체이닝: .then()을 사용해 여러 비동기 작업을 순차적으로 수행할 수 있습니다.
에러 처리: .catch()를 사용해 한 곳에서 에러를 처리할 수 있습니다.
상태 관리: Promise는 pending, fulfilled, rejected 세 가지 상태를 가지며, 이를 통해 비동기 작업의 상태를 명확히 알 수 있습니다.

getData()
    .then(getMoreData)
    .then(getMoreData)
    .then(getMoreData)
    .then(getMoreData)
    .then((result) => {
        // 여기서 최종 결과를 처리합니다
    })
    .catch((error) => {
        // 에러 처리
    });