비동기 처리

비동기처리란?

-> 비동기처리란 특정 코드의 연산이 끝날때 까지 코드의 실행을 멈추지 않고 다른 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.

 

 

비동기 처리의 첫 번째 사례

 

- 비동기 처리의  가장 흔한 사례는 제이쿼리의 ajax입니다. 제이쿼리로 실제 웹 서비스를 개발할 때 

 

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

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

 

위의 제리쿼리의 get을 사용해  url을 통해  response에 데이터를 받아오고 ,

그 데이터를 tablData 에 저장을 한다. return을 한다.

 

그리고 console.log를 찍어보면 undefined가 뜬다.

 

그 이유는 코드의 연산이 끝나기를 기다리지 않고 다른코드를 먼저 실행하는 비동기처리의 특징이기 때문이다.

 

 

비동기 처리의 두번째 사례

 

또 다른 비동기 처리 사례는 setTimeout()입니다.setTimeout()은 Web API의 한 종류이다.

코드를 바로 실행하지 않고, 지정한 시간만큼 기다렸다가 로직을 실행한다.

 

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

 

순서는

1 -> 3 -> 3초후 2

 

settimeout()도 비동기식으로 진행 되기 때문에, 다른 코드가 먼저 실행됩니다.

 

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

 

-> 앞에서 자바스크립트 처리 방식에 의해 야기될 수있는 문제들을 살펴보았는데,

이런한 문제들은, 콜백(call back) 함수를 이용하는것이다. 앞의 ajax코드를 콜백함수로 개선해보겠다.

 

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

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

 

위와 같이 코드를 작성하면 특정 로직이 끝났을때 원한느 동작을 실행 시킬 수 있다.

 

예시를 들자면

콜백 함수의 동작 방식은 일종의 식당 자리 예약과 같습니다. 일반적으로 맛집을 가면 사람이 많아 자리가 없습니다.

그래서 대기자 명단에 이름을 쓴 다음에 자리가 날때까지 주변 식당을 돌아다닌다. 만약 식당에서 자리가 생기면 전화로 자리가 났다고 연락이온다. 그 전화를 받는 시점이 여기서의 콜백함수가 호출되는 시점과 같다. 손님 입장에선느 자리가 날 때까지 식당에서 기다리지 않고,

근처 가게에서 있다가 올 수있습니다.

 

즉 자리가 준비 됏을 시점에, 갈 수있다는 점입니다.