비동기처리

비동기처리란?

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

비동기처리가 필요한 이유는 화면에서 서버로 데이터를 요청했을때 서버가 언제 그 요청에대한 응답을 줄지 모르는데 마냥 기다릴순 없기 때문이다.

간단한 비동기 처리 예제

// #1
console.log('Hello');
// #2
setTimeout(function() {
	console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');

위코드로 다음과같은 출력결과를 기대했지만

• ‘Hello’ 출력
• 3초 있다가 ‘Bye’ 출력
• ‘Hello Again’ 출력

setTimeout() 역시 비동기방식으로 처리되기때문에 실제로는 다음과같이 실행된다.

• ‘Hello’ 출력
• ‘Hello Again’ 출력
• 3초 있다가 ‘Bye’ 출력

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

앞에서 발생한 비동기처리방식의 문제점은 다음과 같이 콜백함수로 해결 할수 있다.

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

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

이렇게 콜백함수를 사용해서 로직이 끝났을때 원하는 함수를 실행할수 있다. 데이터가 준비된 시점에만 작업을 수행할수 있는것이다.

콜백지옥

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

웹서비스를 개발하다보면 위와같은 상황이 많이 발생한다. 서버에서 데이터를 받아온 후 인코딩, 인증을 한후 화면에 표시하는 과정에서 콜백이 콜백을 무는 형식으로 코드의 가독성이 떨어지게 된다.

이러한 콜백 지옥을 코딩패턴만으로 해결하려면 아래와 같이 함수를 분리해주면 된다.

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);
});