<div id="readability-page-1" class="page"><div>
      
        <header>
          
          

  <p>
    

    

    
      
      

      <span>
        
        
          3 분 소요
        
      </span>
    
  </p>


        </header>
      

      <section itemprop="text">
        
        

<p>👉 해당 포스트를 읽는데 도움을 줍니다.</p>
<ul>
  <li><a href="https://junhyunny.github.io/information/javascript/how-to-work-javascript-async/">Asynchronous Task In JavaScript</a></li>
</ul>

<p>👉 이어서 읽기를 추천합니다.</p>
<ul>
  <li><a href="https://junhyunny.github.io/react/jest/exception/recursive-set-timeout-test/">Recursive setTimeout test with Jest (feat. advanceTimersByTime 열어보기)</a></li>
</ul>

<h2 id="0-들어가면서">0. 들어가면서</h2>

<p>최근 <code>setTimeout(callback, timeout)</code> 함수의 재귀적 호출을 <code>Jest</code>의 <code>advanceTimersByTime</code> 함수를 이용하여 테스트 시 발생한 문제 상황에 대한 글을 썼습니다. 
글을 처음 작성했을 때는 설명을 정말 잘 써놨다는 생각을 했습니다. 
하지만, 다음날 팀원들에게 작성한 글을 보여주면서 이야기를 나눌땐 느낌이 이상했습니다.</p>

<blockquote>
  <p>‘지금 내가 뭘 설명하고 있는거지?’<br>
‘나도 지금 내가 이야기하고자 하는게 정리가 안된다!’</p>
</blockquote>

<p>의논이 잘 되지 않는 이유는 저한테 있었는데, 이야기를 하면서도 스스로 마이크로태스크(microtask)와 매크로태스크(macrotask)에 대한 이해도가 엄청 낮다라는 걸 깨달았습니다. 
오늘은 알고 있었다고 생각했지만, 잘 몰랐던 마이크로태스크(microtask)와 매크로태스크(macrotask)에 대한 정리를 해보려합니다.</p>

<h2 id="1-매크로태스크macrotask와-마이크로태스크microtask">1. 매크로태스크(Macrotask)와 마이크로태스크(Microtask)</h2>

<p><a href="https://junhyunny.github.io/information/javascript/how-to-work-javascript-async/">Asynchronous Task In JavaScript</a> 포스트에서 설명했듯이 <code>Web API</code> 기능이 종료되면 콜백(callback) 함수가 콜백 큐(callback queue)에 순서대로 담깁니다. 
이 때 콜백 함수가 담기는 큐는 두 가지 종류가 있습니다.</p>
<ul>
  <li>매크로태스크 큐 (macrotask queue) - 우선순위가 높습니다.</li>
  <li>마이크로태스크 큐 (microtask queue) - 우선순위가 낮습니다.</li>
</ul>

<p>매크로태스크와 마이크로태스크는 우선순위가 다르기 때문에 실행되는 순서도 다릅니다. 
당연히 우선순위가 높은 마이크로태스크가 먼저 수행되고, 다음으로 매크로태스크가 수행됩니다. 
이벤트 루프(event loop)는 마이크로태스크 큐에 담긴 모든 마이크로태스크를 처리한 후에 매크로태스크를 소비합니다.</p>

<h5 id="매크로태스크와-마이크로태스크-실행-순서">매크로태스크와 마이크로태스크 실행 순서</h5>

<p><img src="https://junhyunny.github.io/images/microtask-macrotask-in-javascript-1.gif" width="100%"></p>
<center>이미지 출처, https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke</center>


<h5 id="용어-정리">용어 정리</h5>
<p><code>ECMAScript</code> 진영은 다른 용어를 사용하는데, 간략한 표로 정리하겠습니다.</p>

<table>
  <thead>
    <tr>
      <th>ECAM</th>
      <th>V8 엔진</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Message Queue</td>
      <td>Macrotask Queue (혹은 Task Queue)</td>
    </tr>
    <tr>
      <td>PromiseJobs</td>
      <td>Microtask Queue</td>
    </tr>
  </tbody>
</table>

<h2 id="2-매크로태스크와-마이크로태스크-생성">2. 매크로태스크와 마이크로태스크 생성</h2>

