자바스크립트의 비동기 동작을 이해하려면 먼저 자바스크립트가 왜 싱글 스레드로 동작하는지, 그리고 그 위에서 작업들이 어떤 순서로 처리되는지부터 짚고 넘어가야 합니다. 이 글에서는 그 출발점이 되는 이벤트 루프의 기본 동작을 정리합니다.

JS는 Single Thread에서 작동합니다. 즉 한 번에 하나의 작업만 동기 방식으로 처리할 수 있습니다.

동기(synchronous): 직렬 방식으로 작업을 처리하는 것. 요청이 시작하고 응답을 받은 후에야 다음 작업을 처리합니다.

비동기(Asynchronous): 병렬 방식으로 작업을 처리하는 것. 요청이 시작한 후 응답과 관계없이 다음 작업을 처리합니다.

사용자가 검색어를 입력해 검색을 위한 네트워크 요청이 발생한 순간에도 다른 작업을 처리할 수 있습니다. 이것이 비동기적 작업 방식입니다.

리액트에서는 16 버전에 접어들면서 비동기식으로 작동하는 방법이 소개되었습니다.

싱글 스레드 자바스크립트

과거, 프로그램을 실행하는 단위가 오직 Process 뿐이었습니다.

Process

프로그램을 구동해 프로그램의 상태가 메모리 상에서 실행되는 작업 단위

현재는 하나의 프로그램에 여러 가지 작업이 필요해졌고, 더 작은 실행 단위인 thread가 등장했습니다. 하나의 process에는 여러 개의 thread를 만들 수 있고, thread끼리는 메모리를 공유하며 여러 작업을 동시에 수행할 수 있습니다.

자바스크립트는 기본적으로 싱글 스레드입니다.

JS가 멀티 스레드가 아닌 이유

1. 멀티 스레드는 내부적으로 처리가 복잡하며, 같은 자원을 여러 번 수정하는 등 동시성 문제가 발생할 수 있어 이에 대한 처리가 필요합니다.
2. 각각 격리되어 있는 Process와 다르게, 하나의 Thread에서 문제가 생기면 다른 Thread도 함께 문제가 발생할 수 있습니다.
3. 만약 자바스크립트가 멀티 스레딩을 지원해서 동시에 여러 스레드가 DOM을 조작할 수 있었다면, 메모리 공유로 인해 동시에 같은 자원에 접근하게 되어 타이밍 이슈가 발생할 수 있고 이는 DOM 표시에 큰 문제를 일으킬 수 있습니다.

이벤트 루프

비동기 동작과 뗄 수 없는 개념이 바로 Event Loop입니다.

Node.js와 마찬가지로 브라우저 측 자바스크립트 실행 흐름도 Event Loop에 기반을 둡니다. Event Loop를 잘 알고 있어야 올바른 아키텍처 설계가 가능합니다.

자바스크립트 엔진 동작 방식

자바스크립트 엔진은 다음의 알고리즘을 갖고 있습니다.

1. 처리해야 할 task가 있는 경우
   1. 먼저 들어온 task부터 차례대로 처리합니다.
2. 처리해야 할 task가 없는 경우
   1. 잠들어 있다가 새로운 task가 추가되면 다시 1번 과정으로 돌아갑니다.

자바스크립트 엔진은 대부분의 시간을 아무 일도 하지 않고 쉬다가, 스크립트나 핸들러, 이벤트가 활성화될 때만 돌아갑니다.

자바스크립트 엔진을 활성화하는 task는 다음과 같습니다.

1. 외부 스크립트 <script src="...">가 로드될 때, 이 스크립트를 실행하는 것
2. 사용자가 마우스를 움직일 때 mousemove 이벤트와 이벤트 핸들러를 실행하는 것
3. setTimeout에서 설정한 시간이 다 된 경우, 콜백 함수를 실행하는 것
4. 기타 등등

task는 하나의 집합을 이룹니다. 자바스크립트 엔진은 해당 task를 차례대로 처리하며 새로운 task가 추가될 때까지 기다립니다. task를 기다리는 동안 CPU 자원 소비는 0에 가까워지고 엔진은 잠들게 됩니다.

엔진이 바쁠 때 task가 추가되면 해당 task는 Macrotask queue에 추가됩니다.

참고로 task queue의 구조는 queue가 아닌 set입니다. 선택된 큐에서 실행 가능한 가장 오래된 task를 가져와야 하기 때문입니다. 무조건 먼저 들어온 첫 번째 항목을 dequeue하는 것이 아니라, 실행 가능한 것들 중 가장 오래된 task를 차례대로 실행시킵니다.

https://html.spec.whatwg.org/multipage/webappapis.html#definitions-3

(script를 처리하는 도중 mousemove 핸들러도 실행되고, setTimeout에서 설정한 시간이 지나 콜백이 들어온 경우의 상태를 그림으로 나타냈습니다.)

자바스크립트 엔진은 이들을 차례대로 처리합니다. 이때 알아야 할 두 가지가 있습니다.

1. 엔진이 task를 처리하는 동안은 렌더링이 일어나지 않습니다. 처리를 완료해야 DOM 변경분을 화면에 반영합니다.
2. task에 긴 시간이 걸리면, 그 task를 처리하는 동안 발생한 새로운 task를 처리하지 못합니다. (응답 없는 페이지라는 alert 창은 페이지 전체와 함께 현재 task를 종료할지 말지를 선택하게 합니다.)

바로 이 두 번째 특성 때문에 무거운 task 하나가 화면 전체를 멈춰 세울 수 있습니다. 다음 편에서는 이런 무거운 작업을 어떻게 쪼개서 화면을 살려두는지 살펴보겠습니다.