오늘은 동기, 비동기의 개념과 자바스크립트는 어덯게 비동기적인 처리를 할 수 있는지에 대해서 정리해보고자 합니다.
웹 어플리케이션을 개발하다 보면 처리할 때 시간이 걸리는 작업이 있습니다. 예를들어 동영상 파일을 로딩과 같이 네트워크 송수신과정에서 작업의 효율성을 위해 비동기적으로 작업을 처리하게 됩니다.
동기(Synchronous)
어떤 작업을 동기적으로 처리한다는 것은 요청이 있으면 요청에 대한 결과를 기다려며, 중지되어 있는 상태가 됩니다. 하지만 어플리케이션의 네트워크가 동기적으로 작동한다면 하나의 작업이 끝날때 까지 다른 작업들을 할 수 없게 됩니다. 이런 작업을 Blocking 하다고 합니다.
비동기(Asynchronous)
동기적으로 작업을 진행하였을 경우, 작업들이 다른 작업과 관계없이 진행되어 가장 시간이 오래걸리는 작업이 끝나면 모든 작업이 종료 됩니다. 작업이 도중에 중단되지 않아 Non-blocking 하다고 합니다.
아래의 그림을 보면 쉽게 알 수 있습니다. 동기적으로 작업을 할 경우 총 7,030ms가 걸리는 작업을 비동기적으로 처리할 경우에는 3,500ms면 처리가 가능합니다.
자바스크립트는 단일 스레드(Single thread)?
자바스크립트를 공부하다보면 자바스크립트는 단일 스레드라는 표현을 자주 보게 됩니다. 스레드란 프로세스를 처리하는 흐름을 의미하며, 단일 스레드가 어떻게 비동기적으로 작업을 하는 것일까요?
자바스크립트 엔진은 하나의 메모리힙과 단일 호출 스택(Call Stack)을 가지고 있습니다. 그러므로 이 엔진 구조상으로는 한번에 하나의 함수만 동기적으로 실행이 가능해야 합니다.
그러나 브라우저, node.js와 같은 런타임 환경에서 멀티스레드를 지원하기 때문입니다.
위의 그림은 Call Stack과 Memory Heap이 하나만 존재하는 단일스레드 환경에서 Web API와 Event Loop를 활용하여 비동기적인 작업을 처리하는 것을 보여 줍니다.
Web API는 브라우저에서 제공하는 API로 DOM, AJAX, TimeOut 등 여러가지가 있습니다.
CallStack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백 함수를 Callback Queue(Task Queue)에 넣습니다.
Event Loop는 CallStack과 Callback Queue(Task Queue)의 상태를 체크하여, CallStack이 비어 있을 때,Callback Queue의 첫번째 콜백 함수를 CallStack으로 이동 시킵니다.
아래의 링크를 타고 이동하면 자바스크립트 코드가 어떻게 비동기적으로 작동하는지 실습할 수 있습니다.
http://latenflip.com/loup
reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop
