될때까지

개념정리 :: DOM과 렌더링이란? 본문

학습/개념정리

개념정리 :: DOM과 렌더링이란?

랖니 2022. 5. 25. 18:39
728x90
이 블로그에 정리되어있는 모든 개념들은 공부하면서 정리한 내용입니다.
잘못 기술한 부분이 있을 수 있으니 발견하시면 언제든지 지적해주세요😄

 

자바스크립트 관련 영상을 보는데 자꾸만 등장하는 돔돔돔 DOM.. 도대체 DOM이 뭐야 하고 찾아봤지만 쉽게 이해가 되지 않았고, 반복을 거듭하여 조금이나마 머리에 스케치가 되어가고 있는 개념을 잊지 않기 위해서 포스팅으로 남겨본다!! 

 

자바스크립트 언어의 탄생 배경

  자바스크립트는 정적인 웹 페이지를 동적으로 만들기 위해 개발된 언어다. HTML문서를 조작하기 위해 만들어졌다지만, 어떻게 확장자가 다른 .html이나 .css와 같은 파일을 자바스크립트가 읽고 수정할 수 있는 것일까? 이를 이해하려면 렌더링, DOM에 대한 개념이 필요했고 여러가지 자료들을 참고하여 해당 포스팅을 작성했다. 너무어렵다..😭

 

렌더링의 동작 과정 그리고 DOM

  일단 사용자가 브라우저를 통해 웹 사이트에 접속하면, 주소창에 구글닷컴 땅! 하고 치면 어떤 일이 일어나는지 알아야 할 필요가 있다. 어려운 개발자의 세계..!!

  사파리(Webkit), 크롬(Blink), 파이어폭스(Gecko) 등 각각의 브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진이 존재한다. 웹브라우저는 HTML 문서를 해석하고 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면을 통해 보여주는 과정을 렌더링이라고 한다. 즉 HTML, CSS를 파싱(읽고 번역이라고 이해하자)해서 화면에 표시하는 역할을 담당한다!

<!--HTML파일 예시-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <h2>공부할 게 많구만유</h2>
        <a href="www.google.com">구글</a>
    </div>
    <script src="main.js" defer></script>
</body>
</html>

   예를 들어서, 렌더링 엔진은 위와 같은 HTML파일을 열고 한 줄씩 읽어내려가다가 해석이 다 끝나면 오케이 무슨 뜻인지 이해했다! 하고 이해한 내용을 바탕으로 DOM트리를 생성한다. 여기서 DOM(Document Object Model)이란, HTML파일를 해석하여 파일에 쓰여있는 요소들간의 부모, 자식 관계도 그대~로 다 살려서 계층 구조로 표현한 형식을 말하며 이 형태가 오호라 마치 나무같구나~ 여겨져 DOM 트리라고 부른다. DOM은 자바스크립트를 사용해서 웹 화면의 콘텐츠들을 추가,수정,삭제하거나 이벤트를 처리할 수 있도록 프로그래밍 인터페이스를 제공한다는 것 까지 추가로 알아두자! 그렇기 때문에 자바스크립트로 웹 페이지를 제어, 조작할 수 있다. DOM트리의 각 요소(element)들은 노드(Node)라고 부른다. 

출처 : https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8

최상위 루트 노드는 document이고 html, head, body,title과 같은 태그 요소들은 엘리먼트 노드, href, type과 같은 요소들은 어트리뷰트 노드(속성 노드) my title과 같은 텍스트는 텍스트 노드라고 한다.

출처 : https://d2.naver.com/helloworld/59361 , webkit 동작 과정

HTML을 읽고 파싱하여 DOM트리를 생성하듯이, CSS파일도 자바스크립트로 조작할 수 있도록 CSSOM을 생성한다.

그리고 이 둘을 합쳐서 렌더링 트리를 형성한다. 렌더링 트리는 meta태그나 display:none같은 속성은 포함되지 않는다. 화면에 최종적으로 표시되어야 하는 모든 노드들만 골라내고, 그 노드들만 합쳐서 렌더링 트리를 생성한다. 그러고 나면 배치 단계가 일어난다.

배치 단계에서는 각 노드들의 위치나 크기를 계산하여 레이아웃을 결정하고, 배치 단계가 끝나면 렌더링 트리의 각 노드를 화면에 실제 픽셀로 그려져 사용자가 볼 수 있게 화면이 나타나게 되는 원리. 여기까지가 바로 렌더링의 동작 과정이다!

728x90

 

💚 결론 💚

즉, 렌더링은 HTML, CSS, 자바스크립트와 같은 문서가 브라우저에서 보여지는 과정을 말한다.

이 렌더링 과정을 위해서는 렌더링 트리가 필요하고 렌더링 트리는 DOM트리와 CSSOM트리가 결합된 것이다.

DOM은 자바 스크립트언어가 접근하여 제어할 수 있도록 문서의 각 부분들을 객체로 표현한 형태다. 이런 모든 객체는 자바스크립트를 통해 접근할 수 있고, 조작할 수 있다.(document.querySelector())

 

 

참고자료 :  유노코딩 짐코딩  simpleJS  우아한테크  naverd2  큰돌의터전  개발자의품격  mdn  모던자바스크립트  ga_Y0u&G

728x90
저작자표시 비영리 변경금지

'학습 > 개념정리' 카테고리의 다른 글

개념정리 :: 동기 vs 비동기? 블럭 vs 넌블럭?  (0) 2022.05.28
개념정리 :: URI, URL, URN?  (0) 2022.05.25
개념정리 :: 크로스 브라우징, Reset.css vs Normalize.css  (0) 2022.05.23
개념정리 :: 절대경로 vs 상대경로?  (0) 2022.05.22
개념정리 :: 파이썬의 동작원리?  (0) 2022.05.19
'학습/개념정리' Related Articles more