[2023-10-03] TIL - HTML ,CSS ,DOM ,Virtual DOM

📋용어, 질문 정리

마크업이란?

과거에 원고에 대한 수정 지침을 나타내는 용어 - 수정사항을 가리키는 자료

디지털 세계에서 와서는 디스플레이 혹은 출력물에 대해 표시하는 방법을 나타내는 방식

HTML은 프로그래밍 언어인가?

실제로 HTML은 로직이 실행되지 않기 때문에 프로그래밍 언어라 할 수 없다. 계산이 안되기 때문

CSS탄생

문서 양식에 대한 수정사항이 생겼을 때 비슷한 문서들을 한번에 수정하지 못하고 하나씩 일일이 수정해야했다.

그래서 HTML의 내용과 표현을 분리하여 CSS라는 별도의 양식을 만들어 HTML 문서에 대한 표현을 해당 파일에 위임했다.

이로서 모든 문서를 한번에 수정할 수 있게 되었다.

HTML5

- 2014년 10월 28일 표준안이 확정

- 영상과 음성을 처리하기 위한 멀티미디어 요소 추가, 구조적인 요소 추가, 의미를 담은 태그 추가... 등

HTML5가 나타나게 된 이유?

- 기존 HTML이 발전하는 웹을 따라잡지 못했기 때문

 

유의할 점

HTML 태그마다 기본 스타일이 있다.

- 기본적인 스타일이 있어서 이를 없애려면 Reset CSS를 이용한다.

 

브라우저마다 미묘하게 기본스타일이 다르다.

- 버튼이 브라우저마다 각각 기본스타일이 다르다.

- 이를 없애려면 Nomalize.css를 이용한다. - 브라우저간 차이점을 통일

 

 

---

📋용어, 질문 정리

DOM

현실에 존재하는 것을 특정 관점 바라보아 객체로 만드는 것을 추상화 혹은 모델링 이라고 한다.

추상적인 개념의 HTML 문서의 태그도 모델링되어 객체로 만든 것을 DOM 이라 한다.

 

DOM의 구성요소

문서노드 : 최상위 노드, Document

요소노드 : HTML 태그 그 자체, 속성노드 텍스트노드에 접근하기 위해서는 요소 노드를 찾아야함

속성노드 : 요소노드에 붙어있는 노드, 자식노드가 아님

텍스트노드 : 요소의 텍스트를 표현, 자식노드를 가질 수 없어 DOM트리의 단말 노드임

 

 

DOM트리는 PreOrder로 순회한다, 즉 전위순회다.

 

1. HTML을 읽고 파싱한 후 DOM Tree 구성

2. style sheet를 파싱하여 CSSOM을 만들어 DOM요소에 스타일을 입혀 만든다. 이 과정을 Attachment라고 한다.

3. 그 이후 DOM 과 CSSOM이 결합하여 렌더트리라는 것을 만든다. Layout 혹은 리플로우라는 과정을 통해 DOM 노드의 위치를 정해준다.

4. 렌더트리가 완성되면 실제화면에 그려준다.

 

 

DOM 선택

1.getElementById

2,getElementsByClassName

3.getElementsByTagName

4.querySelector : CSS Selector 문법이용

5.querySelectorAll : CSS Selector 문법이용

6.window.[id] : 여러개면 리스트로 반환

 

DOM 탐색

1.parentNode

2.firstElementNode

3.lastElementNode

4.children

5.nextElementSibling

6. previousElementSibling

 

DOM조작

7. className, classList

8. hasAttribute

9. getAttribute

10. setAttribute

11. removeAttribute

12. textContent

13. innerHTML : XSS 위험이 있음

14. createElement

15. appendChild

16. removeChild

 

XSS위험이란?

악의적인 사용자가 공격하려는 사이트에 스크립트를 넣는 기법을 말한다. 공격에 성공하면 사이트에 접속한 사용자는 삽입된 코드를 실행하게 되며, 보통 의도치 않은 행동을 수행시키거나 쿠키나 세션 토큰 등의 민감한 정보를 탈취한다

 

---

📋용어, 질문 정리

 

DOM 요소를 수정해서 진행되는 브라우저 렌더링은 많은 시간을 소요한다.

렌더링에서 시간을 단축시키려면 DOM 요소를 수정하는 코드를 최적화해야한다. - 대규모 어플리케이션일 수록 놓치게되는 것이 많아진다.

