콜백 헬(Callback Hell)과 프로미스(Promises)

콜백 헬(Callback Hell)

콜백 헬, 또는 콜백 지옥은 JavaScript에서 비동기 작업을 처리할 때 콜백 함수를 중첩하여 사용하면서 발생하는 코드의 가독성과 유지보수성 문제를 가리킵니다. 콜백 함수가 여러 겹으로 중첩되면 코드의 들여쓰기가 깊어지고, 이로 인해 코드의 흐름을 이해하기 어렵게 만들 수 있습니다.

getData(function(a){
    getMoreData(a, function(b){
        getMoreData(b, function(c){
             console.log('Got the data: ', c);
        });
    });
});

위의 예시처럼 콜백 함수가 여러 겹으로 중첩되면, 코드의 흐름을 따라가기 어렵고, 에러 처리가 복잡해집니다.

1. 가독성 저하

중첩된 콜백으로 인해 코드의 들여쓰기가 깊어지며, 이로 인해 코드의 흐름을 파악하기 어렵습니다. 복잡한 비동기 로직을 구현할 때, 어떤 작업이 어떤 순서로 실행되는지 이해하기 어려워집니다.

2. 에러 처리의 복잡성

각 콜백 함수마다 에러 처리 로직을 구현해야 하며, 이는 중복된 코드를 많이 생성하고, 예외 처리를 빼먹기 쉽게 만듭니다. 특히, 중첩된 콜백 구조에서는 상위 콜백의 에러를 하위 콜백으로 전파하는 것이 어렵습니다.

3. 디버깅의 어려움

콜백 함수가 많아질수록 디버깅이 어려워집니다. 어떤 콜백에서 예외가 발생했는지, 현재 실행 흐름이 어떤 상태인지 파악하기 어렵습니다. 중첩된 콜백은 호출 스택을 복잡하게 만들어 에러 추적을 더 어렵게 합니다.

4. 유지보수의 어려움

중첩된 콜백 구조는 코드의 수정 및 확장을 어렵게 만듭니다. 새로운 비동기 작업을 추가하거나 기존 로직을 변경할 때, 전체 구조를 이해하지 못하면 부작용을 일으킬 수 있습니다.

 

프로미스(Promises)

프로미스는 콜백 헬을 해결하기 위한 방법 중 하나로, 비동기 작업의 최종 결과를 나타내는 객체입니다. 프로미스는 Pending(대기), Fulfilled(이행), Rejected(거부)의 세 가지 상태를 가집니다. 프로미스를 사용하면 비동기 작업을 좀 더 선언적으로 표현할 수 있으며, 연속된 비동기 작업을 체인으로 연결할 수 있습니다.

getData()
    .then(function(a) {
        return getMoreData(a);
    })
    .then(function(b) {
        return getMoreData(b);
    })
    .then(function(c) {
        console.log('Got the data: ', c);
    })
    .catch(function(error) {
        console.error('Error: ', error);
    });

프로미스를 사용하면, 각 비동기 작업의 결과를 .then 메서드를 통해 다음 작업으로 전달할 수 있고, 오류가 발생하면 .catch 메서드로 한 곳에서 처리할 수 있습니다. 이러한 방식으로 코드의 가독성을 높이고 에러 처리를 단순화할 수 있습니다.

프로미스의 장점

• 가독성: 중첩된 콜백에 비해 코드의 가독성이 향상됩니다.
• 에러 처리: .catch 메서드를 사용하여 에러를 쉽게 처리할 수 있습니다.
• 체인 형성: 여러 비동기 작업을 .then 메서드로 연결하여 체인 형태로 구성할 수 있습니다.

프로미스는 ES6(ES2015)에서 정식으로 소개되었으며, 현대 JavaScript 개발에서 필수적인 개념입니다. 더 나아가 async/await 문법을 사용하면 프로미스 기반 코드를 더욱 간결하고 동기 코드와 유사한 방식으로 작성할 수 있습니다.