왼쪽화면을 오른쪽의 소스로 만들수 있는 것이 템플릿 엔진이다. (즉 for문 사용가능)
이제 jade가 pug으로 이름이 바뀜
var express = require('express');
var app = express();
app.locals.pretty = true;//jade에서 자동 줄바꿈해줌
//view engine은 템플릿 엔진이라는 의미 jade와 express를 연결하는 코드임
app.set('view engine', 'jade');
app.set('views', './views');//views라는 폴더를 만들고 jade파일을 여기에 넣어야함
app.use(express.static('public'));//public 폴더를 정적으로 변환
//템플릿 엔진을 쓰면 send가 아닌 render 메서드를 써야한다.
app.get('/template', function(req, res){
res.render('temp', {time: Date(), _title: 'kch'});//temp.jade 파일을 가져와서 렌더링함 두번째 인자는 jade파일로 보낼 객체
});
app.get('/', function(req, res){//'/'은 홈으로 접속한 것을 의미
res.send('Hello world');
});//사용자가 GET방식으로 웹서버에 접속할 때
app.get('/dynamic', function(req, res){
var lis = '';
for(var i=0; i<5; i++){
lis = lis + '<li>coding</li>';
}
//${lis}는 변수를 의미
var output = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
hello dynamic html
<ul>
${lis}
</ul>
</body>
</html>
`;//그레이브 엑센트임
res.send(output);
});
app.get('/route', function(req, res){
res.send('Hello router, <img src="/route.jpg">');
});
app.get('/login', function(req, res){
res.send('<h1>login page</h1>');
});
app.listen(3000, function(){//3000은 포트번호
console.log('Connected 3000 port!');
});
위 time은 jade의 변수이다. express에서 변수를 주입해줘야 한다.
실행 결과
출처 : 생활코딩 (https://opentutorials.org/course/2136)
'프로그래밍 > Node.js' 카테고리의 다른 글
| Node.js 생활코딩 정리 – 웹애플리케이션 제작 첫번째 라우팅 및 파일 생성 (0) | 2016.11.24 |
|---|---|
| Node.js 생활코딩 정리 – Node Supervisor로 쉽게 자동으로 재시작하기 (0) | 2016.11.24 |
| Node.js 생활코딩 정리 - POST방식을 이용한 정보의 전달 (0) | 2016.11.22 |
| Node.js 생활코딩 정리 – Semantic URL을 이용한 정보 전송 (0) | 2016.11.21 |
| Node.js 생활코딩 정리 – Express 프레임워크 동적방식과 정적방식 차이 (0) | 2016.11.21 |
| Node.js 생활코딩 정리 – Express 프레임워크 정적 파일을 서비스하는 법 (0) | 2016.11.21 |
| Node.js 생활코딩 정리 – Express 프레임워크 도입 (0) | 2016.11.21 |
| Node.js 생활코딩 정리 – 동기와 비동기 프로그래밍 이란? (0) | 2016.11.21 |