EJS, node express에서 도로명주소 api 사용하기

  • nodejs express ejs로 웹을 만드는데 도로명 주소 api를 사용하게됬다
  • 예제가 jsp밖에없어서 헤맸는데..

따라하기

  • 이미지가 먼저 나오고 설명은 이미지 아래 적습니다!
  • ejs에서 도로명주소 api를 사용하는 법! 간단한 express 프로젝트로 해보자!

준비물

  • vscode
  • nodejs

도로명 주소 api 키 발급받기

  • 도로명 주소 api 신청하기
  • 신청폼을 작성한다
  • 서비스폼은 개발로 선택하면 별도 인증없이 발급받을 수 있다. 공부할때 딱이다!

  • 신청 버튼을 누르고 나면, 빨간색 폰트로 승인키가 보일것이다
  • 승인키를 복사하여 메모해둔다!

express generator로 프로젝트 생성

  • 여기부터 vscode을 열고 작업합니다
cmd
1
npm i express-generator -g
  • express-generator를 전역설치한다
cmd
1
express juso-api-practice --view=ejs
cmd log
1
2
3
4
5
6
7
8
change directory:
> cd juso-api-practice

install dependencies:
> npm install

run the app:
> SET DEBUG=juso-api-practice:* & npm start
  • 이런 메시지가 나오면 성공한거다
  • 메시지 대로 수행해보자
cmd
1
2
3
cd juso-api-practice
npm i
SET DEBUG=juso-api-practice:* & npm start
cmd log
1
2
3
4
5
6
C:\tmp\juso-api-practice>SET DEBUG=juso-api-practice:* & npm start

> juso-api-practice@0.0.0 start C:\tmp\juso-api-practice
> node ./bin/www

juso-api-practice:server Listening on port 3000 +0ms

주소 입력할 폼 만들기

view/index.ejs
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/stylesheets/style.css" />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<div>
<form name="form">
<input name="roadAddrPart1" type="text" placeholder="도로명주소" />
<input name="addrDetail" type="text" placeholder="고객입력 상세주소" />
<input name="zipNo" type="text" placeholder="우편번호" />
<input type="button" value="주소검색" onclick="goPopup()" />
</form>
</div>
<script language="javascript">
function goPopup() {
var pop = window.open(
'/popup/jusoPopup',
'pop',
'width=570,height=420, scrollbars=yes, resizable=yes'
);
}
function jusoCallBack(
roadFullAddr,
roadAddrPart1,
addrDetail,
roadAddrPart2,
engAddr,
jibunAddr,
zipNo,
admCd,
rnMgtSn,
bdMgtSn,
detBdNmList,
bdNm,
bdKdcd,
siNm,
sggNm,
emdNm,
liNm,
rn,
udrtYn,
buldMnnm,
buldSlno,
mtYn,
lnbrMnnm,
lnbrSlno,
emdNo
) {
// 팝업페이지에서 주소입력한 정보를 받아서, 현 페이지에 정보를 등록합니다
document.form.roadAddrPart1.value = roadAddrPart1;
document.form.addrDetail.value = addrDetail;
document.form.zipNo.value = zipNo;
}
</script>
</body>
</html>
  • view/index.ejs를 위 소스로 덮어쓴다
  • 이제 새로운 view파일을 만든다

도로명 주소 검색 팝업용 view파일 생성

view/jusoPopup.ejs
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!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" />
<title>Insert title here</title>
<%
const {
inputYn,
roadFullAddr,
roadAddrPart1,
roadAddrPart2,
engAddr,
jibunAddr,
zipNo,
addrDetail,
admCd,
rnMgtSn,
bdMgtSn,
detBdNmList,
bdNm,
bdKdcd,
sggNm,
emdNm,
rn,
udrtYn,
buldMnnm,
buldSlno,
mtYn,
lnbrMnnm,
lnbrSlno,
emdNo,
siNm,
liNm,
} = locals;
%>
</head>
<script language="javascript">
// document.domain = 'localhost';

