[JS]내 기기의 위치를 확인하는 방법

목차
1. 사용 브라우저의 상태를 갖는 객체
2. 어떤 것들이 있을까?
3. 언제 쓸 수 있을까?

 

최근 네비게이션관련 앱을 개발하면서 알게된 사용자의 위치를 추적할 수 있는 방법을 공유하고자 한다.

1. 사용 브라우저의 상태를 갖는 객체

어떤 사이트에서 제공하는 기능 중 지도 위에서 내 위치를 표시하는 것을 본 적이 있을 것이다. 물론 내 위치를 정보를 제공하겠다는 권한을 허용해줘야 하지만 어떻게 이것이 가능할까?

 

1) 사용 브라우저의 상태를 갖는 객체 

 브라우저에는 내 기기의 상태와 정보를 담은 `Navigator`이라는 객체가 존재한다. 이 객체는 읽기 전용으로 스트립트를 사용하여 기기의 필요한 정보를 조회하거나 특정 행위를 할 때 사용한다.

 

2) 언제 생긴 것 일까?

 자바스크립트를 공부할 때 몇몇의 전역객체를 보지만 navigator이라는 객체를 처음 들어볼 것이다. 그럼 언제부터 있던 객체일까? 놀랍게도 초기 넷스케이프 브라우저에 도입 때부터 존재하던 객체로 1990년대 웹 브라우저 경쟁이 치열하던 시기 여러 브라우저의 다양한 기능으로 추가하면서 생긴 호환성문제를 해결하고자 고안된 요소 중 하나이다.

 

3) 어떻게 호환성을 해결했을까?

 웹 개발을 해본 사람들을 내가 작성한 코드가 다른 브라우저에서는 작동하지 않을 수 있다는 것을 알 수 있을 것이다. 그렇다면 다른 브라우저에서도 동작할 수 있도록 처리를 해주어야 한다. 하지만 어떤 사용자가 어떤 브라우저를 사용하는지 어떻게 알고 처리를 하는가?

navigator 객체의 일부 속성을 통해 사용자가 이용하는 브라우저, 버전, 운영체제 등을 확인하여 프로그래밍을 할 수 있었고 이를 통해 호환성을 문제를 해결했다. 

 

4) 내 위치를 어떻게 아는데?

 navigator라는 좋은 객체에 대해 알 수 있었다. 그런데 처음 제공하려고 했던 위치에 대한 정보는 안 알려주고 왜 navigator객체만 설명하는 것일까? 

사용자의 기기의 위치 정보를 브라우저의 navigator객체가 가지고 있기 때문이다. navigator에서 장치의 위치 정보를 반환하는 geolocation이라는 속성을 통해 위치 정보를 알 수 있다.

 

5) geolocation의 보안

  장치의 위치정보를 반환하는 geolocation은 보안상의 문제로 인해 기기의 위치정보에 대한 권한을 허용할지 체크를 하며 허용하지 않으면 위치를 반환하지 않는다.

 

2. 어떤 것들이 있을까?

그렇다면 geolocation에는 속성들이 있을까?

1) getCurrentPosition

사용자의 위치 정보를 요청할 때 한 번만 가져오며 매개 변수로는 위치정보를 포함하는 함수 값을 갖는다. 

navigator.geolocation.getCurrentPosition([성공시 실행할 함수값],[실패시 실행할 함수값],[옵션])

 

2) watchPosition

사용자의 위치가 변할 때 마다 정보를 가져오며 매개변수는 getPosition과 같다. 반환값으로는 Watch객체의 ID값을 갖는다.

const wathID = navigator.geolocation.watchPosition([성공시 실행할 함수값],[실패시 실행할 함수값],[옵션])

3) clearWatch()

watchPosition을 사용할 경우 브라우저가 꺼질 때까지 지속적으로 정보를 요청하게 된다. 이 경우 기기의 배터리와 데이터가 소모되고 위치정보가 유출될 수도 있다. 따라서 브라우저가 꺼지지 않아도 명시적으로 위치 정보 요청을 중지하기 위한 메서드이다. 

주로 컴포넌트가 사라질 때 중지시킨다.

navigator.geolocation.clear(watchID)

 

4) position의 속성들

1. coords(좌표)
  latitude: 사용자의 위도

  longitude: 사용자의 경도

  altitude: 사용자의 고도 정보로 사용 불가능한 경우 null로 반환된다.

  accuracy: 위도와 경도 값의 정확도를 나타내며, 미터 단위로 측정된다. 값이 작을수록 위치가 더 정확합니다.

  altitudeAccuracy: 고도 값의 정확도를 나타내며, 미터 단위다.
                                 고도를 제공할 수 없는 경우 또는 정확도를 알 수 없는 경우에 null로 반환된다.

  heading: 사용자가 이동하고 있는 방향을 나타내며, 단위는 도(degree)이다.
                방향은 북쪽을 기준으로 측정하며, 시계 방향으로 증가한다.
                사용자가 정지해 있거나 방향을 알 수 없는 경우 null로 반환된다.

  speed: 사용자의 이동 속도를 나타내며, 단위는 미터/초(m/s)이다
             사용자가 정지해 있거나 속도를 알 수 없는 경우 null로 반환된다.

2. timestamps
  - 현재 위치 정보를 요청한 시간이다

 

3. 언제 쓸 수 있을까?

사용자 정보를 수집하여 근방에 특정 가게, 산, 기관 등을 검색하여 지도에 표시하거나 실시간으로 위치를 표시해야하는 네비게이션 관련 애플리케이션을 만들 때 사용할 수 있다. 

 

참고자료

https://developer.mozilla.org/ko/docs/Web/API/Geolocation

Geolocation - Web API | MDN