<p>매크로태스크와 마이크로태스크 대상은 어느 영역인지, 언제 매크로태스크와 마이크로태스크가 생성되는지 알아보겠습니다.</p>

<h3 id="21-매크로태스크-생성">2.1. 매크로태스크 생성</h3>

<p>매크로태스크는 다음과 같은 함수를 실행할 때 생성됩니다.</p>
<ul>
  <li>setTimeout(callback, timeout)
    <ul>
      <li>매크로태스크 대상은 callback 함수입니다.</li>
      <li><code>timeout</code> 시간이 지난 후 callback 함수가 큐로 이동합니다.</li>
      <li>한번만 실행합니다.</li>
    </ul>
  </li>
  <li>setInterval(callback, timeout)
    <ul>
      <li>매크로태스크 대상은 callback 함수입니다.</li>
      <li><code>timeout</code> 시간이 지난 후 callback 함수가 큐로 이동합니다.</li>
      <li>지속적으로 실행합니다.</li>
    </ul>
  </li>
  <li>setImmediate(callback)
    <ul>
      <li>매크로태스크 대상은 callback 함수입니다.</li>
      <li>Internet Explorer 10 버전에서만 지원 (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate">Window.setImmediate()</a>)</li>
    </ul>
  </li>
  <li>requestAnimationFrame(callback)
    <ul>
      <li>매크로태스크 대상은 callback 함수입니다.</li>
    </ul>
  </li>
</ul>

<h5 id="예시-코드---settimeoutcallback-timeout">예시 코드 - setTimeout(callback, timeout)</h5>

<div><pre><code><span>const</span> <span>foo</span> <span>=</span> <span>()</span> <span>=&gt;</span> <span>console</span><span>.</span><span>log</span><span>(</span><span>"</span><span>First</span><span>"</span><span>);</span>
<span>const</span> <span>bar</span> <span>=</span> <span>()</span> <span>=&gt;</span> <span>setTimeout</span><span>(()</span> <span>=&gt;</span> <span>console</span><span>.</span><span>log</span><span>(</span><span>"</span><span>Second</span><span>"</span><span>),</span> <span>500</span><span>);</span>
<span>const</span> <span>baz</span> <span>=</span> <span>()</span> <span>=&gt;</span> <span>console</span><span>.</span><span>log</span><span>(</span><span>"</span><span>Third</span><span>"</span><span>);</span>

<span>bar</span><span>();</span>
<span>foo</span><span>();</span>
<span>baz</span><span>();</span>
</code></pre></div>

<h5 id="코드-동작-과정">코드 동작 과정</h5>
<ul>
  <li>이미지에서 보이는 큐가 매크로태스크 큐입니다.</li>
</ul>

<p><img src="https://junhyunny.github.io/images/microtask-macrotask-in-javascript-2.gif" width="100%"></p>
<center>이미지 출처, https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif</center>


<h3 id="22-마이크로태스크-생성">2.2. 마이크로태스크 생성</h3>

<p>제가 이해도가 많이 떨어졌던 부분입니다. 
특히 <code>async / await</code>를 사용하면 어느 시점에 어느 부분이 마이크로태스크가 되는지 이해도가 많이 부족했습니다. 
조금 자세히 다뤄보겠습니다.</p>

<h3 id="121-promise">1.2.1. Promise</h3>

<p><code>Promise</code>를 사용할 때 마이크로태스크는 다음과 같은 함수를 실행할 때 생성됩니다.</p>
<ul>
  <li>Promise.reslove(value).then((value) =&gt; { … });
    <ul>
      <li><code>reslove(value)</code> 함수 호출 시 마이크로태스크가 생성되어 큐에 추가됩니다.</li>
      <li>마이크로태스크 대상은 <code>(value) =&gt; { ... }</code> 함수입니다.</li>
    </ul>
  </li>
  <li>Promise.reject(error).catch((error) =&gt; { … });
    <ul>
      <li><code>reject(error)</code> 함수 호출 시 마이크로태스크가 생성되어 큐에 추가됩니다.</li>
      <li>마이크로태스크 대상은 <code>(error) =&gt; { ... }</code> 함수입니다.</li>
    </ul>
  </li>
</ul>

<h3 id="122-async--await">1.2.2. async / await</h3>

<p><code>async / await</code>는 간단한 예제 코드와 동작 과정을 통해 확인해보겠습니다.</p>

<h5 id="예시-코드">예시 코드</h5>
<ul>
  <li>다음과 같은 코드를 실행하면 다음과 같은 로그가 순서대로 출력됩니다.</li>
  <li><code>Before function!</code> &gt; <code>In function!</code> &gt; <code>After function!</code> &gt; <code>One!</code></li>
</ul>

<div><pre><code><span>const</span> <span>one</span> <span>=</span> <span>()</span> <span>=&gt;</span> <span>Promise</span><span>.</span><span>resolve</span><span>(</span><span>'</span><span>One!</span><span>'</span><span>);</span>

<span>async</span> <span>function</span> <span>myFunc</span> <span>()</span> <span>{</span>
    <span>console</span><span>.</span><span>log</span><span>(</span><span>'</span><span>In function!</span><span>'</span><span>);</span>
    <span>const</span> <span>result</span> <span>=</span> <span>await</span> <span>one</span><span>();</span>
    <span>console</span><span>.</span><span>log</span><span>(</span><span>res</span><span>);</span>
<span>}</span>

<span>console</span><span>.</span><span>log</span><span>(</span><span>'</span><span>Before function!</span><span>'</span><span>);</span>
<span>myFunc</span><span>();</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>'</span><span>After function!</span><span>'</span><span>);</span>
</code></pre></div>

