[JavaScript] 런타임 작동방식 & 비동기와 이벤트 루프

에이블·2022년 6월 15일
0

JavaScript

목록 보기
1/1

🛴 주요 내용

  • 자바스크립트란?
  • 자바스크립트 V8 엔진이란?
  • 자바스크립트 런타임이란?
  • 자바스크립트 싱글 스레드 기반 프로그래밍 언어
  • 엔진의 구성 요소 힙과 콜 스택
  • 싱글 스레드의 동기적 처리로 인한 블로킹 및 해결을 위한 비동기 처리
  • 런타임 작동 방식(=비동기 처리 방식)
  • 런타임인 웹 브라우저의 Web API란?
  • 런타임인 웹 브라우저의 Web APIs
  • 런타임인 웹 브라우저의 Web API가 비동기 콜백으로 싱글 스레드 프로그래밍 언어에서의 블로킹을 해결
  • 웹 브라우저의 Web API의 결과값을 쌓아두는 콜백 큐
  • V8 엔진의 콜스택을 주시하는 이벤트 루프

🚩 목차

  • 자바스크립트 엔진과 자바스크립트 런타임
    • 자바스크립트와 웹 브라우저
    • V8 엔진과 웹 브라우저
  • 자바스크립트 싱글 스레드와 논 블로킹
    • 자바스크립트 싱글 스레드
    • 자바스크립트 동기와 블로킹
    • 자바스크립트 비동기와 논 블로킹
  • 자바스크립트 런타임에서 비동기 처리 방법
    • 비동기 콜백을 만드는 이벤트 루프
    • 비동기 요청 문제점과 처리 방법

🚀 자바스크립트 엔진과 자바스크립트 런타임

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

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

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

자바스크립트 런타임

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

V8 엔진

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

웹 어셈블리

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

🚩 V8엔진과 웹 브라우저

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

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

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

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

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

🚀 자바스크립트와 비동기

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

🚩 쓰레드

  • 쓰레드의 사전적 의미는 한 가닥의 실이라는 뜻이다.
  • 한 가지 작업을 실행하기 위해 순차적으로 실행한 코드를 실처럼 이어 놓았다고 해서 유래된 이름이다.
  • 싱글 스레드란 하나의 프로그램에서 동시에 하나의 코드만 실행할 수 있다는 뜻이다.
  • 싱글 스레드란 코드가 실행되서 끝난 지점과 다음 코드의 시작 지점이 연결된 형태이다.

Task A -> Task B -> Task C

  • 각 작업은 순차적으로 실행된다.

  • 멀티 스레드를 지원하는 프로그래밍 언어는 여러 코어를 사용하여 여러 작업을 동시에 완료할 수도 있다.

    Thread 1 : Task A-> Task B
    Thread 2 : Task C -> Task D

  • 동시에 돌릴 수 있는 쓰레드 수는 컴퓨터에 있는 코어 갯수로 제한된다.

  • 하지만 자바스크립트는 싱글 스레드이다.

🚑 Wait(); 프로세스와 쓰레드 그리고 멀티 쓰레드

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

🚩 자바스크립트 => 싱글 쓰레드

  • 자바스크립트는 전통적으로 단일 쓰레드이다.
  • 코어가 여러 개 있어도 메인 쓰레드라고 하는 단일 쓰레드에서만 작업을 행할 수 있다.
  • 이러한 싱글 쓰레드는 하나의 힙 영역과 하나의 콜 스택을 가진다.
  • 그래서 자바스크립트는 한번에 하나의 콜 스택(Call Stack)만을 가진다.
  • 하나의 콜 스택을 가진다는 의미는 한 번에 한 가지 일 밖에 못한다는 의미이다.
  • 아래 예시 코드와 같이 앞에 일이 완료 될 때까지 다음 코드는 다른일을 하지 못하고 기다려야해서 웹 사이트에서 다른일을 할수 없게 된다.
  • 싱글 쓰레드는 일을 동기적으로 처리한다.
function SingleThreadTest(){
  console.log(1);
  for(let i = 0; i<10000; i++){
  	console.log('자바스크립트는 싱글 스레드 프로그래밍 언어이다.');
  }
  console.log(3);
}

// '자바스크립트는 싱글 스레드 프로그래밍 언어이다.' 가 10,000번 실행이 완료 될 때 까지
// 콘솔 창에 '3'이 찍히는 것을 기다려야 한다.
SingleThreadTest();

🚑 Heap & Call Stack

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

🛴 자바스크립트 동기와 블로킹

싱글 쓰레드는 동기적으로 일을 처리한다.
웹 브라우저의 Web APIs는 비동기적으로 일을 처리한다.

🚩 동기는 뭐고 비동기는 뭘까?

  • 동기와 비동기에 대해 알아보자.
  • 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉, A작업이 모두 진행 될 때 까지 B작업은 대기해야 한다.
  • 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다. 즉, A 작업이 시작하면 동시에 B작업이 실행된다. A 작업은 결과값이 나오는 대로 출력된다.

🚩 싱글 쓰레드는 블로킹을 만든다.

  • 싱글 쓰레드는 동기적으로 처리되기 때문에 블로킹을 만든다.
  • 동기적으로 AJAX 요청을 보내면 브라우저는 모든 응답이 완료될 때 까지 멈춰있다.
  • 동기적으로 실행되는 네트워크 요청이 콜 스택을 블로킹하여 브라우저는 다른 일을 할 수가 없다.
  • 여기서 주의할 점은 '동기적으로 네트워크 요청을 보내면' 그렇다는 것이지 웹 브라우저가 제공하는 API가 동기적으로 요청을 보낸다는 것이 아니다.
  • 웹 브라우저는 비동기적으로 네트워크 요청을 보낸다는 것이다.

🚩 블로킹이란?

  • 블로킹이라는 것의 정확한 정의는 존재하지 않는다
  • 그저 느리게 동작되는 코드일 뿐이다.
  • 느린 동작이 스택에 남아 있는 것을 보통 블로킹이라고 한다.
  • 웹 브라우저에서 코드가 실행되는데 코드가 종료될 때까지 유저가 클릭을 해도 어떠한 반응을하지 않는 상태가 된다.
  • Call Stack이 멈춘 상태, 이 상태를 블로킹 상태라고 한다.

🚀 자바스크립트 비동기와 Non-Blocking

동기적 처리의 문제점 때문에 브라우저는 AJAX 요청을 비동기적으로 실행한다.

🚩 웹 브라우저의 Web APIs는 비동기로 처리한다.

  • Web APIs => setTimeout, DOM, AJAX(Http 요청)
  • 이벤트 루프와 콜백 큐도 존재한다.
  • 자바스크립트 자체는 비동기적으로 요청을 처리할수 없다.
  • 자바스크립트 런타임 안에 지원하는 API로 비동기로 요청을 처리할 수 있게 하는 것이다.

🚩 비동기 콜백으로 싱글 쓰레드 프로그래밍 언에서의 블로킹 해결

  • 웹 브라우저와 Node.js에는 동기로 처리하는 블로킹 메소드가 거의 없다.
  • 대부분 지원 메소드가 비동기 처리를 하게끔 만들어졌다.
  • 함수 호출 시 당장 실행하는 것이 아닌 쌓아두고 동시에 요청을 처리하고 요청이 완료되는 순서대로 처리한다.
비동기 처리방식에 대해서는 다음 포스팅에서 자세하게 다루겠습니다.
profile
꺾이지 않는 마음

0개의 댓글