시작

먼저 들어가기 전, JavaScript,V8,Node. js 의 레이어를 제대로 구분해보자.

JavaScript

JavaScript는 프로그래밍 언어이다. 프로그래밍 언어는 규칙과 문법을 정의하고 개발자가 이 규칙에 따라 코드를 작성할 수 있게 해준다. 하지만 이러한 코드가 실제로 실행되기 위해서는 해당 언어를 이해하고 실행할 수 있는 실행 엔진이 필요하다.

V8

V8은 구글이 개발한 오픈 소스 자바스크립트 엔진이다. 크롬 웹 브라우저와 Node.js에서 사용된다. V8 엔진은 자바스크립트 코드를 해석하고 실행하는 역할을 하며 매우 빠른 성능을 자랑한다. 이는 자바스크립트 코드를 기계어로 직접 컴파일하여 실행하기 때문이고 수많은 최적화 방법을 수행하고 있기 때문이다. (참고로 이미 오래전에 우리곁을 떠난.. 익스플로어는 Chakra 라는 실행 엔진을 사용했다고 한다.)

JavaScript(실행 언어)와 V8(실행 엔진)의 관계

실행 언어는 프로그래밍 언어 그 자체로, 개발자가 코드를 작성하는 데 사용된다. 실행 엔진은 실행 언어로 작성된 코드를 해석하고 실행하는 역할을 할 뿐이다. 실행 언어는 개발자가 작성한 코드가 어떻게 작동해야 하는지 정의하고, 실행 엔진은 정의된 언어의 규칙에 따라 코드를 실제로 실행한다. 필자는 그동안 블로그에 V8에 대한 글을 많이 작성했다. 사실 V8은 자바스크립트를 실행하기 위한 실행 엔진일뿐이지, 자바스크립트 문법과 직접적으로 연관이 있다고 보기 힘들다. 모든 엔진마다 각기 구현 방식은 다르다는 사실을 반드시 기억해야한다. 메모리 저장 방식또한 엔진에 따라 다르고 언어는 언어대로 스펙만 만족시키면 된다.

Node.js

Node.js는 V8 엔진 위에서 실행되는 자바스크립트 런타임이다. 서버 측에서 자바스크립트를 실행할 수 있게 해준다. Node.js는 웹 서버 구축, 데이터베이스 작업, 파일 시스템 접근 등 다양한 서버 측 작업을 처리할 수 있도록 도와준다. Node.js는 V8기반으로 만들어졌지만 V8 그 자체는 아니다.

Node.js의 구성 요소

V8 엔진

자바스크립트 코드를 해석하고 실행하는 역할, Node.js의 성능과 효율성의 핵심이다.

libuv

비동기 I/O와 이벤트 루프를 처리하는 라이브러리. Node.js의 비동기 이벤트 기반 아키텍처를 가능하게 한다. (*I/O는 Input/Output의 약자로, 컴퓨터 시스템에서 데이터의 입력과 출력을 처리하는 작업을 의미)

코어 라이브러리

파일 시스템 접근, 네트워크 통신, 스트림, 버퍼 등 서버 측 애플리케이션 개발에 필요한 다양한 기능을 제공하는 라이브러리. Node.js API를 통해 자바스크립트 코드에서 사용할 수 있다.

자,이제 자바스크립트는 어떤 언어인가?

자바스크립트 엔진은 하나의 콜스택을 가지는 싱글스레드이다. 면접 준비를 위해 기계처럼 달달 외운 답변일지라도 "자바스크립트는 싱글 스레드 언어" 라는 것을 모르는 JS 개발자는 없을 것이다.

Thread(스레드)란?

프로세스는 메모리 상에서 실행중인 작업을 뜻하며 이러한 프로세스 내의 실행 단위를 스레드라 한다. 일반적으로 한 프로그램은 하나의 스레드를 가지고 있지만, 프로그램 환경에 따라 둘 이상의 스레드를 동시에 실행할 수 있다. 이러한 실행 방식을 멀티스레드(multithread)라고 한다.

