1. 자바스크립트 런타임
(1) 자바스크립트 런타임 = 자바스크립트 엔진 + API 및 라이브러리
- 자바스크립트 엔진을 기반으로 자바스크립트 언어로 된 모든 코드를 실행할 수 있게한 뒤 필요한 API 들을 조합
- 웹 브라우저 (예, 우리가 사용하는 Chrome) = V8 자바스크립트 엔진 + Web APIs
- 웹 서버 (예, 서버로 많이 사용하는 Node.js) = V8 자바스크립트 엔진 + Node APIs + LIBUV
- LIBUV = 비동기 I/O
구성 1 : 자바스크립트 엔진 구성 (V8 엔진 기반으로 설명)
V8 자바스크립트 엔진은 웹 브라우저 크롬에서도 사용되고, 웹 서버 Node.js 에서도 사용되는 유명한 엔진
- (1) 싱글스레드 : 모든 자바스크립트 코드(문법) 실행은 단 하나의 스레드가 실행
- (2) 메모리 = Stack + Heap 두 개만 기억
- 메모리 영역은 정말 간단히 추상화해서 이해하자면 Heap 과 Stack 으로 구성
- Heap : 선언 및 할당된 객체, 변수 및 함수 저장 (바구니)
- (Call) Stack : 함수 실행 순서대로 적재 및 수행
- Stack : 함수 호출을 위한 영역으로 파라미터나 함수 내 지역 파라미터 저장
구성 2 : API 및 라이브러리
자바스크립트 엔진 그 자체는 자바스크립트 언어로 된 코드를 실행할뿐이기에 자바스크립트 문법만 사용 가능
웹 브라우저 내 Cookie, Local Storage 라던가 노트북 캠에 접근하거나 파일 저장, 조회 등은 불가능
따라서 웹 브라우저나 웹 서버의 기능을 제대로 사용하기 위해서는 이들이 제공하는 API 사용 필요
- Web APIs = 웹 브라우저에서 제공되는 다양한 API 들 (다양한 웹 브라우저가 존재)
- Canvas API : 웹 브라우저에 2D, 3D 그림을 그리기 위한 툴 - 웹 브라우저로 그림판 만들기 가능
- Cookie API : 웹 브라우저 내 Cookie 조회 및 조작 기능을 제공
- File System API : 윈도우나 맥북에 저장되어있는 디렉토리와 파일에 접근 (조회나 저장)
- Keyboard API : 어떤 키 치고있는지 인지하고 그에 알맞은 이벤트 수행 - 복사, 붙여넣기 방지 기능
- Javascript Visualized : Web APIs = 웹 브라우저가 APIs 통해 컴퓨터에 있는 다양한 카메라, 센서, 파일 등 쓰는걸 알 수 있음
Node APIs = 웹 서버에서 제공되는 다양한 API 들 (단일 웹 서버이기에 API 모두 지원)
다양한 웹 브라우저가 존재하기에 Web APIs 는 몇몇의 웹 브라우저에서는 어떤 API 는 제공되지 않음
- 각 Web APIs 마다 지원 가능 여부 판단 예시 : Battery API
2. 자바스크립트 런타임 환경 종류
3. Chrome 웹 브라우저에서 비동기를 지원하는 방식
웹 브라우저 : Chrome (V8 자바스크립트 엔진)
자바스크립트 엔진 + Web APIs
- 자바스크립트 엔진 : 싱글스레드 + 메모리(Stack + Heap)
- Web APIs : Web Worker API 통해 멀티스레드가 제공되며 자바스크립트 동작 중 비동기가 필요한 상황
- 비동기 처리 (병렬 처리) : 비동기 처리엔 2개가 필요하다 = 메인 함수 + 콜백 함수 (비동기 완료 시 호출)
- Task Queue : (비동기 완료 시 호출) 콜백 함수 적재 및 대기
- Event Loop : 자바스크립트 엔진 메모리 중 Stack 내 콜백 함수 적재 후 실행
4. Node.js 웹 서버에서 비동기를 지원하는 방식
웹 서버 : Node.js (V8 자바스크립트 엔진)
자바스크립트 엔진 + Node APIs + LIBUV
- 자바스크립트 엔진 : 싱글스레드 + 메모리(Stack + Heap)
- Node APIs : 사실 Node.js 는 C/C++ 언어를 통해 제작됨
- Node-API 약자로 N-API 를 사용하며 구현체는 C/C++ 뿐만 아니라 Rust 언어도 사용 가능
- LIBUV : Blocking 혹은 Non-blocking 비동기 처리(네트워크, 파일 I/O 등)를 위해 스레드와 커널 제공
- Event Queue : 모든 요청이 적재 및 대기
- Event Loop : 싱글스레드가 하나씩 처리하여 비동기 처리는 아래에 위임, 응답은 Node APIs 로 전달
- Worker Thread : 처리 중 Blocking 비동기 처리가 필요한 경우
- OS(Kernel) 내 비동기 인터페이스 : 처리 중 Non-Blocking 비동기 처리가 필요한 경우
5. Facebook 에서 등장한 React와 그 목적
- 동적이고 복잡한 웹 페이지가 등장함에 따라 SPA(Single Page Application) 등장
- SPA(Single Page Application) 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 어플리케이션 혹은 웹 사이트
- SPA(Single Page Application) 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 어플리케이션 혹은 웹 사이트
- Google의 Angular.js 등장 : 앱이 커지고 사용자가 늘어날수록 데이터의 흐름 파악과 디버깅의 어려움 존재
- Facebook에서 코드베이스를 업그레이드 시킬 필요성을 느껴 개발한 것이 React
- 가상 DOM (Virtual DOM)
- Component : UI를 구성하는 개별적인 뷰 단위
- One Way(Unidirectional) Data Flow : 단순한 단방향 데이터 흐름
- 선언형 : 선언적 UI
(와.. 정말 Chill하다..)