스레드 / Event Loop (이벤트 루프)

브라우저의 동작원리를 공부하면서, 아래와 같은 문장을 계속 보게되었다.
"자바스크립트 엔진은 싱글스레드 (sigle-thread) 프로그래밍 언어이다."
그렇다면 여기서 싱글스레드는 무엇일까?

📌 스레드란?

프로세스(실행 중인 프로그램) 내에서 실제로 작업을 수행하는 주체이며, 싱글스레드와 멀티스레드로 나뉜다.

여기서 우리가 주목할 점은 싱글스레드이다.
싱글스레드는 쉽게 말해 한번에 하나의 일만 수행 가능하다는 의미인 것이다.
그림으로 보면 더욱 이해가 쉬울 것 같아 찾아보았다.

✔️ 싱글스레드

-> 처리를 단일 스레드만으로 직렬 처리하는 프로그래밍 방법

✔️ 멀티스레드

-> 하나의 프로세스 내에서 둘 이상의 스레드가 동시에 작업을 수행 (병렬처리 가능)

📌 브라우저 동작원리

출처 How JavaScript works: an overview of the engine, the runtime, and the call stack

✔️ JS Engine

자바스트립트 엔진은 위 사진과 같이 Memory Heap 과 Call Stack 으로 구성되어 있다.(그림 왼쪽)

여기서 자바스크립트가 싱글스레드인 이유가 나오는데,
자바스크립트는 싱글스레드이기 때문에 Call Stack이 한개인 것이다.

• Memory Heap : 메모리 할당이 일어나는 곳
  (ex, 우리가 프로그램에 선언한 변수, 함수 등이 담겨져 있음)
• Call Stack : 코드가 실행될 때 쌓이는 곳. stack 형태로 쌓임.
  Stack(스택) : 자료구조 중 하나, 선입후출(LIFO, Last In First Out)의 룰을 따른다.

✔️ Web API

그림의 오른쪽에 있는 Wep API는 JS Engine의 밖에 그려져 있다.
즉, 자바스크립트 엔진이 아니며, 쉽게 말해 브라우저에서 개발자가 복잡한 기능을 쉽게 개발할 수 있도록 프로그래밍 언어로 코드를 제공하는 것이다.
Web API 는 브라우저에서 제공하는 API 로, DOM, Ajax, Timeout 등이 있다.
Call Stack에서 실행된 비동기 함수는 Web API를 호출하고,
Web API는 콜백함수를 Callback Queue에 밀어 넣는다.

✔️ Callback Queue

비동기적으로 실행된 콜백함수가 보관 되는 영역이다.

대표적인 콜백함수 예시로는 addEventListener, setTimeout이 있다.

✔️ Event Loop

Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여,
Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣는다.
이러한 반복적인 행동을 틱(tick) 이라 부른다.

자바스크립트는 싱글스레드라 동기적으로 한번에 하나씩밖에 실행이 불가능하지만, 이런 Event Loop 처리 덕분에 비동기적인 기능도 가능한 것이다.