<h5 id="예시-코드-동작-과정">예시 코드 동작 과정</h5>
<ul>
  <li><code>aync</code> 키워드가 붙은 함수도 호출하면 일단 실행이 됩니다.</li>
  <li><code>await</code> 키워드를 만나면 마이크로태스크가 생성됩니다.</li>
  <li>이때, 주의할 사항으로 <code>await</code> 키워드 뒤에 오는 함수는 실행되고, 결과가 반환되는 시점에 마이크로태스크가 생성됩니다.</li>
  <li><code>await</code> 키워드 하위 코드가 모두 마이크로태스크 대상입니다.</li>
  <li>예시 코드의 마이크로태스크 대상 영역</li>
</ul>

<div><pre><code>    <span>const</span> <span>result</span> <span>=</span> <span>'</span><span>One!</span><span>'</span><span>;</span>
    <span>console</span><span>.</span><span>log</span><span>(</span><span>res</span><span>);</span>
</code></pre></div>

<p><img src="https://junhyunny.github.io/images/microtask-macrotask-in-javascript-3.gif" width="100%"></p>
<center>이미지 출처, https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke</center>


<h2 id="3-태스크-실행-순서-맞추기">3. 태스크 실행 순서 맞추기</h2>

<p>모든 내용을 이해했다면 아래 코드를 통해 동작 순서를 예상해보겠습니다. 
아래 코드팬(codepen)을 통해 자신이 생각한 동작 과정과 일치하는지 확인해보시길 바랍니다. 
정답은 <code>Rerun</code> 버튼을 누른 후 3초 뒤에 출력됩니다.</p>

<h3 id="31-1번-문제">3.1. 1번 문제</h3>

<p data-height="300" data-theme-id="0" data-slug-hash="QWqBOPJ" data-default-tab="js,result" data-user="Junhyunny">
See the Pen <a href="https://codepen.io/Junhyunny/pen/QWqBOPJ/">Test</a> by Junhyunny (<a href="https://codepen.io/Junhyunny">@Junhyunny</a>) on <a href="https://codepen.io/">CodePen</a>.</p>


<h3 id="32-2번-문제">3.2. 2번 문제</h3>

<p data-height="300" data-theme-id="0" data-slug-hash="yLzxyxy" data-default-tab="js,result" data-user="Junhyunny">
See the Pen <a href="https://codepen.io/Junhyunny/pen/yLzxyxy/">Test</a> by Junhyunny (<a href="https://codepen.io/Junhyunny">@Junhyunny</a>) on <a href="https://codepen.io/">CodePen</a>.</p>


<h3 id="33-3번-문제">3.3. 3번 문제</h3>

