Today I Learned
오늘은 HTML과 CSS, 그리고 Javascript를 이용하여 간단하게 Document Object Model을 조작하는 법을 배웠다. 여러 이론적인 것들은 배워보지 못한 것이라, 오늘 정리하고 넘어가기로 했다.
HTML(Hypertext Markup Language)
HTML은 HyperText Markup Language의 약자로, 웹 문서를 표현하기 위한 마크업 언어다.
마크업으로 표현할 수 있는 것은 문서의 구조이지, 무엇인가를 계산하고 로직을 실행하라고 만든 것이 아니므로, HTML 역시 마찬가지이다. 따라서 HTML은 프로그래밍 언어가 아니다.
HTML5 이전과 현재
완전한 초창기의 HTML은 정말 문서의 구조만 표현이 가능했다. 그러나 시대가 발전하면서, 웹 페이지에 스타일을 추가하기 시작하였고, 현재 우리가 보는 동적인 웹 사이트가 되었다.
이전에는 html 문서에 스타일 관련 태그들을 이용하였다. 그러나 이것이 쌓이게 되면서 문서 구조가 점점 복잡해지고, 어떤 것이 문서 구조를 담당하고, 어떤 것이 문서의 스타일을 담당하게 되었는지 찾아보기 어려운 문제가 발생했다. 따라서 HTML은 문서의 구조만, CSS는 문서의 스타일을 담당하는 방향으로 나아가게 되었다. 이전에 사용했던 스타일 태그들 <s></s>, <b></b>등 들은 더 이상 사용하지 않거나 다른 방향으로 대체되었다.
HTML5 규격이 확장되면서, HTML은 더 많은 일들을 할 수 있게 되었다.
<video>: 소스를 이용하여 비디오를 재생할 수 있다.<audio>: 소스를 이용하여 오디오를 재생할 수 있다.<canvas>: 동적으로 그림을 그리거나 게임을(!!) 만들 수 있다.
굉장히 놀랍지 않은가?
또, 이전 html에 비해서 더 구조적인 설계가 가능하다. (semantic markup)
Semantic markup에 도움을 주는 태그들:
<section><nav><head><aside><footer>- ...
이러한 태그들은 div와 마찬가지로 영역에 어떤 영향을 주는 것들은 아니지만, 개발자가 더 구조적으로 웹 페이지를 설계할 수 있게끔 도와준다.
깰꼼쓰하다
CSS(Cascading Style Sheet)
위에서 점점 복잡해지는 html 문서를 단순화하기 위하여 문서 구조와 디자인을 분리해야할 필요성이 있다고 했는데, 그 방법으로 나온 것이 CSS이다.
/**
* selector: 클래스명, 아이디, 태그 등 내가 스타일을 정의할 곳
* property: 어떤 스타일을 정의할 것인지
* value: property를 얼마나 적용할 것인지
*/
.classname {
property: value;
}CSS는 셀렉터, 프로퍼티, 값으로 구성되어 있다. 그러나 항상 .css파일에서만 작성해야 하는 것은 아니다. 다음과 같은 방법들이 있다:
.css파일을 만든 후, html 파일에 import한다.- html의
<style></style>태그 내부에css스타일을 정의한다. - html 태그에 인라인 style 속성을 사용한다.
<div style="background-color:red; width:500px; height:500px"></div>
우선 순위도 있다. 우선순위는 3, 2, 1 순으로 우선 적용된다. 그리고 같은 우선 순위일 경우, 나중에 작성된 css가 적용된다.
html, css로 레이아웃잡기, 특정 상황에서 가운데 정렬 방법 등은 정말 기본중의 기본이면서 가장 중요하다고 하니, 꼭 사례와 함께 외워두도록 하자!
css selector
css는 셀렉터로 dom과 관련된 모든 것을 사용할 수 있다. tag 이름을 사용할 수도 있고, 클래스 이름을 사용할 수도, id를 사용할 수도 있다.
사용 방법
/* tag를 셀렉터로 사용하기 */
p {
font-size: 20px;
}
/* class명을 셀렉터로 사용하기 */
.classname {
property: value;
}
/* id명을 셀렉터로 사용하기 */
#id {
property: value;
}우선 순위는 #id > .class > tag 순이다. 동일 우선 순위 내에서는 (두 속성의 값이 충돌날 경우)나중에 작성한 css가 적용된다. html에서 id는 한 번만 선언할 수 있지만, 클래스는 다른 태그에 여러번 선언에도 문제 없으므로 클래스명을 사용하여 묶어서 스타일을 정의하는 경우가 많다.
DOM(Document Object Model)
현실 세계에 존재하는 것을 특정 관점으로 바라보아 객체로 만드는 것을 추상화, 또는 모델링이라고 한다. 이러한 과정을 거쳐 만든 것이 모델이다.
마찬가지로, 추상적인 개념의 html 문서들을 태그로 모델링되어 객체 형태로 만들어진 것이 Document Object Model이다.
DOM의 구조
DOM은 트리 구조로 되어있어 DOM Tree를 형성한다. 따라서 노드를 탐색 시, 트리 전위 순회 알고리즘을 이용하여 객체를 탐색한다고 한다. 다음 네 가지의 노드로 구성된다.
document: 가장 상위 노드, 부모 노드가 없으며 root노드이다.element: 요소 노드. html tag를 나타낸다.attribute: 요소 노드에 붙어있는 노드로, 자식 노드가 아니다.text: 요소의 text를 표현하며, 자식을 가질 수 없으므로 항상leaf node이다.
DOM Tree가 렌더링 되는 과정
- 브라우저가 html을 읽고 파싱한 뒤에,
DOM Tree를 구성한다. - 브라우저가 Stylesheets를 읽고 파싱한 뒤,
CSSOM Tree를 구성한다. 1번, 2번 단계를 합쳐Attachment단계라고 한다. DOM Tree와CSSOM Tree를 결합하여Render Tree를 구성한다.
렌더링 트리를 만드는 과정
DOM 조작하기
DOM의 조작은 자바스크립트로 한다. 사실상 자바스크립트를 배우는 가장 큰 이유. 현재는 자바스크립트를 이용하여 서버도 만들 수 있게 되었지만, 자바스크립트의 탄생은 DOM을 조작하기 위함이었다.
그러나 처음에는 조작할 수 있는 DOM의 종류가 매우 적어서, form의 유효성 검사 등 단순한 로직에서나 사용할 수 있었다.
위에서 DOM 트리가 형성되는 과정을 설명했었는데, 총 세 단계의 과정을 거쳐야 렌더링되어 우리가 볼 수 있는 홈페이지가 된다고 했다. DOM이 한번 변경되면, 저 세 단계의 과정이 다시 일어난다. 예를 들어서 DOM 하나가 만 번 변경된다고 하면, DOM 하나를 바꾸기 위하여 만 번의 렌더링 과정이 일어나는 것이다. 렌더링 과정은 브라우저가 최적화하여 충분히 빠를 수 있지만, 아직도 꽤나 비용이 드는 과정이다. 요즘은 여러 이유로 Virtual DOM을 도입하는 프레임워크(또는 라이브러리)가 많아졌다.
Virtual DOM
Virtual DOM은 DOM을 자바스크립트 객체 형태로 표현한 것이다. 기존에는 DOM 내부가 하나라도 변경점이 있다면 바로 렌더링을 해주었지만, 가상 DOM은 이를 모아서 한번에 렌더링하도록 해준다.
Virtual DOM은 항상 DOM을 조작하는 것 보다 좋은가?
답은 'NO'이다.
- 렌더링을 모아서 해주지만, 페이지가 그려진 DOM이 많을수록 느려지는 것은 동일하다. 진짜 DOM을 렌더링하기 위하여 가상 DOM을 탐색해야하므로, 브라우저 렌더링 횟수는 줄어들지만, 가상 DOM의 탐색 횟수는 증가한다.
- DOM을 메모리에 올려둬야 하므로 메모리를 더 잡아먹는다.
그럼 Virtual DOM을 왜 써요?
유지보수를 쉽게 해준다. 더불어 일반적인 상황에서 충분히 빠르기 때문이다.
마치며
오늘은 브라우저의 렌더링 과정과, html, css가 어떤식으로 구성되어있고, DOM의 정의와 Virtual DOM의 차이점에 대하여 공부했다. 프론트엔드에서 자바스크립트의 역할이 DOM을 다루는 것이 핵심인 만큼, DOM의 동작 방식과 렌더링 과정을 이해하고 넘어가는 것은 필수적인 부분인 것 같다. 또, 자바스크립트로 DOM을 조작하는데 익숙해지기 위하여 내 손으로 직접 쳐보는 연습을 꾸준히 진행해야겠다.
