[JS_Basic] 비동기 처리 및 콜백 ( async, call back )

[1] 비동기처리 (async)

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특징을 의미한다.

 

[ For Example ]   

1)동기

빨래 -> 바닥 청소 -> 설거지를 동시에 진행 하지 않고 하나의 업무가 끝난 뒤에 하게 된다.

2) 비동기

우리의 일상처럼 빨래를 위해 세탁기를 켜놓고 바닥청소를 동시에 가능하다.

 

[1-1] 비동기 처리_ 코드 예시 ( from 캡틴판교님 )

1) AJAX 통신

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

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

get을 통해 http(= URL) 에 있는 데이터를 요구합니다. 이 때, 받은 데이터를 reponse 라는 변수에 담고 그 값을 table Data에게 넘겨줍니다.  하지만, 그 결과값을 확인 해보기 위해서 console.log를 통해 출력 해봤지만 "정의 되지 않음" 이라는 error가 발생하는데 이러한 현상이 비동기로 작동하는 코드에 인해 발생한 결과 입니다.

실제로 요청한 url에서 특정한 Data를 언제 받을지 모르는 상황 속에서 대기하는건 엄청난 비효율이기 때문이죠!

 

- 콜백으로 문제 해결

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

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

 

[2] 

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

우리가 생각 할 수 있는 일반적인 출력은 아래와 같을겁니다.

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

하지만, 실제로 코드를 실행 했을 때는 다음과 같은 결과 값을 얻게 됩니다.

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

그 이유는, setTimeout을 실행 시킨 후에 출력이 되는 시점까지 기다리는 것이 아니라 'Hello Again'을 먼저 실행 시키기 때문입니다.

 

[2] 비동기 처리 및 콜백 함수의 결론

비동기를 해결 하기 위해서, 콜백을 계속 사용하는 경우 흔히 말해 "콜백 지옥" (= Callback Hell) 이 발생한다.

 

이 때, 이러한 문제를 해결하기 위해서 "Promise" 나 "Await"라는 기능들이 나왔는데 이후의 게시물에서 자세히 다뤄보겠습니다 :)

 

 

*학습을 위해, 여러 뛰어난 분들의 블로그를 참조하여 작성한 글입니다 !