비동기 처리

자바스크립트의 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 의미합니다.

제이쿼리 ajax 통신의 예입니다.

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

console.log(getData()); // undefined

getData() 함수는 https://domain.com/products/1 HTTP GET 요청을 날려서 서버로부터 받아온 데이터를 response에 저장하는 함수입니다. getData() 함수를 호출하면 결과는 undefined입니다. 그 이유는 데이터를 요청하고 받아올 때까지 기다리지 않고 다음 코드인 return을 실행했기 때문입니다.

이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리입니다.

콜백 함수

콜백은 다른 함수의 인자로 넘기는 함수를 말합니다. 비동기 처리 시 콜백 함수를 사용합니다.

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

getData(function(tableData) {
	console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});
J

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

콜백 지옥

콜백 지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제입니다.
콜백 안에 콜백 함수를 작성하는 형식으로 이러한 코드 구조는 가독성이 떨어지고 로직을 변경하기도 어렵습니다.

step1(function (err, value1) {
    if (err) {
        console.log(err);
        return;
    }
    step2(function (err, value2) {
        if (err) {
            console.log(err);
            return;
        }
        step3(function (err, value3) {
            if (err) {
                console.log(err);
                return;
            }
            step4(function (err, value4) {
                // 정신 건강을 위해 생략
            });
        });
    });
});

Promise와 async/await 패턴을 이용하면 콜백 지옥을 해결할 수 있습니다.

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