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()에서 검색결과값을 가지고 인풋을 덮었는 것이다

여기까지 프로젝트 소스

참고

코드 스니펫 안에 ``` 포함하기

tmp.md
1
2
3
4
5
오호호

```js tmp.js
console.log(1);
```
  • 이렇게 스니펫으로 ``` 을 표현할 수 있다

하는 법

하는법
1
2
3
4
5
6
7
````md tmp.md
오호호

```js tmp.js
console.log(1);
```
````
  • 바깐 스니펫의 ` 개수를 4개
  • 안쪽 스니펫의 ` 개수를 3개로 하면 된다

disqus로 블로그 댓글 사용하기

  • hexo icarus theme 에서는 disqus를 기본으로 지원한다
  • 우리는 disqus에서 shortname을 알아내서 적어주기만 하면 된다
  • 너무 간편하다!

따라하기

  • hexo icarus theme 기준입니다!
  • 스샷아래 설명이 있는데
  • 그냥 스샷 그대로 따라가면 됩니다

DISQUS 회원가입

  • DISQUS에 회원가입하고 로그인한다

DISQUS에서 사이트 추가(Shortname만들고 확인하기)

  • GET STARTED 버튼 클릭

  • I want to install Disqus on my site 버튼 클릭

  • 항목 작성

  • 스크롤을 내려서 Basic 선택

  • 스크롤을 내려서 ...with Universal Code 선택

  • 뭐라뭐라 막 나오는데, 다 무시하고 스크롤을 내려서 Configure 버튼 클릭

  • Website URL 항목만 채우고 Complete Setup 버튼 클릭

  • 하단 Dismiss Setup 버튼을 클릭하고,

  • 상단에 Edit Settings 버튼 클릭

  • Shortname 항목에서 내 Shortname을 확인하고 복사한다

_config.icarus.yml에 Shortname 설정하기

_config.icarus.yml
1
2
3
4
comment:
type: disqus
# Disqus shortname
shortname: 'chinsun9'
  • 이렇게 설정해주면 끝..!
  • 놀랍게도 적용이 완료되었다!

vscode에서 마크다운 미리보기

  • vscode에서 markdown open preview를 사용하면된다

markdown open preview

  • ctrl shift v 를 누르면 마크다운 미리보기를 할 수 있다
  • 마크다운 미리보기창이 열리면 ctrl alt →키를 통해 옆으로 옮겨서 볼 수 있다
  • 실시간으로 반영되니 마크 다운 쓸때 엄청 유용하다!

hexo에서 초안, 작성중 사용하기

  • 너무 많은 포스트들 속에.. 파묻혀있는 새 글

draft 사용하기

cmd
1
hexo new draft "hexo에서 초안, 작성중 사용하기"

layout

  • hexo에서는 새 포스트를 생서할때 layout이라는 것을 지정할 수 있다
  • 기본적으로 3개의 레이아웃이 있다. post, draft, page
  • post레이아웃은 기본값이다. source/_posts/ 아래에 생성되게 만든다
  • page레이아웃은 페이지를 생성한다. source/ 아래에 생성되게 만든다
  • draft레이아웃은 source/_drafts/ 아래에 생성되게 만든다

Draft

  • source/_drafts/ 아래에 생성된 md들은 기본적으로 렌더링 되지 않는다
  • 즉, 배포해도 블로그에 표시되지 않는다
  • 따라서 작성중인 글을 노출시키지 않을 수 있다
  • 또 포스트가 많아지면서 source/_posts 디렉터리가 복잡해지는데, 여기서 스크롤해가면서 작성중인 글을 힘들게 찾을 필요가 없다

작성완료하는 법

  • 포스팅이 끝나면 이제 _posts 디렉터리로 옮기면 된다
cmd
1
2
3
hexo publish [layout] [작성 완료한 포스트 파일명]

hexo publish aws aws-공부
  • 드래그 앤 드랍으로 직접 posts 폴더로 옮겨줄 수도 있는데
  • publish 명령을 사용하게 되면 layout을 지정할 수 있다
  • scaffolds 디렉터리에 만들어준 틀대로 front-matter가 바뀐다
  • layout은 생략하면 기본값으로 post가 적용된다

로컬에서 테스트하기

  • 아쉽게도 우리가 알고 있는 hexo server로는 draft가 노출되지 않는다
cmd
1
hexo server --draft
  • 근데 --draft 옵션을 사용하면 source/_drafts 디렉터리에 있는 md파일도 렌더링되어 나타나게 된다

리액트로 네이버 퍼센트 계산기 클론코딩

  • 막 배운 리액트로 처음 만들어본 프로젝트이다
  • 계산하기 귀찮아하는 나는 평소 네이버 퍼센트 계산기를 이용했었는데
  • 이 계산기를 리액트를 사용해 클론코딩해보자..

데모

후기

  • 내가 너무 간단한 것을 만들어서 그런지 모르겠지만
  • 리액트를 처음 써본 내 기준으로 너무 복잡하다고 느껴졌다
  • 기존에 html, css, js로 만들때 보다 시간이 배로 걸렸다
  • 나중에 훨씬 복잡한 것을 만들게 되었을 때 리액트가 좋다고한다
  • 이미 잘 만들어진 리액트 튜토리얼을 따라만들고, 수정하는 방식으로 만들었다
  • 사용한 개념에 대해 완전히 이해하고 익숙해지는데 시간이 필요할 것 같다

