3/13 공부 목록

자바스크립트 런타임 환경 node js 등장으로 자바스크립트는 웹 브라우저 뿐만 아니라 서버 사이드 애플리케이션 개발할 수 있다.

html,css,js 같이 브라우저에서 실행된다
파싱: 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 일어 들여 문자여을 토큰으로 분해

1. html,css,자바스크립트 ,이미지 폰트파일 필요한 리소스를 요청하고 서버로 응답한다.

2. HTML, CSS 파싱 DOM과 CSSOM 생성하고 이를 결합하여 렌더 트리 생성

3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행, 자바스크립트는 DOM AP를 통해 dOM이나 CSSOM을 변경할 수 있다. 변경된 것들은 다시 렌더 트리로 결합한다.

4.렌더 트리를 기반으로 HTML 요소의 레이아웃 계싼하여 HTML요소를 페인팅

클라이언트가 주소 요청
루트 요청, host로 구성된 URI 요청이 서버에 전송
서버는 루트 요청에 대해 암무적으로 index.html을 응답하도록 기본 설정되어 있다.

기본 설정이 아닌 다른 정적파일을 요청할려면 정적파일의 경로와 이름을 URI 호스트 뒤 path에 기술하여 요청해야 한다.

URI에 기술하지 않아도 자바스크립트를 통해 동적으로 요청할 수 있다.

HTTP: 브라우저와 서버가 통신하기 위한 프로토콜(규약)

HTTP1.1: 기본적으로 커넥션당 하나의 요청과 응답만 처리함
여러 개의 요청을 한 번에 전송할 수 없고 응답 또한 마찬가지
css linkxorm, img태그, script태그에 대한 개별적 전송
리소스의 개수에 비례하여 응답 시간도 증가

HTTP 2: 커넥션당 여러 개의 요청과 응답, 다중 요청/응답이 가능하다

DOM(DOCUMENT OBJECT MODEL) 응답받은 HTML 문서를 파싱하여 브라우저가 이해 할 수 있는 자료구조인 DOM을 생성

1.서버에 존재하던 HTML 파일이 브라우저의 요청에 의해 응답
서버는 브라우저가 요청한 HTML파일을 읽어 들여 메모리에 저장한 다음, 메모리에 저장된 바이트를 인터넷을 경유하여 응답

2. 브라우저는 서버가 응단한 HTML 문서를 바이트 형태로 응답, 그리고 응답된 바이트 형태의 HTML 문서는 meta태그의 charset에 의해 지정된 인코딩 방식으로 문자열을 변환한다.

3. 문자열로 변환된 HTML 문서를 읽어 들여 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해함

4. 토큰들이 객체로 변환하여 노드를 생성, 노드는 DOM을 구성하는 기본 요소

5. HTML 문서는 HTML 요소들의 집합으로 이루어지며 HTML 요소는 중첩관계를 가짐, 이러한 HTML요ㅅ 간의 부자 관계를 반영 트리 자료구조

바이트->문자->토큰->노드->CSSOM

렌더링 엔진은 서버로부터 응답된 HTML과 CSS 파싱하여 각각 DOM과 CSSOM을 생성한다. 그리고 DOM과 CSSOM은 렌더링을 위해 렌더 트리로 결합합낟.
css에 의해 비표시, 브라우저 화면에 헨더링되지 않은 노드들은 포함하지 않는다.

자바스크립트 파싱과 실행

HTML 문서를 파싱한 결과물로서 생성된 DOM은 HTML 문서의 구조와 정보 뿐만 아니라 HTML 요소와 스타일 등을 변경할 수 있는 프로그래밍 인터페이스로 DOM API제공,
즉, 자바스크립트 코드에서 DOM API를 사용하면 이미 생성된 DOM을 동적으로 조작할 수 있다.

렌더링 엔진은 HTML을 한 줄씩 순차적으로 파싱하여 DOM을 생성해 나가다가 자바스크립트 파일을 로드하는 script 태그나 자바스크립트 코드를 콘텐츠로 담은 script 태그 만나면 DOM 생성 일시중단
자바스크립트 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권을 넘겨 HTML 파싱이 중단된 지점부터 다시 HTML 파싱 시작 DOM 생성 재개

자바스크립트 파싱과 실행은 브라우저의 렌더링 엔진이 아닌 자바스크립트 엔지ㄴ이 처리
자바스크립트 소스코드 -> 토크나이징(단순한 문자열을 어휘 분석하여 문법적 의미를 갖는 코드의 최소 단위 토큰ㅇ들로 분해)->파싱
토큰들의 집합을 구문 분석하여 AST를 생성, AST는 토큰에 문법적 의미와 구조를 반영한 트리 구조의 자료구조,
->인터프리터

javascript 소스코드 타입
전역 코드: 전역에 존재하는 소스코드
함수 코드: 함수 내부에 존재하는 소스코드, 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함x
eval코드: 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드
모듈 코드: 모듈 내부에 존재하는 소스코드