<p data-height="300" data-theme-id="0" data-slug-hash="poWOvQv" data-default-tab="js,result" data-user="Junhyunny">
See the Pen <a href="https://codepen.io/Junhyunny/pen/poWOvQv/">Test</a> by Junhyunny (<a href="https://codepen.io/Junhyunny">@Junhyunny</a>) on <a href="https://codepen.io/">CodePen</a>.</p>


<h3 id="34-4번-문제">3.4. 4번 문제</h3>

<p data-height="300" data-theme-id="0" data-slug-hash="YzrOPdL" data-default-tab="js,result" data-user="Junhyunny">
See the Pen <a href="https://codepen.io/Junhyunny/pen/YzrOPdL/">Test</a> by Junhyunny (<a href="https://codepen.io/Junhyunny">@Junhyunny</a>) on <a href="https://codepen.io/">CodePen</a>.</p>


<h3 id="35-5번-문제">3.5. 5번 문제</h3>

<p data-height="300" data-theme-id="0" data-slug-hash="ZEXMYwW" data-default-tab="js,result" data-user="Junhyunny">
See the Pen <a href="https://codepen.io/Junhyunny/pen/ZEXMYwW/">Test</a> by Junhyunny (<a href="https://codepen.io/Junhyunny">@Junhyunny</a>) on <a href="https://codepen.io/">CodePen</a>.</p>


<h4 id="reference">REFERENCE</h4>
<ul>
  <li><a href="https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke">https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke</a></li>
  <li><a href="https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif">https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif</a></li>
  <li><a href="https://javascript.info/event-loop#macrotasks-and-microtasks">https://javascript.info/event-loop#macrotasks-and-microtasks</a></li>
  <li><a href="https://meetup.toast.com/posts/89">https://meetup.toast.com/posts/89</a></li>
  <li><a href="https://codingsalon.tistory.com/59">https://codingsalon.tistory.com/59</a></li>
</ul>


        
      </section>

      

      


      
  

    </div></div>

Junhyunny's Devlogs

👉 해당 포스트를 읽는데 도움을 줍니다.
Asynchronous Task In JavaScript
👉 이어서 읽기를 추천합니다.
Recursive setTimeout test with Jest (feat. advanceTimersByTime 열어보기)
0. 들어가면서
최근 setTimeout(callback, timeout) 함수의 재귀적 호출을 Jest의 advanceTimersByTime 함수를 이용하여 테스트 시 발생한 문제 상황에 대한 글을 썼습니다. 
글을 처음 작성했을 때는 설명을 정말 잘 써놨다는 생각을 했습니다. 
하지만, 다음날 팀원들에게 작성한 글을 보여주면서 이야기를 나눌땐 느낌이 이상했습니다.
‘지금 내가 뭘 설명하고 있는거지?’
의논이 잘 되지 않는 이유는 저한테 있었는데, 이야기를 하면서도 스스로 마이크로태스크(microtask)와 매크로태스크(macrotask)에 대한 이해도가 엄청 낮다라는 걸 깨달았습니다. 
오늘은 알고 있었다고 생각했지만, 잘 몰랐던 마이크로태스크(microtask)와 매크로태스크(macrotask)에 대한 정리를 해보려합니다.
1. 매크로태스크(Macrotask)와 마이크로태스크(Microtask)
Asynchronous Task In JavaScript 포스트에서 설명했듯이 Web API 기능이 종료되면 콜백(callback) 함수가 콜백 큐(callback queue)에 순서대로 담깁니다. 
이 때 콜백 함수가 담기는 큐는 두 가지 종류가 있습니다.
매크로태스크 큐 (macrotask queue) - 우선순위가 높습니다.
마이크로태스크 큐 (microtask queue) - 우선순위가 낮습니다.
매크로태스크와 마이크로태스크는 우선순위가 다르기 때문에 실행되는 순서도 다릅니다. 
당연히 우선순위가 높은 마이크로태스크가 먼저 수행되고, 다음으로 매크로태스크가 수행됩니다. 
이벤트 루프(event loop)는 마이크로태스크 큐에 담긴 모든 마이크로태스크를 처리한 후에 매크로태스크를 소비합니다.
매크로태스크와 마이크로태스크 실행 순서
이미지 출처, https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
용어 정리
ECMAScript 진영은 다른 용어를 사용하는데, 간략한 표로 정리하겠습니다.
ECAM
      V8 엔진
    
