Node.js 템플릿 엔진은 무엇인가??
템플릿 엔진을 통해 짧은 코드로 HTML을 만들어 낼 수 있다.
템플릿 엔진을 사용하기위해서는 설치해서 Express와 연력해서 사용해야한다.
jade 템플릿 엔진 사용
npm install jade --save
var express = require('express');
var app = express();
// 템플릿 엔진 세팅하기
app.set('view engine', 'jade');
// 템플릿 엔진 디렉토리 설정하기 (템플릿을 ./views에 넣는다. )(생략해도 가능하다)
app.set('views','./views');
// 라우트 설정하기, 템플릿 경로를 통해 들어온사람에게 temp라는 템플릿파일(jade)(./views)를 랜더링(응답) 해서 보여준다.
app.get('/template', function(req,res){
res.render('temp'):
});
app.use(express.static('public'));
app.get('/', function(req, res){
res.send('Hello homepage');
});
app.get('/dynamic', function(req,res){
var lis = ' ' ;
for (var i=0; i<5; i++){
lis = lis + '<li>coding</li>;
}
var time = Date();
var output = `
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> Hello, Dynamic!
<ul>
${lis}
</ul>
${time}
</body> </html>`
res.send('output')
});
app get('/login', function(req,res){
res.send('Login');
});
app.listen(4170, function(){
console.log('Connected 4170 prot!');
});
cf.) 동적인 node의 소스 내용이 바뀌었을때 자동으로 재실행하게 해준다.
npm에서 supervisor를 검색 --> npm install supervisor -g를 사용해 전역적으로 설치한다.
supervisor 명령어를 통해 node 를 실행하면 자동으로 재실행한다.
jade 사용할때 들여쓰기 하기
+ jade에 변수로 넣어서 사용하기
html
head
body
↑위와같이 들여쓰기로도 가능하지만...
-------------------------------------
소스코드 express(); 부분 다음으로
app.locals.pretty = true;
추가하면 잘 구분해준다.
html
head
body
h1 Hello Jade
ul
-for(var i=0; i<5; i++) // (-)사용하기
li coding
div= time // 오류난다. 변수의 값을 바깥에서 전해주어야한다.
=========================================================
: app.get('/template', function(req,res){
res.render('temp', {time:Date()} //render에 time을 새로 정의해서 사용한다.
});
--------------------------------------------------------------------------------------------------
'WEB (Feat.FOO) > WEB 제작(Node.js)' 카테고리의 다른 글
| 12. Node.js. Express-POST방식을 통한 정보 전달 (0) | 2017.01.07 |
|---|---|
| 11. Node.js Express-URL을 통한 정보 전달 <query string> (0) | 2017.01.07 |
| 9. Node.js Express 적용하기(1) (0) | 2017.01.07 |
| 8. Node.js Express 적용해보기 (0) | 2017.01.07 |
| 7. Node.js에서의 동기와 비동기 (1) | 2017.01.07 |