싱글 스레드란 무엇일까?

말그대로 아주 쉽게 스레드가 하나인 언어이다. 그렇다면 나는 지금까지 자바스크립트가 싱글 스레드 언어라 불리는지 정확한 이유를 알고 있었는가?

자바스크립트는 왜 싱글스레드 언어인가?

Node.Js에서 워커스레드로 멀티 스레드를 만들 수 있는데.... 브라우저에서는 웹워커를 사용해 멀티 스레드 환경을 만들 수 있는데...... 그렇다면 정말로 자바스크립트가 싱글 스레드 언어라고 할수 있는가?

1. Node.js 는 싱글스레드 ?

아주 면밀히 말하자면 Node.js는 싱글스레드가 아니다. Node도 여러개의 스레드를 가지고 있다. 그러나 자바스크립트를 실행하는 스레드는 단 하나이므로 이는 자바스크립트 코드를 실행하는 주 스레드가 단일 스레드라는 의미이다. 그리고 그 싱글스레드가 바로 이벤트 루프이다. Node.js라는 환경을 이루는 특징이자 핵심 요소가 '이벤트 루프 + 메인 스레드'인 것을 기억해야한다.

Node.js는 비동기 I/O 작업을 효율적으로 처리하기 위해 libuv 라이브러리를 사용하며 libuv는 내부적으로 여러 개의 스레드를 사용하여 비동기 작업을 처리한다. 이 스레드풀은 Node.js가 아니라 Node.js가 비동기 작업을 처리하기 위해 사용하는 라이브러리인 libUV에 포함된 기능이라는 것을 기억한다.

2. 웹 브라우저는 싱글스레드 ?

웹 브라우저도 마찬가지다. Web API, Web 워커 등 별도의 스레드가 존재한다.

Web APIs는 타이머, 네트워크 요청, 파일 입출력, 이벤트 처리 등 브라우저에서 제공하는 다양한 API를 포괄하는데, 브라우저(Chrome)에서 멀티 스레드로 구현되어 있다. 그래서 브라우저는 비동기 작업에 대해 메인 스레드를 차단하지 않고 다른 스레드를 사용하여 동시에 처리할수 있는 것이다. 참고로 web API는 javascript가 아니다. Web API는 브라우저가 제공하는 기능들로 자바스크립트 코드에서 호출할 수 있는 인터페이스이다. 이 API들은 브라우저가 네이티브 코드(주로 C++ 등)로 구현하여 제공하는 기능들을 자바스크립트에서 사용할 수 있도록 해준다. Web API는 브라우저의 별도 스레드에서 실행된다.

자바스크립트를 실행하는 스레드는 이벤트루프인 메인 스레드 단 하나뿐이다. 결론은 자바스크립트의 메인 스레드인 이벤트 루프가 싱글 스레드이기 때문에 Node.js 를 포함해 자바스크립트를 보편적으로 싱글 스레드 언어라고 부르는 것이다.

나는 자바스크립트 언어 자체는 싱글스레드 기반으로 동작하지만 런타임으로 확장한다면 멀티 스레드처럼 구현이 가능하다는 결론을 내렸다.

번외: 이벤트 루프는 어디에 속해있을까?

자바스크립트 엔진이 아닌 런타임(중요!!)에서 가지고 있는 하나의 장치이다. 이벤트 루프는 단지 자바스크립트 코드를 실행하기위해 자바스크립트 엔진을 이용할 뿐이다. (역주: 실제로 V8 엔진에는 이벤트 루프를 관리하는 코드가 없다.) 콜 스택과 태스크 큐(콜백 큐)를 감시하며, 콜 스택이 비어있는 경우에 태스크 큐에서 태스크를 가져와 콜 스택에 넣어 주는 동작을 한다.

