영상보면서 함께 정리해봐요!! - 추가적으로 이 영상을 보면서 CRP도 함께 알아두면 좋을 것 같아서 가져와봤어요! - 다들 파이팅해요!! ### 1) BOM (2:30) - 모든 서비스는 웹 브라우저를 바탕으로 실행되기 때문에, 웹 서비스 개발은 브라우저와 밀접한 관련이 있다. - 이 브라우저와 관련된 객체 집합이 브라우저 객체 모델(BOM) - 이 BOM을 이용해 브라우저와 관련된 기능을 구성한다. - DOM은 BOM 중 하나 - BOM의 최상위 객체는 window객체 - window.location - window.navigator - window.screen - window.history - … - DOM은 window 객체의 하위 객체 - window.document 객체를 DOM이라고 분류한다. ### 2) DOM (2:40) - Document Object Model의 약자. 문서객체 모델 - 우리가 웹 사이트에 접속하면, 웹 브라우저는 HTML 문서를 읽어들이고 해석한다. 이 브라우저가 HTML코드를 해석하는 과정을 ‘파싱’이라 부른다. - 파싱 결과물을, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면에 보여주는 과정이 렌더링이며, 결과물로 DOM이 만들어진다. - 브라우저는 HTML 코드를 해석하여, HTML 요소들을 트리 형태로 구조화하여 표현하는 웹 문서를 생성한다. 이 트리 전체를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다. - 트리를 구성하는 요소 하나하나를 Node라고 한다. - 자바스크립트로 웹 페이지 요소를 제어할 수 있는 것은 이것들 하나하나가 모두 API이기 때문 - API(PRI아님. 잘못알면 난닝구할아버지 찾아옴) : API는 소프트웨어 개발에서 호환성을 위해 지켜야 하는 추상적인 원칙. - 애플리케이션을 서로 연결해서 서로 통신할 수 있도록 하는 인터페이스 원칙이라고 생각하자! - DOM은 XML이나 HTML문서에 접근하기 위한 일종의 인터페이스로, 문서 내의 모든 요소를 정의하고 각 요소에 접근하는 방법을 제공한다. ### 3) 웹 페이지가 만들어지는 방법 : CRP - CRP(Critical Rendering Path) : 웹 브라우저가 원본 HTML문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정 - DOM트리 구축 - CSSOM 트리구축 - JS 실행 - 렌더 트리 구축 - 레이아웃 생성 - 페인팅 - CRP 과정을 렌더트리 구축 기점으로 간소화하면 2단계로 나누어짐 - 1단계 : 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정한다. (렌더트리 생성됨) - 2단계 : 브라우저는 해당 렌더링을 수행한다. - 렌더 트리 : 웹 페이지에 표시될 HTML, 스타일 요소로 구성된다. 브라우저는 렌더트리를 생성하기 위해 두 모델을 필요로 한다. - **DOM(Document Object Model)** : HTML 요소들의 구조화된 표현 - **CSSOM(Cascading Style Sheets Object Model)** : 요소들과 연관된 스타일 정보의 구조화된 표현 ### 4) DOM의 목적 - DOM은 자바스크립트를 활용해 문서에 대한 스크립트를 작성하는 것에 목적이 있다. 즉, 문서 내의 각 요소들에 대해 자바스크립트를 활용해 여러 작업을 시도할 수 있다는 뜻이다. - 뷰 포트에 무엇을 렌더링할지 결정하기 위해 사용된다. - 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다. - 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다. - 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있다. - 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있다. - 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있다. - 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있다. - 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있다 - HTML코드는 정적인 텍스트이므로, 웹 화면이 사용자와 동적 상호작용을 하기 위해서는, DOM의 존재가 중요해진다.
![[구버전 - 고정댓글에 새 영상 확인] 웹개발 필수개념! DOM이 뭔가요? (+ Web API)](/img/logo.svg){kind=logo}
