자바스크립트 인터프리터가 함수의 선언, 할당, 실행을 나눠해서 모든 선언이 코드의 선두로 끌어올려진 것처럼 동작하는 현상의 개념

즉, 자바스크립트 엔진이 실행컨텍스트가 활성화 될 때 변수정보를 수집하는데 

이때 실제 끌어올려지지는 않았지만 수집과정에서 엔진이 수집된 정보를 토대로 변수들을 알고 있기 때문에 끌어올려진 것으로 간주하는 개념 

 

설명보기

Q. var, let 둘 다 호이스팅이 된다? 

- 정답은 둘 다 호이스팅되나 동작때문에 var만 실행 시 에러가 나지 않는다. 이때문에 var만 호이스팅된다고 착각할 수 있다.

 

설명

var는 선언과 할당을 동시에 실행하므로 호이스팅되었을때, undefined가 메모리에 저장된다.

let은 선언과 할당을 별도로 실행한다.

따라서 호이스팅되었을때, 선언은 되었지만 할당은 되지 않아서 메모리에 저장되지 않으며 TDZ(Temporary Dead Zome)에 들어간다. 따라서 호출 시 초기화 전에는 엑세스할 수 없다는 에러가 뜨는데, 이것때문에 호이스팅 되지 않았다고 착각할 수 있다.

 

 

 

 

 

저작자표시 비영리 변경금지

'~2022 > FE-개발 개념' 카테고리의 다른 글

03. 실행 컨텍스트(Execution Context)에 대해 설명해주세요.  (0) 2022.09.11
02. 홈페이지가 사용자에게 웹 사이트를 보여주는 과정을 간략히 설명해주세요. (브라우저 렌더링 포함)  (0) 2022.09.07
01. 브라우저 구조에 대해 간략히 설명해주세요.  (0) 2022.09.07
URI? URL? 같은거 아니었어? 엥 URN은 또 뭐야?  (0) 2021.08.30
사용자 인증? 토큰? JWT(Json Web Token)란 뭘까?  (0) 2021.08.25
[크롬 확장 프로그램 제작] 셋팅 방법  (0) 2021.06.17
즉시 실행 함수(IIFE, Immediately-invoked function expression)  (0) 2021.05.03
Redux-Saga란?  (0) 2021.05.03

실행 컨텍스트는 실행한 코드에 제공 할 환경 정보들을 모아놓는 객체라고 생각하자.

콜 스택에 쌓아서 전체 코드를 관리하고 있어서 환경과 순서를 보장한다.

동작

실행 컨텍스트는 크게 3가지 동작을 한다.

  1. 내부 환경 정보 기록: 실행컨텍스트가 활성화 되는 시점(실행)에 선언된 변수를 수집한다. 
  2. 외부 환경 정보를 구성한다.  
  3. this 값을 설정하는 동작 구성

 

수집 정보

- 자바스크립트 엔진이 활용할 목적으로 생성할 뿐, 개발자가 코드에 접근 할 수 없다.

Variable Environment

  • 선언 시점의 Lexical Environment의 스냅샷이므로 변경사항이 반영되지 않는다.
  • Variable Environment를 생성하여 정보를 담고 복사하여 Lexical Environment를 만든다.

Lexical Environment

처음엔 Variable Environment와 같으나 변경사항이 실시간으로 반영된다. (이후에는 Lexical을 사용하는 이유)

  1. Environment Record (환경 기록)
    • 현재 컨텍스트내의 식별자(변수명, 함수명, 매개변수명....) 들에 대한 정보를 순서대로 저장한다.
    • 이때 정보의 수집을 마치게되면 실행컨텍스트가 관여할 코드들은 실행전이지만, 자바스크립트 엔진은 이미 해당 환경에 속해 있는 정보(변수명..)들을 알고 있기 때문에 '호이스팅'이 발생 할 수 있다.
  2. Outer-Environment Reference (외부 환경 참조)
    • 현재 호출된 함수가 선언된 당시 상위의 Lexical Environment를 참조한다.
    • 스코프 체인이 가능하게 하는 수집자료 (중첩된 자바스크립트 코드에서 스코프 탐색을 하기위해 사용)

This Binding

  • this 식별자가 바라봐야 할 대상 객체
  • 실행 컨텍스트 활성화 당시에 this로 지정된 객체가 저장된다. (this는 함수호출 방식 및 전역 여부에 따라 결정)



 

저작자표시 비영리 변경금지

'~2022 > FE-개발 개념' 카테고리의 다른 글

