런타임, 브라우저, Web API, DOM에 대해 알아보자.
🌊 런타임과 브라우저
런타임이란? 코드가 돌아가는 것
코드를 짜다보면 자주 마주치게 되는 런타임 에러는, 말그대로 코드 컴파일 이후에 코드를 실행하는 과정에서 발생한 에러를 말한다.
런타임환경이란? 프로그램의 구동환경
런타임과 거진 동의어로 사용된다.
브라우저는 자바스크립트의 런타임 환경이다. 브라우저라는 구동환경 위에서 자바스크립트 코드가 돌아가는 것.
Windows 운영체제 위에서 Windows application이 돌아가듯, 브라우저 위에서 자바스크립트 코드가 돌아간다.
(참고로 브라우저가 자바스크립트의 유일한 런타임 환경은 아니다. Node.js도 자바스크립트 런타임 환경에 해당한다.)
🐋 Web API
"브라우저"라는 자바스크립트 런타임환경이 제공하는 API다.
다음과 같은 요소들을 포함하고 있다.
- DOM
- Ajax
- setTimeout, setInterval, setIntermmediate
Web API가 없다면 우리는 자바스크립트로 비동기 작업들을 수행할 수 없다.
이 내용은 나중에 좀 더 알아보기로 하고! 우리는 DOM에 대한 이야기로 넘어가자.
🐛 DOM
DOM은 Document Object Model의 약자다.
여기서 Document란 html 코드를 의미한다. 말그대로 DOM은 html문서를 object로 만드는 모델이라고 할 수 있다.
그렇다면 왜 html을 object로 만들까? 크게 두 가지 이유가 있다.
첫번째, 브라우저에게 html을 이해시키기 위해서.
컴퓨터가 우리가 짠 코드를 실행하기 위해서는, 컴파일러가 우리의 소스코드를 컴퓨터가 알아들을 수 있는 언어로 번역해주어야 한다. 마찬가지로, 브라우저가 우리가 짠 html을 이해하기 위해서는 html을 객체라는 형식으로 바꿔줘야 한다는 것이다. html을 객체로 바꿀 때 사용하는 일종의 도구 혹은 규격이 DOM이라고 할 수 있다.
두번째, html문서를 우리 마음대로 조작하기 위해서.
DOM = programming interface for web documents
즉 DOM은 web documents(html)을 우리 마음대로 조작하기 위한 일종의 도구이다.
DOM represents the page so that programs can change the document structure, style, content.
그러니까 DOM은 웹페이지를 나타낸다. 어떻게? 우리가 조작할 수 있는 형태로.
그럼 우리가 조작할 수 있는 형태라는 건 구체적으로 어떤 형태를 의미할까?
바로 객체라는 형태다.
객체는 프로퍼티를 가지고 있다.
html을 객체화하면, 프로퍼티를 가지게 되고, 이 프로퍼티를 조작함으로써 우리는 html을 조작할 수 있게 된다. programming language can interact with the page by DOM.
MDN에 이러한 표현도 있다.
DOM = object-oriented representation of the webpage
보다 정확히는 html을 DOM Tree라는 형태로 나타낸다.
🌳 DOM Tree
DOM 객체들이 트리구조를 이루고 있는 것을 말한다.
돔 트리는 다음과 같은 종류의 노드를 가진다.
- 문서 노드 = 최상위 노드. root node.
- 요소 노드 = DOM Element = Element Node = html 태그 하나에 대응된다.
- 어트리뷰트 노드 = html 태그의 속성 ex. input태그의 name, value, placeholder 등
- 텍스트 노드 = 엘리먼트 노드의 자식 노드. leaf node이다.
브라우저는 이렇게 돔 트리 형태로 표현된 html 문서를 화면에 그리는 것이다.
References
https://beomy.github.io/tech/javascript/javascript-runtime/
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
