Message Queue & Event Loop

Blocking, Non-Blocking

Blocking과 Non-Blocking은 현재 수행 중인 코드가, 다음 작업 과정을 막는 경우가 발생하는지, 발생하지 않는지로 구분할 수 있습니다.
- 다음 작업을 처리하기 위해, 현재 작업이 끝날 때 까지 기다려야 하는 경우? Blocking
  - 혹은 함수 호출 시 제어권을 넘기는 경우, Blocking으로 구분할 수 있습니다.
- 현재 작업의 처리 여부와 상관없이 다음 작업을 할 수 있는 경우? Non-Blocking
  - 혹은 함수 호출 시 제어권을 넘기지 않는 경우, Non-Blocking으로 구분할 수 있습니다.
JavaScript는 싱글 스레드 기반이며, Non-Blocking 언어입니다.
- JavaScript는 싱글 스레드이기 때문에, 동기적 코드만으로 프로그램을 구성하면 문제가 발생할 수 있습니다.
- 코드를 실행할 때, 시간이 오래 걸리는 작업을 할 때를 예시로 들 수 있습니다.
  - 아래 코드처럼 어떠한 코드가 실행됨에 따라 해당 코드의 실행 때문에 다른 코드를 실행할 수 없는 현상에 주목할 수 있습니다.
  - 이 때 브라우저는 마치 정지된 것처럼 보이는데, 이것을 Blocking 현상이라고 합니다.
    - 이 현상은, 브라우저가 제어권을 돌려받아야, 다음 코드를 수행할 수 있기 때문에 발생합니다.
```
// 대표적 Blocking 함수
alert("Hello");

// alert()가 실행되면, 바로 console출력이 일어나지 않음
// 이는 alert()의 Blocking(차단)으로, console.log()의 실행이 막혔기 때문
console.log("Lee");
```
JavaScript가 만약 동기적으로만 작동한다면 어떻게 될까요?
- 네트워크 요청과 같은 작업을 여러 번 동기적으로 수행하면, 다음 작업은 곧장 실행되지 않고, 현재 진행되는 작업이 끝날 때까지 기다려야 합니다.
- 이렇게 느린 작업으로 인해, 현재 진행되는 작업이 끝나길 기다리는 Blocking이 발생하면, 웹 브라우저는 렌더링을 하지 못하게 됩니다. 물론 다른 코드 또한 실행할 수 없게 됩니다.
- 이런 부분은 UX면에서 좋지 않기 때문에, 이러한 문제를 해결해야 합니다. 이 문제를 해결하기 위해 등장한 것이 비동기 처리입니다.

Event Loop

위에서 언급한 내용을 바탕으로 정리해보면, JavaScript는 아래의 특징을 가집니다.
- 싱글 스레드 : 한 번에 하나의 작업을 실행합니다. (Call Stack이 하나)
- Non-Blocking 언어 : 이전 작업이 완료될 때까지 기다리지 않고, 다음작업이 바로 진행될 수 있도록 하는 특징입니다.

자바스크립트 엔진의 구성

캡처.JPG

JavaScript Engine(ex: V8)은 Memory Heap, Call Stack으로 구성되어 있습니다.
- JavaScript가 싱글 스레드 언어인 이유는 Call Stack이 하나이기 때문입니다.
  - Call Stack은 함수 호출 시, 실행 컨텍스트가 쌓이는 공간
- Memory Heap은 변수나 함수가 선언되면 메모리 할당이 일어나는 곳입니다.

function C() {
  return 1;
}

function B() {
  const one = C();
  return one;
}

function A() {
  const result = B();
  console.log(result);
}

A();

캡처.JPG

함수를 호출하면, 호출한 순서대로 이 Call Stack에 호출한 함수의 실행 컨텍스트가 추가됩니다.
- 가장 위에 쌓인 함수를 가장 먼저 처리하는 LIFO(Last In First Out) 방식을 따릅니다.
- 제일 처음에 실행할 때는 **메인 함수인 main()**이 먼저 push됩니다.
  - 위 예제는, 해당 과정을 수행합니다.
    1. 전역 스코프영역(main())에서, A() 호출
    2. A 함수가 Call Stack에 push되고, B() 호출
    3. B 함수가 Call Stack에 push되고, C() 호출
    4. C 함수가 Call Stack에 push되고, return 1 하면서, Call Stack에서 제거
    5. B 함수가 C()의 결과를 반환받고, return one 하면서, Call Stack에서 제거
    6. A 함수가 B()의 결과를 반환받고, console.log(result) 후, Call Stack에서 제거
      - console.log()도 함수이므로, Call Stack에 쌓였다가, 실행 종료 시 사라짐
    7. main()종료에 따라, main()도 Call Stack에서 제거

Web API

캡처.JPG