DOM, 그리고 브라우저란?

개발공부를 시작하면 DOM이란 단어를 쉽게 볼 수 있다.

그렇다면 DOM이란 무엇이고 무슨 뜻일까? DOM과 브라우저를 비롯해 웹 사이트의 간단한 개념에 대해 알아볼 것이다.

 

웹사이트

---

웹 사이트란?

• 일반 URL을 통해 보이는 웹 페이지를 의미한다.
• HTML, CSS JavaScript로 이뤄져있다.

 

HTML, CSS JavaScript의 차이

https://velog.io/@hound_woo/HTML-CSS-기초-JavaScript-Calculator

 

HTML : HyperText Markup Language

• 브러우저에게 웹 사이트의 요소들이 어떻게 구성되어 있는지 알려주는 역할, 사람으로 치자면 뼈대에 해당한다.

CSS : Cascading Style Sheets

• 웹 사이트의 요소들을 꾸며주는 역할로, 사람의 외관이라 생각하면 된다.

JavaScript

• 브라우저에 다양한 일을 수행하고, 웹 사이트의 요소를 생성 및 변명할 수 있다. 사람의 근육처럼 웹사이트가 움직이는 역할을 한다.

 

 

브라우저란?

---

• 사용자가 선택한 자원(HTML 등)을 서버에 요청하고, 모니터에 표시하는 응용 소프트웨어
• 대표적인 예로는 크롬, 사파리, 파이어 폭스 등이 있다.

 

 

DOM이란 무엇일까?

---

• Document Object Model : 문서 객체 모델
• HTML에서 작성한 요소들을 JavaScript가 접근할 수 있도록 객체로 변환시킨 것이다.
• JavaScript는 DOM을 통해 HTML 요소를 변경하고 삭제할 수 있다.

 

브라우저의 렌더링 순서

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

 

1. HTML을 전달 받은 뒤, HTML 파서를 통해 DOM트리를 형성한다.
2. Style sheets를 파싱 받아 CSS 파서를 통해 스타일 규칙을 형성한다.
3. 생성된 DOM 트리와 스타일 규칙을 합쳐(Attchment) Render 트리(실제 화면에 그려질 트리를 말함)를 형성한다.
4. 레이아웃을 형성한다. Render 트리 어느 위치, 어떤 크기로 배치할 것인지 계산하는 작업이다.
5. 마지막으로 레이아웃으로 나온 결과를 픽셀 단위로 표시한다.

 

만약 웹 사이트가 수정될 경우, 이 많은 과정들을 다시 반복해야한다는 단점이 있어 비효율적이다.

 

그런데 여기서 낯선 단어가 있다.

파싱과 파서… 이것들은 정확히 어떤 것일까?

 

 

문서 파싱

---

• 브라우저가 코드를 이해하고, 사용할 수 있는 구조로 변환하는 것이다.
• 이 결과는 보통 문서 구조를 나타내는 노드 트리로, 파싱 트리 혹은 문법 트리라 불린다.
• 파싱은 문맥 자유 문법을 따른다. 문서를 사용할 수 있는 구조로 변환하는 파싱을 할 때, 모든 형식은 정해진 용어와 구문 규칙을 따라야한다는 내용이다.

 

파싱의 과정

1. 문서를 받아와 어휘를 분석한다.
2. 구분을 분석한다.
3. 규칙에 맞다면 파싱 트리에 추가한다.

 

• 어휘 분석: 자료를 모두 분해해 유효한 것만을 모아놓은 용어집으로, 사전이라 생각하면 쉽다. 공백이나 줄바꿈같은 의미없는 문자들은 제거한다.
• 구문 분석은: 파싱할 때 모든 형식은 정해진 용어와 구문 규칙을 따라야한다고 위에서 말했다. 구문 분석은 이 규칙을 적용시키는 것이다.

 

파싱은 여기서 끝나지 않는다. 파싱은 보통 문서를 다른 양식으로 변환시킨다.

DOM에서 파싱트리는 DOM 요소와 및 속성 노드의 트리로 출력트리가 된다.

 

 

 

참고자료

위키백과 https://ko.wikipedia.org/wiki/웹사이트

브라우저는 어떻게 작동하는가? https://d2.naver.com/helloworld/59361

01 배워보자 웹사이트 https://www.hyobb.com/?utm_source=twitter