프론트/JS

1. JS 기초(V8엔진, 런타임, 동기-비동기-블로킹-논블로킹)

초코chip 2024. 10. 28. 10:16

JS 

  • 정의: 객체 기반의 스크립트 프로그래밍 언어
    • 스크립트란?: 웹 페이지 동작을 제어하는 명령어들의 모음
  • 특징
    • 방대한 라이브러리: 웹개발, 게임개발, 데이터과학 분야에서 범용적으로 사용
      • 특히, 웹 부분에서 절대적임
    • 플랫폼 독립적인 오픈소스

 

 

JS V8엔진

V8 엔진이란? 

  • JIT(Just In Time) 컴파일러: 프로그램을 시작한뒤, 그때그때 시간에 맞춰 필요한 코드를 컴파일하는 방식
    • 먼저 코드를 Parsing하고, 그것을 통해 인터프리터로 바이트코드로 바꾸는 방식을 사용
    • 이때, 자주 사용하는 함수나 객체의 주소를 캐싱하여 바이트 코드에 반영하는 과정 추가

 

 

V8 엔진 동작 방식

  • V8 엔진은 Memory Heap과 Call Stack으로 구성
    • 메모리 힙(Memory Heap): 동적으로 할당된 메모리가 저장되는 곳
    • 콜 스택(Call Stack): 함수 호출 스택이 쌓이는 곳
      • JS가 싱글 스레드 언어라고 말하는 것은, Call Stack을 하나만 사용하는 것 

 

JS 런타임

  • 정의: JS 언어가 실행되게 하는 환경을 통틀어서 런타임이라고 함
  • 구성: V8엔진 + Web/Node.js + 이벤트 루프(Event Loop) + 콜백큐(Callback Queue)가 포함
    • 우리가 자주 사용하는 라이브러리들은 대부분 js 엔진이 아닌 web api에서 제공
  • 동작 방식:
    1. 콜스택(Call Stack): 실행중인 함수를 콜스택에 삽입
    2. 비동기 작업(Web API): setTimeout, fetch같은 비동기 작업은 콜 스택에 바로 쌓이지 않고, 백그라운드에 처리
    3. 태스크 큐: 비동기 작업이 완료되면, 콜백 함수를 태스크 큐에 저장
    4. 이벤트 루프(Event Loop):
      • 콜 스택과 태스크 큐를 계속 감시 (무한 루프로)
      • 그래서 콜 스택이 비어있을 때, 태스크 큐에서 대기 중인 콜백 함수를 콜 스택에 옮겨 실행

 

JS  런타임 종류

브라우저

  1. 브라우저에서 f12 개발자 도구 -> Console창에서 실행

 

Node.js 환경

  • 정의: Chrome V8엔진으로 빌드된 JS 런타임 환경
  • 목적: 
    • JS는 원래 브라우저 위에서 동작하기 위해 탄생한 언어
    • 브라우저 외에도 JS를 실행하고 싶다! 
  • npm(Node.js Package Manager)를 통해 수많은 오픈 소스 라이브러리를 쉽게 사용 가능

 

 

 

Blocking - Non Blocking - Synchronous - Asynchronous

  • Blocking vs Non-Blocking: 코드의 진행이 멈추는지 여부에 따라 결정
  • Synchronous vs Asynchronous: 호출한 함수의 작업 완료를 신경쓰는지에 대한 여부로 결정

 

일반적으로 아래 2개의 경우가 많음

  • Synchronous - Blocking
  • Asynchronous - Non-Blocking