🏜️

내 동네 설정 구현 과정

Created

Sep 1, 2022 02:54 AM

Last Edited Time

Sep 1, 2022 02:54 AM

Type

One Pager

Status

In Progress 🙌

Created By

Last Edited By

Stakeholders

1. GeoLocation API 사용 Problem Statement Proposed Work 2. 위도 경도 ⇒ 도로명 문제 카카오 API 사용하기로 결정

1. GeoLocation API 사용

Problem Statement

위도 경도를 어떻게 가져올 것인가에 대한 고민

[React] Geolocation API 사용하여 현재 내 위치 찾기 (with. TypeScript)

Geolocation API는 사용자의 위치 정보(위도, 경도)를 제공해준다. HTML에서 자체적으로 제공하는 API 이다. Geolocation은 npm으로 설치해서 사용할 수도 있다. 📎 react-hook-geolocation 하지만 Hook을 직접 구현해서 사용하는 것도 그리 복잡하지 않다. 리액트에서 Geolocation을 사용할 수 있도록 Hook을 구현하고 사용하는 방법에 대해 정리해보고자 한다.

[React] Geolocation API 사용하여 현재 내 위치 찾기 (with. TypeScript)

https://velog.io/@nemo/react-geolocation-api-hook

[React] Geolocation API 사용하여 현재 내 위치 찾기 (with. TypeScript)

React 에서 geolocation API를 hook 으로 만들어 써보기

React에서의 GeoLocation GeoLocation은 GPS 또는 네트워크를 이용하여 현재 위치 정보를 반환하는 API입니다. 즉 웹브라우저에서 현재 내 위치의 위도(latitude)와 경도(longitude)를 알아보고 싶을때 주로 사용..

React 에서 geolocation API를 hook 으로 만들어 써보기

https://jw910911.tistory.com/108

React 에서 geolocation API를 hook 으로 만들어 써보기

react-hook-geolocation

A React hook to access data from the Geolocation API. npm install --save react-hook-geolocation yarn add react-hook-geolocation There is a way to use PositionOptions to fine tune response coming from watchPosition of the Geolocation API.

react-hook-geolocation

https://www.npmjs.com/package/react-hook-geolocation

react-hook-geolocation

Geolocation API 사용하기 - Web API | MDN

getCurrentPosition() 메서드를 호출해서 사용자의 현재 위치를 얻을 수 있습니다. getCurrentPosition() 은 사용자의 위치를 탐지하는 비동기 요청을 초기화하고, 위치 관련 하드웨어에 최신 정보를 요청합니다. 위치를 알아낸 후에는 지정한 콜백 함수를 호출합니다. 선택적으로, 이 과정 중 오류가 발생하면 호출할 오류 콜백을 두 번째 매개변수로 지정할 수도 있습니다.

Geolocation API 사용하기 - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API

Geolocation API 사용하기 - Web API | MDN

링크들 참고했습니다.

Proposed Work

react-hook-geolocation 사용

위치 정보 설정이 필요

2. 위도 경도 ⇒ 도로명 문제

카카오 API 사용하기로 결정

구글이냐 카카오냐 둘 중에 고민?

카카오 장점

구글 장점

Kakao 지도 API

지도 객체 kakao.maps.Map(container, options) Parameters setCenter(latlng) 지도의 중심 좌표를 설정한다. 지도 이동시키기 샘플보기 Parameters getCenter() 지도의 중심 좌표를 반환한다. 지도 정보 얻어오기 샘플보기 Returns setLevel(level, options) Parameters getLevel() 지도의 확대 수준을 반환한다. 지도 정보 얻어오기 샘플보기 Returns setMapTypeId(mapTypeId) Parameters getMapTypeId() 지도의 타입을 반환한다.

https://apis.map.kakao.com/web/documentation/#services_Geocoder_coord2Address

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

Kakao Developers

https://developers.kakao.com/docs/latest/ko/local/dev-guide#coord-to-address

Kakao Developers

도로명 주소 이슈

도로명 주소 관련 이슈

과거 다음api를 이용하여 https://apis.daum.net/local/geo/coord2addr 를 통해서는 좌표값을 통해 도로명주소를 받아왔습니다. 그런데 kakao api로 교체하여 사용할때는 좌표값에 따른 도로명주소가 나오지 않는곳이 많아서 null값을 받는일이 좀 있더군요. 그래서 지금 https://dapi.kakao.com/v2/local/geo/coord2address 를 통해 좌표값으로 지번주소를 받은뒤 https://dapi.kakao.com/v2/local/search/address.json 를 통해 도로명주소를 검색하는 방법을 이용하고 있는데 좌표값이 다양하다보니 그에 맞는 주소를 정확하게 가져오기는 힘들거란 생각은 듭니다.

https://devtalk.kakao.com/t/topic/68430/2