[이벤트 루프] 개정

Author: Violet-Bora-Lee

2-ui/99-ui-misc/03-event-loop/article.md

@@ -161,11 +161,11 @@ count();
 
 태스크를 여러 개로 쪼갤 때의 장점은 진행 상태를 나타내주는 프로그레스 바(progress bar)를 만들 때도 드러납니다.
 
-브라우저는 스크립트 실행 시간이 오래 걸리든 아니든 상관없이 대개 실행 중인 코드의 처리가 끝난 이후에 렌더링 작업을 합니다.
+아시다시피 브라우저는 시간이 오래 걸리든 아니든 상관없이 현재 작업 중인 태스크가 끝나야 DOM 변경분을 화면에 렌더링해줍니다.
 
-함수를 사용해 원하는 만큼의 요소를 만들고 이 요소들을 하나하나 문서에 추가한 다음, 각 요소의 스타일을 변경할 수 있다는 점에서 이런 브라우저 동작 방식은 한편으론 아주 유용합니다. 모든 작업이 이뤄지는 동안 사용자는 완성되지 않은 '중간' 상태의 화면을 보지 않아도 되기 때문입니다.
+이런 브라우저 동작 방식은 완성되지 않은 '중간' 상태의 화면이 사용자에게 노출되는 걸 막아주기 때문에 유리합니다. 요소를 여러 개 만들고 이 요소들을 하나씩 화면에 추가한 다음 원하는 요소의 스타일을 변경시키는 일련의 과정이 담긴 함수가 있는데, 이 함수를 실행하는 동안에 변경사항 모두가 사용자에게 노출된다면 사용자는 혼란을 느꼈을 겁니다.
 
