TIL-2024.03.18 - Google.com & 변수

 

 

목표: 

 

1. Google.com을 치면 일어나는 일
2. Var, Let, Const & 실행 컨텍스트

 

GOOGLE.COM 을 치면 일어나는 일, 페이지 로딩 과정 

구글을 치면 일어나는 일
1. url 창에 주소입력

2. DNS 조회:
    도메인 네임을 IP 주소로 전환하기 위해 DNS 서버 조회 (like 전화번호부)

3. IP 주소 획득:
    IP 주소에 해당하는 브라우저 반환

4. Google 서버 요청:
    Google 서버 연결 요청

5. 서버 응답:
    브라우저 요청을 받고, 웹페이지의 데이터 & 파일 (JS & CSS) 등을 받음 

6. 페이지 로딩: 
    받은 데이터를 해석하여 웹페이지 로딩



연계질문 1. 페이지 로딩 과정
1. 로딩:
    웹 페이지 로딩 시, 부라우저는 HTML & CSS 파일을 로드

2. DOM 트리 생성 과정 
 2.1) HTML 파싱:
    서버로부터 받은 HTML 문서를 읽고, 구성된 태그를 해석
 2.2) 트리구조 생성:
    HTML 태그를 트리구조 노드로 변환 (돔트리)

3. CSSOM 생성 과정
 3.1) CSS 파싱
    브라우저가 CSS를 파싱하여, 코드를 읽고 해석해 CSS 규칙을 이해
 3.2) CSSOM 생성
    웹페이지 스타일 정보를 포함한 CSSOM 생성

4. 합성
    2. 에서 만든 DOM 트리와 3. 에서 만든 CSSOM을 결합하여 렌더트리 형성

5. 랜더링: 
    - 랜더트리가 완성되면, 브라우저는 이를 기반으로 화면에 페이지가 렌더링
    - 각 요소 위치 지점 & 요소 화면그림

 

 

 

 

Var, Let, Const

# var-let-const

### VAR
    - 재할당 가능
    - 재선언 가능
    - 함수레벨 스코프
    - 호이스팅 가능 > Undefined 으로 초기화 진행
    - 전역객체 프로퍼티



### LET
    - 재할당 가능
    - 재선언 불가
    - 불록레벨 스코프
    - 호이스팅 가능 > Reference Error



### CONST
    - 재할당 불가
    - 재선언 불가
    - 불록레벨 스코프
    - 호이스팅 가능 > Reference Error


#### 연계질문 1. var 만 undefined 인 이유? 
    - 전역 코드 컴파일(평가)시점에서 객체 환경 레코드에 바인딩된 BindingObject를 통해 전역 객체에 변수 식별자를 키로 등록한 다음, undefined를 바인딩하기 때문



# 실행 컨텍스트
### 정의
    - 소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행 결과를 관리
    - 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현하는 내부 매커니즘

### 구성
    1. 렉시컬 환경 - 식별자와 스코프 관리 
    2. 실행 컨텍스트 스택 - 코드 실행 순서

### 작동 원리
#### 1. 소스코드의 평가 (컴파일):
    실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수를 키로 실행 컨텍스트가 관리하는 스코프에 등록
#### 2. 소스코드의 실행 (런타임):
    평가 과정이 끝나면, 소스코드가 순차적으로 실행되면서, 소스 실행에 필요한 정보, 즉 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 추적/검색해서 취득, 그리고 이에 따른 결과를 다시 실행 컨텍스트가 관리