템플릿 엔진
npm 패키지를 통해 jade(현재는 pug로 바뀜)를 설치한다.
1 | npm install pug --save | cs |
이제 app.js에 연결시켜줘야 한다.
1 | app.set('view engine', 'pug'); | cs |
템플릿 pug 파일을 저장시킬 views 폴더를 하나 생성하고, app.js에 경로를 설정한다.
1 | app.set('views', './views'); | cs |
views 폴더에 템플릿 파일을 작성해보자. 우리는 pug를 이용하고 있으므로 temp.pug라고 만든다.
temp.pug를 작성하기 전에, app.js에서 이 파일을 불러오도록 만들어야 한다.
1 2 3 4 5 | app.get('/template', function(req, res){ res.render('temp'); }) |
템플릿은 기존의 html보다 더 간단하게 코드를 작성할 수 있다. tap으로 들여쓰기를 하는 것을 통해서 자동으로 html화 시켜주는 기능을 보여준다.
1 2 3 4 5 6 7 8 9 | html head title= _title body h1 Hello Jade ul -for(var i=0; i<5; i++) li coding div= time | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <title>Jade(pug)</title> </head> <body> <h1>Hello Jade(pug)</h1> <ul> <li>coding</li> <li>coding</li> <li>coding</li> <li>coding</li> <li>coding</li> </ul> <div>Mon Apr 02 2018 15:06:59 GMT+0900 (대한민국 표준시)</div> </body> </html> | cs |
이처럼 템플릿을 이용하면 간단하게 html 코드를 작성할 수 있다.
URL 정보전달
이번에는 url을 통해서 정보를 전달하는 연습을 해보자.
topic이라는 경로에 url을 통해서 값을 입력받는 것을 해볼 것이다.
우선 쿼리 스트링에 대해서 알아보도록 하자.
'http://a.com/topic?id=1'
위와 같은 홈페이지 url이 존재한다고 가정해본다.
http://a.com은 우리가 알고 있던 홈페이지 주소를 나타낸다. 그리고 /topic을 통해 경로(path)에 들어간 모습까지도 지금까지 배운 것을 통해 알 수 있다.
?id=1은 무엇일까? 이 부분이 바로 쿼리 스트링이다.
id값을 1로 줬을 때 입력해둔 출력값을 보여주는 화면이 된다.
실제로 화면에서 확인해보기 위해, 배열을 하나 만들어보자.
1 2 3 4 5 | var topics = [ 'Javascript is...', 'Nodejs is...', 'Express is...' ]; | cs |
3가지는 순서대로 topics[0], topics[1], topics[2]에 해당하는 값이다.
이제 배열의 0,1,2에 해당하는 값을 id 값으로 둔다면 위와 같은 주소를 통해 배열 값마다 해당하는 문자열을 출력할 수 있을 것이다.
request의 쿼리 객체에 id라는 프로퍼티 값으로 전달 받을 수 있다.
1 | ${topics[req.query.id]} | cs |
node를 통해 app.js를 실행한 후, 아래에 id 값을 0,1,2로 주면 기존에 입력한 topics배열이 차례대로 다르게 출력되는 것을 볼 수 있다.
1 2 3 | http://localhost:3000/topic?id=0 http://localhost:3000/topic?id=1 http://localhost:3000/topic?id=2 | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | app.get('/topic', function (req, res) { var topics = [ 'Javascript is...', 'Nodejs is...', 'Express is...' ]; var output = ` <a href="/topic?id=0">JavaScript</a><br> <a href="/topic?id=1">Nodejs</a><br> <a href="/topic?id=2">Express</a><br><br> ${topics[req.query.id]} ` res.send(output); }) | cs |
좀 더 깔끔한 url을 통해서 나타내고 싶다면?
'시멘틱 url'을 사용한다.
지금은 url에 id=1처럼 쿼리스트링이 그대로 주소에 보이고 있는데, 이를 그냥 숫자 1로만 깔끔한 주소로 나타내도록 해보자
쿼리 스트링에서 path 방식으로 바꾸는 것이다.
기존의 app.get의 /topic 경로에서 id값을 path로 가져오기 위해서 /topic/:id로 바꾼다.
그리고 request의 query부분을 params으로 바꾸자.
이제 node를 재시작하고 보면, 각 하이퍼링크를 눌렀을 때 주소가 id=1이 아닌 1로 나타나는걸 확인할 수 있다.
큰 차이가 없다고 볼 수 있지만, 점점 다양하고 큰 프로그램을 구축하면서 시각적으로 보기 편한 url을 만들기 위해서 많이 사용하고 있는 방식이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | app.get('/topic/:id', function (req, res) { var topics = [ 'Javascript is...', 'Nodejs is...', 'Express is...' ]; var output = ` <a href="/topic/0">JavaScript</a><br> <a href="/topic/1">Nodejs</a><br> <a href="/topic/2">Express</a><br><br> ${topics[req.params.id]} ` res.send(output); }) | cs |
해당 path에 추가 경로 설정
1 2 3 | app.get('/topic/:id/:mode', function(req, res){ res.send(req.params.id+','+req.params.mode) }) | cs |
'Node.js' 카테고리의 다른 글
| [Node.js] 6. 파일 업로드 (0) | 2018.04.04 |
|---|---|
| [Node.js] 5. 웹 애플리케이션 만들기 (0) | 2018.04.03 |
| [Node.js] 4. Express 프레임워크 (get과 post) (0) | 2018.04.02 |
| [Node.js] 2. Express 프레임워크 (0) | 2018.03.27 |
| [Node.js] 1. 시작 및 주요개념 정리 (0) | 2018.03.26 |