function init() {
var url = location.href;
var confmKey = 'devU01TX0FVVEgyMDIwMDkyMzE0NDY0NjExMDIyNDQ=';
var resultType = '4'; // 도로명주소 검색결과 화면 출력내용, 1 : 도로명, 2 : 도로명+지번, 3 : 도로명+상세건물명, 4 : 도로명+지번+상세건물명
var inputYn = '<%=inputYn%>';
if (inputYn != 'Y') {
document.form.confmKey.value = confmKey;
document.form.returnUrl.value = url;
document.form.resultType.value = resultType;
document.form.action = 'http://www.juso.go.kr/addrlink/addrLinkUrl.do'; //인터넷망
//document.form.action="http://www.juso.go.kr/addrlink/addrMobileLinkUrl.do"; //모바일 웹인 경우, 인터넷망
document.form.submit();
} else {
opener.jusoCallBack(
'<%=roadFullAddr%>',
'<%=roadAddrPart1%>',
'<%=addrDetail%>',
'<%=roadAddrPart2%>',
'<%=engAddr%>',
'<%=jibunAddr%>',
'<%=zipNo%>',
'<%=admCd%>',
'<%=rnMgtSn%>',
'<%=bdMgtSn%>',
'<%=detBdNmList%>',
'<%=bdNm%>',
'<%=bdKdcd%>',
'<%=siNm%>',
'<%=sggNm%>',
'<%=emdNm%>',
'<%=liNm%>',
'<%=rn%>',
'<%=udrtYn%>',
'<%=buldMnnm%>',
'<%=buldSlno%>',
'<%=mtYn%>',
'<%=lnbrMnnm%>',
'<%=lnbrSlno%>',
'<%=emdNo%>'
);
window.close();
}
}
</script>
<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>
</body>
</html>

  • jusoPopup.ejs 가 index view에서 버튼을 누르면 등장하는 팝업이다
  • view/jusoPopup.ejs 이름으로 만든다
  • 이제 라우터를 수정하자

api가 잘 동작하도록 라우터 수정

routes/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function (req, res, next) {
res.render('index', { title: 'Express' });
});

router.get('/popup/jusoPopup', (req, res) => {
res.render('jusoPopup');
});

router.post('/popup/jusoPopup', (req, res) => {
res.locals = req.body;
res.render('jusoPopup');
});

module.exports = router;
  • routes/index.js를 위 소스로 덮어쓴다
  • /popup/jusoPopup 라우트를 추가해줬다

동작 구조 설명

  • 그림으로 표현해봤다.. 그리고보니 엄청 더럽네..
  • jusoPopup.ejs는 2가지 일을하는 놈이다
  • 도로명주소 검색창을 보여주거나, 입력폼으로 도로명주소 결과를 전달한다
  • inputYn 이라는 변수가 있는데, 이 변수에 따라 동작 여부가 갈린다
    • index화면에서 주소검색 버튼을 눌러 켜면 get으로 주소팝업을 불러온다. 그러면 inputYn 변수가 초기화 되지 않아있다
      • http://www.juso.go.kr/addrlink/addrLinkUrl.do 로 자동으로 도로명주소 api를 통해 검색화면을 불러온다
      • 사용자가 검색화면에서 검색어를 입력하면 http://www.juso.go.kr/addrlink/addrLinkUrlSearch.do 로 도로명주소 api를 통해 검색결과를 받아온다
      • 결과중 하나를 선택하고 상세주소를 입력하고 마지막으로 주소입력 버튼을 누르면, post로 주소팝업을 불러온다. 이때 검색결과를 같이 넘긴다
    • post로 주소팝업을 부르면 라우터에서는 수신받은 검색결과를 다시 리스폰객체에 담아서 보내준다. 그러면 inputYn 변수가 초기화 되어있다
      • inputYnY 일때, 부모창(index.ejs)에 jusoCallBack()함수를 실행시키는데, 이때 인자로 검색결과를 넘기는 것이다
  • 그러면 index.ejs의 jusoCallBack()에서 검색결과값을 가지고 인풋을 덮었는 것이다

여기까지 프로젝트 소스

참고