[비동기] 비동기 함수에 대해 알아보자

최근에 Async와 await함수를 다루다가 Promise는 무엇이고 비동기 함수, 그리고 callback은 무엇인지 궁금해졌다. 이를 정리해보려고 한다. 

 

프론트엔드에서도 데이터 처리는 많이 일어나기 때문에 비동기에 대해 명확하게 알아두면 좋을 것 같다.

 

먼저 비동기 함수에 대해 알아보자.

---

비동기함수

일반적으로 우리가 짜는 코드는 동기적으로 실행된다. 이때 동기적이란 A가 실행될 때 A가 종료될 때까지 기다렸다가 다음 로직이 실행되는 순차적으로 실행되는 것을 말한다. 

비동기는 한마디로 동기적으로 실행되지 않는 것을 말하며 A가 실행되면 A가 종료될 때까지 기다리지 않고 다음 순서의 함수가 실행되는 것을 말한다. 그림으로 나타내면 다음과 같다.

비동기는 왜 필요할까?

외부 API에서 데이터를 가지고 올 때를 생각해보자.

외부에서 가져오는 데이터가 매우 많다면 가져오는데 상당한 시간이 걸리게 된다. 만약 이때 동기적으로 프로그램이 실행된다면 데이터를 가지고 올 때 다른 함수들이 실행되지 못하고 성능 저하를 일으키게 된다. 그래서 데이터를 다루는 부분을 비동기로 돌려 성능 향상을 일으킬 수 있다. 

 

예시

비동기 함수의 대표적인 예시로 setTimeout이 있다. 이 함수를 실행하게 되면 지정한 함수(콜백이라 부른다.)가 지정한 시간 간격으로 실행된다.

console.log("A")
setTimeout(()=>{console.log("B")}, 1000) //1초마다 실행
console.log("C")

 위 로직이 있다고 할 때 비동기 함수를 모르는 사람들은 A B C순서로 출력될 것이라고 생각하지만 실제로는 A C B 순서로 실행된다. 왜냐하면 setTimeout은 비동기 함수이기 때문에 B가 실행되는 걸 기다리지 않는다. 그래서 ACB순서로 실행된다. 

 

이때 어떤 비동기 함수가 종료되어야, 값을 가지고 온 다음에 처리해야 하는 함수가 있을 수도 있다. 예를 들면 데이터를 가지고 오고 그 데이터를 처리하는 함수라던지.. 이러한 함수를 사용할 수 있게 하는 방법으로 콜백 함수를 사용하는 방법이 있다. (위 코드에 B를 출력하는 부분도 콜백함수다!)

 

function 함수이름(비동기처리할 것, 콜백)

보통 이렇게 생겼다. 

비동기 처리할 것을 처리하고 나면 콜백 함수를 실행한다. 

그러나 콜백 함수는 데이터를 받아서 사용자 처리를 하고 인증을 받고 출력하는 과정과 같은 로직에서 콜백 지옥을 일으킬 수 있다.

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

이렇게 작성하게 되면 가독성이 현저하게 떨어진다는 문제가 발생한다. 

솔직히 다른 사이트에서 가져온 코드지만 지금도 무슨 코드인지 헷갈린다. 

이 문제를 해결하기 위한 방법으로 함수를 분리하는 방법도 있지만 다음 게시글 때 Promise에 대해 알아보자.

 

정리

비동기함수: 해당 로직이 끝나는 것을 기다리지 않고 다른 로직을 실행하는 것

콜백: 해당 비동기 로직이 끝나고 실행되는 함수

 

[Promise] Promise API에 대해 알아보자

 

참고

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/