비동기

비동기

---

비동기란 일련의 함수 호출 시 순서대로 실행된 함수가 끝나길 기다리지 않고 다음 함수를 호출하는 것을 말한다. 이와 관련하여 많은 예제들이 있지만 대체적으로 카페에서 커피 주문 후 커피를 받을 때 까지 다음 주문을 받지 않고 기다리는 것이 아니라 손님에게 벨을 주고 다음 사람의 주문을 받는 식으로 진행 되는 것을 비동기의 한 예라고 볼 수 있다. 벨을 받은 사람은 자신의 커피가 준비되어 벨이 울릴 때 까지 기다리고 주문을 기다리는 사람은 앞의 사람이 커피를 받을 때까지 기다리는 것이 아니라 바로 이어서 주문하고 같이 커피 준비 대기열로 들어간다. 이렇게 함으로써 웹에서는 클라이언트가 어떤 요청을 하게 되면 서버가 응답할 때 까지 기다리는 것이 아니라 다른 작업을 할 수 있게 됨으로써 UX의 긍정적 효과를 볼 수 있다.

자바스크립트 대부분의 DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 요청은 이러한 비동기식 처리모델로 동작한다.

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  setTimeout(function() {
    console.log('func2');
  }, 0);

  func3();
}

function func3() {
  console.log('func3');
}

func1();

// result
'func1'
'func3'
'func2'

위의 예제와 같이 setTimeout은 비동기식 처리가 되어 순서대로 콘솔이 실행되는 것이 아니라 이벤트 queue에 담긴 func2의 console.log가 앞에서 call stack 에 쌓인 함수를 먼저 처리 후에 마지막으로 처리되기 때문에 결과가 다른 순서로 나오게 된다.

이에 관해 좀 더 상세히 자바스크립트 내부 동작을 보기 위해 다음 장의 이벤트를 참고 하도록 하자.

 

참고링크)

 

https://flaviocopes.com/javascript-async-await/

Modern Asynchronous JavaScript with Async and Await

https://evan-moon.github.io/2019/09/19/sync-async-blocking-non-blocking/

동기(Synchronous)는 정확히 무엇을 의미하는걸까?