[FE] 프론트엔드 기술 기본 1

브라우저 렌더링 원리

렌더링이란? : HTML, CSS, JavaScript 등 개발자가 작성한 문서를 브라우저에서 출력하는 과정
과정
1. HTML, CSS를 다운로드
2. 다운받은 HTML, CSS를 각각 DOM과 CSSOM (OM = Object Model)로 만듬.
3. 만들어진 DOM, CSSOM을 사용하여 Render Tree를 생성
Render Tree의 목적 : 표시해야 할 순서와 문서의 시각적인 구성 요소로써 올바른 순서로 내용을 그려낼 수 있도록 하기 위한 목적 (Render Tree에는 실제 화면에 표현되는 요소들로만 구성 됨.
4. Render Tree 배치
5. 이 Render Tree를 그리는 과정을 통해 브라우저가 서버에 요청한 내용들을 픽셀화 시키는 것을 브라우저 렌더링이라고 한다.

 

호이스팅?

호이스팅은 변수를 선언하고 초기화 했을 때 선언부분이 최상단으로 끌어올려 지는 현상을 말한다.
(let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.)
(var 변수 선언과 함수선언문에서만 호이스팅이 일어난다. var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.)

 

클로저란?

자바스크립트는 함수 안에서도 함수를 선언할 수 있다. 먼저 선언된 함수를 외부함수라 정의하고, 이후에 정의된 함수를 내부함수라고 정의한다면, 기본적으로 내부함수는 외부함수의 요소에 접근이 가능하다. 이 외부함수의 수명이 다해서 외부함수가 종료(리턴)된 후에도 외부함수의 변수에 내부함수가 접근 할 수 있는 자바스크립트의 매커니즘을 클로져라고 한다.