[개요]
올해는 더 이상 프로젝트를 진행하지 않을 줄 알았는데 거짓말처럼 새로운 과제가 생겼습니다.
이번에는 지도 기반 프로젝트를 진행해야 하기 때문에 도로명주소 OpenApi를 연동했어야 하는데 검색해본 결과 저처럼 Thymeleaf와 SpringBoot 환경에서 연동한 게시물이 없는 것처럼 보여 간단한 샘플 코드를 공유하고자 합니다.
(사실 사이트에서 제공하는 JSP 파일을 남들처럼 그대로 적용해도 되지만 현재 프로젝트 환경이 thymeleaf를 사용하는 환경이고 타임리프와 JSP를 동시에 사용하기 위해서는 환경설정을 손봐야했기 때문에 아래와 같이 코드를 작성했습니다.)
먼저, 도로명주소 OpenApi를 사용하기 위해서는 도로명주소 개발자센터로 가서 API를 신청해야합니다.
API를 신청 완료하면 키(confmKey)를 발급받을 것이고 해당 키가 있어야만 API를 성공적으로 호출할 수 있습니다!
저는 지도에 뿌릴 좌표가 필요했기 때문에 좌표 제공 API 내 좌표 팝업 API를 신청했고, 사이트에서 JSP/ASP/PHP 코드에 대해 가이드도 제공하므로 참고해보시는 것을 추천드립니다.
저 같은 경우 타임리프 + 스프링 부트 환경에서 개발하고 있기 때문에 JSP 가이드를 다운로드하여서 참고했습니다.
[알고리즘]
제가 궁극적으로 원하는 플로우는 아래와 같았습니다.
1. 메인페이지(index.html)에서 주소 검색 버튼을 클릭을 하면 팝업으로 사이트에서 제공하는 좌표 팝업 API가 뜨고
2. 팝업에서 주소 검색을 한 뒤 [주소 입력] 버튼을 클릭하면 X좌표와 Y좌표를 지도페이지에 뿌려줍니다.
2.1 [주소입력] 버튼을 누름과 동시에 팝업창은 닫힌다.
[코드]
index.html (메인 페이지)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<title>메인 페이지</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="../css/addrlinkSample.css">
<sript src="../js/jquery.min.js></script>
<script>
var pop;
function goPopup() {
pop = window.open("/jusoPopup", "pop", "width=570, height=420, scrollbars=yes");
}
function jusoCallBack(entX, entY) {
var form = $('<form></form>');
form.attr('action', '/map');
form.attr('method', 'post');
form.appendTo('body');
form.append($('<input type="hidden" value="' + entX + '" name=entX>'));
form.append($('<input type="hidden" value="' + entY + '" name=entY>'));
form.submit();
pop.close();
}
</script>
</head>
<body>
<button onclick="goPopup();">도로명주소 호출해보기</button>
</body>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ko" xmlns:th="http://www.thymeleaf.org"> | |
| <head> | |
| <title>메인 페이지</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> | |
| <link type="text/css" rel="stylesheet" href="../css/addrlinkSample.css"> | |
| <sript src="../js/jquery.min.js></script> | |
| <script> | |
| var pop; | |
| function goPopup() { | |
| pop = window.open("/jusoPopup", "pop", "width=570, height=420, scrollbars=yes"); | |
| } | |
| function jusoCallBack(entX, entY) { | |
| var form = $('<form></form>'); | |
| form.attr('action', '/map'); | |
| form.attr('method', 'post'); | |
| form.appendTo('body'); | |
| form.append($('<input type="hidden" value="' + entX + '" name=entX>')); | |
| form.append($('<input type="hidden" value="' + entY + '" name=entY>')); | |
| form.submit(); | |
| pop.close(); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <button onclick="goPopup();">도로명주소 호출해보기</button> | |
| </body> |
jusoPopup.html (팝업으로 띄워줄 좌표팝업API)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<title>좌표팝업API</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="../css/addrlinkSample.css">
<sript src="../js/jquery.min.js></script>
<script>
function init() {
var url = location.href;
var confmKey = %("input[name=confmKey]").val();
var resultType = "4";
var inputYn = $("input[name=inputYn]").val();
if (inputYn != "Y") {
document.form.confmKey.value = confmKey;
document.form.returnUrl.value = url;
document.form.resultType.value = resultType;
document.form.action = "https://www.juso.go.kr/addrlink/addrCoordUrl.do";
document.form.submit();
} else {
opener.jusoCallBack($("input[name=entX]").val(), $("input[name=entY]").val());
}
};
</script>
</head>
<body onload="init();">
<form id="form" name="form" method="post">
<input type="hidden" id="confmKey" name="confmKey" th:value="${confmKey}"/>
<input type="hidden" id="returnUrl" name="returnUrl" value=""/>
<input type="hidden" id="resultType" name="resultType" value=""/>
</form>
<input type="hidden" id="inputYn" name="inputYn" th:value="${inputYn}"/>
<input type="hidden" id="entX" name="entX" th:value="${entX}"/>
<input type="hidden" id="entY" name="entY" th:value="${entY}"/>
</body>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ko" xmlns:th="http://www.thymeleaf.org"> | |
| <head> | |
| <title>좌표팝업API</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> | |
| <link type="text/css" rel="stylesheet" href="../css/addrlinkSample.css"> | |
| <sript src="../js/jquery.min.js></script> | |
| <script> | |
| function init() { | |
| var url = location.href; | |
| var confmKey = %("input[name=confmKey]").val(); | |
| var resultType = "4"; | |
| var inputYn = $("input[name=inputYn]").val(); | |
| if (inputYn != "Y") { | |
| document.form.confmKey.value = confmKey; | |
| document.form.returnUrl.value = url; | |
| document.form.resultType.value = resultType; | |
| document.form.action = "https://www.juso.go.kr/addrlink/addrCoordUrl.do"; | |
| document.form.submit(); | |
| } else { | |
| opener.jusoCallBack($("input[name=entX]").val(), $("input[name=entY]").val()); | |
| } | |
| }; | |
| </script> | |
| </head> | |
| <body onload="init();"> | |
| <form id="form" name="form" method="post"> | |
| <input type="hidden" id="confmKey" name="confmKey" th:value="${confmKey}"/> | |
| <input type="hidden" id="returnUrl" name="returnUrl" value=""/> | |
| <input type="hidden" id="resultType" name="resultType" value=""/> | |
| </form> | |
| <input type="hidden" id="inputYn" name="inputYn" th:value="${inputYn}"/> | |
| <input type="hidden" id="entX" name="entX" th:value="${entX}"/> | |
| <input type="hidden" id="entY" name="entY" th:value="${entY}"/> | |
| </body> |
SampleController.java (request를 처리해줄 컨트롤러)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Slf4j
@Controller
public class SampleController {
@RequestMapping(value = {"/jusoPopup"})
public String jusoPopup(HttpServletRequest request, Model model) {
String inputYn = request.getParameter("inputYn");
String roadFullAddr = request.getParameter("roadFullAddr");
String roadAddrPart1 = request.getParameter("roadAddrPart1");
String roadAddrPart2 = request.getParameter("roadAddrPart2");
String engAddr = request.getParameter("engAddr");
String jibunAddr = request.getParameter("jibunAddr");
String zipNo = request.getParameter("zipNo");
String addrDetail = request.getParameter("addrDetail");
String admCd = request.getParameter("admCd");
String rnMgtSn = request.getParameter("rnMgtSn");
String bdMgtSn = request.getParameter("bdMgtSn");
String entX = request.getParameter("entX");
String entY = request.getParaemter("entY");
log.debug("▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶ inputYn: {}"
+ ", roadFullAddr: {}"
+ ", roadAddrPart1: {}"
+ ", roadAddrPart2: {}"
+ ", engAddr: {}"
+ ", jibunAddr: {}"
+ ", zipNo: {}"
+ ", addrDetail: {}"
+ ", admCd: {}"
+ ", rnMgtSn: {}"
+ ", bdMgtSn: {}"
+ ", entX: {}"
+ ", entY: {}", inputYn, roadFullAddr, roadAddrPart1, roadAddrPart2, engAddr, jibunAddr
, zipNo, addrDetail, admCd, rnMgtSn, bdMgtSn, entX, entY);
String confmKey = "발급받은 키";
model.addAttribute("confmKey", confmKey);
model.addAttribute("inputYn", inputYn);
model.addAttribute("entX", entX);
model.addAttribute("entY", entY);
return "jusoPopup";
}
@RequestMapping(value = {"/index"})
public String index() {
return "index";
}
@RequestMapping(value = {"/map"})
public String ktMap(@ModelAttribute CoordAjaxReq coordAjaxReq, Model model) {
model.addAttribute("entX", coordAjaxReq.getEntX());
model.addAttribute("entY", coordAjaxReq.getEntY());
return "map";
}
}
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @Slf4j | |
| @Controller | |
| public class SampleController { | |
| @RequestMapping(value = {"/jusoPopup"}) | |
| public String jusoPopup(HttpServletRequest request, Model model) { | |
| String inputYn = request.getParameter("inputYn"); | |
| String roadFullAddr = request.getParameter("roadFullAddr"); | |
| String roadAddrPart1 = request.getParameter("roadAddrPart1"); | |
| String roadAddrPart2 = request.getParameter("roadAddrPart2"); | |
| String engAddr = request.getParameter("engAddr"); | |
| String jibunAddr = request.getParameter("jibunAddr"); | |
| String zipNo = request.getParameter("zipNo"); | |
| String addrDetail = request.getParameter("addrDetail"); | |
| String admCd = request.getParameter("admCd"); | |
| String rnMgtSn = request.getParameter("rnMgtSn"); | |
| String bdMgtSn = request.getParameter("bdMgtSn"); | |
| String entX = request.getParameter("entX"); | |
| String entY = request.getParaemter("entY"); | |
| log.debug("▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶ inputYn: {}" | |
| + ", roadFullAddr: {}" | |
| + ", roadAddrPart1: {}" | |
| + ", roadAddrPart2: {}" | |
| + ", engAddr: {}" | |
| + ", jibunAddr: {}" | |
| + ", zipNo: {}" | |
| + ", addrDetail: {}" | |
| + ", admCd: {}" | |
| + ", rnMgtSn: {}" | |
| + ", bdMgtSn: {}" | |
| + ", entX: {}" | |
| + ", entY: {}", inputYn, roadFullAddr, roadAddrPart1, roadAddrPart2, engAddr, jibunAddr | |
| , zipNo, addrDetail, admCd, rnMgtSn, bdMgtSn, entX, entY); | |
| String confmKey = "발급받은 키"; | |
| model.addAttribute("confmKey", confmKey); | |
| model.addAttribute("inputYn", inputYn); | |
| model.addAttribute("entX", entX); | |
| model.addAttribute("entY", entY); | |
| return "jusoPopup"; | |
| } | |
| @RequestMapping(value = {"/index"}) | |
| public String index() { | |
| return "index"; | |
| } | |
| @RequestMapping(value = {"/map"}) | |
| public String ktMap(@ModelAttribute CoordAjaxReq coordAjaxReq, Model model) { | |
| model.addAttribute("entX", coordAjaxReq.getEntX()); | |
| model.addAttribute("entY", coordAjaxReq.getEntY()); | |
| return "map"; | |
| } | |
| } |
지적, 조언, 질문 환영입니다! 댓글 남겨주세요~
반응형
'[DEV] 기록' 카테고리의 다른 글
| 제 39회 SQLD 합격 후기 (0) | 2020.12.31 |
|---|---|
| [SpringBoot] There is no PasswordEncoder mapped for the id "null" (0) | 2020.12.15 |
| SpringBoot) Redis namespace 변경하는 방법 (0) | 2020.09.18 |
| Eclipse) The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path (0) | 2020.09.16 |
| 크롬 브라우저 HSTS 제거하는 방법 (0) | 2020.09.15 |