이번엔 주소 공식 홈페이지에서 제공하는 기능을 api로써 사용을 해볼것이다.
기능 : 주소검색 팝업창 사용.
https://www.juso.go.kr/addrlink/main.do?cPath=99MM
도로명주소 개발자센터
www.juso.go.kr
먼저 이곳에 들어가서 본인의 API를 별도로 신청해야 한다.
신청이 완료되면 본인의 승인키가 부여될 것 이다.
도로명주소 API를 사용하기위해 소스를 다운 받을것이다.
팝업 API >> 가이드 및 소스 다운로드(jsp)
검색API >> 가이드 및 소스 다운로드
압축을 풀어보면 guidePopupApiJsp안에 sample.jsp와 jusoPopup.jsp 이렇게 두 가지가 있을 것이다.
해당 두 파일을
WebContent밑에 넣어두고
sample.jsp를 통해 어떤식으로 구동이 되고 제대로 동작하는지 테스트 해 볼 수 있다.
팝업이 어떻게 동작하는지 테스트
검색이 어떻게 동작하는지 테스트(고유키 입력해야함)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <script type="text/JavaScript" src="/js/jquery-1.8.3.min.js" ></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script language="javascript">
function getAddr(){
// 적용예 (api 호출 전에 검색어 체크)
if (!checkSearchedWord(document.form.keyword)) {
return ;
}
$.ajax({
url :"https://www.juso.go.kr/addrlink/addrLinkApiJsonp.do" //인터넷망
,type:"post"
,data:$("#form").serialize()
,dataType:"jsonp" // json padding
,crossDomain:true
,success:function(jsonStr){
console.log(jsonStr);
$("#list").html("");
var errCode = jsonStr.results.common.errorCode;
var errDesc = jsonStr.results.common.errorMessage;
if(errCode != "0"){
alert(errCode+"="+errDesc);
}else{
if(jsonStr != null){
makeListJson(jsonStr);
}
}
}
,error: function(xhr,status, error){
console.log(xhr);
alert("에러발생");
}
});
}
function makeListJson(jsonStr){
var htmlStr = "";
htmlStr += "<table>";
$(jsonStr.results.juso).each(function(){
htmlStr += "<tr>";
htmlStr += "<td>"+this.roadAddr+"</td>";
htmlStr += "<td>"+this.roadAddrPart1+"</td>";
htmlStr += "<td>"+this.roadAddrPart2+"</td>";
htmlStr += "<td>"+this.jibunAddr+"</td>";
htmlStr += "<td>"+this.engAddr+"</td>";
htmlStr += "<td>"+this.zipNo+"</td>";
htmlStr += "<td>"+this.admCd+"</td>";
htmlStr += "<td>"+this.rnMgtSn+"</td>";
htmlStr += "<td>"+this.bdMgtSn+"</td>";
htmlStr += "<td>"+this.detBdNmList+"</td>";
/** API 서비스 제공항목 확대 (2017.02) **/
htmlStr += "<td>"+this.bdNm+"</td>";
htmlStr += "<td>"+this.bdKdcd+"</td>";
htmlStr += "<td>"+this.siNm+"</td>";
htmlStr += "<td>"+this.sggNm+"</td>";
htmlStr += "<td>"+this.emdNm+"</td>";
htmlStr += "<td>"+this.liNm+"</td>";
htmlStr += "<td>"+this.rn+"</td>";
htmlStr += "<td>"+this.udrtYn+"</td>";
htmlStr += "<td>"+this.buldMnnm+"</td>";
htmlStr += "<td>"+this.buldSlno+"</td>";
htmlStr += "<td>"+this.mtYn+"</td>";
htmlStr += "<td>"+this.lnbrMnnm+"</td>";
htmlStr += "<td>"+this.lnbrSlno+"</td>";
htmlStr += "<td>"+this.emdNo+"</td>";
htmlStr += "</tr>";
});
htmlStr += "</table>";
$("#list").html(htmlStr);
}
//특수문자, 특정문자열(sql예약어의 앞뒤공백포함) 제거
function checkSearchedWord(obj){
if(obj.value.length >0){
//특수문자 제거
var expText = /[%=><]/ ;
if(expText.test(obj.value) == true){
alert("특수문자를 입력 할수 없습니다.") ;
obj.value = obj.value.split(expText).join("");
return false;
}
//특정문자열(sql예약어의 앞뒤공백포함) 제거
var sqlArray = new Array(
//sql 예약어
"OR", "SELECT", "INSERT", "DELETE", "UPDATE", "CREATE", "DROP", "EXEC",
"UNION", "FETCH", "DECLARE", "TRUNCATE"
);
var regex;
for(var i=0; i<sqlArray.length; i++){
regex = new RegExp( sqlArray[i] ,"gi") ;
if (regex.test(obj.value) ) {
alert("\"" + sqlArray[i]+"\"와(과) 같은 특정문자로 검색할 수 없습니다.");
obj.value =obj.value.replace(regex, "");
return false;
}
}
}
return true ;
}
function enterSearch() {
var evt_code = (window.netscape) ? ev.which : event.keyCode;
if (evt_code == 13) {
event.keyCode = 0;
getAddr(); //jsonp사용시 enter검색
}
}
</script>
<title>Insert title here</title>
</head>
<body>
<form name="form" id="form" method="post">
<input type="text" name="currentPage" value="1"/> <!-- 요청 변수 설정 (현재 페이지. currentPage : n > 0) -->
<input type="text" name="countPerPage" value="10"/><!-- 요청 변수 설정 (페이지당 출력 개수. countPerPage 범위 : 0 < n <= 100) -->
<input type="text" name="resultType" value="json"/> <!-- 요청 변수 설정 (검색결과형식 설정, json) -->
<input type="text" name="confmKey" value="부여받은 고유키 입력"/><!-- 요청 변수 설정 (승인키) -->
<input type="text" name="keyword" value="" onkeydown="enterSearch();"/><!-- 요청 변수 설정 (키워드) -->
<input type="button" onClick="getAddr();" value="주소검색하기"/>
<div id="list" ></div><!-- 검색 결과 리스트 출력 영역 -->
</form>
</body>
</html>고유키를 입력해주고 이제 테스트 해보겠다.
제대로 동작하는 것을 확인할 수 있다.
이 예제를 통해
회원가입기능을 구현할 때에
별도의 구현 없이 api를 통해 사용자의 주소를 입력받을 수 있어졌다.
반응형
'Library & API' 카테고리의 다른 글
| Hikari - 히카리 커넥션 풀(Connection pool) 사용해보기 (0) | 2022.03.29 |
|---|---|
| jQuery - RSS(xml parsing)를 이용한 기사내용 크롤링하기 (0) | 2022.03.26 |
| 이메일 발송 (0) | 2022.03.26 |
| HTML parsing - 타 사이트 정보 가져와서 DB에 저장 (0) | 2022.03.26 |
| DOM(Document Object Model) - 문서 객체 모델 기초개념 (0) | 2022.03.25 |