<div id="readability-page-1" class="page"><div><p>Javascript가 비동기작업을 가능하도록 해주는 Event loop에 대해 정리해본다.</p>
<hr>
<h2 id="사전지식">사전지식</h2>
<p>Event Loop를 알아보기에 앞서 사전에 필요한 지식들에 대해 간단히 정리해본다.</p>
<h2 id="thread">Thread</h2>
<blockquote>
<p>Process의 일꾼</p>
</blockquote>
<p>Thread는 Process에 종속되는 일꾼이다(= Task 처리자).<br>
Process는 가지고있는 Thread의 수 만큼 병렬로 Task를 처리할 수 있다.</p>
<h3 id="javascript의-thread">Javascript의 Thread</h3>
<blockquote>
<p>Javascript는 Thread가 하나다. (= Single Thread)</p>
</blockquote>
<p>Javascript에서는 Thread를 생성/관리할 수 없다.<br>
따라서 JS 애플리케이션은 한번에 한가지일밖에 처리할 수 없다.</p>
<p>Thread가 하나밖에 없다면, callback이 수행될때까지 아무런일도 할 수 없을것이다.</p>
<ul>
<li><code>Promise</code>: resolve 또는 reject 될 때까지 대기</li>
<li><code>setTimeout</code>: delay 시간만큼 대기</li>
<li><code>addEventListener</code>: event가 발생할때까지 대기</li>
</ul>
<p>그러나 웹애플리케이션은 위의 예상대로 동작하지 않는다.<br>
즉 비동기작업을 지원한다는 이야긴데, 어떻게 가능한것인지 알아보자.</p>
<h2 id="runtime-environment">Runtime Environment</h2>
<blockquote>
<p>Javascript Engine을 구동시키는 환경</p>
</blockquote>
<p>Javascript는 Javascript Engine(ex. V8)에 의해 해석되고 실행된다.<br>
이 Javascript Engine은 Runtime Environment를 통해 구동된다.<br>
(앞으로 편의상 Javascript Engine을 JS라고 부르겠다.)</p>
<p>대표적인 JS 런타임 환경으로는 </p>
<ul>
<li>Browser</li>
<li>Nodejs</li>
</ul>
<p>가 있다.</p>
<p>JS는 Single Thread 지만, 런타임환경은 Multi Thread를 지원한다.<br>
JS가 비동기작업이 가능한 이유는 여기에 있다.</p>
<hr>
<h2 id="event-loop">Event Loop</h2>
<blockquote>
<p>비동기작업의 처리를 위한 <code>Javascript Engine</code>과 <code>Runtime Enviornment</code> 간의 통신매커니즘.</p>
</blockquote>
<p>Javascript로 작성된 애플리케이션은 런타임환경의 Multi Thread를 활용하여 비동기작업을 수행한다고 앞서 정리했다.</p>
<p>JS가 런타임환경의 Mutli Thread를 어떻게 활용할 수 있을까?<br>
<code>런타임환경이 제공하는 API</code>와 <code>Event Loop</code>를 이용하여 JS와 런타임 환경이 서로 통신함으로써 비동기작업이 가능해진다.</p>
<h2 id="원리">원리</h2>
<blockquote>
<p>Event Loop 로직이 <code>런타임의 Task Queue</code>와 <code>JS의 Call Stack</code>을 감시한다.</p>
</blockquote>
<ol>
<li>JS가 비동기와 관련된 <strong>런타임환경이 제공하는 API를 호출</strong>한다.<br>
(특정 이벤트가 발생했을 때 동작하는 callback 함수를 넘긴다.)</li>
<li>런타임환경이 API 해당하는 이벤트가 발생되었을때, <strong>수행되어야 하는 callback 함수를 <code>Task Queue</code>에 넣는다</strong>.</li>
<li>JS의 <code>Call Stack</code>이 비워졌을 때, <code>Event Loop</code>에 의해 <strong><code>Task Queue</code>에 있는 callback 함수가 <code>Call Stack</code>으로 이동되어 수행</strong>된다.</li>
</ol>
<h3 id="js-call-stack">[JS] Call Stack</h3>
<ul>
<li>현재 수행중인 함수들의 목록이 들어있다.</li>
<li>이름에서 알 수 있듯이 Stack 구조로 되어있다.</li>
<li>함수의 호출/작업순서를 저장한다.</li>
</ul>
<h3 id="runtime-task-queue">[Runtime] Task Queue</h3>
<ul>
<li>수행되어야할 Callback 함수들이 들어있다.</li>
<li>실제로 다양한 Task Queue들이 존재한다.</li>
<li>Task Queue 종류는 런타임 환경마다 다르다.</li>
<li>각 Task Queue마다 처리되는 방식이 다르다.</li>
</ul>
<hr>
<h2 id="참고">참고</h2>
<p><a href="https://poiemaweb.com/js-event">https://poiemaweb.com/js-event</a><br>
<a href="https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop">https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop</a><br>
<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop">https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop</a><br>
<a href="https://academy.dream-coding.com/courses/take/browser101/texts/25397917-1-7">https://academy.dream-coding.com/courses/take/browser101/texts/25397917-1-7</a></p></div></div>

