[TIL]23-06-13

hyein·2023년 6월 14일
0

TIL

목록 보기
8/34

Browser 구조 분석

브라우저에서 웹페이지를 열게 되면 Window라는 전체적인 오브젝트가 존재한다.(브라우저에서 Window는 최고의 오브젝트이다.) Window는 우리들의 페이지 뿐만 아니라, 브라우저에서 현재 열려있는 전체적인 창을 의미한다. 그리고 이 Window안에 즉 페이지가 표기되는 부분이 바로 Document 오브젝트 이다. 즉 Document는 우리가 HTML에서 작성한 그런 요소들이 표기 되어지는 그런 부분이라고 볼 수 있다. 그리고 사용자 눈에는 보이지 않지만 전체적으로 Window에 관련된(Browser 자체에 관련된) 정보들이 담겨있는 Navigator라는 유용한 오브젝트도 있다.

우리들의 HTML, CSS, 자바스크립트를 포함한 웹페이지를 브라우저에서 돌리게 되면(즉, 우리의 페이지를 브라우저에서 열게 되면) Window라는 전체적인 오브젝트가 있고, Window 안에는 DOM, BOM, JavaScript가 포함되어져 있다. DOM(Document Object Model)을 이용해서는 새로운 요소를 추가, 빼거나 움직이고하는 이런것들이 가능하게 된다. 또 BOM이란 아이가 있는데 이 BOM은 Browser Object Model의 약자로 브라우저에 관련된 아이들, 즉 Navigator, Location, Fetch, Storage 같이 Web APIs에 관련된 오브젝트들이 들어 있다. 이렇듯 DOM, BOM, 그리고 우리가 작성한 자바스크립트까지 Window에 포함된다.

그렇기 때문에 우리가 자바스크립트로 브라우저 위에서 동작하는 걸 만들 때는 이런 DOM에 관련된 API도 쓸 수 있고, 또 BOM에 관련된 API도 쓸수 있는 것이다.

우리가 브라우저 위에서 동작하는 것을 만들 때는 Window 오브젝트나, BOM, DOM 이런 아이들에 연관한 API도 쓸 수 있다.

브라우저에서 웹페이지를 열게 되면 Window라는 전체적인 오브젝트가 존재한다.(브라우저에서 Window는 최고의 오브젝트이다.) Window는 우리들의 페이지 뿐만 아니라, 브라우저에서 현재 열려있는 전체적인 창을 의미한다. 그리고 이 Window안에 즉 페이지가 표기되는 부분이 바로 Document 오브젝트 이다. 즉 Document는 우리가 HTML에서 작성한 그런 요소들이 표기 되어지는 그런 부분이라고 볼 수 있다. 그리고 사용자 눈에는 보이지 않지만 전체적으로 Window에 관련된(Browser 자체에 관련된) 정보들이 담겨있는 Navigator라는 유용한 오브젝트도 있다.

우리들의 HTML, CSS, 자바스크립트를 포함한 웹페이지를 브라우저에서 돌리게 되면(즉, 우리의 페이지를 브라우저에서 열게 되면) Window라는 전체적인 오브젝트가 있고, Window 안에는 DOM, BOM, JavaScript가 포함되어져 있다. DOM(Document Object Model)을 이용해서는 새로운 요소를 추가, 빼거나 움직이고하는 이런것들이 가능하게 된다. 또 BOM이란 아이가 있는데 이 BOM은 Browser Object Model의 약자로 브라우저에 관련된 아이들, 즉 Navigator, Location, Fetch, Storage 같이 Web APIs에 관련된 오브젝트들이 들어 있다. 이렇듯 DOM, BOM, 그리고 우리가 작성한 자바스크립트까지 Window에 포함된다.

그렇기 때문에 우리가 자바스크립트로 브라우저 위에서 동작하는 걸 만들 때는 이런 DOM에 관련된 API도 쓸 수 있고, 또 BOM에 관련된 API도 쓸수 있는 것이다.

우리가 브라우저 위에서 동작하는 것을 만들 때는 Window 오브젝트나, BOM, DOM 이런 아이들에 연관한 API도 쓸 수 있다.

앞에서 살펴봤듯이 window는 글로벌 오브젝트이기 때문에, 그리고 window안에는 Document Object Model이나 Browser Object Model이나 또 자바스크립트와 같은 이런 다양한 아이들이 들어있기 때문에 유용하게 많이 쓰이는데, Window 자체에 들어있는 우리가 주로 쓰는 아이들은 보통 사이즈 같은 것들(Window 사이즈, 그리고 Window의 사이즈가 변화되는지 변화되지 않는지)을 확인할때나, 그리고 스크롤링 사용자가 스크롤링 할 때 어떻게 해결할 건지! 이런것들을 처리할 때 많이 쓰게 되고 페이지가 로드되었는지 안되었는지 즉 우리가 작성한 웹페이지가 브라우저에 올라왔는지 안올라왔는지 이런 것들을 확인할 때 많이 쓴다.

profile
As I start to move towards the goal, the goal will start to move towards me.

0개의 댓글