42. 비동기 프로그래밍

42.1 동기 처리와 비동기 처리

• 자바스크립트 엔진은 싱글스레드방식으로 동작
• 동기 처리 : 현재 실행중인 태스크가 종료할 떄까지 다음에 실행될 태스크가 대기하는 방식
• 비동기 처리 : 실행중인 태스크가 종료되지 않은 상태여도 다음 태스크를 곧바로 실행하는 방식

42.2 이벤트 루프와 태스크 큐

• 브라우저 내장기능 중 하나로 자바스크립트의 동시성을 지원함
  

1. 자바스크립트 엔진의 구성

• 콜 스택 (call stack) : = 실행 컨텍스트 스택, 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행됨.
  실행 중인 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행되지 않음
• 힙 (heap) : 객체가 저장되는 메모리공간으로 실행 컨텍스트는 힙에 저장된 객체를 참조함.
  힙은 구조화 되어 있지 않다는 특징이 있음

2. 브라우저 환경의 구성

• 태스크 큐 (tast queue, event queue, callback queue) : setTimeout이나 setInterval과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역
  태스크큐와는 별도로 프로미스의 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는 마이크로태스크 큐도 존재함
• 이벤트 루프 (event loop) : 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인하여 콜 스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로(FIFO) 태스트 큐에 대기 중인 함수를 콜 스택으로 이동시킴
• Web API : 브라우저에서 제공되는 API로 DOM API와 타이머 함수, HTML요청(Ajax)과 같은 비동기 처리를 포함함