브라우저 구조

브라우저의 구성

Window는 화면 그 자체고,

Document는 우리가 HTML에서 작성한 요소들이 표기되어 지는 부분이다.

Navigator는 사용자 눈에는 안보이지만 브라우저 자체와 관련 된 정보가 담긴다

그래서 HTML, CSS, JS를 포함한 웹페이지를 브라우저에서 돌리게 되면!

이런 식으로 되어 있다.

Window라는 전체적인 오브젝트가 있다.

그 안에 DOM, BOM, JavaScript가 있는데...

DOM(Document Object Model)

이걸 이용해서 새로운 요소를 추가, 빼거나 움직이는 게 가능해진다.

BOM(Browser Object Model)

브라우저 관련 된.. Navigator, loaction, fetch, Storage 등.. 브라우저 관련 된 정보가 들어있다.

JavaScript

우리가 작성한 자바스크립트 코드가 들어있음

개발툴에서 console.log(window)를 출력하면 윈도우와 관련 된 다양한 함수와 오브젝트, API를 확인할 수가 있다.

window는 최고의 Object다! Global Object이다!

console.log(this); 출력했을 때도 window와 관련 된 내용이 출력된다.

윈도우 안에 alert라는 API가 있는데...

window.alert('hello')라고 쓰지 않아도, 그저 alert('hello')만 써도 작동이 된다.

글로벌 오브젝트이기 때문에 자동적으로 window를 써준다. window 생략이 가능하다.

console.log(window.navigator)

window안의 navigator라는 오브젝트 있는데 브라우저에 포함되어 있는 유용한 정보가 들어 있다. 블루투스, 클립보드, 인터넷 연결 상태, 키보드 연결 상태 등등

* 해당 글은 academy.dream-coding 강의를 듣고, 스스로 학습하고 정리하기 위해 쓰인 포스팅입니다

Uploaded by Notion2Tistory v1.1.0