4주차 위클리 페이퍼

Q1) var, let, const를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 주세요.

(1) 중복 선언 허용

	var	let, const
중복 선언 허용	O	X

var는 let과 const와 다르게 변수 중복 선언이 가능하다. var로 같은 이름의 변수를 여러 번 선언하는 것도 가능하다.

(2) 스코프

	var	let, const
스코프	함수 스코프	블록 스코프

스코프란, 함수 안에서 변수에 접근할 수 있는 범위를 의미한다. 함수 스코프는 함수를 기준으로 스코프를 구분한다. 그렇기 때문에 함수가 생성될 때마다 새로운 스코프가 발생하게 된다. 함수 안에서 선언한 변수는 함수 안에서만 유효하게 된다. 블록 스코프는 let, const 키워드와 같이 등장한 개념으로, 블록 {}이 생성될 때마다 새로운 스코프를 생성하게 되며, 블록 {}으로 감싸진 코드 블록에 따라 유효 범위를 구분하게 된다. 일반적으로 var은 함수 스코프, let과 const는 블록 스코프를 갖게 된다.

(3) 호이스팅

	var	let, const
호이스팅	허용 O	허용 X

var 변수는 함수 스코프가 선언되기 이전에 변수에 접근이 가능하다.

---

Q2) 브라우저가 어떻게 동작하는지 설명해 주세요.

브라우저 주소창에 네이버(https://www.naver.com) 또는 구글(https://google.com) 등을 입력하면 어떤 동작 원리로 입력한 웹 페이지로 접속이 가능하게 되는 것일까?

1. 브라우저란?

웹 브라우저는 동기(Synchronous)적으로 HTML, CSS, JavaScript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어를 의미한다.

2. 브라우저의 구조

(1) 사용자 인터페이스
사용자가 접근할 수 있는 영역이다. URI를 입력할 수 있는 주소 표지줄, 이전/다음 버튼, 북마크 메뉴, 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼, 홈 버튼 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이 해당된다.

(2) 브라우저 엔진
사용자 인터페이스와 렌터링 엔진 사이의 동작을 제어한다. Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 한다.

(3) 렌더링 엔진
웹 서버로부터 응답 받은 자원을 웹 브라우저 상에 나타낸다. 예를 들어 HTML 문서를 응답받으면 HTML과 CSS를 파싱하여 화면에 표시한다. 브라우저의 동작 원리를 이해하려면 렌더링 엔진의 이해가 중요하다. 브라우저는 서버로부터 HTML 문서를 응답받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합한다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타낸다.

(4) 통신
HTTP 요쳥과 같은, 서버와 통신이 가능하게 하는 네트워크 호출에 사용된다.

(5) UI 백엔드
select, input 등 기본적인 위젯을 그리는 인터페이스이다.

(6) 자바스크립트 해석기
자바스크립트 코드를 해석하고 실행한다.

(7) 자료 저장소
Cookie, Local Storage, Indexed DB 등 브라우저 메모리를 활용하여 저장하는 영역이다.

3. 렌더링 엔진

렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진이다. 각 브라우저마다 렌더링 엔진이 다르기 때문에 같은 페이지가 다르게 보이는 경우도 있다. 아래는 렌더링 엔진의 종류다.

• Blink : 크롬, 오페라
• Webkit : 사파리
• Trident : 익스플로어
• EdgeHTML - 마이크로소프트 엣지

렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시한다. 그래서 일련의 과정들이 동기적으로 진행되지 않는다. HTML을 파싱할 때까지 기다리지 않고 렌더 트리 배치와 그리기 과정을 시작한다.

4. 렌더링 엔진 동작 과정

렌더링 엔진은 서버로부터 응답받은 HTML 문서를 얻는 것으로 시작한다.

(1) 렌더링 엔진은 HTML 문서를 파싱하여 DOM 트리를 구축한다.
(2) 그다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱한다.
(3) DOM 트리와 (2)의 결과물을 합쳐 렌더 트리를 구축한다.
(4) 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정한다.
(5) UI 백엔드에서 렌더 트리의 각 노드를 그린다.

<웹킷 엔진>

(1) HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 구축한다.

브라우저는 서버로부터 HTML 문서를 모두 전달받고 HTML 파서를 통하여 파싱하고 파싱 트리를 생성한다. 생성된 파싱 트리를 기반으로 DOM 트리를 생성한다.

(2) CSSOM(Css Object Model)을 생성한다.

CSS 파일을 스타일 시트 객체로 파싱되고 각 객체는 CSS 규칙을 포함한다. CSS 규칙 객체(CSSOM)는 선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함한다.

(3) 렌더 트리(DOM + CSSOM)를 생성한다.

DOM 트리가 구축되는 동안 브라우저는 DOM 트리를 기반으로 렌더 트리를 생성한다. 렌더 트리는 문서를 시각적인 구성 요소로 만들어주는 역할을 한다. 웹킷은 이 구성 요소를 '렌더러(rendere)' 또는 '렌더 객체(render object)'라는 용어로 사용한다.

(4) 렌더 트리를 배치한다. (레이아웃)
렌더 트리는 위치와 크기를 가지고 있지 않기 때문에, 어느 공간에 위치해야 할지 각 객체들에게 위치(position)와 크기(size)를 결정해 준다.

(5) 렌더 트리를 그린다.
렌더 트리가 만들어져 레이아웃이 구성되었으면 UI 백엔드가 동작하여 렌더 트리의 각 객체를 화면의 픽셀값으로 나타낸다.