JS 주소 찾기, geocoding

강정우·2023년 10월 11일

JavaScript

프로젝트

목록 보기

9/11

개요

이번 프로젝트에서 여러 단말들의 위치를 정확히 저장할 수 있도록 하는 기능이 포함되어있었다.
이때 사실 사용자가 설치 위,경도를 외우는 일을 없을 것이다.
그래서 그냥 주소를 입력하면 해당 주소의 중앙값을 자동으로 저장하고 또 더 정확한 정보가 있거나 원하는 지역이 있다면 수동으로도 입력할 수 있도록 설정하였다.

주소 찾기

간단한 로직은 설명을 생략하겠다.
우선 단말 추가 모달을 클릭하면 설치 지역을 클릭하여 주소찾기 시스템 모달을 열도록 한다.

검색 후 해당 지역을 더블클릭하면 팝업이 꺼지면서 해당 주소 이름을 넣고 좌표를 얻어오는 로직을 fetch, axios로 돌려서 값을 저장한다.

주소기반 산업지원 서비스 선택이유

우선 내가 사용한 사이트는 주소기반산업지원서비스이다. 우리가 흔히 아는 다음 카카오의 주소찾기 서비스도 있지만 무엇보다 api를 우선적으로 찾다보니 매우 간편하게 사용할 수 있는 api라 다음 카카오의 주소찾기 대신 해당 사이트를 이용하게 되었다.
또 추가적인 로그인이 필요없고 질의를 남기면 전화로 바로바로 응대해주기 때문에 조금 부담스럽지만 좋긴하다.
나는 일단 인터넷망과 개발키로 받았고 나중에 프로덕션으로 넣을 땐 따로 운영키로 발급받아서 넣어주는 것이 좋다.

검색 API VS 팝업 API

추가적으로 팝업 API, 검색 API 가 있는데 팝업 API는 다음 카카오와 같은 주소 API 처럼 팝업으로 찾는 것이고 검색 API는 팝업 API 에서 검색하는 기능 API만 제공하는 API이다.
나는 UI의 일관성을 헤치는 것을 매우 싫어해서 검색 API를 사용하여 UI의 일관성을 더했다.

예제 코드

const getJuso = async(curPageIndex:number, inputData:string, pageSize:number=countPerPage.value)=> {
        try{
            const {data} = await axios.get(`https://business.juso.go.kr/addrlink/addrLinkApi.do?confmKey=${key}&currentPage=${curPageIndex}&countPerPage=${pageSize}&keyword=${inputData}&resultType=json`);
            totalPage.value = Math.ceil(data.results.common.totalCount / countPerPage.value);
            jusoResultList.value = data.results.juso
        } catch (e) {
            if(e instanceof AxiosError){
                const errorObj = new Error(exceptionHandler(e.response!.status).text);
                throw errorObj
            }
        }
    }

주소를 토대로 좌표 찾기

우선 주소를 갖고 좌표를 찾는 것을 geocoding(지오코딩) 이라고 하는데 이 지오코딩을 제공하는 여러 서비스를 먼저 알아보자.

1. SGIS 통계지리정보 개발지원센터

홈페이지

지도 API중 하나
단점 : 토큰를 자주 갱신, 좌표 타입이 UTM-K 임

2. Google Maps Geocoding API

장점 : 검색 아무렇게(뒤에 괄호붙이고 대충써도)나 해도 엄청 디테일하게 잘 나옴.
단점 : 구글 클라우드 프로젝트 해야함 조그마한 기능을 사용하기 위해 너무 무거운 거 도입.

3. Naver Maps Geocoding API (네이버 지도 지오코딩 API)

단점 : 특정 횟수 이상 유료

4. OpenStreetMap Nominatim

장점 : 위 주소를 가져오는것 처럼 API로 쉽고 빠르게 가져올 수 있음, 별도의 key 없이 사용가능
단점 : 리버스 지오 코딩은 그럭저럭 괜찮지만 지오코딩은 정확도가 한국은 현저히 떨어짐

5. Kakao Maps Geocoding API (카카오맵 지오코딩 API)

장점 : 토큰 갱신 필요 X, 프로젝트 생성 필요하긴 한데 매우 간단함 5초 컷, 완전 무료, 한국꺼 지원 개쩜, dev talk이라고 질문 커뮤니티도 엄청 잘 되어있음.
단점 : 없음.

그냥 갓카오꺼 쓰면 됨. docs도 매우 친절함 한국어로 적혀있는거 기준 제일 친절한 듯.

예제 코드

const getGeoCoding = async(addrsData:string): Promise<{lon: string, lat: string}> => {
  try{
    const getGeoCodingReq = axios.create({
      baseURL : 'https://dapi.kakao.com/v2/local/search/address.json',
      headers:{
        'Authorization':'KakaoAK {본인 REST API KEY}',
      }
    });
    const payload = {
      analyze_type:'similar', // or exact
      query:addrsData,
      page:'1',  // page, size로 페이징 처리
      size:'10'
    }
    const {data} = await getGeoCodingReq.get('', {params:payload});
    return {lon:data.documents[0].x ?? '0', lat:data.documents[0].y ?? '0'}
  } catch (e) {
    if(e instanceof AxiosError){
      const errorObj = new Error(exceptionHandler(e.response!.status).text);
      throw errorObj
    }
  }
}