웹 API 기초 - 위치 정보 받아오기
API란?
API는 Application Programming Interface의 약자로, 여러분이 자주 사용하는 앱에서 데이터를 얻거나 앱의 기능을 사용할 수 있도록 돕는 인터페이스입니다.
웹 API는 웹 어플리케이션 프로그래밍 인터페이스를 말하며, 이는 웹 서버와 웹 클라이언트, 또는 웹 브라우저와 상호작용하는 데 사용됩니다.
웹 API의 예로는 브라우저 API와 서버 API가 있습니다.
브라우저 API는 웹 브라우저의 기능을 확장하고, 복잡한 작업을 지원하며, 데이터에 접근하는 데 도움을 줍니다.
반면에, 서버 API는 웹 서버의 기능을 확장하는데 사용됩니다.
그럼 좀 더 자세하게 각각을 살펴봅시다.
브라우저 API
브라우저 API는 웹 브라우저에서 동작하는 웹 사이트나 웹 애플리케이션에서 사용할 수 있는 기능을 제공합니다. 이러한 API는 웹 브라우저에 내장되어 있습니다.
예를 들어, Geolocation API는 사용자의 현재 위치의 좌표를 반환하는 기능을 제공합니다.
이를 이용하면 사용자의 현재 위치에 기반한 정보나 서비스를 제공하는 데 유용합니다.
아래는 Geolocation API를 이용하여 사용자의 위도와 경도를 얻어오는 예제 코드입니다:
예제 코드:
이 코드는 브라우저에서 Geolocation API를 사용할 수 있는지 확인하고, 가능하다면 사용자의 현재 위치의 위도와 경도를 반환합니다.
브라우저에서 Geolocation API를 지원하지 않는 경우에는 “Unfortunately, Geolocation is not supported by this browser.”라는 메시지를 화면에 표시합니다.
// HTML 요소를 선택합니다.
const positionDisplay = document.getElementById(“position”);
// 위치 정보를 얻는 함수입니다.
function retrieveLocation() {
// 브라우저가 Geolocation API를 지원하는지 확인합니다.
if (navigator.geolocation) {
// Geolocation API를 지원하면, getCurrentPosition 함수를 호출하여 위치 정보를 얻어옵니다.
navigator.geolocation.getCurrentPosition(displayPosition);
} else {
// Geolocation API를 지원하지 않으면, 메시지를 표시합니다.
positionDisplay.innerHTML = “Unfortunately, Geolocation is not supported by this browser.”;
}
}
// 위치 정보를 표시하는 함수입니다.
function displayPosition(position) {
positionDisplay.innerHTML = “Latitude: ” + position.coords.latitude +
“<br>Longitude: ” + position.coords.longitude;
}