[모던자바스크립트 DeepDive] 42장 비동기 프로그래밍

 본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다.

 

 

 

 

동기와 비동기

동기

• 순차적으로 실행하는 것을 의미하며, 현재 실행 중인 태스크가 종료될 때까지 대기하는 방식을 의미한다.

비동기

• 실행순서와 상관없이 실행하는 것을 의미하며, 현재 실행 중인 태스크가 종료되기 전에 다음 태스크를 실행하는 것을 의미한다.

 

 

 

 

블로킹과 논블로킹

블로킹

• 동기처리로 인해서 다음 태스크의 실행이 중지되는 현상

논블로킹

• 비동기처리로 인해서 다음 태스크의 실행을 바로하는 것

 

 

 

📙 콜 스택

• 실행 컨텍스트 스택을 의미하며,
• 현재 실행중인 함수들이 실행 순서대로 들어가서 실제로 실행되게 해주는 자료구조이다.

 

📙 태스크 큐

• 비동기 함수의 콜백함수들이 임시적으로 보관되는 영역이다.

 

📙 이벤트 루프

• 브라우저에 내장되어 있는 기능이며,
• 콜스택과 태스크 큐를 반복적으로 확인하고
• 콜스택이 비어있고 태스크 큐에 대기중인 함수가 있다면 순차적(FIFO, 선입선출) 으로 대기중인 함수를 콜스택으로 이동시키는 역할을 한다.

 

📙 힙

• 동적 메모리 공간을 의미하며,
• 객체같이 크기가 정해지지 않고 메모리에 할당해야하는 값에 할당할 메모리 공간이다. 
• 메모리 공간이 런타임시에 결정되는 값이 메모리공간을 할당받는 곳

 

📙 Web API

• 브라우저가 제공하는 API 이며,
• 타이며, AJAX, DOM 이벤트 등의 처리를 책임진다.

 

 

 

 

 

 

 

 

자바스크립트 동작 방식

function foo() {
  console.log("foo");
}

function bar() {
  console.log("foo");
}

setTimeout(foo, 0);
bar();

1. 전역 실행 컨텍스트가 콜스택에 쌓임
2. setTimeout(foo, 0)이 콜스택에 쌓임
3. setTimeout(foo, 0)이 콜스택에서 제거되며 타이머API로 콜백함수(foo)와 시간(0)을 전달
   4-1. bar()가 콜스택에 쌓임
   4-2. 타이머API가 시간을 재고 시간초과시 콜백함수(foo)를 태스크 큐로 이동시킴
4. bar()의 console.log("bar")가 콜스택에 쌓임
5. console.log("bar")실행 후 콜스택에서 제거
6. bar()를 콜스택에서 제거
7. 전역 실행 컨텍스트가 콜스택에서 제거
8. 이벤트루프에 의해서 콜백함수(foo())가 콜스택에 쌓임
9. foo()의 console.log("foo")가 콜스택에 쌓임
10. console.log("foo")실행 후 콜스택에서 제거
11. foo()를 콜스택에서 제거
12. 실행종료

• 4-1과 4-2는 동시에 실행
  자바스크립트는 싱글 스레드로 동작함 ( 한번에 하나의 처리밖에 못함 )
  하지만 타이머와 콘솔출력같은 동작을 동시에 실행하는 이유는 자바스크립트 엔진이 싱글 스레드고, 브라우저가 멀티 스레드이기 때문임.
  브라우저가 자바스크립트 엔진을 가지고 있고, 자바스크립트에서 타이머, ajax요청 등의 비동기 처리가 들어오면 브라우저 자체적으로 가진 Web API를 이용해서 각각을 처리하므로 자바스크립트는 콜스택에 쌓여있는대로 하나의 스레드가 처리하는 것이고 나머지 처리들은 브라우저가 멀티 스레드이므로 브라우저가 적절하게 처리해줌