✅ Geolocation API 도입 이유
Petsitt 사이트에서 사용자들은 1.서비스 신청자, 2.돌보미 이렇게 두가지 유형으로 나뉘어지는데, 주소 정보는 2. 돌보미 가 서비스를 제공할 지역을 선택하기 위해 필요한 정보이고 일반 사용자의 경우 검색 및 위치 정보를 통해 돌보미를 검색할 수 있기 때문에 사용자의 주소 정보는 필수 항목이 아니다. 그래서 회원가입 단계에서 모든 사용자의 주소 정보를 저장할 필요가 없다는 판단이 나왔다.
그러면 사용자가 Petsitt 사이트를 접속했을 때 검색기능을 실행하지 않은 상태에서는 무엇을 기준으로 돌보미 리스트를 보여줘야 할까?
보통 사용자는 자신이 사는 지역을 기준으로 돌보미를 검색할 경우가 많을테니 사용자의 실시간 위치 정보를 기반으로 돌보미 리스트를 보여주기로 결정했다.
그래서 사용자의 실시간 위치 정보를 얻어 올 수 있는 Geolocation API를 사용하게 되었다.
✅ Geolocation API 기본 코드
const successCallback = (geolocation) => {
console.log(geolocation);
};
const errorCallback = (error) => {
console.log(error);
};
const geolocationOptions = {
enableHighAccuracy: true,
maximumAge: 10000,
timeout: 5000,
};
navigator.geolocation.getCurrentPosition(
successCallback, // 성공적으로 데이터를 받아왔을 경우
errorCallback, // 에러 발생했을 경우
geolocationOptions // options
);위와 같이 위치 정보를 얻기 위해서 getCurrentPosition 메소드를 사용한다.
getCurrentPosition 메소드 안에는 데이터를 성공적으로 얻어왔을 경우에 대한 콜백함수가 첫번째로 들어가고, 두번째는 에러가 발생했을 경우에 대한 콜백함수, 세번째로는 Geolocation에 대한 옵션이 오브젝트 형식으로 들어간다.
첫번째 콜백함수만 필수항목이고, 나머지는 생략 가능!!
const successCallback = (geolocation) => {
console.log(geolocation);
};
const errorCallback = (error) => {
console.log(error);
};
const geolocationOptions = {
enableHighAccuracy: true,
maximumAge: 10000,
timeout: 5000,
};
if ("geolocation" in navigator) {
// API 실행
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
geolocationOptions
);
} else {
// 브라우저가 Geolocation API를 지원하지 않는 경우
console.log("Browser does not support the Geolocation API");
}
Geolocation API 코드를 사용하는 가장 이상적인 방법은 위와 같다고 한다.
특정 브라우저들은 아직 Geolocation API를 지원하지 않기 때문에 (🔗 Geolocation API 지원 범위 확인) 지원하지 않는 브라우저로 접속했을 경우에 대한 예외 처리가 필요하기 때문이다.
✅ 프로젝트에 적용된 코드
Geolocation과 관련하여 예외상황은 총 네가지로 나누어 처리했다.
1. 브라우저가 Geolocation API를 지원하고, 데이터를 성공적으로 받아온 경우
2. 브라우저가 Geolocation API를 지원하지만, 위치 정보 설정을 차단한 경우(에러코드: 1)
3. 브라우저가 Geolocation API를 지원하지만, 요청 시간이 초과된 경우(에러코드: 3)
4. 브라우저가 Geolocation API를 지원하지 않는 경우
const getLocation = () => {
// Browser가 Geolocation API를 제공할 경우
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(pos) => {
// 위도, 경도값을 currentPosition state에 저장
const latitude = pos.coords.latitude;
const longitude = pos.coords.longitude;
setCurrentPosition({x: longitude, y: latitude});
setDefaultSearch(true);
},
(err) => {
// 에러일 경우
// timeout으로 인한 에러일 경우와 위치 설정을 허용하지 않았을 경우를 나누어 예외처리
if(err.code === 3) setSearchingStatus('delayed');
if(err.code === 1) setSearchingStatus('blocked');
},
{
enableHighAccuracy: false,
maximumAge: 180000, // 불러온 값을 캐싱하는 시간
timeout: 7000, // API 최대 요청 시간
}
);
} else {
// Browser가 Geolocation API를 제공하지 않을 경우
setSearchingStatus('notSupport');
}
};그리고 searchingStatus 라는 state에 상황별로 `searching`, `delayed`, `blocked`, `notSupport` 값을 할당하여 유저에게 안내 메세지를 노출하였다.
searchingStatus === 'searching' ? (
// 검색 중일 경우
<LoadingWrap>
<Loading _text={'주변의 돌보미 리스트를 검색중입니다.'}/>
</LoadingWrap>
) : searchingStatus === 'delayed' ? (
// 요청 시간 초과했을 경우
<ExceptionArea
_title={'GPS 확인이 지연되고있어요.'}
_text={'장소 및 날짜 검색 기능을 통해 통해 돌보미 리스트를 검색해주세요.'}>
<TryAgainButton type="button" onClick={getLocation}>다시 시도하기</TryAgainButton>
</ExceptionArea>
) : searchingStatus === 'blocked' ? (
// 위치 정보 설정 차단했을 경우
<ExceptionArea
_title={'GPS를 허용해주세요.'}
_text={'GPS를 허용하지 않을 경우, 장소 및 날짜 검색 기능을 통해 돌보미 리스트를 검색해주세요.'}/>
) : searchingStatus === 'notSupport' ? (
// 브라우저가 지원하지 않을 경우
<ExceptionArea
_title={'위치정보 사용 불가'}
_text={'브라우저가 위치 정보 기능을 지원하지 않습니다. 장소 및 날짜 검색 기능을 통해 돌보미 리스트를 검색해주세요.'}/>
) : (
// 데이터 성공적으로 불러왔을 경우
) ...적용된 옵션들
{
enableHighAccuracy: false,
maximumAge: 180000, // 불러온 값을 캐싱하는 시간
timeout: 7000, // API 최대 요청 시간
}enableHeightAccuracy : 이 옵션을 true로 설정할 경우, 위치 정보의 정확성을 높이지만 사용되는 디바이스의 배터리 소모가 더욱 빠르다고 한다. 우리 서비스의 경우 사용자의 위치 정보를 바탕으로 근거리의 모든 돌보미 리스트를 불러오기 때문에 굳이 정확도를 더욱 높일 필요는 없다고 판단되어 사용하지 않았다.
maximumAge : 이 옵션은 처음에 사용하지 않았는데, 유저 피드백을 받으면서 메인의 데이터를 불러오는 시간이 오래걸린다는 의견이 있었다. 내가 작업하면서 테스트할 때에도 환경에 따라 1-2초씩 걸리던 시간이 3-4초씩 걸리기도 했어서, 불편을 느낄 때가 있었다.
그래서 사용자가 3분 이내로 위치 정보를 재탐색 할 경우, 사용자가 3분 전 장소에서 오차범위가 엄청나게 크도록 멀리 이동할 수 없는 시간이라고 판단되어 이전에 사용된 데이터를 반환하도록 캐싱 타임을 설정하였다.
timeout: 이 부분도 로딩시간이 오래걸린다는 피드백을 반영하여 추가한 내용인데, 데이터 요청 시간이 7초를 초과할 경우 에러를 반환하도록 추가하였다. (7초도 꽤 긴 시간이지만...)
Geolocation API 를 사용해보니
처음에는 사용자의 실시간 위치 정보..? 해본 적이 없으니 당연히 꽤나 어려운 기술일거라고 생각했는데, 너무 쉽게 쓸 수 있는 자바스크립트 자체 API가 있어서 놀랬다.
맨날 집에서만 작업해서 마포구 정보만 얻어오다가, 하루는 볼일이 있어서 다른 동네 가서 작업했더니 다른 지역 돌보미 리스트가 나와서 이거 진짜 잘 작동하는구나 하고 되게 신기했던 기억이..ㅋㅋㅋ 내가 해놓고도 내가 신기한 현상..?
한가지 아쉬운건, Geolocation API를 사용할 때 페이지에 접속하자마자 다짜고짜 "위치 정보를 허용해주세요!" 라는 알림을 띄우는 것은 사용자 경험 측면에서 좋지 않다고 한다.
위치 정보 허용 알림을 띄우기 전, 먼저 사용자의 위치 정보를 얻어야 하는 이유를 설명하고 동의를 얻는 과정을 거치고 개인정보 관련 약관을 볼 수 있는 링크를 추가하는게 좋다고 하는데, 그런 면에서는 Geolocation API 사용과 유저 정보를 다루는것에 대한 책임감은 아쉬운 부분이었던 것 같다.
참고 사이트
https://blog.logrocket.com/what-you-need-know-while-using-geolocation-api/
