1. 동기와 비동기

프로그래밍에 입문하면서 종종 들어왔지만, 애써 모른척 해왔던 개념이다.
왜냐면 너무 어렵게 다가왔기 때문이다.
솔직히 말하자면 개념 자체가 어려운 것이 아닌, 단어가 어렵다고 생각한다.

동기는 synchronous: '동시에 일어나는'의 의미를,
비동기는 Asynchronous: '동시에 일어나지 않는'다는 의미를 갖는다.
하지만, 위 그림상에서 둘은 반대 개념인 것처럼 느껴진다.
여기서 쟁점은 동시성의 발생을 어디로 보느냐의 차이다.

동기는 요청의 결과가 그 자리에서 동시에 일어나야 하지만, 비동기는 그렇지 않다.
따라서 동기적 주문의 경우 그 자리에서 커피를 받아야만 다음 작업을 처리할 수 있고,
비동기적 주문의 경우 진동벨을 받는 방식이라 한 번에 여러 주문을 처리할 수 있어 속도가 빨라지게 된다.
이렇게 우리는 실생활 속에서도 비동기식 처리 모델을 마주하게 되는 것이다.

2. 비동기적 처리가 필요한 이유

위에서 보았듯, 비동기로 처리하는 방식은 효율성을 상승시켜 처리 속도를 높여준다.
보통 서버와 통신할 때 가장 많은 시간이 소요되므로 네트워크 관련 작업들은 비동기적으로 구현되어 있다고 한다.
따라서 자바스크립트 외적인 것, 예를 들어 DOM에 접근하는 메서드나 브라우저가 제공하는 웹 API 같은 것은 이미 비동기로 만들어져 있다.
덕분에 빨리빨리 민족인 우리나라 사람들은 길고 긴 로딩을 기다리지 않고도 웹, 앱을 이용할 수 있게 된다.

3. 비동기적 처리의 예시

function hello(){
console.log('hello');
niceTo();
}
function niceTo(){
setTimeout(()=>{console.log('niceTo')}, 0)
meetYou();
}
function meetYou(){
console.log('meetYou')
}
hello();
// hello meetYou niceTo

그동안 배웠던대로면 순서대로 함수가 실행되는 것이 맞는데, 출력된 결과값은 영문법이 맞지 않는 문장이다.
왜 그런것일까?
그 이유는 바로 setTimeout 메서드에 있다.
이 친구는 자바스크립트 내장 함수가 아닌, 브라우저에서 제공하는 웹 API이자 비동기 함수이기 때문이다.

hello() 함수가 호출되면 해당 함수는 콜스택에 쌓인다. 이 함수가 niceTo()함수를 호출하므로 niceTo()도 콜스택에 쌓이지만 setTimeout의 콜백함수는 즉시 실행되지 않고,
지정 대기 시간만큼 기다린 후 이벤트 발생시 큐로 이동하여 콜스택이 비어졌을때가 되서야 다시 콜스택으로 이동되어 실행된다.



아직 이해가 어렵다면 한 가지의 예시를 더 보도록 하자.

setTimeout(() => {console.log("1번")}, 5000);
setTimeout(() => {console.log("2번")}, 3000);
setTimeout(() => {console.log("3번")}, 1000);
console.log("4번")
// 4번->(1초)->3번->(2초)->2번->(2초)->1번

적힌 순서대로 1번 2번 3번 4번으로 될 것 같지만,
위에서 말했듯 setTimeout은 비동기 함수이기 때문에 완전히 다른 결과가 나오게 된다.
setTimeout이 만약 동기적으로 처리됐다면 5초뒤 1번이, 3초뒤 2번이, 1초뒤 호출되어 총 8초가 걸렸겠지만,
비동기적으로 처리됐기 때문에 전체 걸린 시간은 5초가 된 것이다.


.
.
이렇게 동기, 비동기의 개념을 간단히 알아보고, 왜 비동기 함수를 쓰며 어떻게 쓰이는지에 대해 알아 보았다.
다음 포스팅에서는 자바스크립트로 이 비동기 함수를 만드는 방법과 동기적으로 사용하는 방법에 대해 공부해 보고자 한다.