npm install pugexpress 자체는 템플릿 엔진의 기능을 갖고 있지 않기 때문에 설치를 따로 해야한다.
app.set('view engine', 'pug');사용할 템플릿 엔진을 express에게 알려주는 명령이다.
app.set('views', './views')템플릿이 있는 디렉토리를 express에게 알려주는 코드이다.
보통 views라는 이름으로 많이 사용한다.
사실 이 부분의 코드는 생략해도 views라는 디렉토리를 찾도록 default로 설정되어있다.
app.get('/template', function (req, res) {
res.render('temp', {time: Date(), title: 'Pug'});
});render : 렌더링하다의 render이다.
/template이라는 경로를 통해 들어온 사용자에게 해당 function이 실행되면서 temp라는 템플릿 파일을 웹페이지에게 렌더링해서 전달한다.
이 때, temp라는 파일은 반드시 views 디렉토리 내에 위치해야한다.
html
head
title= title
body
h1 Hello Jade
ul
-for (var i = 0; i < 5; i++)
li coding
div= timetemp.pug 파일의 코드이다.
html을 먼저 선언한 것은 html형식을 사용하겠다는 의미이고, 문법은 head와 body를 html보다 들여쓴다. 그래야만 html안에 head와 body가 위치하게 된다.
여기서는 단순히 head라고 작성하기만해도 <head>의 시작점부터 </head> 끝점까지 자동으로 적어준다.
줄바꿈을하면 맨 앞에 오는 첫번째 단어는 새로운 태그를 의미하므로 주의해야한다.
-for 대신 for를 사용하면 오류가 난다. (화면에 출력하기 위한 것이 아니고, 프로그래밍적으로 제어하기 위한 코드이기 때문이다.)
pug는 -를 보고 해당 for는 화면에 출력되는 것이 아니다 라는 것을 알게 된다.
div= timetime은 변수이다. pug 밖에서 변수의 값을 할당해주어야한다. 그리고 변수를 사용할 때에는 앞에 =를 반드시 붙여야한다.
app.get('/template', function (req, res) {
res.render('temp', {time: Date(), title: 'Pug'});
});위에서 살펴보았던 코드에서 render의 두번째 인자를 옵션값으로서 줄 수 있다.
여기서 time이라는 변수에 Date()의 값을 할당해주고, 변수 title의 값 역시 'Pug'로 설정해준다.
app.locals.pretty = true;웹페이지에서의 html 코드를 조금 더 가독성 있게 표시하기 위해서 준 속성값이다.
이를 true로 주게되면 들여쓰기와 줄바꿈을 사용해서 코드를 말그대로 더 예쁘게 표시해준다.
<app.js 전체코드>
var express = require('express');
var app = express();
app.locals.pretty = true;
app.set('view engine', 'pug');
app.set('views', './views');
app.use(express.static('public'));
app.get('/template', function (req, res) {
res.render('temp', {time: Date(), title: 'Pug'});
});
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('/test', function (req, res) {
res.send('Test, <img src="/test.png">')
});
app.get('/login', function (req, res) {
res.send('<h1>Login please</h1>');
});
app.listen(3000, function () {
console.log('Conneted 3000 port!');
});
<temp.pug 전체코드>
html
head
title= title
body
h1 Hello Pug
ul
-for (var i = 0; i < 5; i++)
li coding
div= time
'javascript > node.js' 카테고리의 다른 글
| [Node.js] Express, URL을 이용하여 시멘틱 URL 사용 (0) | 2024.07.08 |
|---|---|
| [Node.js] Express, URL을 이용하여 query 객체 사용 (0) | 2024.07.08 |
| [Node.js] Express 동적 파일 제공 (0) | 2024.07.07 |
| [Node.js] Express 정적 파일 제공 (0) | 2024.07.07 |
| [Node.js] Express를 이용한 간단한 웹서버 만들기 (0) | 2024.07.07 |
