Node.js
: 구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
Node.js의 등장으로 자바스크립트는 서버 사이드 애플리케이션 개발에서도 사용할 수 있게 되었다.
그래도 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드다.
대부분의 프로그래밍 언어 - 운영체제나 가상머신 위에서 실행된다.
자바스크립트 - 브라우저에서 HTML, CSS와 함께 실행된다.
그렇다면 어떻게 브라우저는 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 파싱(해석)하여 브라우저에 랜더링할까?
브라우저는 HTML, CSS, 자바스크립트 파일 등 랜더링에 필요한 리소스를 서버에 request하고 response 받는다.
여기서, 클라이언트: 브라우저 (ex. Chrome) / 서버 (ex.Node.js)
HTML, CSS
자바스크립트
랜더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 페인팅한다.
브라우저의 핵심기능은 필요한 리소스를 서버에 request하고 response 받아 브라우저에 시각적으로 랜더링하는 것이다.
이 말은 즉슨, 서버에 필요한 리소스가 모두 존재해야 가능하다는 것이다.
여기서 필요한 리소스 종류가 될 수 있는 것들
서버에 요청하기 위해 브라우저는 주소창을 제공한다.
더 자세한 내용은 아래 링크를 통해 알아볼 수 있다.
https://velog.io/@julianneyi/Domain-DNS-그리고-호스팅
반드시 브라우저의 주소창을 통해서만 필요한 리소스를 서버에 요청할 수 있는 것은 아니다.
⇒ 자바스크립트를 통해 동적으로 서버에 정적/동적 데이터를 요청할 수도 있다. (ajax or REST API)
HTTP/1.1
HTTP/2.0
브라우저의 랜더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.
즉, DOM은 HTML 문서를 파싱한 결과물이다.
랜더링 엔진은 DOM을 순차적으로 생성해 나가다가 CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단한다.
그리고 HTML과 동일한 파싱 과정(바이트 → 문자 → 토큰 → 노드)을 거치며 해석하여 CSSOM을 생성한다.
랜더링 엔진은 DOM과 CSSOM(3, 4번 과정을 거쳐 만들어진)을 조합해 랜더 트리를 만든다.
랜더 트리는 브라우저 화면에 랜더링되는 노드만으로 구성된다.
= meta 태그, script 태그 노드들은 포함하지 X
Book) 모던 자바스크립트 Deep Dive
https://codingsalon.tistory.com/123