멘토링을 신청하기 전에 상담을 받았는데 내용에 대해서 자세히 알아야 할 것 같아서 정리하게 되었다. 나의 글은 나를 위한 정리용이어서 노마드 코더의 (EP 09.) 논블로킹 언어가 뭐야? | 자바스크립트 개발자라면 알아야하는 핵심 컨셉 33개을 보는 것을 추천한다.

싱글 쓰레드라며?

자바스크립트의 메인 쓰레드는 싱글 스레드이지만 일반적으로 다른 객체가 일을 하든 말든 상관 안하는 논블로킹 I/O를 사용한다. 이벤트 루프와 콜백 함수를 이용하여 논블로킹 I/O를 구현하였다.

그렇다면 블로킹과 논블로킹의 차이를 아는가? 핵심은 제어권에 있다.

• 블로킹: 함수의 제어권을 넘겨주어 블록이 되는 것.
• 논블로킹: 함수의 제어권을 넘겨주지 않아 블록이 되지 않는 것.

어떻게 이 언어가 멀티 스레드처럼 동작하는지 간단하게 설명해보고자 한다.

위 이미지는 비동기 함수가 어떻게 동작하는지 구조를 설명해주고 있다. 차근차근 알아보자.

JS Engine

JavaScript 엔진은 자바스크립트 코드를 실행하기 위한 프로그램이다. 자바스크립트 코드를 실행하기 위한 프로그램의 메모리 구조는 아래와 같다.

• 힙(Heap) 메모리 : 동적으로 생성되는 데이터가 저장되는 공간. 힙은 크기가 동적으로 변할 수 있으며, 메모리 할당과 해제가 이루어진다.
• 콜 스택(Stack) : 실행 컨텍스트(Execution Context)가 저장되는 공간. 실행 컨텍스트는 함수가 호출될 때마다 생성되며, 함수가 실행되는 동안에는 해당 실행 컨텍스트가 스택에 저장된다. 함수가 실행을 마치면 해당 실행 컨텍스트는 스택에서 제거된다.

Call Stack에서 Stack(LIFO) 방식으로 실행 컨텍스트가 쌓이며 진행된다. 진행하게 되면서 동기 함수들은 그대로 실행하게 되고 비동기 함수들은 Web API로 처리하게 되며 일을 분배한다.

함수 (MDN web Docs)

자바스크립트에서 함수는 객체(Object)의 일종이며, 함수 객체(Function Object)라고 부릅니다. 함수 객체는 참조 타입 데이터로 힙 메모리에 할당되며, 해당 함수의 코드와 함께 함수의 프로퍼티와 메소드도 포함됩니다.

Web API

Web API (MDN web Docs)