JavaScript 작동 원리와 런타임, event loop, task queue, asynchronous 개념 정리

JavaScript란(특성 및 용도)

JavaScript, JS engine, Runtime(Browser, Node.js)의 관계

JavaScript로 작성한 코드는 JS엔진에 의해 실행된다. 대표적으로 크롬기반 브라우저나 Node.js가 사용하는 V8 엔진이 있다.
하지만 JavaScript 언어나 엔진이 우리가 JS 애플리케이션을 만들기 위해 작성하는 코드 작동에 필요한 모든 것을 담당하는 것은 아니다.
- 나머지는 JavaScript가 구동하는 환경, 즉 브라우저 또는 Node.js가 담당한다.
- 브라우저/Node.js는 애플리케이션 개발에 필수적인 여러 API를 제공하고, 또한 Event Loop를 통해 비동기 처리를 가능하게 한다. 즉 이들은 JS 언어나 엔진에 내장된 요소가 아니다(not built in JS language or engine).
  - JavaScript로 무언가를 만들때는 거의 대부분의 경우 브라우저나 Node.js, 둘중 하나의 런타임 환경 위에서 구동하게 되고, 이들은 JS 이해에 있어서 떼어놓고 설명할 수 없는 요소이기 때문에 함께 공부할 필요가 있다.

JS Engine과 Runtime, Event Loop의 구조, 브라우저의 작동 방식 추가 참고 자료

Untitled

Blocking/Non-Blocking vs. Synchronous/Asynchronous

해당 개념에 대한 정의를 알고 있어야 JS가 이중 어떤 특징을 가지는지도 알 수 있을 것이다.
blocking / non-blocking, synchronous / asynchronous
- blocking/non-blocking은 어떤 일이 진행되는 동안 동시에 다음에 있는 다른 일을 수행할 수 있느냐에 대한 개념이다.
  - 즉 어떤 동작이 후속 동작의 실행을 막거나 차단하지 않는다는 의미로만 사용한다면, 비동기보다는 non-blocking이 더 정확한 표현인 것으로 보인다.
- 반면에 synchronous/asynchronous는 blocking/non-blocking의 의미를 포함하면서, 거기에 더해 어떤 일이 완료되면(혹은 응답/반응이 오면) 그걸 바로(at the same time) 확인하느냐 아니면 그렇지 않느냐까지 포함한 개념이다.
  - synchronous/asynchronous의 단어 사용 예시를 검색해보면 synchronous communication에는 화상 채팅이나, 전화, 대면 회의 등이 포함되고, asynchronous communication의 경우에는 이메일, 문자, 트위터 등이 포함되는 것을 볼 수 있다.
    
    Email is a type of asynchronous human communication. A sender sends an email. The recipient reads the email and responds to it (or not) at their convenience, not necessarily right away. All parties can continue to send and receive messages at any time. Emails don't have to be scheduled in a particular sequence. - Asynchronous(MDN)
  - 예를들어
    - asynchronous communication:
      - 해석학 숙제를 하다가 막히는 문제가 있어 교수님에게 이메일로 질문을 하고, 우선 나는 머신러닝 과제를 하고 있는다. (non-blocking)
      - 세시간 동안 머신러닝 과제를 해서 끝내고 보니, 한시간 전에 교수님에게 답장이 와 있는 것을 확인할 수 있었다. 교수님이 문제에 대한 힌트를 주셨고, 나는 그 힌트를 가지고 원래 풀던 해석학 문제를 마저 푼다. (메일은 한시간 전에 와 있었는데, 나는 메일을 바로 확인하는 것이 아니라 하고 있던 머신러닝 과제를 하고 나서 메일을 확인함 ⇒ not at the same time)
    - synchronous communication
      - 화상통화로 면접을 진행하고 있다. 면접관이 질문을 하면 나는 바로(at the same time) 답변을 해야 한다. (몇시간동안 다른일을 하다가 내가 원할때 답변을 주는게 아니다.)
      - 그리고 면접관이 질문을 하면, 당연하지만 면접자는 질문에 대한 대답을 해야한다. 와중에 딴짓을 할수가 없다(blocking).
