JavaScript 브라우저 객체모델, window 객체와 브라우저 호환성

브라우저 객체 모델 (Brower Object Model)은 웹 브라우저에 구현된 JavaScript 객체 모델을 의미하며 window 객체의 프로퍼티로 조회할 수 있습니다.

여기서 window 객체는 현재 웹 브라우저의 창이나 탭을 표현하기 위한 객체들이며, 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현하게 됩니다.

window 객체의 하위에는 많은 객체가 존재하며 document 객체 역시 window 객체의 하위에 존재하게 됩니다. 이러한 window 객체의 하위 프로퍼티는 웹 브라우저의 console 창에서 최상위 요소 처럼 다룰 수 있습니다. 예를 들어 document 객체는 window.document 로 조회할 수 있지만, 최상위 객체 처럼 document 객체를 바로 확인할 수 있습니다.

이러한 window 객체 중 많이 쓰이는 프로퍼티를 확인해보고, 상세한 내용을 알아보겠습니다.

document 객체

현재 로드된 웹 페이지를 표현하는 객체

history 객체

웹 브라우저의 히스토리에 기록된 웹 페이지들을 기억하고 있는 객체입니다.

SPA과 같이 Ajax를 많이 사용하는 웹 앱의 경우 URL이 자동으로 웹 브라우저의 히스토리에 반영되지 않습니다. 이러한 경우 SPA의 히스토리 및 URL관리를 위해 history API를 사용하게 됩니다.

history 객체 API

사용법 - pushState()

/* pushState - history 객체에 새로운 엔트리를 추가한다 */
// @param {object} state - 히스토리의 각 아이템에 저장된 정보
// @param {string} title - 페이지의 제목을 변경
// @param {string} url - 브라우저에 보일 페이지의 URL을 전달
history.pushState(state, title, url);

location

현재 페이지의 URL을 담고 있는 객체

origin - Origin URL
pathname - url  페이지 경로

navigator

브라우저와 관련된 정보를 담고있는 객체

• geolocation 객체 - 지리위치 API, 사용자의 위치 정보를 확인할 수 있습니다.

JavaScript 지리위치 API geolocation

screen

장치의 디스플레이 정보를 담고 있는 객체

localStorage, sessionStorage

웹 스토리지 API로, 웹 브라우저에 데이터를 저장하기 위해 사용합니다.

JavaScript 웹 스토리지 API localStorage sessionStorage

기능 지원 여부 판단

HTML5 명세에는 HTML5에 새롭게 추가된 기능들을 모든 종류의 기기에서 사용할 수 있도록 새로운 자바스크립트 API에 대한 정의를 포함하고 있습니다.

하지만 HTML5에 추가된 API를 사용하기에 앞서, 우선 브라우저가 해당 기능을 지원하는지를 먼저 판단할 필요가 있습니다. 이는 사용자가 업데이트가 중단된 IE와 같은 브라우저를 사용하고 있을 상황에 대비하기 위해서이며, 간략하게 아래와 같이 확인해 볼 수 있습니다.

if (navigator.geolocation) {
  // 해당 기능이 지원되는 경우
} else {
  // 기능을 지원하지 않거나 비활성화 된 경우
}

IE9의 경우 geolocation 객체를 확인할 때 메모리 누수가 발생할 수 있습니다. 이러한 경우와 같이 크로스 브라우저 이슈가 발생할 때, Modernizr와 같이 크로스 브라우저 이슈를 처리하는 라이브러리를 사용하면 편리하게 처리할 수 있습니다.

Modernizr 라이브러리

브라우저간 크로스 브라우징 이슈를 처리해주는 라이브러리로써, https://modernizr.com/ 에서 웹사이트에 필요한 기능을 선택하여 다운로드 하고, 코드에 추가하여 사용할 수 있습니다.

사용예

if (Modernizr.geolocation) {
  // 지리위치 API가 지원되는 경우.
} else {
  // 지원하지 않을 경우.
}