Promise를 이용한 사용자 위치 추적 방법

13 Sep 2023

Promise

사용자 위치를 추적하는 기능은 모바일 애플리케이션 및 웹 애플리케이션에서 매우 중요합니다. 사용자 위치를 알면, 개인 맞춤형 서비스를 제공하거나 지도 기반 서비스를 제공할 수 있습니다. 자바스크립트의 Promise를 사용하여 사용자의 위치를 추적하는 방법을 알아보겠습니다.

1. Geolocation API 사용

Geolocation API는 웹 브라우저에서 제공하는 기능으로, 사용자의 위치 정보를 가져올 수 있습니다. 다음은 Geolocation API를 사용하여 사용자의 위치를 가져오는 코드입니다.

function getLocation() {
  return new Promise((resolve, reject) => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        position => resolve(position.coords),
        error => reject(error)
      );
    } else {
      reject("Geolocation is not supported by this browser.");
    }
  });
}

// 위치 정보 가져오기
getLocation()
  .then(coords => {
    // 위치 정보를 성공적으로 가져온 경우
    const latitude = coords.latitude;
    const longitude = coords.longitude;
    console.log(`사용자 위치: ${latitude}, ${longitude}`);
  })
  .catch(error => {
    // 위치 정보를 가져오는데 실패한 경우
    console.error("위치 정보를 가져오는데 실패했습니다.", error);
  });

위 코드는 getLocation 함수를 만들어서 사용자의 위치 정보를 Promise로 반환합니다. getCurrentPosition 함수를 사용하여 현재 위치를 가져오며, 성공적으로 위치 정보를 가져오면 resolve 함수를 호출하여 Promise를 이행합니다. 만약 위치 정보를 가져오는데 실패하면 reject 함수를 호출하여 Promise를 거부합니다.

위 코드에서는 위치 정보를 가져온 후에 콘솔에 출력하지만, 실제로는 위치 정보를 활용하여 다양한 기능을 구현할 수 있습니다. 예를 들어, 지도 기반 애플리케이션에서 사용자의 위치를 중심으로 지도를 표시하거나, 사용자의 현재 위치를 기반으로 가까운 가맹점을 찾는 등의 서비스를 제공할 수 있습니다.

2. 권한 요청

위치 정보를 가져오기 위해서는 사용자의 권한이 필요합니다. 웹 브라우저는 기본적으로 사용자의 위치 정보를 요청하지만, 사용자가 권한을 거부하는 경우도 있습니다. 위치 추적 기능을 사용하기 전에 권한을 확인하고, 필요에 따라 권한 요청을 해야 합니다.

function checkPermission() {
  return new Promise((resolve, reject) => {
    if (navigator.permissions) {
      navigator.permissions.query({ name: "geolocation" })
        .then(permission => {
          if (permission.state === "granted") {
            resolve();
          } else if (permission.state === "prompt") {
            navigator.geolocation.getCurrentPosition(
              () => resolve(),
              error => reject(error)
            );
          } else if (permission.state === "denied") {
            reject("User denied the permission to access geolocation.");
          }
        })
        .catch(error => reject(error));
    } else {
      reject("Geolocation permission is not supported by this browser.");
    }
  });
}

// 권한 확인 및 요청
checkPermission()
  .then(() => {
    // 권한 확인 및 요청에 성공한 경우
    console.log("위치 권한이 허용되었습니다.");
    // 이후 위치 정보를 가져오는 로직을 작성합니다.
  })
  .catch(error => {
    // 권한 확인 또는 요청에 실패한 경우
    console.error("위치 권한 확인 또는 요청에 실패했습니다.", error);
  });

위 코드는 checkPermission 함수를 만들어서 위치 권한을 확인하고 요청합니다. permissions.query 함수를 사용하여 현재 위치 권한 상태를 확인하고, 이에 따라 처리를 진행합니다. 만약 권한 상태가 “granted”인 경우에는 바로 Promise를 이행합니다. “prompt”인 경우에는 사용자에게 위치 권한을 요청하고, “denied”인 경우에는 Promise를 거부합니다.

위치 권한을 확인 및 요청하는 코드는 위치 정보를 가져오기 전에 실행되어야 합니다. 위치 정보를 가져오기 전에 권한 확인과 요청을 진행하면, 사용자의 권한 동의를 받을 수 있으며 원활한 위치 추적이 가능합니다.

결론

위치 추적 기능은 다양한 애플리케이션에서 활용되며, Promise를 이용하여 사용자의 위치 정보를 추적할 수 있습니다. Geolocation API를 사용하여 위치 정보를 가져오고, 애플리케이션에서 필요한 기능을 구현할 수 있습니다. 위치 권한을 확인하고 요청하는 과정을 추가하여 원활한 위치 추적을 위한 사전 작업을 진행할 수 있습니다. 이를 통해 사용자에게 편리한 서비스를 제공할 수 있습니다.

#JavaScript #GeolocationAPI #Promise #위치추적