❗️자바스크립트와 웹 브라우저

크롬 웹 브라우저는 V8 엔진이 탑제된 자바스크립트 런타임이다.

👉 자바스크립트란?

자바스크립트는 프로그래밍 언어이다.

👉 자바스크립트 런타임이란?

런타임이란 프로그래밍 언어가 구동되는 환경을 말한다.
자바스크립트 런타임이란 자바스크립트가 구동되는 환경을 말한다.
이러한 자바스크립트 런타임의 종류로는 웹 브라우저(크롬, 파이어폭스, 익스플로러 등)프로그램과 Node.js 라는 프로그램이 있다.
이러한 프로그램들에서 자바스크립트가 구동되기 때문에 자바스크립트 런타임이라고 한다.

👉 V8 엔진이란?

V8은 자바스크립트 엔진 중 하나이다.
V8은 오픈 소스 자바스크립트 엔진 중 하나이다.
자바스크립트와 *웹어셈블리(WebAssembly) 엔진이다.
크롬 웹 브라우저와 Node.js 등에서 사용되고 있다.
V8은 자바스크립트를 바이트코드로 컴파일하고 실행하는 방식을 사용한다.

👉 웹어셈블리란?

웹어셈블리(WebAssembly)란 C나 C++와 같은 프로그래밍 언어를 컴파일해서 어느 브라우저에서나 빠르게 실행되는 형식으로 바꿔주는 기술을 뜻한다.
보통 웹 애플리케이션 개발시에는 JavaScript 프로그래밍 언어를 사용해 동적인 부분을 개발하는데 C나 C++ 언어들에 비해서는 느리다.
게임이나 동영상 편집 등과 같은 고성능 웹 애플리케이션을 개발할 때 브라우저의 동작을 빠르게 하기 위해서 C나 C++와 같은 언어로 개발 할 수 있게 하는 것이다.
고성능 웹 애플리케이션 개발 시 자바스크립트와 같이 사용되고, 자바스크립트를 대체하는 것이 아니라 보완하는 기술이다.

❗️V8 엔진과 웹 브라우저

자바스크립트 자체 즉, 자바스크립트 엔진(V8)과 웹 브라우저에서 제공하는 API 메소드로 프로그래밍을 하는 것이다.

👉 자바스크립트 엔진 V8의 구성

자바스크립트 V8 엔진 소스 안에는 하나의 힙과 하나의 콜 스택만 있다.
setTimeout, DOM, AJAX(HTTP 요청)등과 같은 비동기 메소드가 없다.

👉 자바스크립트 런타임 웹 브라우저의 Web APIs

setTimeout, DOM, AJAX(HTTP 요청)가 있다.
이벤트 루프와 콜백 큐를 가지고 있다.

⚡️ 자바스크립트와 비동기

❗️자바스크립트와 싱글 스레드

자바스크립트는 싱글 스레드 프로그래밍 언어이다.

👉 스레드란? (single thread = 한 가닥)

스레드의 사전적 의미는 한 가닥의 실이라는 뜻이다.
한 가지 작업을 실행하기 위해 순차적으로 실행한 코드를 실처럼 이어 놓았다고 해서 유래된 이름이다.
싱글 스레드란 하나의 프로그램에서 동시에 하나의 코드만 실행할 수 있다는 뜻이다.
싱글 스레드란 코드가 실행되서 끝난 지점과 다음 코드의 시작 지점이 연결된 형태이다.
각 스레드는 한 번에 하나의 작업만 수행할 수 있다.
Task A —> Task B —> Task C
각 작업은 순차적으로 실행된다. (다음 작업을 시작하기 전에 이전 작업을 완료해야한다.)
멀티 스레드를 지원하는 프로그래밍 언어는 여러 코어를 사용하여 여러 작업을 동시에 완료할 수도 있다.
Thread 1 : Task A —> Task B
Thread 2 : Task C —> Task D
동시에 돌릴 수 있는 스레드 수는 컴퓨터에 있는 코어 갯수로 제한된다.
그런데 자바스크립트는 싱글 스레드이다.
스레드

🍀 잠깐! 프로세스와 스레드 그리고 멀티 스레드

프로세스와 스레드를 같이 공부해보면 좋다.
프로세스란 운영 체제에서 실행 중인 하나의 애플리케이션을 프로세스라고 한다.
사용자가 애플리케이션을 실행하면(프로그램을 실행하면) 운영 체제로 부터 실행에 필요한 메모리를 할당 받아 애플리케이션의 코드를 실행한다.
이때 실행되는 애플리케이션을 프로세스라고 한다.
정리하면 프로그램(파일)을 마우스 더블 클릭으로 실행 시켰을 때, 이 실행 되고 있는 프로그램을 프로세스라고 한다.
프로그램은 다중 프로세스로 만들기도 한다.
스레드는 이러한 프로세스 안에서 한 가지 작업을 실행하기 위해 순차적으로 실행되는 하나의 흐름이다.
멀티 프로세스가 애플리케이션 단위 멀티 테스킹이라면 멀티 스레드는 애플리케이션 내부에서의 멀티 테스킹이다.
멀티 코어 환경에서 여러 개의 스레드가 동시에 수행된다.

👉 자바스크립트는 싱글 스레드이다.

자바스크립트는 전통적으로 단일 스레드이다.
코어가 여러 개 있어도 메인 스레드라고 하는 단일 스레드에서만 작업을 행할 수 있다.
이러한 싱글 스레드는 하나의 힙 영역과 하나의 콜 스택을 가진다.
그래서 자바스크립트는 한번에 하나의 콜 스택(call stack)만을 가진다.
하나의 콜 스택을 가진다는 의미는 한 번에 한 가지 일 밖에 못한다는 의미이다.
아래 예시 코드와 같이 앞에 일이 완료 될 때까지 다음 코드는 다른 일은 하지 못하고 기다려야해서 웹 사이트에서 다른일을 할 수 없게 된다.
이렇게 싱글 스레드는 일을 동기적으로 처리한다.

function SignThreadTest() {
  console.log(1);
  for( let i=0; i<10000; i++ ) {
    console.log('자바스크립트는 싱글 스레드 프로그래밍 언어이다.');
  }
  console.log(2);
}
// '자바스크립트는 싱글 스레드 프로그래밍 언어이다.'가 10,000번 실행이 완료 될 때까지
// 콘솔 창에 '3' 이 찍히는 것을 기다려야한다.
SignThreadTest();

🍀 잠깐! 힙이 뭘까? 콜 스택이 뭘까?

자바스크립트 V8 엔진에는 두 가지 주요 구성 요소가 있다.
힙은 변수와 객체의 메모리 할당에 사용되는 비정형 메모리이다.
여기에서 중요한 것은 콜 스택이다. (콜 스택이 하나 뿐이라는 것이 중요하다.)
콜 스택은 코드를 읽고 함수가 실행되는 순서를 기억하고 있다.
위에서 자바스크립트는 싱글 스레드 프로그래밍 언어이고 하나의 힙 영역과 하나의 콜 스택을 가진다고 했다.
하나의 콜 스택을 가진다는 의미는 한번에 한 가지 일 밖에 하지 못한다는 의미라고 했다.
함수를 실행하려면 스택의 가장 위에 해당 함수를 넣게되고 함수에서 리턴이 일어나면 스택의 가장 위쪽으로 함수를 꺼낸다.
V8 엔진에서 오류가 발생하면 스택 추척을 콘솔에 인쇄한다.