API : 인터페이스라서 규칙대로 /a로 호출해 -> 이렇게 안 하면? 안 된다. xml이나 json을 파싱해서 사용함.
SDK : 주소를 때리는 프로그램 라이브러리를 만들어 준다. 어떤 함수를 만들어서 이 함수를 때리면 응답해 줌. 친절함. 웹의 지식 없어도 사용 가능
입력하고 신청하기 누르기
https://www.juso.go.kr/addrlink/addrLinkUrl.do?confmKey=인증키&returnUrl=MyURL
https://meyerweb.com/eric/tools/dencoder/
자바스크립트 자식 - 부모 관계
무엇을 처음 테스트 할 때 환경을 맞춰서 테스트 해야 한다
test)
context path 개념 잡기
라이브러리나 쓸 때는 환경을 똑같이 해서 써야 한다 -> 주소 API를 JSP 파일로 테스트 해 본다
도로명 주소 API를 블로그 프로젝트 (dbapp)에 붙이기
...
문제가 생기면 디버깅 하기
자바 먼저 컴파일
html 먼저 컴파일
그 다음 자바스크립트 컴파일
인터프리터(위에서부터 한 줄 씩 해석)
request.getParameter 기능이 안 된다. 왜?
- 메모리 scope 다시 공부 session requset ...
Model 다시 공부 EL표현식 다시 공부
난리났다
주소 API
// UserController.java
...
@GetMapping("/juso")
public String jusoRequest() {
return "/juso/jusoPopup";
}
// Model - Request.setAttribute
// request.getAttribute
// jsp 에서는 url로 가능한데 스프링은 uri로 받아야 해서 -> Controller -> 컨트롤러의 roadFullAddr -> 주소popUp.jsp -> request.setAttribute (=) Model
// Body에서 찾는 게 아니라 톰캣이 들고있는 request 객체에서 찾아야 함 -> EL표현식
@PostMapping("/juso")
public String jusoResponse(String roadFullAddr, String inputYn, Model model) {
System.out.println("주소: "+roadFullAddr);
model.addAttribute("roadFullAddr", roadFullAddr);
model.addAttribute("inputYn",inputYn);
return "/juso/jusoPopup"; // Controller 타고 파일에 가서 응답 두 번 함
}
...
/*
JSP는 url(http://.../jusoPopUp.jsp)을 써 바로 request.getParameter로 통신을 하지만 스프링은 uri("/jsuo")를 사용하여 Post로 Body를 받아오고 (www-x-form...) String inputYn으로 초기 input이 null인지 확인하고 Model을 사용하여 주소를 넣어서 /juso/jusoPopup으로 리턴한다. ( Model - Request.setAttribute)
jsp 에서는 url로 가능한데 / 스프링은 uri로 받아야 해서 -> Controller -> 컨트롤러의 roadFullAddr -> 주소popUp.jsp -> request.setAttribute (=) Model
// Body에서 찾는 게 아니라 톰캣이 들고있는 request 객체에서 찾아야 함 -> EL표현식
*/
///joinForm.jsp
...
<form ... >
...
<div class="form-group">
<input class="btn btn-outline-dark" type="button" onClick="goPopup();" value="주소찾기"/>
<div id="list"></div>
<div id="callBackDiv">
<label for="address">Address:</label>
<input type="text" class="form-control" placeholder="Enter Address" name="address" id="address" readonly="readonly"/>
</div>
</div>
...
</form>
<script>
function goPopup(){
var pop = window.open("/juso","pop","width=570,height=420, scrollbars=yes, resizable=yes");
}
function jusoCallBack(roadFullAddr){
let addressEL = document.querySelector("#address"); // id="address"
addressEL.value = roadFullAddr;
console.log(addressEL);
}
</script>
// script는 밑에 부분에 넣기
// jusoPopUp.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"/>
<title>주소 API</title>
</head>
<body onload="init();">
<form id="form" name="form" method="post">
<input type="hidden" id="confmKey" name="confmKey" value=""/>
<input type="hidden" id="returnUrl" name="returnUrl" value=""/>
<input type="hidden" id="resultType" name="resultType" value=""/>
</form>
<script>
function init(){
var url = location.href;
var confmKey = "인증키 삽입";
var resultType = "4"; // 도로명주소 검색결과 화면 출력내용, 1 : 도로명, 2 : 도로명+지번+상세보기(관련지번, 관할주민센터), 3 : 도로명+상세보기(상세건물명), 4 : 도로명+지번+상세보기(관련지번, 관할주민센터, 상세건물명)
var inputYn= "${inputYn}"; // EL표현식
if(inputYn != "Y"){
console.log("최초 요청");
document.form.confmKey.value = confmKey;
document.form.returnUrl.value = url;
document.form.resultType.value = resultType;
document.form.action="https://www.juso.go.kr/addrlink/addrLinkUrl.do"; //인터넷망
//document.form.action="https://www.juso.go.kr/addrlink/addrMobileLinkUrl.do"; //모바일 웹인 경우, 인터넷망
document.form.submit();
}else{
console.log("추후 응답");
opener.jusoCallBack("${roadFullAddr}"); // opener - joinForm.jsp
window.close();
}
}
</script>
</body>
</html>
'웹앱개발 > Spring boot' 카테고리의 다른 글
| [블로그] 글 상세 보기, 글 삭제 (0) | 2021.07.08 |
|---|---|
| [cool sms / 회원정보수정/post list] (0) | 2021.07.07 |
| 지연 로딩 (0) | 2021.07.05 |
| DB (0) | 2021.07.01 |
| Login (0) | 2021.06.30 |