→ 자바스크립트는 싱글스레드 언어이기 때문에 한번에 하나씩 실행되지만 Web API, Callback Queue, Event Loop 로 인하여 멀티스레드처럼 보인다. 태스크가 들어오길 기다렸다가 태스크가 들어오면 이를 처리하고, 처리할 태스크가 없는 경우에는 대기하는 형태이다.

스스로 문제 풀어보기

Q. 이벤트 루프는 V8에 속해있다. (o,x)

Q. Javscript는 실행 엔진 없이 실행할수 있다. (o,x)

Q. Javascript는 싱글스레드 기반 언어이다. (o,x)

Q. Node.js 는 멀티 스레드다. (o,x)

마무리

이 글은 '컴퓨터 밑바닥의 비밀' 스터디를 하며 생긴 궁금증으로부터 시작된 글이다.
또한 기술블로거 모여라! 두번째 블로그 글의 주제로 채택했다.

기초중의 기초지만, 가장 중요한 뼈대인 레이어에 대한 개념을 다잡아보며 JS가 싱글스레드로 불리는 이유를 알아보았다. 이 글을 쓰기까지 정말 많은 고민을 했다. 부족한 나의 설명 때문에 "사실 JS가 싱글 스레드 언어가 아니래!" "JS로 멀티 스레드도 구현 가능하대!" 라는 단순한 말로 전달이 되어 글의 핵심 내용이 왜곡될까 두려웠다. 하지만 이제는 레이어에 대한 개념을 확실하게 나누어 정리해보는 계기가 필요하다 생각했다.

힙,스택,데이터영역과 코드영역 등,컴파일러,프로세스,스레드,링커,라이브러리,코루틴.. 

등을 공부하면서 결국 자바스크립트에서 개발을 하기 위해 사용되는 수많은 개념들은 cs지식 기초로부터 가져왔다는 것을 알게되었다. 그리고 누군가 "프론트엔드 개발자가 CS를 알아야할까?" 라는 질문을 한다면, 나는 단언컨대 "엔지니어를 목표로 하는 사람이면 그렇다." 라고 대답할 것이다. 공부를 하면 할수록 궁금한것들이 많아지고 답답함은 커져간다. 하지만 확실한건 하면 이런 답답함을 느끼는 이유는 그만큼 내가 아는 것들이 많아졌기 때문일것이라고 생각된다.

막연하게 마법이라고만 생각했던 모든 것들이 어느 순간 기술로 인지되고 있다. 어쩌면 컴퓨터 공학과 친구들에겐 당연했을 지식들을 이제서야 학습하는 것에 대해 아쉬움이 느껴졌지만, 이와 동시에 이제라도 학습할 수 있다는 것에 대해 다시 한 번 감사함을 느꼈다.

핫핫.. 사실 스터디 내용은 노션에 다 정리하고 있지만 블로그에 올리기 민망한 수준이라.......... 하지만 컴퓨터 밑바닥의 비밀 책은 정말 추천추천이다 ㅇvㅇb

레퍼런스

https://coding-lks.tistory.com/174
https://velog.io/@hoonsbory/Browser-EventLoop
https://evan-moon.github.io/2019/08/01/nodejs-event-loop-workflow/#%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84%EB%8A%94-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84-%EB%82%B4%EB%B6%80%EC%97%90-%EC%9E%88%EB%8B%A4
https://sjh836.tistory.com/79
https://medium.com/@gwakhyoeun/%EC%99%9C-node-js%EB%8A%94-single-thread-%EC%9D%B8%EA%B0%80-bb68434027a3
https://medium.com/@gyeong3un/javascript%EA%B0%80-%EB%A9%80%ED%8B%B0%EC%8A%A4%EB%A0%88%EB%93%9C%EC%B2%98%EB%9F%BC-%EB%B3%B4%EC%9D%BC-%EC%88%98-%EC%9E%88%EB%8A%94%EC%9D%B4%EC%9C%A0-48a7159aaa66https://coding-lks.tistory.com/174