[JavaScript] BOM(Browser Object Model)

BOM은 브라우저 객체를 의미한다.

브라우저 객체는 그럼 무엇인가? 그것은 브라우저에 내장된 객체를 뜻하는데, 이것 역시 표현이 너무 모호하다.

다음과 같이 예시를 들어보면 어떨까?

window 라는 객체는 브라우저 객체의 최상위 객체가 된다. 이 window 객체 밑에는 각각 document, screen, location, history, navigator 객체들이 존재하고 있다.이름들에서 감이 오지 않는가? 브라우저의 크기, 위치 같이 우리가 사용하는 인터넷 익스플로러, 크롬, 파이어 폭스 같은 브라우저 들을 통제할 수 있는 객체일 것 같다는 느낌이 든다. 우선 window 객체에 존재하는 메소드 들을 살펴보자.

window 객체

메소드

open()	새 창을 열 때 사용한다.
alert()	경고 창을 띄운다.
prompt()	질의응답 창을 띄운다.
confirm()	확인/취소 창을 띄운다.
moveTo()	창의 위치를 이동시킨다.
resizeTo()	창의 크기를 변경시킨다.
setInterval()	일정 간격으로 지속적으로 실행문을 실행시킬 때 사용한다.
setTimeout()	일정 간격으로 한 번만 실행문을 실행시킬 때 사용한다.

window 객체는 브라우저 그 자체에 관련된 메소드들이 있다.

각각의 메소드 들에 대한 사용법은 인터넷을 참고하자.

screen 객체

screen 객체는 사용자의 모니터 정보를 제공하는 객체이다. 모니터의 너비가 높이 또는 컬러 표현 bit를 반환한다.

프로퍼티

screen.width	화면의 너빗값을 반환한다.
screen.height	화면의 높잇값을 반환한다.
screen.availWidth	작업 표시줄을 제외한 화면의 너빗값을 반환한다.
screen.availHeight	작업 표시줄을 제외한 화면의 높잇값을 반환한다.
screen.colorDepth	사용자 모니터가 표현 가능한 컬러 bit를 반환한다.

location 객체

location 객체는 브라우저의 위치를 의미하는게 아니라 url과 관련된 인터넷 주소를 의미한다. 즉 인터넷 상에서의 위치가 어디인지를 결정한다. 또한 새로고침 역시 제공하고 있다.

프로퍼티/메소드

location.href	주소 영역에 참조 주소를 설정하거나 URL을 반환한다.
location.hash	URL에 해시값(#에 명시된 값)을 반환한다.  http://iwantadmin.tistory.com#top
location.hostname	URL에 호스트 이름을 설정하거나 반환한다.
location.host	URL에 호스트 이름과 포트 번호를 가져온다.
location.port	URL에 포트 번호를 반환한다.
location.protocol	URL에 프로토콜을 반환한다.
location.search	URL에 쿼리(요청 값)을 반환한다.  http://www.foo.com?id=Foo&pw=123123
location.reload()	새로 고침이 일어난다.

로컬 환경(서버를 연게 아니라 그냥 웹 페이지만 작성해서 여는 경우)에서는 href 속성만 지원한다.

history 객체

history 객체는 사용자가 방문한 사이트 중 이전에 방문한 사이트와 다음 방문한 사이트로 다시 돌아갈 수 있는 속성과 메소드를 제공한다. 

메소드/프로퍼티

history.back()	이전 방문한 페이지로 이동한다.
history.forward()	다음 방문한 페이지로 이동한다.
history.go(숫자)	숫자가 -2이면 2단계 이전 페이지로 이동
history.length	방문 기록에 저장된 목록의 개수를 반환

navigator객체

navigator 객체는 클라이언트가 사용하는 브라우저 정보와 운영체제의 정보를 제공하는 객체이다.

프로퍼티

navigator.appCodeName	브라우저 코드명을 반환한다.
navigator.appName	브라우저 이름을 반환한다.
navigator.appVersion	브라우저 버전 정보를 반환한다.
navigator.language	브라우저 사용 언어를 반환한다.
navigator.product	브라우저 사용 엔진 이름을 반환한다.
navigator.platform	브라우저를 실행하는 운영체제를 반환한다.
navigator.userAgent	브라우저와 운영체제 종합 정보를 반환한다.

BOM을 잘 이해하고 있어야 사용자에게 맞는 맞춤 화면을 보여줄 수 있다.

사용자의 화면 정중앙에 화면을 띄워주고 싶다면 screen 객체로 사용자의 모니터 화면의 크기를 확인한 후 window 객체로 이를 설정해주면 되겠다.

또한 navigator 객체의 브라우저 이름 및 버전 정보를 파악하는 것은 브라우저 마다 지원하는 API의 종류들이 다르고 특정 속성을 지원하지 않는 경우도 발생하기 때문에 아주 중요한 것이다. (예를 들면 window 객체의 resizeTo()는 크롬 및 오페라 브라우저에서는 정상적으로 작동하지 않는다. 이외에도 여러가지 브라우저마다 화면을 다른방식으로 출력한다.)

navigator 객체에 대해 좀더 생각을 해보자. navigator 객체를 사용하여 사용자에 맞는 언어 및 화면을 구성하는 것을 서버쪽에서 처리하는 CGI(Common Gateway Interface)를 이용하는 방법과 클라이언트에서 처리할 수 있는 navigator 객체를 이용하는 방법 두 가지를 생각해 볼 수있다. CGI를 사용하면 서버쪽의 부하가 늘어날 것이다. 반면에 navigator 객체를 사용해서 처리하면 클라이언트의 부하가 늘어난다. 여기서 말하는 부하는 단순히 데이터를 처리하는 연산을 의미한다. 하지만 데이터 통신의 양을 생각해보자. CGI는 다 처리된 데이터를 사용자에게 보내게 되어 데이터의 양이 적어진다. 반면 navigator를 사용할 때는 여러가지 환경에 해당하는 모든 데이터를 사용자에게 보낸 후 사용자가 그 데이터를 처리하여 화면에 출력한다. 서버의 부하를 줄이고 싶다고 해서 navigator를 사용하는 것이 최선이 될까?

예전에는 서버의 부하를 줄이고 싶다면 단순히 navigator를 사용했어도 별 문제가 없었다. 하지만 현재는 아니다. 현재는 모바일 사용자의 숫자도 무시할 수 없어졌다. 심지어 특정 웹사이트들은 모바일 사용자가 PC 사용자보다 월등히 많다. 모바일 환경에서 고려되어야할 아주 중요한 내용이 있다. 그것은 바로 데이터이다. 와이파이 환경이 아닌 사용자는 데이터 사용에 굉장히 민감하다. 1.5GB, 10GB 같은 사용량이 제한된 요금제를 사용하는 경우가 대부분이기 때문이다. 이 경우 navigator를 적극적으로 활용하는 것은 별로 좋지 않은 선택이 될 수 있다.