(Web JavaScript) 웹 자바스크립트 BOM (3) Navigator 객체

안녕하세요 영감을 주는 개발자 방민방민입니다.

오늘은 DOM 에서 Navigator 객체에 대하여 알아보도록 하겠습니다.

세상에는 너무 많은 브라우저가 있습니다.

사파리, 크롬, 인터넷 익스플로러, 파이어 폭스 등등등 

이러한 브라우저마다 표준화를 최대한 따르지만 그 결과가 브라우저 플랫폼마다 다르게 도출될 수 있습니다.

그러하기 때문에 자바스크립트를 통해 브라우저마다 다른 결과가 나오지 않도록 하는 것이 중요합니다.

이러한 상황에서 사용하는 것이 바로 Navigator 객체입니다!

이러한 Navigator 객체는 브라우저의 정보를 제공함으로써 호환성 문제를 해결합니다!

지금부터 실습을 시작하도록 하겠습니다.

1. Navigator 객체

콘솔창에 다음의 자바스크립트 명령어를 사용하면 브라우저의 정보를 확인 할 수 있습니다.

console.dir(navigator);

이는 아래와 같은 결과를 출력합니다.

2. Navigator 프로퍼티

네비게이터 객체가 가지고 있는 다양한 프로퍼티 중 몇몇 사용에 필요한 프로퍼티에 대하여 알아보도록 하겠습니다.

appName : 브라우저의 이름

appVersion: 브라우저의 버전

userAgent: 브라우저가 서버로 전송하는 HTTP 헤더 내용

platform : 운영체제

각각의 모든 프로퍼티는 Navigator 객체의 프로퍼티임으로 "Navigator.프로퍼티네임" 을 활용하여 조회가 가능합니다. 각각의 명령어 콘솔에서 아래의 내용들을 출력합니다.

3. 기능테스트

기능테스트는 우리가 만든 웹 프로그램의 실행에 필요한 API가 실행하는 브라우저 상에 존재하는지를 확인하는 것입니다.

네비게이터 객체는 브라우저의 호환성을 위해서 주로 사용되지만 모든 브라우저에 대하여 그 호환성을 맞추는것은 쉬운 일이 아닐것입니다. 그러므로 아래와 같이 기능검사를 통해 해당 기능이 브라우저 상에서 존재하는지를 확인하고, 존재하지 않는다면 직접 구현해 줌으로써 사용합니다.

아래의 코드를 보시고 대략적인 느낌만 확인하시기 바랍니다.

// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
if (!Object.keys) {
  Object.keys = (function () {
    'use strict';
    var hasOwnProperty = Object.prototype.hasOwnProperty,
        hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
        dontEnums = [
          'toString',
          'toLocaleString',
          'valueOf',
          'hasOwnProperty',
          'isPrototypeOf',
          'propertyIsEnumerable',
          'constructor'
        ],
        dontEnumsLength = dontEnums.length;
 
    return function (obj) {
      if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
        throw new TypeError('Object.keys called on non-object');
      }
 
      var result = [], prop, i;
 
      for (prop in obj) {
        if (hasOwnProperty.call(obj, prop)) {
          result.push(prop);
        }
      }
 
      if (hasDontEnumBug) {
        for (i = 0; i < dontEnumsLength; i++) {
          if (hasOwnProperty.call(obj, dontEnums[i])) {
            result.push(dontEnums[i]);
          }
        }
      }
      return result;
    };
  }());
}

!Object.keys 는 Object 라는 객체에 keys 라는 메소드가 있는지를 확인합니다. 그렇지 않다면 그 내용을 아래에 정의해 주는것입니다. 하지만 최대한 브라우저가 해당 API 를 제공한다면 그 API 를 직접 사용하는 것이 가장 Best 가 될 것입니다.

오늘은 웹 자바스크립트 BOM 에서의 Navigator 객체에 대하여 알아보았습니다. 현존하는 수많은 브라우저중에서 다양한 브라우저에 호환이 가능한 웹 개발을 위해서 Navigator을 적절하게 사용하는것이 중요합니다.

그러면 지금까지 영감을 주는 개발자 방민방민이었습니다!