{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/EventLoop/","result":{"data":{"site":{"siteMetadata":{"title":"Hun's Footsteps 🥷","author":"전여훈","siteUrl":"https://jeonyeohun.netlify.app","comment":{"disqusShortName":"","utterances":"jeonyeohun/jeonyeohun.github.io"},"sponsor":{"buyMeACoffeeId":"jeonyeohun"}}},"markdownRemark":{"id":"572a7f6b-f3b5-55b6-9f45-ae71b0ea910b","excerpt":"자바스크립트 엔진은 싱글스레드이다. 자바스크립트 언어를 파싱하고 실행하는 자바스크립트 엔진은 싱글스레드로 구성되어 있다. 따라서 동기적으로 코드가 처리되어야 한다. 자바스크립트 엔진’만’ 사용한다면 말이다. 자바스크립트 엔진의 메모리 구조. 자바스크립트 엔진은 두 종류의 메모리 구조를 가진다. 메모리 힙 : 메모리 힙은 객체나 변수 등의 할당을 위해 사용하는 메모리 공간이다. 콜 스택 : 실행되어야 하는 함수가 담기는 스택형태의 자료구조이다. 마지막에 들어온 함수부터 pop…","html":"<h2 id=\"자바스크립트-엔진은-싱글스레드이다\" style=\"position:relative;\"><a href=\"#%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84%EC%9D%80-%EC%8B%B1%EA%B8%80%EC%8A%A4%EB%A0%88%EB%93%9C%EC%9D%B4%EB%8B%A4\" aria-label=\"자바스크립트 엔진은 싱글스레드이다 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>자바스크립트 엔진은 싱글스레드이다.</h2>\n<p>자바스크립트 언어를 파싱하고 실행하는 자바스크립트 엔진은 싱글스레드로 구성되어 있다. 따라서 동기적으로 코드가 처리되어야 한다. 자바스크립트 엔진’만’ 사용한다면 말이다.</p>\n<h2 id=\"자바스크립트-엔진의-메모리-구조\" style=\"position:relative;\"><a href=\"#%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84%EC%9D%98-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EA%B5%AC%EC%A1%B0\" aria-label=\"자바스크립트 엔진의 메모리 구조 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>자바스크립트 엔진의 메모리 구조.</h2>\n<p>자바스크립트 엔진은 두 종류의 메모리 구조를 가진다.</p>\n<ol>\n<li>메모리 힙 : 메모리 힙은 객체나 변수 등의 할당을 위해 사용하는 메모리 공간이다.</li>\n<li>콜 스택 : 실행되어야 하는 함수가 담기는 스택형태의 자료구조이다. 마지막에 들어온 함수부터 pop 한다. 즉, 뒤에 실행된 함수가 종료되지 않으면 먼저 호출된 함수가 종료되지 않는다.</li>\n</ol>\n<h2 id=\"자바스크립트-엔진의-좋은-친구-web-api\" style=\"position:relative;\"><a href=\"#%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84%EC%9D%98-%EC%A2%8B%EC%9D%80-%EC%B9%9C%EA%B5%AC-web-api\" aria-label=\"자바스크립트 엔진의 좋은 친구 web api permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>자바스크립트 엔진의 좋은 친구, Web API</h2>\n<p>비동기 처리 환경이나, AJAX, DOM을 조작하는 등 더 다양한 기능을 자바스크립트 엔진이 수행하도록 하기 위해서 자바스크립트 런타임에는 <code class=\"language-text\">Web API</code> 가 함께 동작한다. Web API는 자바스크립트 엔진의 일부는 아니지만 밀접하게 연결되어 동작한다.</p>\n<h3 id=\"콜백-큐-callback-queue\" style=\"position:relative;\"><a href=\"#%EC%BD%9C%EB%B0%B1-%ED%81%90-callback-queue\" aria-label=\"콜백 큐 callback queue permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>콜백 큐 (Callback Queue)</h3>\n<p>Web API 에는 Callback Queue 가 존재한다. 콜백 큐는 Web API 가 콜백 함수를 저장하는, 선입선출로 동작하는 자료구조이다.</p>\n<h3 id=\"이벤트-루프-event-loop\" style=\"position:relative;\"><a href=\"#%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84-event-loop\" aria-label=\"이벤트 루프 event loop permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>이벤트 루프 (Event Loop)</h3>\n<p>이벤트 루프는 콜백 큐에 저장된 콜백 함수를 자바스크립트 엔진의 <code class=\"language-text\">콜 스택이 비어있을 때</code> 콜 스택으로 집어넣는 역할을 한다. 이를 위해 런타임에 이벤트 루프는 콜백 큐와 콜 스택을 계속해서 지켜보고 있는다.</p>\n<h3 id=\"비동기-처리\" style=\"position:relative;\"><a href=\"#%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC\" aria-label=\"비동기 처리 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>비동기 처리</h3>\n<p>이제 자바스크립트에서 비동기 처리가 어떻게 일어나는지 설명할 수 있다. Web API에서 제공하는 콜백 함수를 콜백 큐에 넣고 다른 작업들을 수행한 뒤에 콜 스택이 완전히 비게 되면 콜백 큐에 있던 함수가 콜 스택으로 이벤트 루프에 의해 이동되어 실행된다. 실제로 자바스크립트 엔진은 한번에 하나의 작업을 수행하지만, 비동기적으로 처리되는 것이다.</p>\n<h2 id=\"정리\" style=\"position:relative;\"><a href=\"#%EC%A0%95%EB%A6%AC\" aria-label=\"정리 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>정리</h2>\n<ol>\n<li>자바스크립트 엔진은 싱글스레드 엔진이다.</li>\n<li>브라우저 런타임에서 자바스크립트 엔진에 더 다양한 기능을 더하기 위해 Web API가 항상 함께 동작한다.</li>\n<li>자바스크립트 엔진의 콜 스택은 실행할 함수를 저장한다.</li>\n<li>Wen API의 함수가 콜 스택에서 실행되면, Web API에게 전달된다.</li>\n<li>Web API는 함수를 처리하고 필요하다면 콜백 큐에 콜백 함수를 넣는다.</li>\n<li>이벤트 루프는 콜 스택과 콜백 큐를 지켜보다가 콜 스택이 비었을 때, 콜백 큐에 있는 함수를 콜 스택으로 이동시킨다.</li>\n</ol>\n<p>setTimeout 함수 예제를 통해 정리해보자.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hi,'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hello'</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'bye.'</span><span class=\"token punctuation\">)</span></code></pre></div>\n<p>위 코드의 결과를 생각해보자. 상식적으로는 timeout 을 0초로 걸었기 때문에 다음과 같이 나올 것 같다는 생각이 든다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">hi,\nhello\nbye.</code></pre></div>\n<p>하지만 실행 결과는 이렇다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">hi,\nbye\nhello</code></pre></div>\n<p>면접에서 이 질문을 받았지만, 이벤트 루프에 대한 공부가 전혀되어 있지 않아 대답하지 못했다. 하지만 이제는 이벤트 루프를 알고있으니 대답할 수 있다..!</p>\n<p>자바스크립트 엔진과 Web API 를 생각하면서 따라가보자.</p>\n<ol>\n<li>\n<p><code class=\"language-text\">console.log(&#39;hi,&#39;)</code> 가 실행되어 콜 스택에 들어간다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\"> |      콜 스택         | 콜백 큐 |\n | :----------------: | :-----: |\n | console.log(&#39;hi,&#39;) |         |</code></pre></div>\n</li>\n<li>\n<p>콜 스택에서 console.log(‘hi’) 가 실행되며 문자열 <code class=\"language-text\">hi,</code> 가 리턴되고 pop 된다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\"> |   콜 스택      | 콜백 큐 |\n | :----------: | :-----: |\n | return &#39;hi,&#39; |         |</code></pre></div>\n</li>\n<li>\n<p>setTimeout 함수가 실행되어 콜 스택에 들어간다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\"> |         콜 스택            | 콜백 큐 |\n | :----------------------: | :-----: |\n | setTimeout(function(){}) |         |</code></pre></div>\n</li>\n<li>\n<p>setTimeout 함수는 Web API 함수이기 때문에 자바스크립트 엔진은 Web API 에게 함수를 넘기고 리턴한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\"> | 콜 스택   | 콜백 큐 |\n | :-----: | :-----: |\n | return  |         |</code></pre></div>\n</li>\n<li>\n<p>Web API는 setTimeout 함수의 두 인자를 받는다. 백그라운드에서 전달받은 시간만큼 타이머를 시작한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\"> | 콜 스택   | 콜백 큐 |\n | :-----: | :-----: |\n |         |         |</code></pre></div>\n</li>\n<li>\n<p>Web API가 타이머를 실행하는 동안 자바스크립트 엔진은 다음에 처리할 <code class=\"language-text\">console.log(&#39;bye&#39;)</code> 함수를 읽어서 콜 스택에 넣는다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\"> |      콜 스택         | 콜백 큐 |\n | :----------------: | :-----: |\n | console.log(&#39;bye&#39;) |         |\n |                    |         |</code></pre></div>\n</li>\n<li>\n<p>타이머는 0초였기 때문에 곧바로 종료되고, Web API는 콜백 큐에 setTimeout의 인자로 넘어왔던 콜백 함수를 넣는다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\"> |      콜 스택         |       콜백 큐        |\n | :----------------: | :------------------: |\n | console.log(&#39;bye&#39;) | console.log(&#39;hello&#39;) |\n |                    |                      |</code></pre></div>\n</li>\n<li>\n<p>콜 스택에 들어가 있던 <code class=\"language-text\">console.log(&#39;bye&#39;)</code> 가 실행되고 리턴된다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\"> |   콜 스택      |       콜백 큐        |\n | :----------: | :------------------: |\n | return &#39;bye&#39; | console.log(&#39;hello&#39;) |\n |              |                      |</code></pre></div>\n</li>\n<li>\n<p>콜 스택이 비었다. 이벤트 루프는 콜백 큐에 남은 함수가 있고, 콜 스택이 비어있다는 것을 감지했으므로 이 콜백함수를 콜 스택에 집어넣는다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">|       콜 스택        | 콜백 큐 |\n| :------------------: | :-----: |\n| console.log(&#39;hello&#39;) |         |\n|                      |         |</code></pre></div>\n</li>\n<li>마지막으로 <code class=\"language-text\">console.log(&#39;hello&#39;)</code> 가 실행되고 리턴된다.</li>\n<li>사용자는 결과를 다음과 같이 본다.</li>\n</ol>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">hi,\nbye\nhello</code></pre></div>","frontmatter":{"title":"[JavaScript] 자바스크립트 동작원리 - Web API와 이벤트 루프","date":"May 22, 2021"}}},"pageContext":{"slug":"/JavaScript/EventLoop/","previous":{"fields":{"slug":"/Computer-Network/Access-Network/"},"frontmatter":{"title":"[네트워크] 기본 용어들과 접속 네트워크(Basic Terms and Access Network)","category":"Computer-Network","draft":false}},"next":{"fields":{"slug":"/JavaScript/[javascript]-자바스크립트-동작원리---실행-컨텍스트/"},"frontmatter":{"title":"[JavaScript] 자바스크립트 동작원리 - 실행 컨텍스트","category":"JavaScript","draft":false}}}},"staticQueryHashes":["2486386679","3128451518"]}