Virtual DOM

- 실제 DOM 트리를 자바스크립트 객체로 만든 것, 필요한 정보를 담아 만들어짐

- 이벤트나 DOM이 수정될 때 DOM이 직접 수정되지 않고, 가상 DOM을 바뀐 부분만 수정해서 렌더링하면 브라우저 렌더링 프로세스가 줄어들게 된다.

 

Virtual DOM은 빠른 것이 아닌 편의성과 유지보수가 용이한 것이다.

 

 

가상 DOM을 사용하지 않고, 빠른 성능을 위한 최적화를 위해 사용하는  document.createDocumentFragment가 하는 일은?

-> 위에서 말했듯이 DOM요소를 계속 수정하게되면 브라우저 렌더링을 계속하게 되고 이는 렌더링 성능 저하를 일으킨다.

그러므로 가상 DOM을 사용해서 일부만 렌더링하는 방법을 채택했지만 이는 빠른 속도의 렌더링으로는 이어지지 않는다.

그저 편의성과 유지보수의 장점이 드러나는 것이다.(최적화를 하는 코드로 작성하지않아도됨)

-> 그래서 만약 빠른 렌더링을 위해서라면 어떻게 해야할까?

-> DocumentFragment를 이용하면 된다.

 

예를 들어 복수의 노드를 수정할 때 DOM을 한번만 변경하도록 최적화를 했지만 그래도 문제점이 있다. 아래의 코드를 보자

...

<script>
	const $fruits = document.getElementById('fruits");
    
    //컨테이너 요소 노드 생성
    const $container = document.createElement("div");
    
    ['Apple', 'Banana', 'Orange'].forEach(text => {
    	// 요소노드 생성
        const $li = document.createElement('li');
        
        // 텍스트 노드 생성
        const textNode = document.createTextNode(text);
        
        // 텍스트 노드를 $li 요소 노드의 자식노드로 추가
        $li.appendChild(textNode);
        
        // $li 요소 노드를 컨테이너 요소 노드의 마지막 자식 노드로 추가
        $container.appendChild($li);
    });
    // 컨테이너 요소 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
    $fruits.appendChild($container);
</script>

-> - 위 같은 경우  DOM을 한 번만 변경하므로 성능에 유리하기는 하지만 다음과 같이 불필요한 컨테이너 div가 DOM에 추가되는 부작용이 있다. 이는 바람직하지 않다.

 

해결방법

- 이러한 문제는 DocumentFragment 노드를 통해 해결할 수 있다

- DocumentFragment 노드는 문서, 요소, 어트리뷰트, 텍스트 노드와 같은 노드 객체의 일종으로, 부모 노드가 없어서 기존 DOM과는 별도로 존재한다는 특징이 있다.

...

<script>
    const $fruits = document.getElementById('fruits");
    // DocumentFragment 노드 생성
    const $fragment = document.createDocumentFragment();

    ['Apple', 'Banana', 'Orange'].forEach(text => {
        // 요소노드 생성
        const $li = document.createElement('li');

        // 텍스트 노드 생성
        const textNode = document.createTextNode(text);

        // 텍스트 노드를 $li 요소 노드의 자식노드로 추가
        $li.appendChild(textNode);

        // $li 요소 노드를 DocumentFragment 노드의 마지막 자식 노드로 추가
        $fragment.appendChild($li);
    });
    // 컨테이너 요소 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
    $fruits.appendChild($fragment);
</script>

- 위 코드는 실제로 DOM 변경이 한 번 발생하고, 리플로우와 리페인트도 한번 발생한다. 따라서 여러 개의 요소 노드를 DOM에 추가하는 경우 DocumentFragment 노드를 사용하는 것이 더 효율적이다.

 

 

 

---

👁‍🗨중요한 점

 

1.  DOM의 구성요소 4가지

2. DOM을 조작할 때 querySelector을 대부분 이용

3. innerHTML은 XSS위험이 있음

4. Virtual DOM은 렌더링을 빠르게 하는 것이 아닌 렌더링 최적화를 위한 코드를 작성하지 않고 Virtual DOM을 이용해 일부분만 수정해서 렌더링하므로 편의성과 유지보수의 장점이 있는 것임

5. document.Fragment 노드를 사용하면 렌더링을 실제로 빠르게 할 수 있음