자바스크립트를 배우거나 사용하다보면 흔히 듣게 되는 말이 있는데
이벤트 루프, 콜백, 싱글 스레드, 비동기
이런 단어들이 그 예라고 할 수 있습니다.
물론 이런 내용에 대해서 확실하게 개념이 잡혀있는 분들이 많으시겠지만
저를 포함한 몇몇 분들은 들어보기만 하고 문맥으로 이해하다가 그냥 넘어가는 경우가 있기에 글을 작성하면서 이 용어들을 이해해보려합니다.
싱글 스레드
자바스크립트는 싱글 스레드언어입니다.
이 말은 곧 자바스크립트는 한 번에 1개의 작업만 할 수 있다는 뜻이기도 합니다.
그런데 우리가 어떻게 브라우저에서 동시에 많은 작업을 할 수 있게 되는 걸까요?
하나의 작업만 할 수 있다면 어떤 작업이든 동시 못하는 거 아닌가요?
서버에 데이터를 요청하는 동안에 다른 일을 하는 등의 동시에 일을 할 수 있지 않나요? 라는 생각이 들기도 합니다.
일단 그런 생각을 잠시 접어두고 다시 살펴봅시다.
한번에 하나의 작업을 할 수 있는 자바스크립트는 힙과 큐를 포함한 단일 콜스택을 가지고 있습니다.
콜스택
콜스택이란 자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트를 저장하는 자료구조라 정의할 수 있습니다.
먼저 자료구조 스택(stack)에 대해서 간단히 알아보자면 스택이란 쌓는다는 뜻으로 가장 마지막에 들어온게 먼저 나가는 구조로 후입선출 구조입니다.
콜스택도 마찬가지로 이러한 한 순간 하나의 작업만 처리하면 동작하게 됩니다. 자바스크립트는 이러한 콜스택조차 하나이니 확실하게 한 번에 1개의 작업만 할 수 있어보입니다.
근데 아까 들었던 생각이 다시 떠오르면서 더욱 궁금해지기 시작합니다.
어떻게 동시에 많은 작업을 할 수 있지?
그것은 이벤트 루프 덕분에 가능한 일입니다.
이벤트 루프
이벤트 루프는 웹 브라우저와 Node.js에서 싱글 스레드인 자바스크립트를 비동기 처리 동작을 하도록 하는 핵심 요소입니다.
자바스크립트 엔진은 크게 Call Stack과 Heap으로 나뉘지만, 엔진 외부의 다른 요소들과 상호작용하여 자바스크립트 코드를 실행시킵니다.
외부 요소로는 큐의 구조를 가진 테스크 큐와 웹 브라우저에 내장된 API인 Web API가 있습니다. (DOM, SVG, Fetch, Canvas, setTimeOut등이 자바스크립트가 아닌 Web API에 해당됩니다. 또한 비동기 이벤트들을 다루기 위한 브라우저의 웹 API 스레드들은 브라우저 내부에 C++로 구현되어 만들어졌습니다.)
이러한 Web API 중 비동기 처리하는 함수는, 콜 스택에 쌓이지 않고 바로 자바스크립트 엔진 밖으로 나와서 테스크 큐에 있다가 이벤트 루프로 이동하게 되는데
이 때 이벤트 루프는 콜스택과 테스크 큐를 감시하고 있다가 콜스택이 비었을 경우 정해진 우선순위에 따라 큐에서 하나씩 꺼내 콜스택에 추가해주는 역할을 합니다.
이러한 과정 덕분에 자바스크립트에서도 페이지에서 애니메이션이 돌면서 클릭이벤트와 키이벤트가 동시에 이루어지는 등의 비동기적인 작업이 가능하게 됩니다.
