Programming Language/JavaScript

[JavaScript] geolocation API 기본 사용법(위치 정보 가져오기)

geolocation API 사용하기

geolocation API는 웹 브라우저에서 사용자의 위치 정보를 얻기 위한 JavaScript API이다. 이 API를 사용하면 웹 애플리케이션에서 사용자의 위치를 파악하여 지리적인 정보를 활용할 수 있다.

📢 geolocation API는 어떻게 가져올까?

geolocation API는 웹 브라우저에서 제공하는 내장 API 중 하나로, 사용자의 위치 정보를 얻을 수 있도록 설계되어 있다. 이 API는 웹 브라우저에 기본적으로 내장되어 있어 별도로 외부 라이브러리를 가져오지 않고도 JavaScript에서 직접 사용할 수 있다.

웹 브라우저는 보안 및 개인정보 보호를 위해 사용자의 위치 정보에 대한 접근 권한을 요청하고, 사용자가 권한을 부여하면 JavaScript를 통해 geolocation API를 사용하여 위치 정보를 가져올 수 있다.

즉, geolocation API는 웹 브라우저의 일부로 제공되며, 개발자가 별도의 설정이나 라이브러리를 추가하지 않고도 사용할 수 있도록 구현되어 있다.

geolocation API 기본 사용법

