[DAY-8] JS 주요 문법(8)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
드디어 알고리즘과 자료구조 강의가 끝났습니다 와!
정말 정말 유익한 내용이었지만, 이진 탐색과 DP, 그리디에 깔려 뭉개졌던 저는 슬펐던 기억이 있네요...

단순히 편하다는 이유 만으로 querySelector를 사용했었는데,
getElementby~~와 무엇이 다른지 정확하게 알게 되었습니다!

가상 DOM에 대한 개념이 모호했었는데, 이번에 확실하게 잡혀서 좋습니다.
나중에 대규모 프로젝트를 진행하게 되면 저도 사용해볼 기회가 오겠죠? 😮

[1] DOM

DOM이란 Document Object Model입니다.

현실에 있는 것을 특정 관점으로 바라보아 객체로 만드는 것을 추상화 혹은 모델링이라고 합니다.
이렇게 만들어진 것이 바로 모델입니다.

이처럼 HTML 문서가 모델링되어 객체(트리 구조)로 만들어진 것이 DOM입니다.

• DOM의 각 요소는 key-value 형태로 이루어져 있습니다. UI의 상태, 기능, 속성을 객체로 뽑아낸 것이라 볼 수 있습니다.
• DOM 트리는 전위순회로 조회됩니다.

[1-1] DOM의 등장

• JS가 탄생하면서 같이 등장했습니다.
  따라서 HTML 문서와 상호작용이 가능하게 되었습니다.
• 표준안은 1998년에 등장했고 대다수의 브라우저에 적용되기까지 시간이 오래 걸렸습니다.
• 점차 발전하여 HTML 문서를 직접 수정까지도 가능하게 되었습니다.

[1-2] DOM 렌더링

• 브라우저는 HTML을 읽고 파싱하여 DOM Tree를 구축합니다.
• Style Sheets를 읽고 파싱하여 Style Rules를 만들어 DOM Tree에 적용시킵니다. (Attachment)
• Layout 과정을 통해 DOM node의 위치를 정해주어 Render Tree를 구축합니다.
• 구축된 Render Tree를 실제 화면에 그려줍니다. (Painting)

😆 이전 정리글
>
브라우저의 작동 원리 : https://jungjjeong.github.io/cs/web/frontend/Browser/

[1-3] DOM 선택

(1) getElementById

• DOM Tree에서 요소 노드를 바로 id로 찾습니다.
• 제일 먼저 찾은 요소 하나를 반환합니다.

(2) getElementsByClassName

• DOM Tree에서 요소 노드를 일치하는 class로 찾습니다.
• 일치하는 요소들을 리스트로 반환합니다.

(3) getElementsByTagName

• DOM Tree에서 요소 노드를 태그 이름으로 찾습니다.
• 일치하는 요소들을 리스트로 반환합니다.

(4) querySelector

• DOM Tree에서 요소 노드를 CSS Selector 문법으로 찾습니다.
• 제일 먼저 찾은 요소 하나를 반환합니다.

(5) querySelectorAll

• DOM Tree에서 요소 노드를 CSS Selector 문법으로 찾습니다.
• 일치하는 요소들을 모두 반환합니다.

(6) window.[id]

• id가 있는 요소는 window 객체를 통해 찾을 수 있습니다.
• 여러 개라면 리스트로 반환됩니다.

[1-4] DOM 탐색

(1) parentNode

• 선택한 요소의 부모 노드를 불러옵니다.

(2) firstElementNode

• 선택한 요소 노드의 자식 요소 노드 중 첫 번째를 불러옵니다.
• 없을 경우 null을 반환합니다.
• 마지막 요소를 불러오는 lastElementNode도 있습니다.

(3) children

• 선택한 요소 노드의 자식 요소 노드를 불러옵니다.
• 없을 경우 빈 배열을 반환합니다.

(4) nextElementSibling

• 선택한 요소 노드의 다음 형제 요소 노드를 불러옵니다.
• 없을 경우 null을 반환합니다.