소스코드

  • react-percentage-calculator
  • README.md에 리액트로 만든 화면을 깃허브 페이지로 보여주는 방법 등 메모해놨다

내가 블로그에서 마크다운 쓰는법

포스트.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<img src="https://chinsun9.github.io/img/avatar.png" >

- 상세 설명1
- 상세 설명2

## h2

- 그러하다

### h3

- 그러하다
- 종종 [링크](https://chinsun9.github.io/img/avatar.png)

## 코드 스니펫

```js tmp.js
console.log(hi);
```
  • 나는 블로그에 글 쓸때 이렇게만 쓴다

  • 위 처럼 작성하면 결과는…

    • 상세 설명1
    • 상세 설명2

    h2

    • 그러하다

    h3

    코드 스니펫

    tmp.js
    1
    console.log(hi);

hexo 포스트 CRUD

  • hexo에서 포스트 하는법!
  • CRUD로 비유하여 알려줍니다

C

  • 새 포스트 쓰기

    hexo new "새 포스트"

  • 위 명령으로 새 포스트를 만든다

  • source/_posts/새-포스트.md

  • 경로에 새로운 md가 만들어 진다

  • 해당 md를 열어 마크다운을 활용해서 글을 쓴다

  • 마크 다운 사용법은 여기 참고한다

  • hexo 사용법은 여기 참고한다

R

  • 포스트 읽기
    hexo server
  • 위 명령으로 로컬에서 내가 쓴 포스트가 잘 나오는지 확인해본다

U

  • 포스트 수정하기
  • source/_posts 경로에서 수정하고 싶은 포스트를 찾아 수정한다
  • 업데이트 시각은 자동 갱신되니까 걱정하지 말도록

D

  • 포스트 삭제하기
  • source/_posts 경로에서 삭제하고 싶은 포스트를 찾아 삭제한다
  • 그냥 글을 숨기고 싶다면 source 디렉터리 바깥으로 뺀다

APPLY

  • 위 과정을 통해서 포스트를 CRUD 해봤다
  • 이제 깃허브 페이지에 적용시키고 싶다면 아래 명령을 사용한다
    hexo generate & hexo deploy

javadoc 만들고 github에서 보기

  • 코드따로 문서따로… 하지 않고 한번에 해결하기
  • 또 만든 javadoc을 깃허브에서 보여주는법!

따라하기

준비물

  • 이클립스

시작

  • 나는 이 영상보고 따라했다
  • 코드는 아무렇게나, 자바독 주석도 아무렇게나 원하는 대로 만들면된다. 자바독 주석으로!
App.java
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
package application;

/**
* Date: 2020-09-22
* This is a simple application for adding two integers.
* @author chin_
* @version 1.0
*/
public class App {

/**
* int value for first number
*/
public int a;
/**
* int value for second number
*/
public int b;


/**
* This method adds x and y and returns the int result.
* @param x first int value
* @param y second int value
* @return returning int value result from x + y
*/
public int sum(int x, int y) {
return x + y;
}

/**The main method of this application
* @param args array of string arguments.
*/
public static void main(String[] args) {

}

}
  • /** */ 이런식으로 만든다
  • 설명하고 싶은 변수나 메서드 선언부에 커서를 두고 alt + shift + j 하면 자바독 주석이 생긴다
  • 열심히 설명 적고..
  • 자바독을 생성한다

  • 자신의 jdk 폴더로 가서 javadoc.exe를 지정해주고, (이미 세팅되어 있으면 패스)
  • javadoc문서가 나올 경로를 지정한다
  • 기본값으로 (프로젝트명)\doc 이렇게 되어있을 텐데, (프로젝트명)\docs로 수정한다
  • docs가 깃허브 페이지를 통해 문서를 보여줄때 경로 규격이다
  • docs폴더는 프로젝트 루트에 존재해야한다
  • Finish를 눌러 완료하면 javadoc 문서가 완성된다
cmd
1
git init
  • 이제 git init 한다
.gitignore
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

# Created by https://www.toptal.com/developers/gitignore/api/java
# Edit at https://www.toptal.com/developers/gitignore?templates=java

### Java ###
# Compiled class file
*.class

# Log file
*.log

# BlueJ files
*.ctxt

# Mobile Tools for Java (J2ME)
.mtj.tmp/

# Package Files #
*.jar
*.war
*.nar
*.ear
*.zip
*.tar.gz
*.rar

# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
hs_err_pid*

# End of https://www.toptal.com/developers/gitignore/api/java
  • 위 내용으로 .gitignore 파일을 추가한다. java 프로젝트용 .gitignore파일이다

  • 쉽게 .gitignore파일 만드는 곳

  • 이제 깃허브 저장소로 올린다

  • 브라우저로 방금 만든 저장소 세팅에 들어간다

  • 브랜치를 마스터로 선택,
  • /docs 선택
  • save 버튼 클릭
  • 이렇게 설정하면 잠시후 깃허브에서 javadoc으로 만든 내 프로젝트 문서를 볼 수 있게된다
  • 너무 빨리 접속하면 GitHub Pages is temporarily down for maintenance. 메시지를 볼 수 있다

여기까지 프로젝트 파일