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도 쓸 수 있다.
이것을 확인하기 위해 개발창을 열어보자!!! (ctrl + shift +i) > console
브라우저에서 Window는 최고의 오브젝트이다.
우리가 아무런 오브젝트를 지정하지 않았다면, Window가 글로벌 오브젝트이기 때문에 이렇게 alert이라는 Window안에 들어 있었던 API를 이용해서 'hello'를 출력하게 되면 alert창이 뜨면서 hello가 출력된다. 또 Window에 prompt라는 Web API가 있었는데 prompt라는 API를 이용해서 'please enter your name'을 출력하게 되면, prompt창이 뜨면서 'please enter your name.'을 출력하게 된다. 이런식으로 API를 확인해 볼 수 있다.
브라우저엣는 우리가 이용할 수 있는 API를 제공해주게 되고, 우리는 그 API를 호출하면서 브라우저에 있는 다양한 기능들을 쓸 수 있다.
그리고 우리가 웹페이지를 만들면 기본적으로 Window는 글로벌 오브젝트이기 때문에 window.innerWIdth라고 하지 않아도 그냥 innerWidth라고 해도 자동적으로 Window에 있는 innerWidth가 변환이 된다.
그리고 Window안에 navigator라는 오브젝트가 있는데 navigator에는 우리가 브라우저에 포함되어 있는 유용한 정보들이 포함되어있다. App cod name은 무엇인지, App name은 무엇인지, App의 version은 무엇인지,, 그리고 블루투스와 클립보드, 우리가 복사 붙여넣기 할 때 쓰는 클립보드, 그리고 인터넷의 커넥션 상태, 그리고 사용자가 쓰고 있는 언어, 키보드 상태나 다양한 것들을 알아올 수 있다. navigator도 굉장히 많이 쓰이는 object들 중에 하나이다.
앞에서 살펴봤듯이 window는 글로벌 오브젝트이기 때문에, 그리고 window안에는 Document Object Model이나 Browser Object Model이나 또 자바스크립트와 같은 이런 다양한 아이들이 들어있기 때문에 유용하게 많이 쓰이는데, Window 자체에 들어있는 우리가 주로 쓰는 아이들은 보통 사이즈 같은 것들(Window 사이즈, 그리고 Window의 사이즈가 변화되는지 변화되지 않는지)을 확인할때나, 그리고 스크롤링 사용자가 스크롤링 할 때 어떻게 해결할 건지! 이런것들을 처리할 때 많이 쓰게 되고 페이지가 로드되었는지 안되었는지 즉 우리가 작성한 웹페이지가 브라우저에 올라왔는지 안올라왔는지 이런 것들을 확인할 때 많이 쓴다.
