게시 됨 업데이트 됨using api9분안에 읽기 (약 1302 단어)

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 변수가 초기화 되어있다
      • inputYn가 Y 일때, 부모창(index.ejs)에 jusoCallBack()함수를 실행시키는데, 이때 인자로 검색결과를 넘기는 것이다
  • 그러면 index.ejs의 jusoCallBack()에서 검색결과값을 가지고 인풋을 덮었는 것이다

여기까지 프로젝트 소스

참고

카테고리

아카이브

광고

×