Tempo Di Valse

[JS] Daum 우편번호찾기를 이용한 위,경도 좌표 구하기 본문

개발/Web

[JS] Daum 우편번호찾기를 이용한 위,경도 좌표 구하기

TempoDiValse 2022. 2. 8. 12:50

이번엔 Daum에서 제공하는 우편번호찾기 API와 위,경도 API를 활용하여 해당 주소에 따른 위,경도를 구하는 방법에 대해 알아보려고 한다.

 

먼저 많은 사이트들이 사용한다는 "Daum 우편번호찾기"를 설치해보도록 한다.

 

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.daum.net

해당 주소 서비스는 Key도, 금전도 필요하지 않은 완전 오픈된 서비스이기 때문에 JS만 Import 시켜서 사용하면 되는 것이다. 보통은 페이지에 붙어있는 것 처럼 만들지는 않고 팝업 형식으로 불러왔다가 접어버리기 때문에 해당 페이지도 팝업 형식으로 구성해보도록 한다.

 

팝업 형식이라고 해서 다른 건 없다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <title>우편번호찾기</title>
    <style>
        body { margin:0; padding:0 }
    </style>
</head>
<body id="postcode">
</body>
</html>

 

준비가 끝났다.

모바일에서도 사용할 수 있는 환경을 만들어주기 위해서는 viewport 메타는 필수이기 때문에 추가도 해줬다.

 

이제 <body>태그 하단에 우편번호 라이브러리를 불러올 수 있도록 스크립트 소스를 Import 한다

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
 

소스타겟은 "Daum 우편번호 서비스 사용 가이드" 홈페이지에 최신 것도 업데이트 되어있으니, 웬만하면 지금 디렉션 보다는 업데이트 된 소스를 사용해 보는 것을 권장한다. (어차피 똑같다)

 

자 이렇게 소스를 Import한 것으로 우편번호UI를 열 수 있느냐, 그건 아니다. 이 다음 줄에 스크립트를 짜보도록한다

<script type="application/javascript">
    new daum.Postcode({
        oncomplete: function(data) {
            // 다 끝나고 받는 데이터
        },
        width: "100%",
        height: window.innerHeight
    }).embed("#postcode");
</script>
 

해당 소스까지 짜 놔야 우편번호UI를 불러올 수 있다. 사용가이드에서는 open이라는 메소드를 쓰는 것으로 되었지만 open 메소드는 팝업창을 여는 메소드이고, 나는 따로 외적으로 커스터마이즈해야 하기 때문에 embed 함수를 사용하게 되었다. embed를 사용하면 지정된 부분에 우편번호UI를 박아 넣을 수 있도록 되어있다. Selector 형식이기 때문에 원하는 곳에 id나 name 지정하고 사용하면 될 것 같다.

 

여기까지 우편번호 값을 가져오는 것은 완료가 되었다. 하지만 위/경도를 가져오는 것이 목표이기 때문에 이야기를 더 끌어보도록 하자.

 

우편번호 API에서는 우편번호 뿐만 아니라 도로교통법상 주소, 영문표기된 주소 등 쓸모없는 데이터들도 같이 오게 되는데 여기서 필요한 값은, "한글주소" 값이다. Callback되어 오는 값은 JSON이기 때문에 값 중에서 "address" 로 되어있는 값만 가지고 있으면 된다.

 

이 한글주소 값으로 어떻게 위/경도를 찾을 수 있냐 한다면, Daum에서 제공하는 지도 API 중에 Geocoder API를 사용하는 것이다.

 

https://apis.map.kakao.com/web/guide/

 

Daum 지도 API의 경우에는 우편번호찾기와는 다르게 Key를 필수로 하는 API이기 때문에 해당 사이드의 가이드 대로 Key를 미리 발급하도록 하고, 발급받은 Key를 소스에 적용하도록한다

<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey={APP_KEY}&libraries=services"></script>
 

해당 스크립트는 우편번호 로드 스크립트 아래에 쓰면 되고, {APP_KEY} 라고 써있는 부분에 발급 받은 Key 값을 적어놓으면 된다.

 

그 다음에는 우편번호 API Callback을 변경해보도록 한다.

 

순서는 보이다시피 address 값을 Geocoder API의 addressSearch를 통해 결과 값을 얻는 것이다. 왔다갔다하는 통신이 많기 때문에 Promise 처리를 하여 동기적으로 절차를 밟을 수 있도록 짰으며 result 내에서 위, 경도 값을 뽑아낼 수 있게 된다.

 

반응형
저작자표시 비영리 변경금지

'개발 > Web' 카테고리의 다른 글

[Vue.js] 커스텀 Checkbox 만들어보기  (0) 2022.02.17
[Webpack] JS 내용을 HTML 에 Inline 으로 넣어보자 (InlineChunkHtmlPlugin)  (0) 2022.02.16
[JS] A태그 내에서 Javascript 의 encodeURIComponent 사용 문제  (0) 2022.02.15
[PHP] 위/경도를 이용한 거리 계산  (0) 2022.02.08
[CSS] Safari 에서 Rotate Animation 을 심을 때의 주의점  (0) 2022.01.26
'개발/Web' Related Articles more
Comments