[Front end] Javascript 비동기

비동기?

---

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

 

첫 번째 사례

---

비동기 처리의 가장 흔한 사례는 ajax이다. 제이쿼리로 실제 웹 서비스를 개발할 때 ajax통신은 모든 요소에서 빠지지 않고 등장한다. 화면에 렌더링 할 이미지나 데이터를 서버에 호출하여 표시하게 되는데 이때 ajax통신을 사용한다.

 

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

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

$. get() 부분이 ajax 통신이다. HTTP GET 방식으로 요청을 하고 있으며 response 인자로 데이터를 받아온다. getData()를 호출하면 tableData에 담겨있는 응답 값이 찍힐 거 같지만 undefined가 나타난다. 그 이유는 ajax 요청을 하고 데이터를 받아오기까지 기다려주지 않기 때문이다. return tableData;를 바로 실행하게 되어 초기값이 설정되지 않는 tableData의 값은 undefined가 출력된다.

 

 

두 번째 사례

---

또 다른 비동기 처리 사례는 setTimeout()이다. setTimeout()은 API의 한 종류로써 코드를 바로 실행하지 않고 지정된 시간만큼 기다렸다가 실행한다.

for (var i = 0; i < 10; i++) {
	setTimeout(function() {
		console.log(i);
	}, 1000);
}
console.log('done');

어떤 결괏값이 나올까?

done
10
10
10
10
10
10
10
10
10
10

예상했던 결과와 다를 수도 있다. 하지만 컴퓨터는 거짓말을 하지 않는다. 왜 이렇게 결과 값이 나온 이유는 자바스크립트가 비동기적으로 동작하기 때문이다.

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

 

 

비동기적 자바스크립트

---

일반적인 절차적 언어의 경우 어떤 특정 명령을 실행하면 그 명령이 끝날 때까지 다음 명령을 실행하지 않는다. 이와 다르게 자바스크립트는 특정 명령이 실행된 후 해당 명령이 끝나기 전에 다음 명령어가 실행될 수 있다. setTimeout() 사례로 들은 코드는 for문 내에서 시간 지연이 생겨 결국 done이 먼저 출력된 것이다. done이 출력되기 전에 이미 for문을 모두 반복하였으므로 i는 이미 10이 된 상태였고 그것을 열 번 출력했기 때문이다.

자바스크립트 코딩 시에는 서버 쪽으로 요청을 날려 응답을 받는 속도는 명령 실행 속도보다 훨씬 느리기 때문에 절차지향적인 생각을 가지고 코딩을 하면 문제가 생긴다.