- 이처럼 두 개념은 서로 연관되어 있고, 문맥에 따라 같은 의미로 사용되는 경우도 많지만, 차이가 있기는 있다는 것이다. 게다가 Event loop의 작동 원리를 이해하면 더 확실하게 그 차이를 알 수 있다. (아래 나옴)
  - ⇒ 실제로 JavaScript의 이벤트 루프는 위에서 설명한 asynchronous 방식으로 동작한다. (non-blocking으로만 동작하는게 아니다).
    - 참고: 이 부분이 바로 JS의 asynchronous함을 설명하는 핵심이다. 다시 정리해보자.

non-blocking은 왜 필요한가?

JavaScript 애플리케이션에서 필요한 몇몇 작업들은 non-blocking하게 작동할 필요가 있고, 따라서 그렇게 설계되어 있다.
- 비동기적으로 처리되는 non-blocking 동작은 API 에 속한 것들이 대부분이기 때문에, (브라우저/node)API, non-blocking/asynchronous, 그리고 event loop 사이에는 서로 밀접한 관련이 있다.
  - e.g. DOM event, timer, data fetching(HTTP request/response, AJAX(XMLHttpRequest)), file I/O, … etc.
- 예를들어 1) JavaScript가 데이터를 불러오는 동안에, 혹은 2) 어떤 event가 발생하기 전까지 다음 코드를 실행할 수 없다면(즉 이런 동작들이 blocking하게 작동한다면) 상당한 비효율이 될 것이다.
- 따라서 JS에서 이런 data fetching이나 DOM event 같은 동작들은 non-blocking하게 처리될 수 있도록 설계되어 있다.

JavaScript는 synchronous인가 asynchronous인가?

JavaScript는(정확하게는 JS를 포함한 런타임은) blocking동작은 synchronous하게, non-blocking동작은 asynchronous하게 처리한다. 그리고 비동기 처리는 (브라우저나 Node.js가 제공하는) Event Loop 덕분에 가능하다. (Event Loop가 JS에 내장된 요소가 아니기 때문에 위에서 런타임이라고 표현한 것이다)
- 즉 “JS는 blocking이다/non-blocking이다” 또는 “sync다/async다.” 이렇게 둘중 하나로 말할 수 있는 개념이 아니다.

Event Loop은 어떻게 비동기 처리를 하는가 ~ 구체적인 예시와 설명

그럼 구체적으로 JavaScript엔진과 Event Loop는 어떻게 비동기 처리를 하는지 알아보자 (그리고 우리는 왜 그걸 “비동기asynchronous” 처리라고 부르는지도)

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  setTimeout(function () {
    console.log('func2');
  }, 0);

  func3();
}

function func3() {
  console.log('func3');
}

func1();

JS코드를 실행하는 주체는 JS엔진이다. JS엔진(V8기준)은 코드를 실행하면서 순차적으로 Call Stack에 작업(실행 컨텍스트)을 쌓고, 마지막에 쌓인 녀석들부터 순서대로 처리해 나간다(그것이 stack이니까). 이것을 다른말로 하면 동기적 처리고, 여기까지가 엔진의 역할이다.
- 즉 엔진만 놓고 보면 엔진은 동기적 처리만을 할줄 안다고 볼 수 있을 것이다
- 만약 실제로 blocking task들만 가지도록 코드를 작성하면 당연히 해당 코드에서는 동기적 처리만 발생할 것이다. 즉 앞서 말한것처럼, JavaScript가 그 자체로 동기적이거나 비동기적인 것이라고 하기보다는, 동기적 작업과 비동기적 작업을 모두 처리할 수 있다고 말하는 것이 더 정확하다.
그런데 엔진이 Call Stack에 있는 작업들을 처리해 나가다가 non-blocking으로 설계된 asynchronous operation(HTTP request, DOM event, timer timeout 등)을 맞닥뜨릴 경우, 이 작업은 엔진과 콜스택의 손을 떠나게 되고, 엔진은 우선 콜스택에 있는 다음 작업을 이어서 진행해 나가게 된다.