[ExtJS강좌 27] 다음(DAUM) 우편번호(주소검색) 서비스 소개 + ExtJS를 이용하여 주소검색 해보기

이번 포스팅은 다음(Daum)에서 제공하는 주소검색에 대한 소개 및 샘플로 ExtJS를 활용한 주소 연동을 

해보고자 한다.

기존에는 juso.go.kr에서 제공하는 api를 이용하여 주소검색을 사용했었는데 ajax 호출이다보니 

간혹가다 응답값을 못받을 경우가 많았다.

다음에서 주소검색 서비스를 완전 심플하게 제공 해주는 희소식을 전하고자 한다.

영문주소 + 도로명주소 모두 제공함

유지보수도 할필요가 없단다 얼마나 좋은가!! 

다음 서비스 공식 블로그 URL

http://blog.daum.net/daummaps/565

연동가이드

HTTP URL

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

HTTPS URL

https://spi.maps.daum.net/postcode/guidessl

다음(DAUM) 주소검색 서비스 소개

웹사이트에서 주소를 입력받을 때 꼭 필요한 우편번호 검색 기능. 구현도 유지보수도 만만치 않으셨죠?
Daum 우편번호 서비스를 이용해 쉽고 간편하게 우편번호 검색, 주소 입력 기능을 만들어보세요. 

아무 제약 없이 누구나 사용할 수 있으며, 100% 무료입니다!

jQuery건 일반 html 태그건 ExtJS등등... 무얼 사용하던간에 전혀 영향을 받지 않기 때문에 

다음 두가지만 있으면 모든 페이지에서 사용이 가능하다.

1. JS파일 INCLUDE

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

2. 주소 호출 함수

function openDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
                //우편번호 첫번째
                document.getElementById('post1').value = data.postcode1;
                //우편번호 두번째
                document.getElementById('post2').value = data.postcode2;
                // 기본주소
                document.getElementById('addr').value = data.address;
               // data.addressEnglish; <<< 영문주소 값
            }
        }).open();
}

위 2가지만 있으면 주소연동은 끝난다.

자세한건 가이드URL를 통해서 적용해보도록...

본인은 2가지 ExtJS를 이용하여 2가지 방식(팝업/모달창)을 적용해보았다.

※ 단순하게 팝업을 띄워서 각 textfield 값에 값 넣어보기

1-1. JS/CSS 파일 INCLUDE

<link rel="stylesheet" type="text/css" href="/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"/>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<script src="http://dmaps.daum.net/map_js_init/postcode.js"></script>

1-2. 스크립트 코드

Ext.onReady(function(){
	Ext.create('Ext.form.Panel',{
		title : 'ExtJS를 활용한 우편번호검색 예제[팝업]',
	    renderTo : Ext.getBody(),
	    layout: 'vbox',
	    items : [
	    	{
	    		xtype : 'panel',
	    		layout: 'hbox',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 100,
	    		    id : 'zipcode1'
	    	    },{
	    		    xtype : 'label',
	    		    align : 'center',
	    		    text : '-'
	    	    },{
	    		    xtype : 'textfield',
	    		    width : 100,
	    		    id : 'zipcode2'
	    	    },{
	    	    	xtype : 'button',
	    	    	text : '우편번호찾기',
	    	    	handler : function(){
	    	    		openDaumPostcode();
	    	    	}
	    	    }]
	    	},
	    	{
	    		xtype : 'panel',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 430,
	    		    emptyText : '기본주소',
	    		    id : 'default_addr'
	    	    }]
	    	},
	    	{
	    		xtype : 'panel',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 430,
	    		    emptyText : '상세주소',
	    		    id : 'detail_addr'
	    	    }]
	    	} 
        ]
	    
	})
})
 function openDaumPostcode() {
     new daum.Postcode({
         oncomplete: function(data) {
             // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
             // 우편번호와 주소 정보를 해당 필드에 넣고, 커서를 상세주소 필드로 이동한다.
             Ext.getCmp("zipcode1").setValue(data.postcode1);
             Ext.getCmp("zipcode2").setValue(data.postcode2);
             Ext.getCmp("default_addr").setValue(data.address);
            // data.addressEnglish; <<< 영문주소 값
             Ext.getCmp("detail_addr").focus();
         }
     }).open();
 } 

1-3. 실행화면

이어서 모달창으로 주소검색 서비스를 사용해보도록 하자

※  다이얼로그창으로 주소검색 서비스 사용하기

아... 별거아니였는데  한시간 넘게 삽질했음... 

INCLUDE 파일은 동일함.

이코드는 스크립트 코드만 있으면 되겠음. 위의 코드에서 일부 수정한것이 전부임

2-1 JS 코드

Ext.onReady(function(){
	Ext.create('Ext.form.Panel',{
		title : 'ExtJS를 활용한 우편번호검색 예제[레이아웃팝업(모달)]',
	    renderTo : Ext.getBody(),
	    layout: 'vbox',
	    items : [
	    	{
	    		xtype : 'panel',
	    		layout: 'hbox',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 100,
	    		    id : 'zipcode1'
	    	    },{
	    		    xtype : 'label',
	    		    align : 'center',
	    		    text : '-'
	    	    },{
	    		    xtype : 'textfield',
	    		    width : 100,
	    		    id : 'zipcode2'
	    	    },{
	    	    	xtype : 'button',
	    	    	text : '우편번호찾기',
	    	    	handler : function(){
	    	    		var win = Ext.create("Ext.window.Window",{
	    	    			height:600,
	    	    			width:500,
	    	    			modal : true,
	    	    			autoShow : false,
	    	    			titleAlign : 'center',
	    	    			layout : 'fit',
	    	    			items : [{
	    	    	        	 xtype: 'component',
	    	    	        	 id : 'ext_address'
	    	    	         }]
	    	    		});
	    	    		
	    	            win.show(undefined,function(){
	    	            	new daum.Postcode({
	    	                    oncomplete: function(data) {
	    	                    	Ext.getCmp("zipcode1").setValue(data.postcode1);
	    	                        Ext.getCmp("zipcode2").setValue(data.postcode2);
	    	                        Ext.getCmp("default_addr").setValue(data.address);
                                       // data.addressEnglish; <<< 영문주소 값
	    	                        Ext.getCmp("detail_addr").focus();
	    	                    	win.destroy();
	    	                    },
	    	                    width : '100%',
	    	                    height : '100%'
	    	                }).embed(Ext.get('ext_address'));
	    	            });
	    	    	}
	    	    }]
	    	},
	    	{
	    		xtype : 'panel',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 430,
	    		    emptyText : '기본주소',
	    		    id : 'default_addr'
	    	    }]
	    	},
	    	{
	    		xtype : 'panel',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 430,
	    		    emptyText : '상세주소',
	    		    id : 'detail_addr'
	    	    }]
	    	} 
        ]
	})
})

2-2 실행화면

잘~~~ 나온다 

검색속도도 완전 만족!!!!

평점 : ★★★★★

단점 : 다음(DAUM) 서버 죽으면 답없음 ㅋㅋ

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!