[Js] Navigator 객체 | 크로스브라우징 |

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다. 

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

 

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

위 강의 중 기초적인 내용이나, 필요 지식 등의 내용은 따로 포스팅 하지 않겠습니다. (html, css, 실습 환경 등..)

---

 

Navigator 객체

 

Navigator객체는 브라우저의 정보를 제공하는 객체다. 주로 호환성 문제등을 위해 사용한다.

자바스크립트가 현재 실행되고 있는 브라우저의 제품명, 버전등을 알 수 있는 기능이다.

 

이 객체를 생각하기에 앞서 알아두어야 할 개념은 "크로스 브라우징"이라는 것이다.

 

크로스브라우징 

다양한 브라우저들의 동작 방법은 W3C라는 국제 표준화 기구에서 html, css, 정의하고 ECMA라는 곳에서 javascript를 정의한다.

정의된 공통사항을 제외하고 브라우저들만에 특징이 따로 있기 때문에, javascript가 다르게 동작 할 수 있다.

 

그렇기 때문에 브라우저의 종류 즉 버전혹은 제품명을 알아서 그 브라우저의 맞추어 코딩 하는 것이 좋다.

 

즉 브라우저마다 다르게 동작한다 라는 이슈를 "크로스 브라우징"이라고 한다.

 

이렇게 같은 기능을 다른 API를 써서 다르게 표시해야 하는 점 때문에 웹 개발자들의 반박은 심해졌고, 이를 맞추기 위해 웹 표준기구에서 정의를 내려주게 된 것이다. 이로 인해 각 벤더사들은 브라우저의 방법은 통일하고,  기능적으로 발전시키는 것을 경쟁으로 두게 되었고 이러한 이슈를 바로 "크로스 브라우징"이라고 하게 된 것이다.

 

 

실제 기능을 확인해보자.

console.dir(navigator);

자주 사용하고 중요한 기능을 살펴보도록 하자.

 

<script>
    console.dir(navigator.appVersion); //버전 확인  
    console.dir(navigator.userAgent);//브라우저가 서버측으로 전송하는 userAgent HTTP 헤더내용
    console.dir(navigator.platform); //브라우저가 동작하고 있는 운영체제에 대한 정보이다.
</script>    

위 정보들 말고도 정말 많은 정보들이 있으니 확인해가며 필요 시 사용하면 된다.

 

 

기능 테스트

기능 테스트란 우리가 작성한 코드가 어떠한 브라우저에서 실행될 것인데, 그 브라우저에 사용하고자 하는 API 가 있는지 없는지를 파악해주는 기능이다.

 

Navigator객체는 브라우저 호환성을 위해서 주로 사용하지만 모든 브라우저에 대응하는 것이 쉬운 일이 아니므로, 기능 테스트를 사용하는 것이 더 선호되는 방법이다.

 

예를 들어 Object.keys라는 메소드는 객체의 key값을 배열로 리턴하는 Object의 메소드이다.

이 메소드는 ECMAScript5에 추가되어 있기 때문에 오래된 자바스크립트와는 호환이 되지 않는다.

 

하지만 아래의 코드를 통해 호환성을 맞출 수 있다. (메소드가 없다면 아래와 같이 메소드를 정의해주는 것)

 

 

위 코드의 대한 설명을 알고 싶다면 아래 링크를 클릭하여 영상을 시청하시길 바랍니다.

www.youtube.com/watch?v=ajLJMWS4bx4&feature=youtu.be