[JS]Geolocation API로 위치 정보 가져오기

💡개요

사이트에서 사용자의 위치 정보를 요구하는 기능이 있어 Web에서 사용자의 위치 정보를 가져오는 방법에 대해 찾아보았다.
그러다 Geolocation API에 대해 알게 되었고 그 내용을 이번 글로 정리해 본다.

---

📍Geolocation API란?

Geolocation API란?

• 사용자의 위치 정보(위도, 경도 등 GPS 정보)를 가져오고 이를 처리할 수 있도록 돕는 Web API이다.
• 이 API는 navigator.geolocation 객체를 통해 제공되며, 모바일 및 데스크톱 브라우저에서도 지원된다.

🌟주요 기능

• 사용자 위치 정보 (위도, 경도) 가져오기
• 위치 정보가 변경될 때 알림 받기
• 위치 정보 가져오기 중단

이 API는 HTTPS 환경에서만 동작하며, 사용자의 명시적 권한을 필요로 한다.
사용자가 권한에 대해 동의하지 않는다면 위치정보 사용은 불가능하다.

주의사항:
사용자의 사생활 보호를 위해, 브라우저는 위치 정보에 접근하기 전에 사용자의 동의를 요청한다.

---

📘Geolocation API 사용 방법

1. 위치 정보 가져오기 (getCurrentPosition)

가장 기본적인 방법으로, 사용자의 현재 위치 정보를 한 번만 가져온다.

navigator.geolocation.getCurrentPosition((position) => {
	const latitude = position.coords.latitude;
	const longitude = position.coords.longitude;
	console.log(`위도: ${latitude}, 경도: ${longitude}`);
},(error) => {
	console.error(`에러 발생: ${error.message}`);
});

🔍설명

1. navigator.geolocation.getCurrentPosition(successCallback, errorCallback)

   • successCallback: 위치 정보를 성공적으로 가져왔을 때 호출됩니다.
   • errorCallback: 위치 정보를 가져오지 못했을 때 호출됩니다.

2. 위치 정보 데이터 구조

   • position.coords.latitude: 위도 정보
   • position.coords.longitude: 경도 정보
   • 그 외에도 accuracy, altitude, speed 등의 다양한 정보가 제공됩니다.

3. 에러 처리

   • Permission denied: 사용자가 위치 정보 제공을 거부한 경우
   • Position unavailable: 위치 정보를 가져올 수 없는 경우
   • Timeout: 위치 정보 가져오는 시간이 너무 오래 걸리는 경우

---

2. 위치 정보 지속 추적하기 (watchPosition)

사용자의 위치가 변경될 때마다 정보를 실시간으로 추적할 수 있다.

const watchId = navigator.geolocation.watchPosition((position) => {
	const latitude = position.coords.latitude;     
	const longitude = position.coords.longitude;     
	console.log(`(실시간 추적) 위도: ${latitude}, 경도: ${longitude}`);   
}, (error) => {
	console.error(`에러 발생: ${error.message}`);   
});

🔍 설명

• watchPosition(successCallback, errorCallback)
  사용자의 위치가 변경될 때마다 위치 정보를 업데이트합니다.
  
• 중지 방법
  특정 조건에서 위치 추적을 중단하고 싶다면, navigator.geolocation.clearWatch(watchId)를 호출하여 추적을 멈출 수 있습니다.
  

// 위치 추적 중단
navigator.geolocation.clearWatch(watchId);

3. 위치 정보 옵션 설정하기

위치 정보는 특정 옵션을 설정하여 효율적으로 제어할 수 있다. 예를 들어, 높은 정확도의 정보가 필요하거나, 반복 요청을 제한하고 싶을 때 유용.

navigator.geolocation.getCurrentPosition(
  (position) => {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log(`위도: ${latitude}, 경도: ${longitude}`);
  },
  (error) => {
    console.error(`에러 발생: ${error.message}`);
  },
  {
    enableHighAccuracy: true, // 높은 정확도의 위치 정보
    timeout: 5000, // 5초 내에 위치 정보 가져오기
    maximumAge: 0 // 캐시된 위치 정보 사용 안 함
  }
);

🔍옵션 설명

• enableHighAccuracy: 높은 정확도의 위치 정보 요청 (배터리 소모가 큼)
• timeout: 위치 정보를 가져오는 제한 시간 (밀리초 단위)
• maximumAge: 캐시에 저장된 위치 정보를 사용할 최대 시간 (밀리초 단위)

---

📢자주 발생하는 오류 및 해결 방법

오류 코드	오류 명칭	원인	해결 방법
1	Permission denied	사용자가 권한 요청을 거부	사용자에게 권한 요청 메시지 제공
2	Position unavailable	위치 정보 서비스 불가	네트워크 연결 확인
3	Timeout	위치 정보 가져오기 시간 초과	타임아웃 시간 증가시키기

💡팁
위치 정보가 정상적으로 작동하지 않는다면, HTTPS 환경인지 확인하고, 브라우저 콘솔에 표시되는 에러 메시지를 주의 깊게 확인하자!

---

🪄결론

Geolocation API를 사용하면 웹 애플리케이션에서 사용자 위치 정보를 손쉽게 가져올 수 있다.
위치 정보를 가져오기 위해서는 반드시 사용자 권한을 요청해야 하며, 사용자의 편의를 위해 명확한 안내 메시지를 제공해야 한다.

Geolocation이 동작하지 않으면 아래 조건들을 확인하자!

1. HTTPS 환경인지 확인.
2. 위치 정보 제공에 대해 사용자가 명시적 동의를 했는지 확인.

📌 Reference

• Geolocation API 공식 문서
• Using the Geolocation API