[JS] 비동기처리와 콜백함수

01. 비동기처리

- 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 실행하는 특성

 

01-1 ajax

- 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시할때 사용

- $.get() : ajax 통신을 하는 부분

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

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

↑위 코드는 $.get으로 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드인 retrun tableData;를 실행했으므로 undefined가 출력됨

 

01-2 setTimeout()

- 지정한 시간만큼 기다렸다가 로직을 실행

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

 

 

02. 콜백 함수

- 다른 함수의 파라미터로써 전달되는 함수

- 태스크가 끝나기 전에 함수가 실행되지 않도록 함

 

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

- 콜백 함수를 사용하여 특정 로직이 끝났을 때 원하는 동작을 실행

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

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

 

02-2 콜백 헬

- 콜백 안에 콜백을 계속 무는 형식

- 웹 서비스 개발 등 많은 데이터를 처리해야 하는 작업의 모든 과정을 비동기로 처리할 때 발생 가능

- 가독성이 떨어지고, 로직 변경이 힘듦

※ Promise나 Async를 사용하여 해결 가능

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