ginameee.log

Jangchun Lee

Javascript가 비동기작업을 가능하도록 해주는 Event loop에 대해 정리해본다.
사전지식
Event Loop를 알아보기에 앞서 사전에 필요한 지식들에 대해 간단히 정리해본다.
Thread
Process의 일꾼
Thread는 Process에 종속되는 일꾼이다(= Task 처리자).
Process는 가지고있는 Thread의 수 만큼 병렬로 Task를 처리할 수 있다.
Javascript의 Thread
Javascript는 Thread가 하나다. (= Single Thread)
Javascript에서는 Thread를 생성/관리할 수 없다.
따라서 JS 애플리케이션은 한번에 한가지일밖에 처리할 수 없다.
Thread가 하나밖에 없다면, callback이 수행될때까지 아무런일도 할 수 없을것이다.
Promise: resolve 또는 reject 될 때까지 대기
setTimeout: delay 시간만큼 대기
addEventListener: event가 발생할때까지 대기
그러나 웹애플리케이션은 위의 예상대로 동작하지 않는다.
즉 비동기작업을 지원한다는 이야긴데, 어떻게 가능한것인지 알아보자.
Runtime Environment
Javascript Engine을 구동시키는 환경
Javascript는 Javascript Engine(ex. V8)에 의해 해석되고 실행된다.
이 Javascript Engine은 Runtime Environment를 통해 구동된다.
(앞으로 편의상 Javascript Engine을 JS라고 부르겠다.)
대표적인 JS 런타임 환경으로는 
Browser
Nodejs
가 있다.
JS는 Single Thread 지만, 런타임환경은 Multi Thread를 지원한다.
JS가 비동기작업이 가능한 이유는 여기에 있다.
Event Loop
비동기작업의 처리를 위한 Javascript Engine과 Runtime Enviornment 간의 통신매커니즘.
Javascript로 작성된 애플리케이션은 런타임환경의 Multi Thread를 활용하여 비동기작업을 수행한다고 앞서 정리했다.
JS가 런타임환경의 Mutli Thread를 어떻게 활용할 수 있을까?
런타임환경이 제공하는 API와 Event Loop를 이용하여 JS와 런타임 환경이 서로 통신함으로써 비동기작업이 가능해진다.
원리
Event Loop 로직이 런타임의 Task Queue와 JS의 Call Stack을 감시한다.
JS가 비동기와 관련된 런타임환경이 제공하는 API를 호출한다.
(특정 이벤트가 발생했을 때 동작하는 callback 함수를 넘긴다.)
런타임환경이 API 해당하는 이벤트가 발생되었을때, 수행되어야 하는 callback 함수를 Task Queue에 넣는다.
JS의 Call Stack이 비워졌을 때, Event Loop에 의해 Task Queue에 있는 callback 함수가 Call Stack으로 이동되어 수행된다.
[JS] Call Stack
현재 수행중인 함수들의 목록이 들어있다.
이름에서 알 수 있듯이 Stack 구조로 되어있다.
함수의 호출/작업순서를 저장한다.
[Runtime] Task Queue
수행되어야할 Callback 함수들이 들어있다.
실제로 다양한 Task Queue들이 존재한다.
Task Queue 종류는 런타임 환경마다 다르다.
각 Task Queue마다 처리되는 방식이 다르다.
참고
https://poiemaweb.com/js-event
https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop
https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop
https://academy.dream-coding.com/courses/take/browser101/texts/25397917-1-7

Event Loop

댓글