javascript 비동기 처리

비동기 처리란?

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

비동기 처리의 예시

1. jQuery ajax

다음 ajax 통신 예시를 보면,

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

지정된 url에 HRRP GET 요청을 해서 받아온 1번 상품정보(product) 데이터는 response 인자에 담기고, tableData라는 변수에 저장됩니다. 하지만 결과는 undefined로 출력됩니다.

$.get()으로 요청한 데이터가 다시 올 때까지 기다리지않고 다음 코드를 바로 실행하기 때문에, getData()의 결과 값은 초기 값을 설정하지 않은 undefined로 출력됩니다.

2. setTimeout()

console.log('Hello');
setTimeout(function(){
	console.log('Bye');
}, 3000);
console.log('Hello Again');

setTimeout()을 실행하고서 바로 다음 코드를 실행항 후에, setTimeout()에서 지정한 시간만큼 기다렸다가 해당 로직을 실행합니다. 그래서 실제 결과 값 출력은 다음과 같습니다.

• Hello
• Hello Again
• (3초 있다가) Bye

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

콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있습니다.
즉, 데이터가 준비된 시점에서만 원하는 동작을 수행할 수 있습니다.
ajax 예제 코드를 다시 변경해보면,

1. 서버에서 받은 데이터(response)를 callbackFunc() 함수에 념겨줌

function getData(callbackFunc) {
	$.get('https://domain.com/products/1', function(reponse) {
    	callbackFunc(reponse);
    });
}

2. $.get()의 response 값이 tableData에 전달 됨

getData(function(tableData) {
	console.log(tableData);
});

하지만, 콜백이 중첩되면 콜백지옥(callback hell)이라는 문제점이 발생합니다.
아래와같이 콜백 안에 콜백을 계속 무는 형식으로 코딩을 하게되면, 가독성도 떨어지고 로직 변경도 어렵습니다.

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

콜백 지옥 문제 해결하기

1. 코딩 패턴

코딩 패턴으로만 콜백 지옥을 해결하는 방법은, 각 콜백 함수를 분리해주면 됩니다.

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

코드의 동작을 보면,

• ajax 통신으로 받은 데이터를 parseValue() 메서드로 파싱합니다.
• parseValueDone()에 파싱한 결과값인 id(가 전달되고 auth()메서드가 실행됩니다.
• auth()메소드로 인증을 거치고 나면 콜백 함수 authDone()이 실행됩니다.
• 인증 결과 값인 result로 display()를 호출하면,
• 마지막으로 displayDone() 메서드가 수행되면서 text가 콘솔에 출력됩니다.

위와 같은 코딩 패턴만으로도 콜백지옥을 해결할 수 있지만, 일반적으로 Promise나 Async를 사용하는 방법이 있습니다. 이 두가지는 다음 글에서 각각 자세히 알아보도록 하겠습니다.