오늘 끝나면
브라우저가 하는 일
- ✓브라우저가 하는 일의 핵심 문제를 한 문장으로 설명한다
- ✓오른쪽 실습에서 브라우저가이 어떻게 움직이는지 관찰한다
- ✓다음 강의와 이어지는 한계를 말할 수 있다
실습 미션
HTML 한 덩이를 받아 화면으로 그려내기 (렌더링) 이 문장이 실제로 무슨 뜻인지 실습에서 한 번 손으로 확인한다.
성공 조건
- □실습의 기본값을 먼저 관찰
- □입력값이나 모드를 한 번 이상 바꿔 결과 비교
- □왜 결과가 바뀌었는지 한 문장으로 설명
개발 · Day 11 / 인터넷 · 웹
브라우저가
하는 일
주소를 치면 화면이 뜬다. 그 사이 브라우저가 일을 한다. HTML 글자를 받아 트리로 만들고, CSS로 꾸미고, 픽셀로 칠한다. 마지막에 JS까지 돌린다.
브라우저는 무엇인가
브라우저는 웹페이지를 그려주는 코딩이다. 크롬, 사파리, 엣지가 다 브라우저다.
서버가 보낸 건 글자 뭉치(HTML)다. 브라우저는 그 글자를 화면으로 바꾸는 번역기다.
이 번역은 매번 정해진 순서로 일어난다. 주소를 입력하면 HTML을 받아오고, 트리(DOM)로 파싱한 뒤 CSS를 적용하고 화면에 그린다. 다섯 단계다.
브라우저가 매번 밟는 다섯 단계, 글자에서 화면까지
주소 → HTML 글자를 받아옴
주소창에 google.com을 치면 브라우저가 그 서버에 편지를 보낸다.
내용은 "이 페이지 좀 줘"다. 이걸 요청(request)이라 부르고, 받는 쪽 컴퓨터가 서버다.
서버는 답장을 보낸다. 그게 응답(response)이고, 안에 든 게 HTML 글자 뭉치다. 아직 화면이 아니라 그냥 글자다.
편지는 한 번에 다 오지 않는다. HTML 안에 이미지나 CSS가 적혀 있으면 그만큼 또 주고받는다.
주소를 치면 편지를 보내고(요청), HTML 글자를 받는다(응답)
파싱 → DOM 트리를 만듦
받은 건 한 줄로 늘어선 글자다. 브라우저는 이걸 읽어 내려가며 구조를 잡는다. 이걸 파싱이라 한다.
HTML은 상자 안에 상자가 든 구조다. <div> 안에 <h1>이 들어가는 식이다. 브라우저는 이 포함 관계를 부모-자식 트리로 만든다.
이 트리가 DOM이다. Document Object Model의 줄임말로, 페이지를 나무처럼 표현한 것이다. 나중에 JS가 화면을 바꿀 때 이 트리를 건드린다.
코드 보기
이 HTML이 <div> <h1>안녕</h1> <p>반가워요</p> </div> 이런 트리가 된다 div ├ h1 "안녕" └ p "반가워요"
<div><h1>안녕</h1><p>반가워요</p></div>
CSS 적용 → 화면을 그림
DOM 트리는 뼈대일 뿐이다. 아직 색도 위치도 없다. 여기에 CSS를 입힌다.
CSS는 꾸미는 규칙이다. "제목은 크고 굵게", "배경은 파랑" 같은 것이다. 브라우저가 각 칸에 이 규칙을 하나하나 입힌다.
그다음 두 가지를 계산한다. 레이아웃은 칸의 위치와 크기를 정하고,페인트는 그 자리에 실제 픽셀을 칠한다.
칠하기가 끝나야 화면에 보인다. 글자 뭉치가 우리가 보는 페이지가 된다.
뼈대(DOM)에 규칙(CSS)을 입혀 픽셀로 칠한다. 그제서야 보인다
JS가 페이지를 살아 움직이게 함
여기까지면 페이지는 멈춰 있는 그림이다. 버튼을 눌러도 아무 일도 일어나지 않는다.
그걸 움직이게 하는 게 JavaScript(JS)다. HTML과 함께 브라우저가 JS도 받아와 실행한다.
JS는 아까 만든 DOM 트리를 직접 고친다. 버튼을 누르면 글자를 바꾸거나 숫자를 더하는 식이다. 트리가 바뀌면 그 부분만 다시 그린다.
그래서 같은 페이지가 살아 움직인다. 좋아요가 올라가고, 메뉴가 펼쳐진다.
Q. 그럼 브라우저는 매번 다섯 단계를 다 하나?
첫 화면은 다섯 단계를 전부 거친다. 이후 JS가 DOM을 바꾸면 바뀐 부분만 다시 레이아웃, 페인트한다. 전부 새로 하지 않는다. 그래서 빠르다. 새로고침하면 그제서야 처음부터 다 다시 한다.JS가 DOM을 고치면 그 부분만 다시 칠해진다. 페이지가 살아 움직인다