[JavaScript][비동기] 비동기 처리 동작

▶ 브라우저 환경에서의 JavaScript 비동기 처리 동작 방식

1. 모든 작업은 Call Stack (LIFO)으로 들어간 후 처리된다.  2. 오래 걸리는 작업이 Call Stack으로 들어오면 Web API로 보내 별도로 처리하도록 한다.  3. Web API에서 처리가 끝난 작업들은 곧바로 Call Stack으로 들어가지 못하고  Task Queue(FIFO)에 순서대로 들어간다.  4. Event Loop가 Call Stack이 비어있는 것을 계속 체크하고  Call Stack이 빈다면, Task Queue에서 가장 오래된 (가장 먼저 처리되어 돌아온) 작업을  Call Stack으로 보낸다.

 

▶ 비동기 처리 동작 요소 

1. Call Stack  요청이 들어올 때마다 순차적으로 처리하는 Stack (LIFO) 기본적인 JavaScript의 Single Therad 작업 처리  2. Web API 브라우저에서 제공하는 runtime 환경  (JavaScript 엔진이 아님) 시간이 소요되는 작업을 처리한다 (setTimeout, DOM Event, 비동기 요청 등) 3. Task Queue (Callback Queue) 비동기 처리된 Callback 함수가 대기하는 Queue(FIFO) 4. Event Loop Task(작업)이 들어오기를 기다렸다가 Task가 들어오면 이를 처리한다  처리할 Task가 없는 경우에는 잠드는  끊임없이 돌아가는 자바스크립트 내 loop이다.  Call Stack과 Task Queue를 지속적으로 모니터링한다.  Call Stack이 비어있는지 확인한다.  만약 비어있다면, Task Queue에서 대기 중인 오래된 작업을 Call Stack으로 Push한다

 

▶ 정리 

JavaScript는 1번에 1개의 작업을 수행하는 Single Thread 언어이다.  (동기적 처리를 진행함) 하지만, 브라우저 환경에서는 Web API에서 처리된 작업이 지속적으로 Task Queue를 거쳐  Event Loop에 의해 Call Stack에 들어온다  이 후 순차적으로 실행됨으로써  비동기 작업이 가능한 환경이 된다.