2019-02-11(Java Script 비동기 처리와 콜백함수)

자바스크립트 비동기 처리와 콜백 함수

비동기 처리란?

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미.

비동기 처리의 첫번째 사례

비동기 처리의 가장 흔한 사례는 JQuery의 AJAX 이다. 실제 웹 서비스 개발시 AJAX 통신을 뺴놓을 수 없다. 화면에 표시할 이미지나 데이터를 서버에서 불러와 화면에 표시해야 하는데 AJAX 통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문이다.

AJAX 코드는 아래와 같다.

function getData() {
    var tableData;
    $.get('https://domain.com/products/1', function (response) {
        tableData = response;
    });
 
    return tableData;
}
 
console.log(getData()); //undefined

여기서 $.get() 은 AJAX 통신을 하는 부분이다. https://domain.com 에 HTTP GET 요청을 날려 1번 상품(product) 정보를 요청하는 코드다.

그렇게 받아온 데이터는 response에 담기게 되고 tableData 변수에 저장한다. 그후 getData()를 호출해 보자. console.log 로 결과를 찍어보면 결과는 undefined가 나오게 된다. 이유는 AJAX 호출시 데이터를 요청하고 데이터를 받아올떄까지 기다리지 않고 다음 코드(return tableData;)를 실행한다. 따라서 console.log 에는 undefined가 나오게 된다.

이렇게 특정 로직의 실행이 끝날때 까지 기다려 주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리이다.
비동기 처리가 필요한 이유는 화면에서 서버로 데이터 요청시 요청에 대한 응답을 마냥 기다릴수 없기 때문이다. 만약 100개의 요청을 보낸다고 하면 코드가 요청이 끝날때까지 기다리고를 반복하여 웹애플리케이션이 느려지게 될것이다.

비동기 처리의 두번째 사례

또 다른 비동기 처리 사례는 setTimeout() 입니다. setTimeout() 은 Web API의 한 종류 이다. 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행한다.

setTimeout 코드는 아래와 같다.

console.log('Hi');
 
setTimeout(function (){
    console.log('Hi2');
},3000);
 
console.log('Hi3');
 
/*
결과
Hi
Hi3
Hi2
*/

setTimeout() 역시 비동기 방식으로 실행되기 때문에 3초를 기다렸다가 다음코드를 수행하는 것이 아니라 일단 setTimeout() 을 실행하고 나서 바로 다음 코드인 console.log('Hi3'); 으로 넘어가게 된다.

콜백 함수로 비동기 처리 방식의 문제점 해결

앞에서 자바스크립트 비동기 처리 방식에 의해 야기될 수 있는 문제들을 보았다. 이러한 문제들은 어떻게 해결할수 있을까?? 콜백(callback)함수를 이용하면 된다. 앞에서 AJAX통신 코드를 콜백 함수를 개선하면 아래와 같다.

function getData(callbackFunc) {
    $.get('https://domain.com/products/1', function(response) {
        callbackFunc(response); //서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
    });
}
 
callbackFunc(function (tableData) {
    console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

이렇게 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다.

비유로 이해하는 콜백 함수 동작 방식

콜백 함수의 동작 방식은 일종의 식당 자리 예약과 같다. 일반적으로 맛집을 가면 사람이 많아 자리가 없다. 그래서 대기자 명단에 이름을 쓴 다음에 자리가 날 때까지 주변 식당을 돌아다닌다. 만약 식당에서 자리가 생기면 전화로 자리가 났다고 연락이 오고, 그 전화를 받은 시점이 여기서의 콜백 함수가 호출되는 시점과 같다. 손님 입장에서는 자리가 날 때까지 식당에서 기다리지 않고 근처 가게에서 잠깐 쇼핑을 할 수도 있고 아니면 다른 식당 자리를 알아볼 수도 있다.

즉, 데이터가 준비된 시점에서만 우리가 원하는 동작을 실행할 수 있다.

콜백 지옥

콜백 지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다. 아마 아래와 같은 코드를 본적이 있을 것이다.

$.get('url', function(response) {
    parseValue(response, function(id) {
        auth(id, function(result) {
            display(result, function() {
                console.log(text);
            });
        });
    });
});

웹 서비스를 개발하다 보면 서버에서 데이터를 받아와 화면에 표시하기까지 인코딩, 사용자 인증 등을 처리해야 하는 경우가 있다. 만약 이 모든 과정을 비동기로 처리해야 한다고 하면 위와 같이 콜백 안에 콜백을 계속 무는 형식으로 코딩을 하게 된다. 이러한 코드 구조는 가독성이 떨어지고 로직을 변경하기도 어렵다. 이와 같은 코드 구조를 콜백 지옥이라 한다.

콜백 지옥을 해결하는 방법

일반적으로 콜백 지옥을 해결하는 방법에는 Promise 나 Async를 사용하는 방법이 있다. 만약 코딩 패턴으로만 콜백 지옥을 해결하려면 아래와 같이 각 콜백 함수를 분리해 주면 된다.

function parseValueDone(id) {
    auth(id, authDone);
}
 
function authDone(result) {
    display(result, displayDone);
}
 
function displayDone(text) {
    console.log(text);
}
 
$.get('url', function() {
    parseValue(response,parseValueDone);
});

위 코드는 앞의 콜백 지옥 예시를 개선한 코드이다. 중첩해서 선언했던 콜백 익명 함수를 각각의 함수로 구분하였다. 정리된 코드를 간단하게 살펴 보면, 먼저 AJAX통신으로 받은 데이터를 parseValue() 메서드로 파싱한다. parseValueDone()에 파싱한 결과값인 id가 전달되고, auth() 메서드가 실행된다. auth() 메서드로 인증을 거치고 나면 콜백 함수 authDone()이 실행된다. 인증 결과 값인 result로 display()를 호출하면 마지막으로 displayDone() 메서드가 수행되면서 text가 콘솔에 출력된다.

출처 : https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/