-관련 데모를 살펴봅시다. 함수가 끝날 때까지 사용자는 `i`가 변하는 것을 볼 수 없습니다. 화면에 출력되는 것은 마지막 상태뿐입니다.
+관련 데모를 살펴봅시다. 함수가 끝날 때까지 사용자는 `i`가 변하는 것을 볼 수 없습니다. 화면엔 마지막 상태만 출력됩니다.
 
 
 ```html run
@@ -186,7 +186,7 @@ count();
 
 그런데 개발을 하다 보면 프로그레스 바 같이 작업 진척 상태를 보여주는 인디케이터(indicator)를 만들어야 하는 경우가 생기곤 합니다.
 
-이럴 때 `setTimeout`을 사용해 태스크를 여러 개로 쪼개면, 상태 변화를 서브 태스크 중간마다 보여줄 수 있습니다.
+이럴 때 `setTimeout`을 사용해 태스크를 여러 개로 쪼개면, 서브 태스크 중간마다 상태 변화를 볼 수 있습니다.
 
 예시를 살펴봅시다.
 
@@ -241,11 +241,11 @@ menu.onclick = function() {
 
 태스크는 이번 챕터에서 설명한 *매크로태스크(macrotask)* 와 <info:microtask-queue> 챕터에서 다룬 *마이크로태스크(microtask)* 로 나뉩니다.
 
-마이크로태스크는 코드를 사용해서만 만들 수 있는데, 주로 프라미스를 사용해 만듭니다. 프라미스와 함께 쓰이는 `.then/catch/finally` 핸들러가 마이크로태스크가 되죠. 여기에 더하여 마이크로태스크는 프라미스를 핸들링하는 또 다른 형태의 문법인 `await`를 사용해 만들어지기도 합니다.
+마이크로태스크는 코드를 사용해서만 만들 수 있는데, 주로 프라미스를 사용해 만듭니다. 프라미스와 함께 쓰이는 `.then/catch/finally` 핸들러가 마이크로태스크가 되죠. 여기에 더하여 마이크로태스크는 프라미스를 핸들링하는 또 다른 문법인 `await`를 사용해 만들기도 합니다.
 
 이 외에도 표준 API인 `queueMicrotask(func)`를 사용하면 함수 `func`를 마이크로태스크 큐에 넣어 처리할 수 있습니다.
 
-**자바스크립트 엔진은 *매크로태스크 하나*를 처리하고 난 직후, 다른 매크로태스크나 렌더링 작업을 하기 전에 마이크로태스크 큐에 있는 *마이크로태스크 전부*를 처리합니다.**
+**자바스크립트 엔진은 *매크로태스크 하나*를 처리할 때마다 또 다른 매크로태스크나 렌더링 작업을 하기 전에 마이크로태스크 큐에 쌓인 *마이크로태스크 전부*를 처리합니다.**
 
 예시를 살펴봅시다.
 
@@ -260,17 +260,17 @@ alert("code");
 
 얼럿 창엔 아래 순서대로 문자열이 출력됩니다.
 
-1. `code` -- 일반적인 동기 호출
-2. `promise` -- `.then`은 마이크로태스크 큐에 들어가 처리되기 때문에, 현재 코드가 실행되고 난 후에 실행됨
-3. `timeout` -- 매크로태스크
+1. `code` -- 일반적인 동기 호출이므로 가장 먼저 매크로태스크 큐에 들어간 후 실행됩니다.
+2. `promise` -- `.then`은 마이크로태스크 큐에 들어가 처리되기 때문에, 현재 코드(`alert("code")`)가 실행되고 난 후에 실행됩니다.
+3. `timeout` -- `setTimeout`에서 설정한 시간이 끝난 후 콜백 함수를 실행하는 것은 매크로태스크이기 때문에 가장 마지막에 출력됩니다.
 
-매크로태스크와 마이크로태스크 처리 로직을 첨가하면 위에서 살펴본 그림을 좀 더 고도화 할 수 있습니다. 그림을 위에서부터 아래로 봅시다. 스크립트(매크로태스크 큐에 가장 먼저 들어온 태스크), 마이크로태스크 여러 개(마이크로태스크 큐에 있는 태스크 전부), 렌더링이 차례대로 실행되는 것을 확인할 수 있습니다.
+매크로태스크와 마이크로태스크 처리 로직을 첨가하면 위에서 살펴본 그림을 좀 더 고도화 할 수 있습니다. 그림을 위에서부터 아래로 봅시다. 매크로태스크(script, mousemove, setTimeout 등) 하나가 처리되고 난 후 마이크로태스크 전부(microtasks)가 처리되고 그 이후 렌더링이 진행되는 것을 확인할 수 있습니다.
 
 ![](eventLoop-full.svg)
 
 이처럼 마이크로태스크는 다른 이벤트 핸들러나 렌더링 작업, 혹은 다른 매크로태스크가 실행되기 전에 처리됩니다.
 
-이런 처리순서가 아주 중요한 이유는 마이크로태스크 간 동일한 애플리케이션 환경 보장 때문입니다. 이렇게 해야만 마우스 좌표 변경이나 통신에 의한 데이터 변경 없이 모든 마이크로태스크를 동일한 환경에서 처리할 수 있습니다.
+이런 처리순서가 아주 중요한 이유는 (마우스 좌표 변경이나 네트워크 통신에 의한 데이터 변경 같이 애플리케이션 환경에 변화를 주는 작업에 영향을 받지 않고) 모든 마이크로태스크를 동일한 환경에서 처리할 수 있기 때문입니다.
 
 그런데 개발을 하다 보면 직접 만든 함수를 현재 코드 실행이 끝난 후, 새로운 이벤트 핸들러가 처리되기 전이면서 렌더링이 실행되기 전에 비동기적으로 실행해야 하는 경우가 생기곤 합니다. 이럴 때 `queueMicrotask`를 사용해 커스텀 함수를 스케줄링하면 됩니다.
 
@@ -329,7 +329,7 @@ alert("code");
 
 이런 처리 순서 덕분에 `queueMicrotask`를 사용해 함수를 비동기적으로 처리할 때 애플리케이션 상태의 일관성이 보장됩니다.
 
-```smart header="Web Workers"
+```smart header="웹 워커"
 For long heavy calculations that shouldn't block the event loop, we can use [Web Workers](https://html.spec.whatwg.org/multipage/workers.html).
 
 That's a way to run code in another, parallel thread.