다시 시작하는 리액트 - 리액트 심화 1-2

 

2. 브라우저 살펴보기

 

2-1. 브라우저란? :

 

브라우저는 엄청 많은 기능을 가진 고도화된 어플리케이션입니다.
자바스크립트는 바로 이 브라우저에서 사용하기 위해 만들어졌어요. 😊

오늘은 브라우저를 이루고 있는 것들과 우리에게 제일 중요한 브라우저가
어떻게 뷰를 화면에 그리는 지를 알아봅시다.

 

냉장고, 자동차, 휴대폰, PC 브라우저 모두 javascript가 돌아가는 플랫폼임.

javascript는 이것들을 "호스트"라고 부름.

 

이러한 호스트들은 호스트 성격에 맞는 어떤 기능을 제공함.

ex) 브라우저에서 User Agent나 Location 등을 가지고 오는 것을 javascript는 호스트 환경이라 부름. 

 

 

- 브라우저 구성

 

 

• 사용자 인터페이스 : 주소 표시줄, 이전/다음 페이지 버튼, 북마크, 새로고침 버튼 등
• 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

 

ex)

사용자가 새로고침을 누르거나 뒤로 가기를 눌렀을 때 페이지가 새로 그려지는데,

인터페이스로부터 "뒤로 가라! 새로 고침하라!" 등의 명령들을 전해듣고 와서 그대로 전달을 해주는 것.

 

• 렌더링 엔진 : 화면을 창에 보여줌

 

1. 파싱 단계 : DOM 트리와 CSSOM 트리를 만듦.
2. 렌더 트리 단계 : DOM과 CSSOM을 묶어서 렌더 트리를 만듦.
3. 레이아웃 단계 : 렌더 트리에서 각 노드가 어디에 어떻게 그려져야 하는 지 모양을 계산함.
4. 페인트 단계 : 계산한대로 화면에 엘리먼트들을 배치함. (페인팅한다고 함!)

 

• 통신 : HTTP같은 프로토콜을 이용해서 서버에 요청을 보내는 등에 사용
• UI 백엔드 : 얼럿 창, 셀렉트 박스, 콤보 박스 등을 OS 별로 그림
• 자바스크립트 해석기 : 자바스크립트를 해석하고 실행 (ex : 구글의 V8 엔진)
• 자료 저장소 : Cookie, Local Storage, Session Storage 등 데이터 저장

 

 

- DOM :

 

DOM(Document Object Model) MDN 문서에서는 아래와 같이 설명합니다.

[문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며
프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여
그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

DOM 은 nodes와 objects로 문서를 표현한다.
이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.]

MDN에서 설명하는 내용이 이해하기 어렵다면 딱 이렇게만 기억하세요.
웹페이지는 document고, document는 객체예요.
DOM은 웹페이지의 모든 콘텐츠를 객체로 나타냅니다.
그리고 이 객체는 수정할 수 있어요.
document 객체를 사용해 웹 페이지 내의 무엇이든 변경할 수 있다는 이야기예요.

이게 전부예요!😊

 

 

- BOM : 

 

BOM(Browser Object Model)

navigator, location 같은 객체를 보신 적 있나요?
이런 객체들은 브라우저가 제공하는 추가 객체입니다.

네! 호스트 환경을 기억하고 있죠? 자바스크립트가 돌아가는 플랫폼이요.
BOM은 호스트인 브라우저가 제공하는 추가 객체를 말합니다.
navigator, location외에도 confirm, alert 등이 BOM의 일부예요.
confirm, alert 등은 사용자와 브라우저 사이의 원활한 소통을 도와주는 순수한 브라우저 메서드거든요.

 

 

- CSSOM :

 

CSSOM(CSS Object Model)

CSS는 HTML하고는 구조가 다르죠?
CSS만의 문법, 규칙이 있잖아요.
그 규칙과 스타일 시트를 객체로 나타냅니다.
DOM이 웹 페이지를 객체로 나타내는 것처럼요.