🙄오늘 배운 내용
HTML과 DOM, 문서와 객체
HTML(Hyper Text Markup Language)는 (1)웹 브라우저에게 사용자의 컨텐츠를 어떻게 표현해야 하는지 명령하는 언어이자, (2)웹 문서 내의 데이터들을 구조적으로 표시하여 정보를 전달하는 언어이다. 다시 말해, HTML로 작성된 HTML문서는 .html확장자를 지니며, 이 문서는 아직 브라우저가 읽어들여 해석하기 전의 형태의 문서이다.
한편 DOM(Document Object Model)은, 생김새는 HTML과 비슷하지만, 이미 크롬이나 사파리같은 웹 브라우저가 HTML문서를 나름대로 해석(파싱)하여 각각의 태그들을 노드객체로 삼아 트리형태로 재구성한 객체모델이다.
쉽게 말하면, 스트링으로 작성된 HTML문서를 브라우저가 한 철자씩 읽어가면서 해석하여 그 구조를 재구성한 모델이 바로 DOM이라는 것이다. 우리가 자바스크립트로 태그를 찾아 조작할 수 있는 이유도, HTML 문서가 브라우저를 통해 컴퓨터가 이해할 수 있는 방식으로 재구성되었기 때문이다.
즉 DOM이란 웹 페이지 문서에 대한 접근과 조작을 위한 인터페이스(interface)이다.
BOM?
BOM(Browser Object Model) 현재 브라우저에 렌더링 되어있는 웹 페이지 문서, 장소, 히스토리, 프레임들과 브라우저가 자바스크립트에 노출시킬 수 있는 다른 기능들과 같이 브라우저에 의해 제공될 수 있는 모든 것들을 일컽는 총체적인 표현이다. BOM은 표준화 되어있지 않으며, 브라우저마다 BOM이 다를 수 있다. DOM(Document Object Model)은 BOM에 속하며, HTML문서 한정으로 표준화가 되어 있다.
😋느낀점!
HTML과 DOM에 대해 아리까리 했었는데, 많은 자료들을 찾아보면서 이제 좀 명확해졌다. 역시 힘들게 발품팔아 얻은 지식이 확실하다니깐!
HTML 파싱 과정에 대한 문서를 읽다가, 토큰화라는 개념이 궁금해졌는데, 잘 이해가 가지 않는다. 나중에 다시 각잡고 찾아봐서 아티클로 작성해 보아야겠다.
나는 파도타기식 공부를 해서 정신차리고 보면 원래 공부해야 하는 주제와는 멀리 떨어져 있는 곳에서 헤메고 있는 나를 발견할 때가 많다. 조금은 온라인 수업 강의 내용을 이정표삼아서 적당히 되돌아 올 줄도 알아야할 것 같다.
😆참조
- API란?
https://www.redhat.com/ko/topics/api/what-are-application-programming-interfaces - HTML에 대해 더 알고 싶다면?
https://webclub.tistory.com/608 - HTML Parsing에 대해 더 알고 싶다면?
https://html.spec.whatwg.org/multipage/parsing.html - HTML명세서
https://html.spec.whatwg.org/multipage/parsing.html - DOM명세
https://dom.spec.whatwg.org/ - Tokenization(토큰화)에 대해 더 알고 싶다면?
https://www.tokenex.com/resource-center/what-is-tokenization - 웹킷이 뭐냥...?
https://ko.wikipedia.org/wiki/%EC%9B%B9%ED%82%B7 - Critical Rendering Path
https://bitsofco.de/understanding-the-critical-rendering-path/ - 자바스크립트렌더링엔진
https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda - Javascript -> Desktop Application
https://www.electronjs.org/
😁그 외에 읽을거리
