로드맵 : 인터넷 - 브라우저

로드맵 따라잡기!
https://roadmap.sh/backend

브라우저란 무엇인가?

옛날옛날에 컴퓨터를 켜면 항상 제일 먼저 클릭하는 버튼이 있었다.

누르면 창이 열리고, 그 때 당시 시작 페이지로 설정되어 있었던 네이버가 켜졌지. 지금도 사람들은 브라우저를 사용한다. 인터넷 익스플로러의 시대는 가고 이제 크롬, 사파리, 웨일 등 다양한 브라우저가 사용되고 있다.
윈11부터 사라질 이 추억의 아이콘의 이름에 주목해야 한다.

Internet Explorer
즉, 인터넷을 탐색하는 것이다. 사용자가 www.google.com에 접속하겠다는 요청을 보내면, 서버로부터 해당 페이지의 리소스를 받아와 웹 페이지를 열어 주는 역할을 하고 있다.(이름 한번 잘 지은 것 같다)

브라우저는 사용자가 URI를 요청하면, 서버에 요청을 전달하고 응답을 받아 해석해 화면에 표시하는 GUI 기반의 소프트웨어다.

브라우저가 페이지를 열기 위해서는 HTTP를 사용한다. 쌍방향 통신이므로 페이지를 열고 서버에 정보를 보내기 위해서도 그렇다.

브라우저의 구성요소

출처: 
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
https://d2.naver.com/helloworld/59361

1. 사용자 인터페이스 : 서버에 요청한 페이지를 띄우는 화면을 제외하고 우리가 브라우저를 사용할 때 보는 모든 것은 UI다. 즐겨찾기, 뒤로가기, 새로고침, 주소창 등이 있다.

2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이에서 동작을 제어한다. 레이아웃 엔진이라고도 하는데 보통 렌더링 엔진과 분리해서 생각하지 않는다.

3. 렌더링 엔진 : UI에서 제외했던 화면 부분을 담당한다. HTML과 CSS, XML 등을 파싱해 렌더링 엔진이 표시한다. 요청한 콘텐츠를 표시해 준다.

4. 통신 : HTTP같은 네트워크 호출에 사용된다. 각 플랫폼의 하부에서 실행되는 독립적인 인터페이스다.

5. UI 백엔드 : 기초적인 HTML 등의 장치를 만든다. OS의 UI 체계를 따른다.

6. 자바스크립트 해석기 : JS를 해석 및 실행한다.

7. 자료 저장소 : 자료를 저장한다.

렌더링 엔진

결국 중요한 것은 요청한 웹 페이지를 표시해 주는 렌더링 엔진이라고 할 수 있겠다. 렌더링 엔진은 브라우저마다 다른데, 웹킷 혹은 게코 등을 사용한다.
렌더링 엔진은 서버로부터 응답받은 HTML을 파싱, 즉 HTML 문서를 이해할 수 있는 DOM 트리로 변환하는 것이다. 그렇게 HTML의 내부 구조를 파악한 후 CSS 문서를 마저 파싱한다. DOM 트리에 스타일 파싱한 것을 결합시켜 렌더 트리를 구축하고, 해당 트리의 노드를 화면에 배치한 후 UI 백엔드에서 배치한 노드를 그린다.

렌더 트리:

렌더 트리는 위치나 크기를 가지고 있지 않으므로 객체들에게 위치와 크기를 결정해 준다. 레이아웃이 구성된 후 UI 백엔드가 객체들을 화면에 픽셀로 나타낸다.