전자정부프레임워크 우편번호 다음 open api 연계

전자정부프레임워크 3.5 all-in-one 템플릿 로 사이트를 개발하는데 회원가입시 우편번호를 찾으려 하니 데이터가 없네요.. 

우체국 사이트 https://www.epost.go.kr/search/zipcode/areacdAddressDown.jsp 에 가서 데이터를 받으니 1기가나 되네요

이거로 넣는 방법을 전자정부에서는 가이드 하고 있어요 http://www.egovframe.go.kr/wiki/doku.php?id=egovframework:%EC%9A%B0%ED%8E%B8%EB%B2%88%ED%98%B8%EA%B4%80%EB%A6%AC

요기 중간에 엑셀 양식도 있는데 1기가를 컨버팅 하는건.. 쫌

고민하다 Open API 제공이 많으니 제공되는곳을 찾앗어요

우체국도 제공하는데 키도 발급받아야하고 이것저것 귀찮은데

다음에서 굉장히 편하게 제공을 하더라구요

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

저는 여기서 제공하는 것중 3번째 "frame을 이용하여 페이지에 끼워 넣기" 를 적용했습니다

EgovMberSbscrb.jsp 파일에서

1. script 파일 추가

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

2. 복붙한 코드 추가 <script> ~ </script>

// 우편번호 찾기 찾기 화면을 넣을 element
var element_wrap = document.getElementById('wrap');

function foldDaumPostcode() {
    // iframe을 넣은 element를 안보이게 한다.
    element_wrap.style.display = 'none';
}

function execDaumPostcode(zip, zip_view, adres) {
    // 현재 scroll 위치를 저장해놓는다.
    var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
    new daum.Postcode({
        oncomplete: function(data) {
            // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

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

            // 기본 주소가 도로명 타입일때 조합한다.
            if(data.addressType === 'R'){
                //법정동명이 있을 경우 추가한다.
                if(data.bname !== ''){
                    extraAddr += data.bname;
                }
                // 건물명이 있을 경우 추가한다.
                if(data.buildingName !== ''){
                    extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
                fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
            }

            // 우편번호와 주소 정보를 해당 필드에 넣는다.
            zip.value = data.zonecode; //5자리 새우편번호 사용
            zip_view.value = data.zonecode;
            adres.value = fullAddr;

            // iframe을 넣은 element를 안보이게 한다.
            // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
            element_wrap.style.display = 'none';

            // 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다.
            document.body.scrollTop = currentScroll;
        },
        // 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다.
        onresize : function(size) {
            element_wrap.style.height = size.height+'px';
        },
        width : '100%',
        height : '100%'
    }).embed(element_wrap);

    // iframe을 넣은 element를 보이게 한다.
    element_wrap.style.display = 'block';
}

3. html 부분 추가 (우편주소 검색) 다음 라인에 tr부터 추가

<tr>
    <th width="20%" height="23" class="required_text" nowrap >
    </th>
    <td width="80%" nowrap>
        <div id="wrap" style="display:none;border:1px solid;width:100%;height:300px;margin:5px 0;position:relative">
            <img src="//i1.daumcdn.net/localimg/localimages/07/postcode/320/close.png" id="btnFoldWrap" style="cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1" onclick="foldDaumPostcode()" alt="접기 버튼">
        </div>
    </td>
</tr>

4. 완성!!