✅ 강의 내용 정리
자바스크립트에서 모든 객체의 조상(프로토타입 체인의 최상위)이 Object 객체라면 웹에서는 Window다. Window 객체는 브라우저의 전역 객체로서 모든 객체의 최상위에 위치하며, BOM과 DOM을 포함한다.
자바스크립트는 웹 브라우저에서 동작하는 프로그래밍 언어로서, 웹과는 상호 협력적인 관계를 가진다. 따라서 웹 API나 BOM의 속성을 이용할 수 있다.
📍 BOM (Browser Object Model)
웹 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체 모델이다.
하위 속성
- location (현재 URL 관련 정보와 새로고침 등의 메서드 제공)
- navigator (브라우저와 운영체제 정보)
- screen (사용자의 화면 정보)
- history (브라우저 방문 기록 관련 정보와 제어)
- document (= DOM, 웹 페이지의 모든 컨텐츠를 나타내는 객체)
📍 DOM (Document Object Model)
웹 브라우저가 html을 해석하고 객체로 변환한다. 이것을 문서 객체(Document Object)라고 하는 것이다.
DOM은 문서(XTML, HTML, XML)에 대한 모든 내용을 담고있는 객체로, 텍스트 파일로 이루어진 문서를 브라우저가 이해할 수 있는 구조로 구성한다. 또한 HTML 노드 간의 상하 관계를 반영하여 모든 노드를 트리 구조로 구성한 것이다.
DOM 트리 구조 시각 자료로 이해하기
위 이미지에서 각각의 동그라미는 노드를 가리키고, 파란색 노드는 문서 객체를 표현한다.
⇒ html, head, bodu, title … 등은 문서 객체인 노드이다.
여기에 접근할 수 있는 도구 ⇒ document 객체를 사용해서 돔 트리에 접근할 수 있다.
✅ 관심사 분리 아키텍처 패턴
html은 html의 역할, CSS는 CSS, JS는 JS의 역할을 각자 하도록 분리해주는 패턴
⇒ 그래서 html의 인라인 속성으로 css 스타일링이나, JS 이벤트 속성 인라인 지정을 피하도록 권장한다.
<button style="backgroundColor=yellow" onClick=click()></button>
<!-- 권장하지 않는 방법 -->하지만 리액트는 권장합니다 ^_^
괴발개발 💻