다음 카카오 주소 API 사용법 😀feat.완전쉬움주의!!😀

오늘은 회원가입이나 쇼핑몰 사이트를 만들 때 주로 필수 적인 

다음 카카오에서 제공하는 API를 이용하여 주소를 등록해보려고 한다. 

 

---

1. 우편번호 사이트로 이동

 

https://postcode.map.daum.net/guide

Daum 우편번호 서비스

🤬물론 도로명개발자 센터에서 제공하는 API가 있지만 실제로 사용해보면 🤬

다음 주소가 훨씬 많이 쓰이고 쓰기가 편하다.

 

카카오 주소 제공

 

---

2. 사용법

 

JS API의 최신화는 업데이트시마다 자동으로 되고 있습니다.
JS API호출시 도메인 뒤에 특정 파라미터의 경우엔 가이드페이지(아래 기본사용법)에서 정의하고 있는 특정 파라미터 외엔 허용하지 않습니다.
이외 더미 파라미터와 같은 데이터를 붙혀서 로딩하실 경우, 스크립트 호출이 거부 될수 있으니 삭제 부탁드립니다.
ex) ?_=XXXXXX, ?t=5469821879 등등

 

- 허용하는 파라미터
1. 통합로딩방식 : 없음
2. (구)로딩방식 : autoload=false
ㄴ ex) https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js?autoload=false
ㄴ ex) http://dmaps.daum.net/map_js_init/postcode.v2.js?autoload=false

 

한번 읽어 주자 

 

2-1 통합 로딩방식

 

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

위와 같은 로딩 url을 서비스할 view 파일 (PHP, JSP)파일에 body 하단 부분에 넣어주자

 

 

2-2 이제 어떤 방식으로 할지 고르자

 

팝업을 이용하여 도로명 주소와 지번 주소 모두 보여주기

기본적인 팝업을 이용하여 사용자가 선택한 주소의 도로명 주소와 지번 주소를 모두 보여주는 방식입니다. 아래 '우편번호 찾기' 버튼을 클릭해서 바로 확인해보세요. (몇몇 Webview기반 브라우저의 window.open 미대응으로 인하여, Webview기반 서비스에 적용시 embed()를 이용한 레이어모드를 추천합니다.)

 

   

사용자가 선택한 값 이용하기

우편번호와 주소필드에 사용자가 선택한 주소 값을 채워 넣는 방식입니다.
단, 사용자가 선택한 값을 이용할 경우 영문주소와 정확히 매칭되지 않을 수 있습니다. 영문주소는 기본주소(address)에 해당하는 영문 주소가 내려갑니다. 예제 코드보기

 

 

iframe을 이용하여 레이어 띄우기

모바일웹에서는 팝업을 띄우는게 부담스러울 수도 있으니, 아래 코드와 같이 특정 element에 크기를 지정하여 iframe으로 끼워넣는 방식을 이용할 수도 있습니다. 아래 '우편번호 찾기' 버튼을 클릭해서 바로 확인해보세요.
(현재 iOS 8.x 이상, Safari, webview 브라우저에서 position:fixed, inner-scroll 이용시 가상키보드 터치 불량 및 스크롤이 멈추는 현상이 간혈적으로 발생하고 있습니다. 이점 참고해 주시기 바라며, 모바일 환경에서는 가급적 아래의 "페이지에 끼워넣기" 예제를 참고하시는 것을 추천드립니다.)
예제 코드보기

 

 

iframe을 이용하여 페이지에 끼워 넣기

화면내에 끼워넣는 방식일 경우, 내부 스크롤이 거슬릴수도 있습니다. 이때 onresize 속성을 추가해서 iframe 높이를 조절하면 스크롤이 생기지 않습니다. 아래 '우편번호 찾기' 버튼을 클릭해서 바로 확인해보세요. 예제 코드보기

 

 

주소를 선택하면 지도도 함께 보여주기

다음 지도 API를 함께 활용하여 선택한 주소에 대한 좌표를 가져와서 지도에 표시하는 예제입니다. 아래 '주소 검색' 버튼을 클릭해서 바로 확인해보세요.
다음 지도 API를 이용하시려면 https://developers.kakao.com에서 API Key를 발급받으셔야 합니다. 예제 코드보기

 

 

2-3 골랏다면 적용 해보자!

 

나는 제일 깔끔한

사용자가 선택한 값 이용하기

을 사용하기로 했다 

 

<input type="text" id="sample6_postcode" placeholder="우편번호">
<input type="button" onclick="sample6_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample6_address" placeholder="주소"><br>
<input type="text" id="sample6_detailAddress" placeholder="상세주소">
<input type="text" id="sample6_extraAddress" placeholder="참고항목">

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    function sample6_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var addr = ''; // 주소 변수
                var extraAddr = ''; // 참고항목 변수

                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                }

                // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
                if(data.userSelectedType === 'R'){
                    // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                    // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                    if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                        extraAddr += data.bname;
                    }
                    // 건물명이 있고, 공동주택일 경우 추가한다.
                    if(data.buildingName !== '' && data.apartment === 'Y'){
                        extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                    }
                    // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                    if(extraAddr !== ''){
                        extraAddr = ' (' + extraAddr + ')';
                    }
                    // 조합된 참고항목을 해당 필드에 넣는다.
                    document.getElementById("sample6_extraAddress").value = extraAddr;
                
                } else {
                    document.getElementById("sample6_extraAddress").value = '';
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('sample6_postcode').value = data.zonecode;
                document.getElementById("sample6_address").value = addr;
                // 커서를 상세주소 필드로 이동한다.
                document.getElementById("sample6_detailAddress").focus();
            }
        }).open();
    }
</script>

카카오는 참 친절하다. 

 

혹시 모를까 변수명까지 다 정해주고 html도 다 붙혀서 준다. 

이거 그대로 복사해서 html은 html대로 

js는 js대로 붙혀 넣어 주면 끝난다. 

 

정말 간단하지 않을가.. 

 

😻I Love kakao 😻

 

 

---

https://github.com/MoonSeokHyun/spring/blob/master/MyWeb/src/main/webapp/WEB-INF/views/user/userJoin.jsp

GitHub - MoonSeokHyun/spring

 

적용한 코드이다. 한번 참조 해보길~