자바스크립트는 싱글 스레드 언어라는 건 예전부터 알고 있었다.
그런데 웹 사이트에 접속해보면 여러 가지 일들을 한 번에 처리하는 것을 볼 수 있는데,
예전부터 이게 어떻게 가능한지 궁금했었다.
물론 자바스크립트에 대해 공부하기 시작하면서 이에 대해 조금은 알게 되었지만,
조금 더 자세히 그리고 완벽히 알고 싶어서 이에 대해서 알아보기로 했다.
1. 자바스크립트의 동작 원리
앞에서 말했던 것처럼 자바스크립트는 기본적으로 싱글 스레드 언어이다.
그런데 실제로 웹 사이트를 확인해보면 한 번에 여러 가지 일을 처리하는 것처럼 보이는데,
이 때 사용하는 것이 비동기 콜백이다.
그리고 이를 이해하기 위해서는 자바스크립트 엔진과 자바스크립트 런타임에 대해 알아야 한다.
1) 자바스크립트 엔진
자바스크립트 엔진이란 인터프리터 언어인 자바스크립트를 해석하고 실행해주는 것을 말한다.
크롬에서 사용하는 V8, 파이어 폭스가 사용하는 SpiderMonkey,
사파리에서 사용하는 JavaScriptCore, 마이크로소프트 엣지가 사용하는 Chakra 등이 존재한다.
자바스크립트 엔진의 주요 구성 요소로는 다음과 같이 메모리 힙과 콜 스택이 있다.
(1) 메모리 힙
메모리 힙이란 함수나 변수의 저장, 함수의 호출 등의 작업이 발생되는 공간이다.
(2) 콜 스택
콜 스택이란 자바스크립트 코드가 실행될 때 생겨나는 실행 컨텍스트를 저장하는 공간이며,
만약 콜 스택이 하나라면 싱글 스레드, 콜 스택이 둘 이상이라면 멀티 스레드라고 부른다.
function b (){
console.log('Hello World!');
}
function a (){
b();
}
a();콜 스택에 대해 이해하기 위해 다음과 같은 예시 코드를 실행했다고 가정해보자.
그러면 코드가 실행되는 순간 전역 컨텍스트가 생성되어 콜 스택에 담기게 된다.
그리고 a 함수가 실행되었기에 a 함수에 관한 정보를 수집해 실행 컨텍스트를 만든다.
그 후에 a 함수의 실행 컨텍스트를 콜 스택에 넣는다.
그러면 콜 스택의 최상단에 a 함수의 실행 컨텍스트가 있으므로
전역 컨텍스트의 실행이 중지되고 a 함수의 실행 컨텍스트를 실행하게 된다.
마찬가지로 a 함수 내부에서 b 함수를 실행되었기에 앞에서 한 것과 같이
b 함수의 실행 컨텍스트를 만들어 콜 스택에 넣고
a 함수의 실행 컨텍스트를 중지한 다음b 함수의 실행 컨텍스트를 실행하게 된다.
그 후 b 함수의 실행 컨텍스트가 종료되면,
콜 스택에서 b 함수의 실행 컨텍스트를 제거하고 a 함수의 실행 컨텍스트를 실행한다.
콜 스택이 빌 때까지 이러한 과정을 반복해주고,
만약에 콜 스택이 비게 된다면 코드의 실행을 종료시켜준다.
2) 자바스크립트 런타임
자바스크립트 엔진은 싱글 스레드이기 때문에 한 번에 하나의 작업만 수행할 수 있었고
현재 수행중인 작업이 있다면 다른 작업을 할 수 없다는 문제점이 있었다.
그래서 이러한 문제를 해결하기 위해 비동기 콜백을 사용하게 되었고
이를 가능하게 만들어 준 것이 자바스크립트 런타임이다.
자바스크립트 런타임의 주요 구성 요소로는 Web APIs과 콜백 큐, 이벤트 루프가 있다.
(1) Web APIs
Web APIs란 웹 브라우저에서 제공하는 기능을 말한다.
그런데 이러한 기능들의 처리가 별도의 스레드에서 처리가 되기에
콜 스택에서 비동기 작업을 실행하게 되면, 웹 브라우저는 이를 별도의 스레드에게 넘기고
그 스레드는 작업을 끝마친 다음에 같이 전달받은 콜백 함수를 콜백 큐에 넣게 된다.
(2) 콜백 큐
콜백 큐란 콜백 함수를 일시적으로 저장하는 공간을 말한다.
(3) 이벤트 루프
콜백 큐에 저장된 콜백 함수는 콜 스택이 비어있다면, 순차적으로 콜 스택으로 이동해야 한다.
이러한 작업을 실행하기 위해서는 매 순간 콜 스택이 비어있는지 확인해야 하고
콜백 큐에 콜백 함수가 저장되어있는지의 여부를 확인해야 하는데,
이러한 역할을 하고 콜백 함수를 콜 스택으로 옮겨주는 역할을 하는 것이 이벤트 루프이다.
