티스토리 뷰
1. 설치
npm install jade --save
2. 애플리케이션 설정
const express = require('express');
const app = express();
const port = 3000;
app.locals.pretty = true; //html 태그 줄바꿈 설정
app.set('view engine', 'jade'); //express와 jade 라이브러리 연결
app.set('views', './views'); //template이 위치할 폴더 설정.
app.get('/template', (req, res) => {
//temp.jade 파일을 렌더링하고 객체 안에 time, _title 변수값을 전달
res.render('temp', {time:Date(), _title:'Jade'});
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});
3. 사용
/views/temp.jade 생성
html
head
title= _title
body
h1 Hello Jade
ul
-for(let i = 0; i < 5; i++)
li coding
div= time- 들여쓰기를 하면 태그 안에 태그를 넣을 수 있다.
- 자바스크립트 문법은 앞에 '-'를 붙여서 선언한다.
- 태그 안에 내용을 넣을때는 태그와 나란히 적는다. ex) h1 Hello Jade
- 변수를 태그 안에 넣을때는 '태그= 변수명'으로 선언한다. ex) div= time
4. 결과
<html>
<head>
<title>Jade</title>
</head>
<body>
<h1>Hello Jade</h1>
<ul>
<li>coding</li>
<li>coding</li>
<li>coding</li>
<li>coding</li>
<li>coding</li>
</ul>
<div>Wed Feb 10 2021 12:00:24 GMT+0900 (대한민국 표준시)</div>
</body>
</html>
참고
'Framework > Express.js' 카테고리의 다른 글
| POST 방식으로 정보의 전달 (0) | 2021.02.11 |
|---|---|
| 쿼리스트링(Querystring) (0) | 2021.02.10 |
| 정적/동적 페이지 비교 (0) | 2021.02.10 |
| Nodejs 동기/비동기 (0) | 2021.02.10 |
| Underscore.js (0) | 2021.02.10 |
댓글
