위클리페이퍼 3주차 (브라우저 / var, let, const)

1. 브라우저는 어떻게 동작하는가

브라우저란?

웹 서버에서 양방향 통신을 하며
HTML 문서, 멀티미디어 등을 보여주는 GUI기반의 소프트웨어 프로그램이다.

브라우저는 웹 페이지를 다운로드하기 위해서 HTTP 프로토콜을 사용하여 데이터 송/수신을 한다.

 

브라우저의 기본 구조

<브라우저 기본 구조>

• 사용자 인터페이스(UI) : 주소 표시줄, 이전/다음 버튼, 북마크   (브라우저에 렌더링되는 화면 제외)
• 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 부분. 중심적인 역할
• 렌더링 엔진 : HTML과 CSS 파일의 렌더링을 담당.

 

• 통신 :  HTTP 요청(Request)와 같은 통신을 담당한다. (플랫폼의 하부에서 실행)
• JS 해석기 : JS코드를 해석하는 역할 (브라우저는 JS코드를 기본적으로 해석할 수 없다.)
• UI 백엔드: 기본 위젯을 표시하는 역할 (windows , combo boxes, select, input ....)

 

• 데이터 스토리지 (자료 저장소) : 로컬 스토리지 (영구) / 세션 스토리지 (임시) 를 두어 브라우저가 데이터를 보관하는 데 사용한다. 한 출처(origin)마다 하나만 존재한다. (하나의 사이트에는 하나만 있다)

 

브라우저 동작 원리

브라우저는 사용자가 선택한 자원(Resource)을 서버에 요청(Request)하고, 서버로부터 받은 응답(Response)을 브라우저에 렌더링한다.(Render).

<브라우저 동작 원리>

1. 사용자                  - URL 입력
2. DNS 서버             - DNS 조회 : 받은 URL을 IP 주소로 변환
3. HTTP 프로토콜     - HTTP 요청 :  IP주소와 URL 정보로 서버에 요청을 보낸다. 
4. TCP/IP 프로토콜  - IP 주소로 서버 컴퓨터와 연결. (경유)
5. 웹 서버                 - 서버 응답 :  HTTP 요청 메세지를 받아서 HTTP 응답 메세지를 보낸다.
6. 웹 브라우저          - 렌더링, 레이아웃, 페인팅 : HTTP 프로토콜에서 변환된 웹 페이지 데이터를 바탕으로 화면을 그린다.

2. var, let, const

차이점

• 중복 선언과 재할당
• 스코프 범위
• 호이스팅

중복 선언과 재할당

	var	let	const
중복 선언	O	X	X
재할당	O	O	X

 

let은 처음 한번만 선언 가능한 반면, var는 중복 선언이 가능하다. (마지막에 선언한 값으로 할당된다.)

const는 상수이기 때문에 선언시 할당한 값으로 고정된다. (재할당 불가)

 

스코프 범위

var	함수 단위 스코프 (function-level scope) 함수 내부에서 모두 유효하다. 함수 외부에서 선언 시 전역 변수처럼 작동한다.
let, const	블록 단위 스코프 (block-level scope) {}를 기준으로 안에서만 유효하다.

 

 호이스팅

:코드를 실행하기 전 함수/변수 선언이 스코프 최상단으로 끌어올려진 것 같은 현상.

(쉽게 말해 실행하는 코드보다 뒤에 선언되는 변수를 사용할 수 있는 것)

 

<변수의 시점>

1) 선언 시점

2) 초기화 시점 (최초 값 할당)

3) 재할당 시점 

var	호이스팅을 사용할 수 있고, 변수 접근은 선언 시점과 관계 없이 접근 가능하다. 값 접근은 초기화 시점보다 앞에서 실행한 코드에서는 undefined로 나온다. (어차피 값이 undefined로 나오는 데 의미가 없어보인다..)
let, const	호이스팅이 발생하지만 , 초기화 시점 전까지는 ReferneceError로 처리하기 때문에 호이스팅이 없는 것과 같다. let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없는 일시적 사각지대(Temporal Dead Zone: TDZ) 구간에 존재한다. (const는 선언과 초기화가 동시다.)