여기서는 템플릿 엔진의 개념과 템플릿 엔진의 한 종류인 Jade를 사용하는 방법을 알아봅니다.
템플릿 엔진이란 무엇인가?
템플릿 엔진 사용하기
템플릿 엔진 Jade의 사용법과 문법
jade 설치
1 | npm install jade --save |
app.js
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 | var express = require('express');var app = express();app.locals.pretty = true;app.set('view engine', 'jade');app.set('views', './views');app.use(express.static('public'));app.get('/template', function(req, res){ res.render('temp', {time:Date(), title:'Jade'});})app.get('/', function(req, res){ res.send('Hello home page');;});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('/route', function(req, res){ res.send('Hello Router, <img src="/route.png">')})app.get('/login', function(req, res){ res.send('<h1>Login please</h1>');});app.listen(3000, function(){ console.log('Conneted 3000 port!');}); |
views/temp.jade
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 |