04. 호이스팅(Hoisting)에 대해 간단히 설명해주세요  (0) 2022.09.11
02. 홈페이지가 사용자에게 웹 사이트를 보여주는 과정을 간략히 설명해주세요. (브라우저 렌더링 포함)  (0) 2022.09.07
01. 브라우저 구조에 대해 간략히 설명해주세요.  (0) 2022.09.07
URI? URL? 같은거 아니었어? 엥 URN은 또 뭐야?  (0) 2021.08.30
사용자 인증? 토큰? JWT(Json Web Token)란 뭘까?  (0) 2021.08.25
[크롬 확장 프로그램 제작] 셋팅 방법  (0) 2021.06.17
즉시 실행 함수(IIFE, Immediately-invoked function expression)  (0) 2021.05.03
Redux-Saga란?  (0) 2021.05.03

사용자 동작을 나열하며 간략히 공부해보자.

 

>>> 사용자 동작 시작

1. https://okayoon.tistory.com/ 를 검색한다.

 

2. DNS(Domain Name System)에서 주소를 검색, 해당 ip 주소를 찾아서 사용자가 입력한 URL과 함께 전달한다.

- 이때 캐싱된 DNS 기록이 있는지 먼저 확인한다.

 

3. 전달받은 ip 주소를 이용하여 웹 브라우저는 웹 서버에게 해당 웹 사이트의 리소스를 요청하고 해상 웹 서버는 리소스를 전달한다.

 

>>>> 전달받은 리소스를 통해 브라우저 렌더링 과정 시작

Main flow 예시 (출처: http://taligarsiel.com/Projects/howbrowserswork1.htm)

4. DOM Tree 구축을 위해 HTML을 파싱한다.

- DOM Tree는 문서 객체 모델로 모든 요소, 속성, 텍스트 등 (문서노드, 요소노드, 속성노드, 텍스트노드)을 트리 구조로 표현한 것.

- 중간에 외부 스타일 로드를 만나게되면 DOM Tree 생성을 중단하고 CSS 파싱을 시작한다.

- Style Sheets를 통해 CSSOM Tree를 생성한다.

- CSSOM Tree는 스타일 노드들을 트리 구조로 표현한 것. 

 

5. Render Tree 생성 

- DOM Tree와 CSSOM Tree를 통해 Render Tree를 생성한다.

- Render Tree는 최종적으로 실제 브라우저에 표현되어야하는 노드들로만 구성하여 트리 구조로 표현한 것.

(ex: <head> 태그나 display: none;와 같이 브라우저에 그려지지 않는 것들은 포함되지 않는다.)

- 만약 과정 중에 JS 코드를 만나게 된다면 JS 파싱을 위해 렌더링이 잠시 중단되고, JS 파싱이 끝난 후 재개된다.)

 

6. Layout (레이아웃)

- Render Tree와 viewport를 통해 노드들의 화면상 위치와 크기를 계산한다. 

(ex: 1em -> 16px)

 

7. Paint (그리기)

- Layout 단계에서 계산한 레이아웃을 각 레이어에 px 단위로 그린다. (이 단계에서 Layer 생성)

- Layout에 포함안된 속성들도 그린다. (ex: 색상, 그림자효과 등)

- Update Layer Tree: 렌더링에 사용될 최종 레이어들을 계산하여 생성하며 생성조건은 root object, css filter, position, transform, overflow, canvas, video....

- 사용자 경험을 위해 렌더링 엔진은 모든 파싱을 기다리지 않고 동시에 일부를 그리기 시작한다.

 

8. Composite (합성)

- Update Layer Tree에서 생성한 레이어들을 합성하여 한장의 비트맵으로 만들어 실제 화면에 나타낸다.

- 별도의 합성 스레드를 두어 합성 과정만 별도로 분리해서 진행한다.

 

Q. 만약 Re-rendering이 될 경우에는?

Reflow (리플로우)

- Layout 단계의 변화가 있을때 발생한다.

- Layout 계산부터 다시한다 (Layout -> Paint -> Composite)

Repaint (리페인트)

- Paint 단계의 변화가 있을때 발생한다.

- 재 결합된 Render Tree를 기반으로 다시 그린다. 

- Repaint는 Reflow가 발생하지 않고도 발생할 수 있다. (Paint -> Composite)

 

Q. <scrpt> 태그를 만나서 HTML 파싱이 중단되는 문제를 해결할 수는 없나?

script 태그에 async와 defer 속성을 사용할 수 있다. (둘 다 사용 시 우선순위는 async)

