동기, 비동기
이미지출처 : https://learnjs.vlpt.us/async/
동기
코드가 반드시 작성된 순서 그대로 실행된다. 즉, 먼저 시작된 하나의 작업이 끝날 때까지 대기하다가 작업이 끝나면 다음순서의 작업을 시작하는 방식이다.
동기의 동작 원리
1.Call stack에 작성한 코드 순서대로 push한다.
2. 쌓인 반대 순서대로 실행한다. (후입선출 LIFO)
3. 실행을 마친 코드는Call stack에서 pop한다.
비동기
코드가 작성된 순서대로 실행되는 것이 아닌 코드이다. 즉, 먼저 시작된 하나의 작업이 끝날 때까지 대기하지 않고 여러 작업이 처리되는 방식이다.
비동기의 동작 원리
1.Call stack에 작성한 코드 순서대로 push한다.
2. 도중에 비동기 함수가 push되어 쌓이면Web API이동 된 후Call stack에서 pop한다.
3.Web API에서 비동기 함수의 이벤트 실행을 마친 후Callback Queue로 push한다.
그동안Call stack에서는 다른 코드들을 순차적으로 실행 및 pop한다.
4.Call stack이 비어있는것을Event Loop가 확인한 후Callback Queue에 대기중인 콜백 함수를Call stack에 push한다.
5.Call stack에 push된 함수는 실행을 완료한 후 pop되며 실행이 마무리된다.
출처 : https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
gif로 설명된 비동기의 동작 원리를 보면 더욱 쉽게 이해 할 수 있다.
(Lydia Hallie님의 자료 덕분에 순식간에 이해할 수 있었다.. 감사합니다!)
(https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)
References
https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/
https://www.youtube.com/watch?v=8aGhZQkoFbQ
