서두

강의로 클론 코딩을 작성하고, 프로젝트를 진행하고 있다. 그러나 개발이라는게 술술 풀리지 않는다. 언제나 오류를 접하고 내가 작성한 코드라도 이해를 할 줄 알아야한다. 그래서 나는 벽에 막힐 때마다 추가적으로 공부를 하는데 이번이 그렇다. 지난 비동기에 이어 이번에는 싱글스레드와 이벤트루프에 대해 알게 된 부분을 정리하려 한다.

싱글스레드란?

전에도 말했든 싱글스레드란 하나의 물줄기라 생각한다. 물이 위에서 아래도 흐르듯 직렬의 형태로 하나의 스레드가 하나의 작업만 순서대로 일처리한다. 즉 한 번에 하나의 코드만을 수행한다고 이해하면 된다.

이미지 출처 : https://velog.io/@devmag

하지만 Node js는 여러 개의 스레드를 갖고 있다. 하지만 Javascript를 사용하는 스레드는 하나이기 때문에 싱글스레드라고 한다. 의문이 든다. 어떻게 싱글스레드인데 Javascript는 다양한 작업들이 동시에 처리되고 있을까. 그 이유가 이전 포스트에서 작성한 비동기로 작동되기 때문인데 비동기를 가능하게 해주는게 이벤트루프다.

이벤트루프란?

브라우저의 기본구조

본격적으로 이벤트 루프에 들어가기 전에 브라우저의 기본구조에 대해 알아야 할 필요가 있다.

이미지 출처: https://resilient-923.tistory.com/308

지금 이 이미지가 무슨 의미인지 모르겠지만 하나하나 뜯어 살펴보겠다.

1. Call Stack(호출스택)

Javascript의 엔진은 Memory Heap과 Call Stack으로 구성되어 있다.

Memory Heap: 프로그래밍을 할 때 선언된 변수, 함수 등이 저장되는 공간, 즉 메모리가 할당되는 공간이다.
Call Stack: 코드가 실행될 때 쌓이는 공간이다.

여기서 중요한 점이 있다. Javascritp는 싱글스레드이기 때문에 Call Stack이 하나밖에 없다는 점이고, Call Stack이 Stack 형식으로 쌓이고 나가기 때문에 가장 처음에 들어온 코드가 가장 늦게 나온다.

2. Web API

Web API는 브라우저에서 제공하는 API다. Call Stack에서 실행된 비동기 함수를 Web API가 호출하고 Callback Queue에 넣어준다.

3. Callback Queue

Web API로 인해 호출된 비동기 콜백함수가 저장되는 영역이다. Stack과는 다르게 Queue이기 때문에 처음 들어온 코드가 먼저 실행된다.

4. Event Loop(이벤트루프)

Call Stack과 Callback Queue 상태를 확인한다. 그래서 Call Stack이 비면 Callback Queue에 있는 첫 번째 콜백을 넣어주는 역할이다.

정리하기

싱글스레드와 이벤트루프를 같이 공부했다. 계속해서 들어보기만 하고 알아보지 않았던 것들인데 이번 기회를 통해 확실하지는 않지만 정확하게 배웠다. 프로젝트를 진행하면서 이를 인식하고 있어야겠으며, 전에 사용했던 Java와는 완전히 다른 언어란 것을 알고 습관에서의 탈피를 성공했다.