비동기 흐름 이해하기

동기적이란(synchronous)?

간단하게 그림으로 설명 하자면...

 

<A,B 업무를 처리할때의 동기적인 타이밍>

|A시작-----------------A종료|

                                        |B시작---------------B종료|

A업무를 마칠때까지 B업무를 막아두는것을 Blocking이라고하고,

끝나는 시점과 시작하는 시점이 같기때문에 동기적이라고 말한다.

 

비동기적이란(asynchronous)?

<A,B 업무를 처리할때의 비동기적인 타이밍>

|A시작-----------------A종료|

|B시작---------B종료|

대표적 비동기 함수인 setTimeout 함수의 경우 이렇게 실행된다.

https://poiemaweb.com/img/event-loop.gif

A,B가 병렬로 진행된다. 순차적으로 실행 되지않는다.

자바스크립트 엔진은 단순히 작업이 요청되면 Call Stack을 사용하여 요청된 작업을 순차적으로 실행할 뿐이다. 

앞에서 언급한 동시성(Concurrency)을 지원하기 위해 필요한 비동기 요청(이벤트를 포함) 처리는 자바스크립트

엔진을 구동하는 환경 즉 브라우저(또는 Node.js)가 담당한다.