자바스크립트의 비동기 처리

자바스크립트의 특징 중 하나로 자바스크립트가 싱글스레드 언어라는 점이 존재한다.

 

싱글스레드란?

스레드(Thread) : 프로세스가 할당 받은 자원을 이용하는 실행의 단위로서, 프로세스 안에는 반드시 하나 이상의 스레드가 존재한다.

 

싱글스레드 : 프로세스 내에서 단일 스레드를 이용하는 방식이다.

 

싱글스레드의 특징

• 한번에 하나의 일만 처리가 가능하다.
• 문맥 교환(context switching) 작업이 필요가 없다. 
• 프로그래밍 난이도가 쉽고 CPU 및 메모리를 적게 사용한다.
• 단순 CPU만을 사용하는 계산 작업에 있어서는 멀티 스레드보다 효율적이다.

 

이러한 싱글스레드의 특징으로 인해 자바스크립트는 코드를 동기적으로 처리한다.

 

하지만 자바스크립트내에서 비동기 처리에 대한 예시와 사용 예시를 많이 본 경험이 존재한다. 

분면 자바스크립트는 싱글스레드 언어인데 왜 비동기 처리가 발생할 경우에 멀티스레드 언어 처럼 동작하는 것인가?

 

그 방법에 있어서는 자바스크립트의 런타임 환경에 있어서 이 특징이 나온다.

 

 

자바스크립트의 동작 방식

자바스크립트 엔진은 메모리 힙 (Memory Heap)과 콜 스택 (Call Stack) 으로 구성되어있다.

 

코드를 실행하게 되면 싱글스레드의 특성으로 인해 코드 하나하나가 스택에 쌓여 처리가 됩니다.

 

이 때 비동기 처리 코드가 콜 스택에 쌓이게 되면 바로 제거되는 즉시에 자바스크립트 런타임 환경의 Web API로 넘겨줍니다.

 

Web API에서 비동기에서 설정한 시간이 완료 된다면 콜백 큐 (Callback Queue) 로 넘겨 줍니다.

 

콜백 큐에 넘겨진 코드들은 바로 콜 스택에 넘겨주는 것이 아니라 이벤트 루프(Event Loop)가 돌면서 콜 스택에 더 이상 쌓일 스택이 없다는 것을 확인하게 되면 그 때 콜 스택에 넘겨 줍니다.

 

• 유의해야할 점: 콜백 큐는 마이크로 태스크큐(Event Queue) 와 매크로 태스크큐(Job Queue) 로 구성되어 있습니다. 
• API에 따라 어떤 콜백 큐를 사용할지 결정이 되며 처리되는 순서는 마이크로 태스트 큐가 우선순위를 가집니다.
  • 마이크로 태스트 큐 :  Promise, process.nextTick, queueMicrotask(f), MutationObserver
  • 매크로 태스트큐 :setTimeOut, setIntervak, setImmediate, UI rendering requestAnimationFrame, I/O 
    RequestAnimationFrame 이 setTimeOut 보다 먼저 실행된다.

 

콜 스택에서 그 때 실행되는 비동기 코드들이 실행이 됩니다.

 

 

 

즉 자바스크립트 자체는 싱글 스레드 프로그래밍 언어의 특성으로 인해 동기적 처리로 진행이 되지만, 자바스크립트 런타임 환경에서 자바스크립트 실행시 Web API, 콜백 큐, 이벤트 루프로 인하여 멀티 스레드 처럼 실행이 된다는 것을 의미합니다.