js -> 서버로부터 html 코드를 전송받아 웹페이지 전체 렌더링. 화면 전환시 서버로부터 새로운 html 전송 받아 처음부터 다시 렌더링.
Ajax -> 서버로부터 필요한 데이터만 전송받아 변경하는 부분만 렌더링.
jQuery -> DOM 쉽게 제어 가능해짐..(DOM이 뭔데요ㅠ) 크로스 브라우징 이슈 어느 정도 해결.
V8 JS 엔진 -> 데스크톱 앱과 유사한 사용자 경험. 웹 서버에서 수행된 로직들이 클라이언트(브라우저)로 이동.
Node.js -> V8 엔진으로 빌드된 자바스크립트 런타임 환경. 브라우저의 js 엔진에서만 동작하던 js를 브라우저 이외의 환경에서도 동작할 수 있도록 js 엔진을 브라우저에서 독립시킨 실행환경. 서버 사이드 app 개발에 주로 사용. 여기 필요한 모듈, 시스템 http 등 내장 api를 제공
백/프론트에서 둘 다 js를 사용할 수 있다는 강점.
노드는 비동기I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작하여 요청 처리 기능이 좋음. 따라서 실시간으로 데이터를 처리하기 위해 I/O가 빈번하게 발생하는 Single Page Application에 적합함. 하지만 CPU 사용률이 높은 앱에서는 권장하지 않음.
SPA 프레임워크 -> Component Based Development 방법론을 기반으로 하는 Single Page Application이 대중화 되며 Angular, Vue.js, Svelte 등 다양한 SPA 프레임워크/라이브러리가 사용됨.
자바스크립트는 일반적으로
ECMAScipt(프로그래밍 언어, 뼈대) + 브라우저가 별도 지원하는 클라이언트 사이드 Web API(즉, DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker) 등을 아우르는 개념
js는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어.
기본 문법은 C, 자바와 유사 / self에서는 프로토타입 기반 상속, Scheme에서는 일급 함수의 개념을 차용
개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어.
대부분의 모던 js 엔진(크롬 V8, 파폭 SpiderMonkey, 사파리 JavaScriptCore, 마소 엣지 Chakra)는 인터프리터와 컴파일러 장점을 결합해 비교적 처리 속도가 느리다는 단점을 해결..
| 컴파일러 언어 | 인터프리터 언어 |
|---|---|
| 코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머신 코드로 변환 후 실행 | 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간 코드인 바이트코드로 변환 후 실행 |
| 실행 파일 생성 | 실행파일 생성 안함 |
| 컴퍼일/실행 단계 분리. 명시적인 컴파일 단계 거친 후, 명시적으로 실행 파일을 실행 | 인터프리트 단계, 실행 단계 분리 X, 한 줄씩 바이트코드로 변환 후 즉시 실행 |
| 실행 전 컴파일은 한 번 수행 | 코드 실행될 때마다 인터프리트 과정 수행 |
| 컴파일/실행 분리되어 있으므로 코드 실행 속도 빠름 | 인터프리트/실행 분리되어 있지 않아 코드 실행 속도 느림 |
모던 브라우저에서 사용되는 인터프리터들은 복잡한 과정을 통해 일부 소스를 컴파일 하고 실행함으로서 느린 속도 극복함.
현재 js는
명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어.
브라우저/node.js는 둘 다 js 엔진을 내장.
다라서 브라우저에서 동작하는 코드는 노드 환경에서도 동일하게 동작.
but 둘은 용도가 다름. 브라우저는 HTML, CSS, js를 실행해 웹페이지를 브라우저 화면에 렌더링 하는 것이 주된 목적,
node.js는 브라우저 외부에서 js 실행 환경을 제공하는 것이 주된 목적.둘은 EXMAScript 외에 추가로 제공하는 기능은 호환되지 않는다.
예를 들어 브라우저는 파싱된 HTML 요소를 선택하는 기능의 집합인 DOM API를 기본적으로 제공.
하지만 node.js는 브라우저 외부에서 js 개발 환경을 제공하는 것이 목적이므로 DOM API를 제공하지 않는다. 브라우저 외부 환경에서는 HTML 요소를 파싱해서 객체화한 DOM을 직접 다룰 필요가 없기 때문이다.