아래는 geolocation API를 사용하여 간단한 위치 정보를 가져오는 예제 코드이다. 해당 예제 코드를 살펴보며 우선 어떻게 사용하는지에 대해 간단하게 살펴보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geolocation API Example</title>
</head>
<body>
    <h1>Geolocation API Example</h1>

    <p id="locationInfo">Waiting for location...</p>

    <script>
        function showPosition(position) {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;

            const locationInfo = document.getElementById("locationInfo");
            locationInfo.innerHTML = `Latitude: ${latitude}<br>Longitude: ${longitude}`;
        }

        function showError(error) {
            const locationInfo = document.getElementById("locationInfo");
            locationInfo.innerHTML = `Error getting location: ${error.message}`;
        }

        function getCurrentLocation() {
            if (navigator.geolocation) { // 브라우저가 geolocation API를 지원한다면
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else { // 브라우저가 geolocation API를 지원하지 않는다면
                const locationInfo = document.getElementById("locationInfo");
                locationInfo.innerHTML = "Geolocation is not supported by this browser.";
            }
        }

        // 페이지 로드 시 초기 위치 가져오기
        getCurrentLocation();
    </script>
</body>
</html>

navigator.geoloacion.getCurrentPosition() 함수를 사용하여 현재 위치를 가져오고, 성공하면 showPosition 함수가 호출되어 위치 정보를 표시하고, 실패하면 showError 함수가 호출되어 에러 메시지를 표시한다. 페이지가 로드되면서 초기 위치를 가져오며, 사용자의 위치가 변경될 때마다 위치 정보를 업데이트한다.

📢 showPosition과 showError 함수의 이름은 특별한 약속된 이름은 아니며, 개발자가 원하는 이름으로 지을 수 있다. 이 코드에서 사용된 함수명은 필자가 임의로 선택한 것이며, 다른 이름을 사용해도 상관없다. 함수 이름은 개발자의 코딩 스타일과 코드의 가독성을 고려하여 결정하면 된다. 다만, 코드를 읽을 때 함수의 역할을 쉽게 이해할 수 있도록 명확하게 지어주는 것이 좋다.

위의 예제 코드에서 정의된 각각의 함수에 대해 자세하게 살펴보자.

showPosition(position)

showPosition 함수는 geolocation API에서 위치 정보를 얻어오면 호출되는 콜백 함수를 정의한 것이다. 여기에서 각 단계에 대해 살펴보자.

position.coords.latitude와 position.coords.longitude - 현재 위치의 위도와 경도를 각각 latitude와 longitude에 저장한다. 이 정보는 geolocation API에서 제공하는 coords 객체의 속성으로 얻을 수 있다.
document.getElementById("locationInfo")를 사용하여 HTML 문서에서 locationInfo라는 id를 가진 요소를 찾는다.(위의 예제에선 <p id="locationInfo"> Waiting for location... </p>)
locationInfo.innerHTML을 통해 해당 요소의 내부 HTML을 변경한다. 여기에서는 탬플릿 리터럴을 사용하여 현재 위치의 위도와 경도를 문자열에 포함시켜 표시한다. <br> 태그를 사용하여 줄 바꿈을 추가하여 보기 좋게 표시된다.

매개변수 position의 의미

position은 geolocation API에서 제공하는 위치 정보를 담고 있는 객체이다. 이 객체는 사용자의 현재 위치를 나타내며, position 객체에는 다양한 정보가 포함되어 있다. 주요 속성으로는 coords, timestamp 등이 있다.

coords - 사용자의 위치 좌표 정보를 담고 있는 객체이다. 여기에는 latitude(위도), longitude(경도), altitude(고도), accuracy(정확도) 등이 포함된다.
timestamp - 위치 정보가 얻어진 시간을 나타내는 타임스탬프이다.

따라서, 이 함수는 주로 웹 페이지에서 위치 정보를 얻어와 특정 요소에 표시할 때 사용된다. 위치 정보를 동적으로 업데이트하거나 지도에 표시하는 등 다양한 활용이 가능하다.

showError(error)

showError 함수는 geolocation API를 사용하여 위치 정보를 가져오는 도중에 발생한 오류를 처리하는 역할을 한다. 이 함수는 navigator.geolocation.getCurrentPosition 메서드를 호출할 때, 만약 위치 정보를 가져오는 과정에서 오류가 발생하면 이를 처리한다. 함수의 매개변수로는 error 객체가 전달된다. 이 객체에는 발생한 오류에 대한 정보가 담겨있다. 주요 속성으로는 code와 message가 있다.

code - 오류 코드를 나타낸다. 일반적으로 다음과 같은 값 중 하나일 수 있다.
- 1 - PERMISSION_DENIED(사용자가 위치 정보 제공을 거부함)
- 2 - POSITION_UNAVAILABLE(위치 정보를 사용할 수 없음)
- 3 - TIMEOUT(시간 초과)
message - 오류에 대한 메시지를 나타낸다.

showError 함수는 이러한 오류 정보를 활용하여 오류 메시지를 구성하고, 해당 메시지를 웹 페이지 상의 특정 요소에 표시한다. 이를 통해 사용자에게 오류 내용을 알린다.

getCurrentLocation()

getCurrentLocation 함수는 먼저 사용자의 브라우저가 geolocation API를 지원하는지 확인한다. if(navigator.geolocation)은 브라우저가 geolocation API를 지원하는지 체크한다. 만약 지원한다면, navigator.geolocation.getCurrentPosition 메서드를 사용하여 사용자의 현재 위치를 가져오려고 시도한다.

getCurrentPosition 메서드는 사용자의 현재 위치를 비동기적으로 가져오는 역할을 한다. 만약 위치를 성공적으로 가져오면 showPosition 함수를 호출하고, 가져오는 도중에 오류가 발생하면 showError 함수를 호출한다.

else 블록에서는 브라우저가 geolocation API를 지원하지 않는 경우에 대한 처리를 한다. 이 경우에는 사용자에게 메시지를 표시하여 geolocation이 이 브라우저에서 지원되지 않음을 알린다.

즉, getCurrentLocation 함수는 사용자의 브라우저가 geolocation API를 지원하는 경우 위치를 가져오는 시도를 하고, 그렇지 않은 경우에는 지원되지 않음을 알리는 메시지를 표시한다.

navigator.geolocation.getCurrentPosition(showPosition, showError);

getCurrentPosition 함수에 인자로 넘겨주어야 하는 것은 함수의 참조이며, 함수를 호출한 결과가 아니다. 따라서, 함수 이름만을 전달해야 한다. 함수를 호출하는 부분은 getCurrentPosition 함수 내부에서 이루어진다.

위의 예제 코드에서 showPosition과 showError는 함수의 참조이기 때문에 함수 내부에서 적절한 시점에 호출될 수 있다. 이렇게 하면 getCurrentPosition 함수가 위치 정보를 가져오거나 오류가 발생했을 때 내부적으로 이 함수들을 호출한다.

📢 그럼 getCurrentPosition 함수 내에서 참조된 함수들을 적절한 시점에서 호출할 때 그 함수에 필요한 파라미터도 getCurrentPosition 함수 내부에서 전달해 주는 건가?

getCurrentPosition 함수 내부에서 navigator.geolocation.getCurrentPosition 함수를 호출할 때, 성공적으로 위치 정보를 얻어온 경우(showPosition 함수 호출)와 에러가 발생한 경우(showError 함수 호출)에 대한 적절한 시점에서 각 함수에 필요한 파라미터를 전달한다.

navigator.geolocation.getCurrentPosition 함수는 위치 정보를 성공적으로 얻어온 경우와 에러가 발생한 경우에 대해 각각 함수를 호출한다고 하였다. 이때 함수를 필요한 정보인 position과 error는 자동으로 전달된다. 즉, getCurrentPosition 함수가 콜백 함수를 호출할 때는 해당 콜백 함수의 정의에 따라 필요한 정보를 전달하게 된다. 따라서 개발자는 showPosition 함수와 showError 함수를 정의할 때, 이 함수들이 받을 매개변수를 미리 정의해야 한다. showPosition 함수는 위치 정보(position)를 받고, showError 함수는 에러 정보(error)를 받는다. 이런 식으로 함수를 정의하고 getCurrentPosition 함수에 전달하면, 함수 내부에서 올바른 시점에 이 함수들이 호출되면서 필요한 정보가 전달된다.

결과적으로 예제 코드를 실행하면 브라우저에서 위와 같은 결과가 출력되는 걸 확인할 수 있다. 이제 저렇게 구해온 위도와 경도 정보를 36.3463916, 127.372415과 같은 형식으로 구글 맵에 검색해 보면 현재 위치를 정확하게 알 수 있다.

728x90

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 window.open(), window.opener() (0)	2023.12.02
[JavaScript] 자바스크립트 onclick (0)	2023.11.20
[JavaScript] 자바스크립트 addEventListener (0)	2023.11.17
[JavaScript] 자바스크립트 setTimeout()과 setInterval() 함수 (0)	2023.11.09
[JavaScript] 자바스크립트 Array 객체 (0)	2023.11.05

Contents

새소식

인기 검색어