"Jade생활코딩"에 해당되는 글 - 1건
Post
생활코딩 주소 : https://opentutorials.org/course/2136/11915
템플릿 엔진 Jade를 소개
정적 + 동적의 장점을 합쳐서 만든 템플릿 엔진
템플릿 엔진 중 Jade 공부
참고 코드 : http://expressjs.com/ko/guide/using-template-engines.html
1. jade 모듈 설치
npm install jade --save
2. 설치 후 코드에 jade 엔진을 사용하겠다는 소스코드를 추가
app.set('view engine', 'jade');
3. 템플릿이 있는 디렉터리를 알려준다.
그리고 views 라고 하는 디렉터리를 생성.(관습적으로 views라는 이름을 사용)
app.set('views', './views');
4. 템플릿에 대한 라우터 만들기
(템플릿엔진은 send가 아닌 웹페이지를 만들어내는 것이라 render()사용)
그리고 temp.jade라는 파일을 views 안에 만든다.
app.get('/template', function(req, res){
res.rennder('temp');
});
* node app.js가 번거롭다면 supervisor app.js 라고 친다.
supervisor는 app.js 를 등록하면 app.js 가 수정될 때마다 알아서 재시작을 해준다.
5. temp 안에 head라고 적으면
소스코드 보기에서 <head></head> 라고 찍힌 것을 확인할 수 있다.
그런데 만약
html
head
body
html
head
body
코드를 보기 좋게 하려면
app.locals.pretty = true;
-(마이너스는 화면에 출력되는 녀석이 아니라는 뜻
한줄 띄면 다음 문장의 태그 생성을 의미하므로
안에 내용을 넣고 싶다면 태그 다음에 한줄 띄지말고
적을 것
html
head
body
h1 hello Jade
ul
-for(var i = 0; i<5; ++i)
li coding
만약 시간을 출력하고 싶다면?
html
head
body
h1 hello Jade
ul
-for(var i = 0; i<5; ++i)
li coding
div= time
time이란 변수를 외부에서 줘야 한다.
외부에서 주는 것은 우리가 이 페이지를 호출하는 코드에서 인자를 추가해주면 된다.
app.get('/template', function(req, res){
res.render('temp', {time:Date()});
});
helloWorld.js
var express = require('express');
var app = express();
app.set('view engine', 'jade');
app.use(express.static('public'));
app.locals.pretty = true;
app.get('/template', function(req, res){
res.render('temp', {time:Date()});
});
app.get('/', function(req, res){
res.send('Hello World!');
});
app.get('/login', function(req, res){
res.send('Login Please');
});
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 acharset="utf-8">
<title></title>
</head>
<body>
Hello zzㅋㅋㅋdseer2312312fsdd
<ul>
${lis}
</ul>
${time}
</body>
</html>`;
//var output = '';
res.send(output);
});
app.listen(3000, function(){
console.log('Example app listening on port 3000!');
});
temp.jade
html
head
title 타이틀입니다
body
h1 hello Jade
ul
-for(var i = 0; i<5; ++i)
li coding
div= time
'이전게시판 > nodejs' 카테고리의 다른 글
| Nodejs Express - 웹페이지를 표현하는 방법 (0) | 2017.07.08 |
|---|---|
| 생활코딩 Nodejs Express 설치 + 간단 웹어플 만들기 (0) | 2017.07.01 |
| nodejs 콜백 함수 (0) | 2017.06.24 |
| 생활코딩 nodejs 모듈 4,5 NPM (0) | 2017.06.24 |
| 생활코딩으로 nodejs공부중 (0) | 2017.06.23 |