Message Queue
      Macrotask Queue (혹은 Task Queue)
    
PromiseJobs
      Microtask Queue
    
2. 매크로태스크와 마이크로태스크 생성
매크로태스크와 마이크로태스크 대상은 어느 영역인지, 언제 매크로태스크와 마이크로태스크가 생성되는지 알아보겠습니다.
2.1. 매크로태스크 생성
매크로태스크는 다음과 같은 함수를 실행할 때 생성됩니다.
setTimeout(callback, timeout)
    
매크로태스크 대상은 callback 함수입니다.
timeout 시간이 지난 후 callback 함수가 큐로 이동합니다.
한번만 실행합니다.
setInterval(callback, timeout)
    
매크로태스크 대상은 callback 함수입니다.
timeout 시간이 지난 후 callback 함수가 큐로 이동합니다.
지속적으로 실행합니다.
setImmediate(callback)
    
매크로태스크 대상은 callback 함수입니다.
Internet Explorer 10 버전에서만 지원 (Window.setImmediate())
requestAnimationFrame(callback)
    
매크로태스크 대상은 callback 함수입니다.
예시 코드 - setTimeout(callback, timeout)
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();
코드 동작 과정
이미지에서 보이는 큐가 매크로태스크 큐입니다.
이미지 출처, https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
2.2. 마이크로태스크 생성
제가 이해도가 많이 떨어졌던 부분입니다. 
특히 async / await를 사용하면 어느 시점에 어느 부분이 마이크로태스크가 되는지 이해도가 많이 부족했습니다. 
조금 자세히 다뤄보겠습니다.
1.2.1. Promise
Promise를 사용할 때 마이크로태스크는 다음과 같은 함수를 실행할 때 생성됩니다.
Promise.reslove(value).then((value) => { … });
    
reslove(value) 함수 호출 시 마이크로태스크가 생성되어 큐에 추가됩니다.
마이크로태스크 대상은 (value) => { ... } 함수입니다.
Promise.reject(error).catch((error) => { … });
    
reject(error) 함수 호출 시 마이크로태스크가 생성되어 큐에 추가됩니다.
마이크로태스크 대상은 (error) => { ... } 함수입니다.
1.2.2. async / await
async / await는 간단한 예제 코드와 동작 과정을 통해 확인해보겠습니다.
예시 코드
다음과 같은 코드를 실행하면 다음과 같은 로그가 순서대로 출력됩니다.
Before function! > In function! > After function! > One!
const one = () => Promise.resolve('One!');
async function myFunc () {
    console.log('In function!');
    const result = await one();
    console.log(res);
}
console.log('Before function!');
myFunc();
console.log('After function!');
예시 코드 동작 과정
aync 키워드가 붙은 함수도 호출하면 일단 실행이 됩니다.
await 키워드를 만나면 마이크로태스크가 생성됩니다.
이때, 주의할 사항으로 await 키워드 뒤에 오는 함수는 실행되고, 결과가 반환되는 시점에 마이크로태스크가 생성됩니다.
await 키워드 하위 코드가 모두 마이크로태스크 대상입니다.
예시 코드의 마이크로태스크 대상 영역
    const result = 'One!';
    console.log(res);
이미지 출처, https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
3. 태스크 실행 순서 맞추기
모든 내용을 이해했다면 아래 코드를 통해 동작 순서를 예상해보겠습니다. 
아래 코드팬(codepen)을 통해 자신이 생각한 동작 과정과 일치하는지 확인해보시길 바랍니다. 
정답은 Rerun 버튼을 누른 후 3초 뒤에 출력됩니다.
3.1. 1번 문제
Test by Junhyunny (@Junhyunny) on CodePen.
3.2. 2번 문제
Test by Junhyunny (@Junhyunny) on CodePen.
3.3. 3번 문제
Test by Junhyunny (@Junhyunny) on CodePen.
3.4. 4번 문제
Test by Junhyunny (@Junhyunny) on CodePen.
3.5. 5번 문제
Test by Junhyunny (@Junhyunny) on CodePen.
REFERENCE
https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
https://javascript.info/event-loop#macrotasks-and-microtasks
https://meetup.toast.com/posts/89
https://codingsalon.tistory.com/59

Microtask & Macrotask in Javascript

댓글