[Next js] Geolocation API로 현재 위치값 구하기

임보라·2024년 10월 24일

Geolocation API KakaoMap api next typescript

Next.js

목록 보기

11/23

Geolocation API 로 현재 내 위치값을 구하고 Kakao Maps을 연동해 주어진 좌표를 주소로 변환하려한다.

내 현재위치 찾기

Geolocation API란 ?

웹 브라우저에서 사용자의 위치 정보를 가져올 수 있는 표준 API로,
환경에 따라 GPS, Wi-Fi, 셀룰러 네트워크, IP 주소 등에서 사용자의 현재 위치를 알아낸다.

Geolocation API는 CSR에서만 작동할 수 있다.
Geolocation API는 비동기적으로 동작한다.

특징)

사용자 동의 : 실행 전 브라우저는 사용자의 위치 정보를 수집하기 위해 동의를 요구한다.
다양한 위치 수집 : GPS, Wi-Fi, 셀룰러 네트워크, IP 주소 등 여러 소스로부터 정보를 수집
높은 정확도 지원 : enableHighAccuracy 옵션을 통해 정확도를 조정할 수 있다. (실제로 있고없을때 버스정거장 1정거장정도 차이가 나는것을 확인했다.)
브라우저 지원: 대부분의 현대 브라우저에서 지원되며, 모바일에서도 동작한다.

Position 객체의 주요 속성)

coords.latitude : 고도
coords.latitude : 위도
coords.longitude : 경도
coords.accuracy : 위도/경도의 오차(m)
coords.altitudeAccuracy : 고도의 오차(m)
coords.heading : 방위(도)
coords.speed : 속도(m/초)
timestamp : 취득 날짜 (1970년부터 경과 밀리초)

PositionError 객체의 주요 속성)

code : 에러 코드
message : 상세 에러 메시지

Geolocation API 옵션 설명)

enableHighAccuracy : 고정밀 모드를 활성화, 배터리 소비 빠름
maximumAge : 캐시된 위치 정보가 제공될 수 있는 최대 시간(밀리초 단위),
(0 = 캐시안함 = 항상 최신정보 얻기)
timeout : 위치 정보를 가져올 때까지 기다리는 최대 시간(밀리초 단위)

사용법)

3가지의 메서드를 제공한다.

navigator.geolocation.getCurrentPosition()
: 사용자의 현재 위치를 요청

'use client'; //Geolocation API는 CSR에서만 작동

import { useEffect, useState } from 'react';

const StampActive = () => {
  const [location, setLocation] = useState<{ lat: number; lng: number } | null>(null); //위치상태
  const [error, setError] = useState<string | null>(null); //에러상태

  //가져오기 실패했을때 상황에 따른 에러메세지
  const showErrorMsg = (error: GeolocationPositionError) => {
    switch (error.code) {
      case error.PERMISSION_DENIED:
        setError('Geolocation API의 사용 요청을 거부했습니다.');
        break;
      case error.POSITION_UNAVAILABLE:
        setError('위치 정보를 사용할 수 없습니다.');
        break;
      case error.TIMEOUT:
        setError('위치 정보를 가져오기 위한 요청이 허용 시간을 초과했을습니다.');
        break;
      case error.UNKNOWN_ERROR:
        setError('알 수 없는 오류가 발생했습니다. 관리자에게 문의하세요.');
        break;
    }
  };

  useEffect(() => {
    if ('geolocation' in navigator) {
      //현 브라우저가 Geolocation API를 지원하는지 확인
      navigator.geolocation.getCurrentPosition(
        //사용자의 현재 위치를 요청
        (position) => {
          setLocation({
            lat: position.coords.latitude, //위도값 저장
            lng: position.coords.longitude //경도값 저장
          });
        },
        (err) => {
          showErrorMsg(error); //상황에 따른 에러메세지 호출
        },
        { //옵션 객체
          enableHighAccuracy: true, // 정확도 우선모드 (이걸안넣으면 버정한정거장 정도 차이있는거같음)
          timeout: 60000, // 1분 이내에 응답 없으면 에러 발생
          maximumAge: 0 // 항상 최신위치 정보 수집
        }
      );
    } else {
      setError('브라우저가 Geolocation을 지원하지 않습니다.');
    }
  }, []);
  console.log('location', location);
  return (
    <>
      <h1>내 위치</h1>
      {location ? (
        <p>
          위도: {location.lat}, 경도: {location.lng}
        </p>
      ) : (
        <p>{error ? `Error: ${error}` : 'Getting location...'}</p>
      )}
    </>
  );
};

export default StampActive;