Dom 다루기 Element 생성하기

Dom

Document Object Model
문서를 논리 트리로 표현한다
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction (MDN 참고)

웹 페이지는 어떻게 만들어 질까?

DOM(Document Object Model)은 웹 페이지에 대한 인터페이스
웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 "Critical Rendering Path"라고 한다
이 과정 여러 단계로 나누어져 있지만, 이 단계들을 대략 두 단계로 나눌 수 있다
첫 번째 단계에서 브라우저가 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정
두 번째 단계에서 브라우저가는 해당 렌더링을 수행
첫 번쨰 과정을 걸치면 "렌더 트리"가 생성된다
렌더 트리는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성된다
브라우저는 렌더 트리를 생성하기 위해 다음과 같이 두 모델이 필요하다
- DOM(Document Object Model) - HTML 요소들의 구조화된 표현
- CSSOM(Cascading Style Sheets Object Model) - 요소들과 연관된 스타일 정보의 구조화된 표현

Vanilla JS

순수 자바스크립트
특정 라이브러리나 프레임워크를 사용하지 않은 그 자체의 자바스크립트

CodeSandBox

프로트엔드 코드를 작성하고 이것저것 시도해볼 수 있는 모래상자(놀이도구)
React 등 다양한 환경에 대한 기본 설정이 되어있음
https://codesandbox.io/

CDN

Content Delivery Network
웹에서 사용되는 다양한 컨텐츠(리소스)를 저장하여 제공하는 시스템

Element 생성하기

vanilla JS

const rootElement = document.getElementById("root")
const element = document.createElement('h1')
element.textContent = "Hello, World!"
rootElement.appendChild(element)

React

const rootElement = document.getElementById("root")
const element = React.createElement('h1', { children: "Hello World!"})
ReactDOM.render(element, rootElement);

참조

패스트 캠퍼스 온라인 강좌(한 번에 끝내는 React의 모든 것 초격자 패키지 Online)
Dom은 정확히 무엇일까? https://wit.nts-corp.com/2019/02/14/5522
MDN
- Mozilla Develop Network
- 웹 표준과 모질라 프로젝트에 대한 개발 문서들이 담긴 모질라의 공식 웹 사이트

React​

Dom 다루기 Element 생성하기​

Dom

Vanilla JS

CodeSandBox

CDN

Element 생성하기

참조​

React

Dom 다루기 Element 생성하기

참조