비동기 처리(Callback hell)

비동기 처리?

function getData() {
	var tableData;
	$.get('URL', function(response) {
		tableData = response;
	});
	return tableData;
}

console.log(getData());

위 코드의 정답은 무엇인가?

바로 대답한다면 비동기 처리를 좀 아시는 분이군요~

 

정답은 return 으로 undefined가 출력이 된다는 것이다

즉 비동기 처리를 하면 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저

실행하는 특성을 가진다!!! 그렇기 때문에 데이터를 아직 가져오지 못했는데 리턴 해버려서 

undifined가 출력 되는 것이다!!

 

나 또한 웹프로젝트를 하면서 어떨때는 return값이 잘 가지고 오다가 또 어떨때는 가지고 오지 못하는 경험을 

가지고 있었기에 위 문제를 파악하는데 큰 어려움이 없었다! 

 

비동기 처리에는 대표적인 사례는 

1.jquery의 ajax

2. setTimeout() - web API

 

 

 

 

콜백 함수 동작 방식

인터넷에 너무 좋은 예시가 있어서 알려드리려한다.

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

자리가 났을 때만 연락이 오기 때문에 미리 가서 기다릴 필요도 없고, 직접 식당 안에 들어가서 자리가 비어 있는지 확인할 필요도 없습니다. 자리가 준비된 시점, 즉 데이터가 준비된 시점에서만 저희가 원하는 동작(자리에 앉는다, 특정 값을 출력한다 등)을 수행할 수 있습니다.

 

콜백지옥( CALLBACK HELL ) 

비동기 처리 로직을 위해서 콜백 함수를 연속적으로 사용할때 생겨나는 문제이다!!!

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

위와 같은 코드 구조를 콜백 지옥이라고 한다.

계속해서 콜백을 무는 형식으로 코딩을 하게 되면 가독성이 떨어지고  추후에 로직을 변할때 머리가 아파집니다.

 

 

콜백 지옥을 해결 할 수 있는 방법에는 무엇이 있는가?

1. 코딩패턴 변경

2. Promise

3. Async

 

사실 콜백 지옥은 실행하는데는 큰 문제가 없지만 위에서 말한것처럼 가독성과 로직 변경에 있어 문제가 생기기에 변경을 하는 것이다

2,3번은 다음 글에서 설명하고 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);
});

콜백 익명 함수를 각각의 함수로 분리했다!