기존에 서비스 되어 있는 도로명 주소가
현재 우리 DB에 저장되어 있고, 그것을 불러와서 사용하고 있었다.
하지만, 도로명주소가 변경되거나 (그럴일 많지 않겠지만) 추가되는 경우
일일이 도로명주소를 업데이트 혹은 추가 해야 한다.
우리나라 행정안전부에서 제공해주는 도로명 API를 사용하면 간편하게 사용이 가능하다.
도로명 DB를 제공해주기도 하고, 팝업 API등을 제공해주지만, 나는 팝업 API를 사용하려고 한다.
팝업 API 도로명 주소 체험하기.
https://www.juso.go.kr/addrlink/devAddrLinkRequestUse.do?menu=roadPop
API활용 체험하기 | 도로명주소 개발자센터
www.juso.go.kr
도로명 주소 API 가이드.
https://www.juso.go.kr/addrlink/devAddrLinkRequestUse.do?menu=roadPop
API활용 체험하기 | 도로명주소 개발자센터
www.juso.go.kr
체험은 각자 스스로 해보고, API 가이드 문서는 속독으로 읽어보자. (어렵지 않기 때문에.)이제 준비는 끝났다.
차근차근 해보자.
1. 키 발급.
팝업 API를 호출하는 곳이 합법적이고 정당한 곳?이라는 인증을 위해 키를 발급받아야 한다.
키는 아래 페이지에서 가능하다.
키는 운영/개발 2가지 버전으로 발급받아야 하고,
운영은 키에 대한 만료일이 무제한이지만, 개발은 3개월이므로 3개월 이후에는 다시 발급받아야 한다.
키는 appsettings.json/appsettings.Development.json 에 설정해두었다.
시간이 되면은 appsettings.json 사용법에 대해서도 공유해보겠다.
https://www.juso.go.kr/addrlink/devAddrLinkRequestWrite.do?returnFn=write&cntcMenu=URL
API 신청하기 | 오픈API | 도로명주소 개발자센터
www.juso.go.kr
2. 도로명주소 API 팝업의 이해.
말이 조금 이상하지만, 도로명주소 API 팝업을 이해해야 한다.
a. 팝업을 연다.
b. 도로명 주소를 검색한다.
c. 도로명 주소 상세 정보를 입력한다.
d. 주소를 선택한다.
e. 해당 팝업 url을 다시 호출한다. 여기가 가장 중요하다. inputYN이라는 값이 Y로 넘어 온다.
f. inputYN이 Y이면 팝업을 닫고, callback 함수를 호출해준다.
조금 신기하지만, 이부분만 잘 이해한다면 금방 구현이 가능하다.
3. 모델 개발.
.Net Core는 MVC 형태이기 때문에, 모델을 개발해준다.
1번에서 발급받은 키와 InputYN값과
도로명주소 API에서 제공해주는 정보인 도로명 주소와 상세 주소, 그리고 우편번호만 필요했기에 5가지 속성만 추가해주었다. API에서 다양한 속성값을 제공해주니 필요한 정보가 있으면 더 추가해준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/// <summary>
/// 키 값을 가져오거나 설정합니다.
/// </summary>
[DataMember (Name = "key")]
public string Key { get; set; } = default;
/// <summary>
/// 입력 여부를 가져오거나 설정합니다.
/// </summary>
[DataMember(Name = "inputYn")]
public string InputYN { get; set; } = default;
/// <summary>
/// 도로명 주소를 가져오거나 설정합니다.
/// </summary>
[DataMember(Name = "roadAddrPart1")]
public string RoadAddrPart1 { get; set; } = default;
/// <summary>
/// 상세 주소를 가져오거나 설정합니다.
/// </summary>
[DataMember(Name = "addrDetail")]
public string AddrDetail { get; set; } = default;
/// <summary>
/// 우편번호를 가져오거나 설정합니다.
/// </summary>
[DataMember(Name = "zipNo")]
public string ZipNo { get; set; } = default;
|
cs |
4. 폼과 팝업 호출.
|
1
2
3
4
5
6
7
8
|
// 빈 팝업을 열고, 리다이렉트해준다.
var popupTitle = "popupOpener";
window.open("", popupTitle, "width=370, height=360, resizable=no, scrollbars=no");
document.addressForm.action = "/common/address";
document.addressForm.target = popupTitle
document.addressForm.submit();
|
cs |
빈 팝업을 호출하고, 해당 팝업의 페이지를 내가 만든 "/common/address" 를 호출해줍니다.
도로명 주소를 선택하고 난 다음, 다시 해당 페이지를 호출하게 되고
이때 다른 점이라면, InputYN 이라는 값이 Y로 넘어오게 된다. InputYN이 Y라면 해당 팝업을 종료하고 바닥 페이지의 Javascript의 함수를 호출하여 도로명주소 값을 맵핑해주면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
@model AddressItem
<html>
<script type="text/javascript">
function init() {
var url = location.href;
var confmKey = '@Model.Key';//승인키
// resultType항목 추가(2016.10.06)
var resultType = "4"; // 도로명주소 검색결과 화면 출력유형, 1 : 도로명, 2 : 도로명+지번+상세보기(관련지번, 관할주민센터), 3 : 도로명+상세보기(상세건물명), 4 : 도로명+지번+상세보기(관련지번, 관할주민센터, 상세건물명)
var inputYn = '@Model.InputYN';
if (inputYn != "Y") {
document.form.confmKey.value = confmKey;
document.form.returnUrl.value = url;
document.form.resultType.value = resultType; // resultType항목 추가(2016.10.06)
document.form.action = "https://www.juso.go.kr/addrlink/addrLinkUrl.do";
document.form.submit();
} else {
var addrPart1 = '@Html.Raw(Model.RoadAddrPart1)';
var addrDetail = '@Html.Raw(Model.AddrDetail)';
var zipcode = '@Model.ZipNo';
// 바닥의 콜백 함수 호출.
opener.jusoCallBack(addrPart1, addrDetail, zipcode);
window.close();
}
}
</script>
<body onload="init();">
<form id="addressForm" 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="" />
<input type="hidden" id="useDetailAddr" name="useDetailAddr" value="Y" /><!-- 요청 변수 추가 (상세주소API 사용여부) -->
</form>
</body>
</html>
|
cs |
해보시면서 안되시는 점 있으시면 댓글로 남겨주시면, 친절하게 알려드리겠습니다.