- async: 비동기

- defer: html 파싱이 끝나고 진행하는 속성

 

 

더 깊은 내용에 대해 알고 싶거나, 참고한 글을 확인하고 싶다면!

https://d2.naver.com/helloworld/59361

http://taligarsiel.com/Projects/howbrowserswork1.htm

 

저작자표시 비영리 변경금지

'~2022 > FE-개발 개념' 카테고리의 다른 글

04. 호이스팅(Hoisting)에 대해 간단히 설명해주세요  (0) 2022.09.11
03. 실행 컨텍스트(Execution Context)에 대해 설명해주세요.  (0) 2022.09.11
01. 브라우저 구조에 대해 간략히 설명해주세요.  (0) 2022.09.07
URI? URL? 같은거 아니었어? 엥 URN은 또 뭐야?  (0) 2021.08.30
사용자 인증? 토큰? JWT(Json Web Token)란 뭘까?  (0) 2021.08.25
[크롬 확장 프로그램 제작] 셋팅 방법  (0) 2021.06.17
즉시 실행 함수(IIFE, Immediately-invoked function expression)  (0) 2021.05.03
Redux-Saga란?  (0) 2021.05.03

브라우저 구조에 대해 간략히 공부해보자.

 

이미지 출처:  http://taligarsiel.com/Projects/howbrowserswork1.htm

 

1. User Interface (사용자 인터페이스)

사용자가 접근할 수 있는 모든 영역을 말한다.

즉, 페이지를 보여주는 창(사이트)을 제외한 나머지 모든 부분을 말한다.

ex: 주소표시줄, 이전이나 다음 혹은 새로고침 버튼등. 

user interface 예시 (네모박스를 제외한 모든 영역)

 

 

2. Browser Engine (브라우저 엔진)

User Interface와 Rendering Engine 두 사이의 동작을 제어한다. (연결 부분이 된다.)

자료 저장소(Data Storage)를 참조하고 있어서 로컬에 데이터 저장 및 읽기 등의 작업을 할 수 있다.

 

 

3. Rendering Engine (렌더링 엔진)

웹 서버로 부터 받은 자원을 브라우저 상에 표시하기 위한 작업을 한다.

즉, *HTML과 CSS을 파싱하는 동작을 한다. (중요!)

 

- 크롬은 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다고 한다. (= 독립된 프로세스)

(크롬은 컴퓨터에서 사용하는 모든 탭, 플러그인 및 확장 프로그램에 대해 개별 프로세스를 생성하도록 설계되었다.)

별도의 프로세스

 

 

4. Networking (통신)

HTTP 요청과 같은 각종 네트워크 요청을 수행하는 부분이다.

 

 

5. Javascript Interpreter (or Javascript Engine ?) (자바스크립트 해석기) 

JS를 읽고 해석하고 실행하는 역할을 한다. (Chrome 같은 경우 V8엔진을 사용한다.)

 

 

6. UI Backend (or Display Backend) (UI 백엔드)

브라우저의 기본적인 위젯을 그리는 인터페이스이다.

ex: input, select, 

ui backend 예시

 

 

7. Data Persistance (자료 저장소)

브라우저 메모리(보조 기억 장치)를 사용하여 데이터를 저장하는 부분이다.

ex: LocalStorage, SessionStorage, Cookie...

 

 

 

더 깊은 내용에 대해 알고 싶거나, 참고한 글을 확인하고 싶다면!

https://d2.naver.com/helloworld/59361

http://taligarsiel.com/Projects/howbrowserswork1.htm

저작자표시 비영리 변경금지

'~2022 > FE-개발 개념' 카테고리의 다른 글

04. 호이스팅(Hoisting)에 대해 간단히 설명해주세요  (0) 2022.09.11
03. 실행 컨텍스트(Execution Context)에 대해 설명해주세요.  (0) 2022.09.11
02. 홈페이지가 사용자에게 웹 사이트를 보여주는 과정을 간략히 설명해주세요. (브라우저 렌더링 포함)  (0) 2022.09.07
URI? URL? 같은거 아니었어? 엥 URN은 또 뭐야?  (0) 2021.08.30
사용자 인증? 토큰? JWT(Json Web Token)란 뭘까?  (0) 2021.08.25
[크롬 확장 프로그램 제작] 셋팅 방법  (0) 2021.06.17
즉시 실행 함수(IIFE, Immediately-invoked function expression)  (0) 2021.05.03
Redux-Saga란?  (0) 2021.05.03

+ Recent posts

티스토리툴바