(5) previousElementSibling

• 선택한 요소 노드의 이전 형제 요소 노드를 불러옵니다.
• 없을 경우 null을 반환합니다.

[1-5] DOM 조작

(1) Class 접근

• 선택한 요소 노드에서 className과 classList로 요소의 class 속성을 불러오고 변경할 수 있습니다.

(2) hasAttribute

• 선택한 요소 노드에서 속성을 가지고 있는지 확인

(3) getAttribute

• 선택한 요소 노드에서 속성의 값을 반환합니다.
• 없으면 null을 반환합니다.

(4) setAttribute

• 선택한 요소 노드에서 속성을 정의합니다.

(5) removeAttribute

• 선택한 요소 노드의 속성을 제거합니다.

(6) textContent

• 선택한 요소 노드에서 텍스트 노드에 접근, 변경할 수 있습니다.

(7) innerHTML

• 선택한 요소 노드 내부 HTML을 수정합니다.
• XSS (Cross Site Scripting)의 위험이 있기 때문에 사용을 권장하지 않습니다.

(8) createElement

• 요소 노드를 생성할 수 있습니다.

(9) appendChild

• 생성한 요소 노드를 선택한 요소 노드의 마지막 자식 요소로 추가한다.

(10) removeChild

• 선택한 요소 노드 자식 노드 중 해당되는 요소를 제거합니다.

XSS (Cross Site Scripting)
>
관리자가 아닌 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 방식입니다.

[2] Virtual DOM

Virtual DOM은 무엇일까요?
VIrtual DOM은 실제 DOM Tree를 JS 객체로 만든 것으로 필요한 정보만 담아 만들어집니다.

DOM을 수정할 때, 직접 DOM 트리를 먼저 조작하지 않고
Virtual DOM의 바뀌는 부분만 수정한 뒤 렌더링 하면 브라우저 렌더링 프로세스가 줄어들게 됩니다.

ReactJS와 VueJS에서도 Virtual DOM을 사용합니다.

• 😮 그렇다면 Virtual DOM이 DOM보다 빠를까요?

아닙니다.

단지 유지보수가 용이한 애플리케이션을 만들도록 도와주고, 대부분의 유스케이스에 충분히 빠르기 때문에 Virtual DOM을 사용합니다.

오히려 Virtual DOM, DOM을 각각 탐색해야 하기 때문에 탐색 시간이 2배가 되며
각각 따로 구축되어 있기 때문에 차지하는 메모리 또한 2배가 됩니다.

하지만 대부분의 웹사이트에서는 성능 최적화보다 개발 편의성이 더 중요할 때가 많습니다.

따라서 Virtual DOM을 사용합니다.

[2-1] createDocumentFragment()

JS의 DOM 객체는 연산을 수행할 때 마다 DOM Tree에 접근해야 하기 때문에 성능 저하의 주된 요인입니다.
따라서 JS의 성능을 최적화하기 위해서는 DOM 객체 접근을 최소화 하도록 코드를 작성해야 합니다.

DocumentFragment 노드를 생성해서 사용하면 DOM Tree 외부에 경량회된 문서 DOM을 만들 수 있습니다.
이는 메모리상에서만 존재하는 빈 문서 템플릿이라고 생각하면 됩니다.

따라서 자식 노드를 메모리상에서 손쉽게 조작한 후 실제 DOM에 추가하는 것이 가능합니다.

결론적으로, 실제 라이브 DOM 객체에 접근하는 횟수를 최소화할 수 있습니다.
Virtual DOM 역할을 하는 DocumentFragment객체를 이용할 수 있습니다.

[+] 실습 코드 - 간단한 에디터

버튼 크기가 다르고,, width height가 고정값으로 지정되어 있는 걸 잘 못보겠는
나는 혹시 이세계의 프론트 개발자 지망생..? 🙄

---

출처

프로그래머스

https://spongeb0b.tistory.com/141

https://untitledtblog.tistory.com/44