Browser 구조 분석
이렇게 브라우저에서 웹페이지를 열게되면
Window라는 전체적인 오브젝트가 존재하고, window는 사용자들의 페이지뿐만 아니라,
브라우저에서 현재 열려있는 전체적인 창을 의미한다. 그리고 이 window안에 즉 페이지가 표기되는 부분이
바로 Document 오브젝트이다.
즉, Document는 우리가 HTML에서 작성한 그런 요소들이 표기되어지는
부분이라고 볼 수 있다. 그리고 사용자 눈에는 보이지 않지만 전체적으로 Window에 관련된 즉 브라우저 자체에 관련된 정보들이 담겨있는 Navigator라는 유용한 오브젝트도 있다. 그래서 우리가 HTML, CSS, 자바스크립트를 포함한 웹페이지를 브라우저에서 돌리게 되면 즉 우리가 페이지를 브라우저에서 열게 되면 Window라는 전체적인 오브젝트가 있고 그 window 안에는 DOM Document Object Model들이 들어있다.
이제 이 DOM을 이용해서 새로운 요소를 추가, 빼거나 움직이고 이런 것들이 가능하게 되고, 또 BOM이라는 애가 있는데 이 BOM은 Browser Object Model의 약자로 브라우저에 관련된 아이들 Navigator나 Location이나 Fetch나 Storage나 저번에 살펴본 Web APIs에 관련된 오브젝트들이 들어 있다.
MDN 사이트에서 Web APIs와 관련된 모든 오브젝트를 확인할 수 있는 방법에 대해서 참고하자
그래서 자바스크립트로 브라우저 위에서 동작하는 걸 만들 때는 DOM에 관련된 API도 쓸 수 있고,
또 BOM에 관련된 API도 쓸 수 있다. 브라우저 위에서 동작하는 것을 만들 때는 Window 오브젝트나 BOM, DOM 이런 아이들에 연관된 API도 쓸 수 있다.
참고: https://developer.mozilla.org/en-US/docs/Web/API/Document
https://developer.mozilla.org/en-US/docs/Web/API/Window
https://developer.mozilla.org/en-US/docs/Glossary/layout_viewport
https://developer.mozilla.org/en-US/docs/Web/API/Navigator
https://academy.dream-coding.com/courses/browser101
프론트엔드 필수 브라우저 101 (자바스크립트 마스터 | 디버깅, 성능 분석, 실전 프로젝트 10개)
실전 프로젝트를 통해 자바스크립트를 배워봅니다. DOM APIs부터 시작해서 실제로 브라우저가 우리의 웹페이지를 어떻게 표기 하는지 성능까지 고려해서 웹앱을 작성 하는법, 바닐라 자바스크립
academy.dream-coding.com
Navigator - Web APIs | MDN
The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.
developer.mozilla.org
Layout viewport - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
The layout viewport is the viewport into which the browser draws a web page. Essentially, it represents what is available to be seen, while the visual viewport represents what is currently visible on the user's display device.
developer.mozilla.org
Window - Web APIs | MDN
The Window interface represents a window containing a DOM document; the document property points to the DOM document loaded in that window.
developer.mozilla.org
Document - Web APIs | MDN
The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.
developer.mozilla.org
'JavaScript > DreamCoding' 카테고리의 다른 글
| 프로세스와 쓰레드 (0) | 2021.07.21 |
|---|---|
| 성능 보장 렌더링 순서 (0) | 2021.07.13 |
| CSSOM(CSS Object Model) (0) | 2021.07.12 |
| Wep APIS (0) | 2021.07.12 |
| EventTarget_Node (0) | 2021.07.12 |