[React] 좌표(경도, 위도)로 주소 알아내기(feat. Geolocation / 카카오 맵 API) + Geolocation 사용제한에 관하여
프로젝트 중 홈 화면에서 오늘 날짜와 날씨, 현재 위치의 행정구를 보여주는 상단바를 만들고자하였다.
0. 위치정보 구하기
처음에는 HTML5 Geolocation으로 위치정보를 구한 뒤, 해당 정보로 날씨 API를 통해 현재 위치의 날씨를 얻어내려고 하였다.
현재 위치 정보는 window.navigator.geolocation.getCurrentPosition(success, error, [options]) API를 통해 알아낼 수 있다. 뒤에 파라미터는 성공하였을 때 실행될 콜백함수 success, 실패할 때 실행될 콜백함수 error이 기본적으로 들어간다. 그 외에 options에는 다음의 객체들이 들어갈 수 있다.
maximumAge: cache에 저장한 위치정보를 대신 반환할 수 있는 최대 시간을 나타내는 값이다. 0을 지정할 경우, 장치가 위치정보 cache를 사용할 수 없고, 실시간으로 위치를 알아내야한다. infinity를 지정할 경우, 시간에 상관없이 항상 cache에 저장된 위치정보를 반환한다.timeout: 기기가 위치를 반환할 때에 소모할 수 있는 최대 시간을 나타낸다.enableHighAccuracy: 위치정보를 높은 정확도로 수신할 것임을 나타낸다. true로 지정할 경우, 보다 더 정확한 위치를 제공하나 응답속도가 느려질 수 있다. (기본값: false)
아래와 같이 콜백함수를 정해서 파라미터로 넘겨줄 수 있다.
function success(event) {
// 성공했을 때 처리할 콜백 함수
}
function error(event) {
// 실패 했을 때 처리할 콜백 함수
}const[latitude, setLatitude] = React.useState("");
const[longitude, setLongitude] = React.useState("");
window.addEventListener('load', () => {
if(window.navigator.geolocation) { // geolocation 지원할 경우 현재 위치 get
window.navigator.geolocation.getCurrentPosition(success,error)
}
//위치 정보는 위도와 경도로 표시되며 success 함수에 전달되는 event 객체의 coords 객체에서 가져올 수 있다.
function success(event) {
setLatitude(event.coords.latitude) // 위도
setLongitude(event.coords.longitude) // 경도
}위 방법을 통하여 경도와 위도를 알아낼 수 있었다.
그래서 여기서 주소를 어떻게 뽑아낼 건데?
경도나 위도는 알아냈지만 이걸로 결국 주소를 뽑아내려면 지도 API를 사용해야 했다.
1. 카카오맵 API로 좌표를 통해 주소 알아내기
카카오 developers 사이트에서 가입을 하고 앱을 등록하면 카카오 API를 사용할 수 있게끔 4가지 키를 준다.
- 네이티브 앱 키
- REST API 키
- Javascript 키
- Admin 키
나는 리액트로 개발을 하고 있기 때문에 이중에서 REST API 키와 Javascript 키를 사용하는 방법에 대해서 정리해보고자 한다.
REST API 방식
const mapApi = async () => {
try {
let response = await axios
.get(
`https://dapi.kakao.com/v2/local/geo/coord2address.json?input_coord=WGS84&x=${latitude}&y=${longitude}`,
{
headers: {
Authorization: 'KakaoAK {REST API 키}',
},
},
)
.then(response => {
const location = response.data.documents[0];
console.log({
si: location.address.region_1depth_name,
gu: location.address.region_2depth_name,
dong: location.address.region_3depth_name,
// locationX: location.address.x,
// locationY: location.address.y,
});
});
} catch (error) {
console.log(error.message);
}
};
Javscript SDK 방식
1. index.html 파일에서 카카오 API/services 라이브러리 불러오기
//index.html
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트 키&libraries=services"></script>2. kakao map API를 활용하여 주소-좌표 변환
//kakao api를 글로벌로 사용함
/*global kakao*/
function getAddr(lat,lng){
// 주소-좌표 변환 객체를 생성합니다
let geocoder = new kakao.maps.services.Geocoder();
let coord = new kakao.maps.LatLng(lat, lng);
let callback = function(result, status) {
if (status === kakao.maps.services.Status.OK) {
const arr ={ ...result};
const _arr = arr[0].address.region_2depth_name;
console.log(_arr);
}
}
geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
}
useEffect(()=>{
getAddr(latitude, longitude);
})위의 방법으로 하여서 나의 현재 주소를 확인할 수 있었다.
그런데 여기서 geolocation을 사용할 때에 http프로토콜을 사용하면 사용제한이 있을 것이라는 것을 알게되었다. 사용제한에 대한 내용을 더 알아보려고 한다.
2. http 프로토콜 사용에 따른 HTML5 Geolocation API 등 위치 정보 사용 제한
나는 로컬 http 환경에서도 Geolocation API를 사용하는 데에 문제가 발생하지 않았다. 하지만 같은 팀의 팀원은 ' no longer work on insecure origins.'이라는 내용의 에러가 발생하였다고 한다.
https://developer.chrome.com/blog/geolocation-on-secure-contexts-only/
위 링크에 따르면 크롬 버전 50 이후부터는 Geolocation에 대해서 unsecured 환경이라면 지원되지 않게 하겠다는 것이다.
위치정보는 개인의 민감정보에 해당하기 때문에 이를 보호하기 위해서 https환경에서만 이용가능하게 하였다. 그렇다면 모든 페이지를 https로 전환해야하나? 그렇지는 않고 Geolocation을 사용하는 페이지만 https로 전환하면 된다고 한다. (물론 모든 페이지에서 사용한다면 전체 다 바꿔야겠지만.. )
local 환경에서도 https를 적용해야하는 것 같다. local 환경도 'potentially secure'이지 아직 지금 보안이 되어있는 상태는 아니기 때문이다.
결론 : 이러한 이유로 Geolocation API를 사용하기 위해서는 https로 변경 적용해야만 한다.
