[javascript] 자바스크립트 콜백지옥 알아보기!

 

안녕하세요.
오늘은 자바스크립트의 콜백지옥에 대해 포스팅하려고 합니다. 말만 들어도 지옥 같은 콜백의 지옥... 저도 콜백지옥에 대한 이해와 해결 방안을 깨닫기 위해서 수많은 경험과 검색을 통해 알게 되었고, 이를 잊지 않기 위해 글로 남겨놓고자 하였습니다. 이해하고 나면 정말 별거 없지만 이해될 때까지 경험하고 보다 보면 이해가 되실 거예요!
그럼 몇 가지 예제를 통해 하나씩 알아보겠습니다.

---

콜백 지옥

1. 콜백(callback) 지옥이란 자바스크립트에서 비동기 처리 로직을 위해 콜백 함수를 연달아 계속해서 사용하다 보면 코드의 깊이가 깊어지면서 이를 보고 콜백지옥이라 함.
2. 함수가 다른 함수를 호출하고 그 함수는 또 다른 함수를 호출하고... 그렇게 여러 번 반복되다 보면 코드가 순식간에 깊어지고 가독성이 떨어지며, 유지보수와 에러 처리까지 까다로워지는 단점이 발생

간략하게 콜백지옥에 대해 정리를 해봤는데... 말만 들어도 정말 지옥 같은 상황입니다:(
그럼 예제 소스 코드를 통해 어떤 상황인지 알아보겠습니다.

---

 예제 1

<script>

// 첫번째 함수 호출 시작
task1();

/**
 * 첫번째 Task Function
 */
function task1 () {
    // 전달할 내용
    var text1 = 'Task 1';

    console.log(text1);
    
    // 1초 후 다음 함수 호출
    setTimeout(() => {
        task2(text1);
    }, 1000);
}

/**
 * 두번째 Task Function
 */
function task2 (text1) {
    // 전달할 내용
    var text2 = text1 + ' > Task 2';

    console.log(text2);

    // 1초 후 다음 함수 호출
    setTimeout(() => {
        task3(text2);
    }, 1000);
}

/**
 * 세번째 Task Function
 */
function task3 (text2) {
    // 전달할 내용
    var text3 = text2 + ' > Task 3';

    console.log(text3);
}
</script>

위의 예제를 보게 되면 함수가 함수를 호출하는 방식의 소스 코드입니다.

task1 > (인자 전달) > task2 > (인자 전달) > task3

다음 함수를 호출할 때마다 setTimeout 이벤트를 줘서 1초씩 연기를 시켜 비동기 처리를 하였습니다.

비동기 처리 상황에 함수에서 함수로 인자를 전달하면서 순차 처리가 필요한 상황에는 위의 내용처럼 콜백(callback) 지옥 로직을 구현해야 합니다. 

 

예제를 하나 더 보도록 하겠습니다.

 

 

setTimeout() 알아보기

https://sancode.tistory.com/14

---

예제 2

<script>

task1(function (task1_res) {
    console.log(task1_res);

    task2(task1_res, function (task2_res) {
        console.log(task2_res);

        task3(task2_res, function (task3_res) {
            console.log(task3_res);
        });
    });
});

/**
 * 첫번째 Task Function
 */
function task1 (callback) { 
    var res = 'Task 1';
    // 콜백 함수 호출
    callback(res);
}

/**
 * 두번째 Task Function
 */
function task2 (task1_res, callback) { 
    var res = task1_res + ' > Task 2';
    // 콜백 함수 호출
    callback(res);
}

/**
 * 세번째 Task Function
 */
function task3 (task2_res, callback) { 
    var res = task2_res + ' > Task 3';
    // 콜백 함수 호출
    callback(res);
}
</script>

두 번째 예제 소스 코드도 첫 번째와 유사한 콜백지옥 사례 소스 코드입니다. 호출하는 방식이 선언한 함수를 호출하면서 콜백으로 호출할 다음 함수를 호출해 주고, 그 함수에서는 또다시 콜백 함수를 호출하고... 

 

task1(function (task1_res) {
    console.log(task1_res);

    task2(task1_res, function (task2_res) {
        console.log(task2_res);

        task3(task2_res, function (task3_res) {
            console.log(task3_res);
        });
    });
});

위의 콜백 지옥의 상황을 보게 되면 콜백이 하나 추가될 때마다 소스 코드가 깊어지고 있습니다. 예제는 함수가 3개라 얼마 안 깊어 보여서 문제가 없어 보이지만 문제는 실제 업무에서 개발을 하다 보면 3개 이상의 콜백지옥 상황이 빈번하다는 것입니다. 실제 frontend의 개발 업무는 복잡한 화면이 많기 때문입니다!

그리고 위의 콜백 지옥의 소스 코드는 가독성도 떨어지며, 함수가 많아질수록 그에 따른 에러 처리가 굉장히 복잡해집니다.

 

 

반응형

---

마무리

자바스크립트를 공부하고 개발하다 보면 콜백에 대해 알게 되고, 대부분 콜백 지옥이란 상황에 마주하게 됩니다. 위와 같은 상황을 경험해 보고 고민을 하다 보면 해결책을 찾게 되는데요. 그래서 위와 같은 상황을 좀 더 간결하고 가독성 좋게 처리하기 위해 나온 것이 Promise입니다. 다음 시간에는 이어서 Promise의 사용 방법과 콜백 지옥을 어떻게 간결하게 처리하는지 포스팅하도록 하겠습니다 :)

 

 

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다!

 

 

 

---