- 템플릿 엔진 -
응답으로 보내줄 웹페이지 모양을 미리 만들어 표준화한 것을 템플릿 이라고 한다.
express-generator 가 적용된 경로 기준으로 app.js에서 템플릿 엔진에 대한 설정을 해야한다.
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
* views는 템플릿 파일들이 담긴 폴더의 위치를 지정한다.
res.render 메서드가 이 폴더를 기준으로 템플릿 엔진을 찾아서 렌더링하며
res.render('index') 라면 views.index.pug 를 렌더링 하고.
res.render('admin/main') 라면 views/admin.main.pug 를 렌더링 한다.
* view engine은 어떠한 종류의 템플릿 엔진을 사용할지를 나타낸다.
- ejs -
ejs 모듈은 웹페이지를 동적으로 처리하는 템플릿 엔진 모듈로 특정 형식의 문자열을 HTML 문자열로 변환해 준다.
test.ejs
<h1><%= table_name %></h1>
<hr />
<% for(let i =1; i < 10; i++) { %>
<h2><%= number %> X <%= i %> = <%= number * i %></h2>
<% } %>
const ejs = require('ejs');
const fs = require('fs');
const http = require('http');
http.createServer((request, response) => {
fs.readFile('test.ejs', 'utf-8', (error, data) => {
response.writeHead(200, { 'Content-Type': 'text/html' });
response.end(
ejs.render(data, { //ejs 문자열을 HTML 문자열로 변경
/*속성값 전달*/
table_name: 'Multiplication table 19 X ?',
number: '19',
}));
});
}).listen(50000, () => { //port 50000 으로 서버실행 http://127.0.0.1:50000으로 접속가능
console.log('서버가 동작 중입니다, http://127.0.0.1:50000');
});
<%CODE%> : Javascript 코드 입력
<%=VALUE%> : 데이터 출력
- pug -
pug 모듈도 ejs 모듈처럼 템플릿 엔진 모듈이다. pug 모듈 또한 특정 형식의 문자열을 HTML 형식의 문자열로 변환 가능하다.
|
style.
|
style 태그를 입력할 때 사용, style + '.'
|
|
script.
|
script 태그를 입력 할 때 사용, script + '.'
|
|
//
|
주석 처리
|
|
#
|
div 태그
|
|
.
|
div class 속성
|
|
ul
|
ul 태그
|
|
li
|
li 태그
|
|
#{값}
|
데이터를 출력할 때 사용
|
|
-
|
Javascript를 입력할 때 사용
|
|
= 값
|
데이터를 출력할 때 사용 |
test.pug
html
head
title Pug example page
style.
body {
color: lightskyblue;
}
h1 {
color: blue;
}
script.
let name = prompt("What is your name", "");
alert("I'm " + name);
body
// annotation
#header
h1 Hello Pug module
h2 Nice to meet you
.url
a(href="https://github.com/pugjs/pug", data-set="multiple Attribute") Github for pug
ul
li Item A
li Item B
li Item C
pug 기본 형식에서 가장 중요한 것은 띄어쓰기이며 Tab 또는 띄어쓰기 중 하나를 화용해 들여쓰기를 해야 오류가 발생하지 않는다.
정보를 입력하고 싶을 때는 지정한 태그 밑에 한 단계 더 들여쓰기를 한 후 입력한다. 태그에 속성 여러개를 입력할 때는 쉼표를 사용한다.
작성된 pug 파일을 살펴보면 HTML 보다는 조금 더 직관적으로 간결하다고 느낄 수 있다.
const pug = require('pug');
const fs = require('fs');
const http = require('http');
http.createServer((request, response) => {
fs.readFile('test.pug', 'utf-8', (error, data) => {
response.writeHead(200, { 'Content-Type': 'text/html' });
const fn = pug.compile(data); //pug 문자열을 HTML 문자열로 변경할 수 있는 함수를 생성한다.
response.end(fn());
});
}).listen(50000, () => {
console.log('서버가 동작 중입니다, http://127.0.0.1:50000');
});
test2.pug
html
head
title Pug example page
body
style.
h1 #{table_name}
h2 #{number}
hr
- for(let i =1; i < 10; i++) {
p
#multiple
#{number} X #{i} = #{number * i}
- }
const pug = require('pug');
const fs = require('fs');
const http = require('http');
http.createServer((request, response) => {
fs.readFile('test2.pug', 'utf-8', (error, data) => {
response.writeHead(200, { 'Content-Type': 'text/html' });
const fn = pug.compile(data);
response.end(fn());
});
}).listen(50000, () => {
console.log('서버가 동작 중입니다, http://127.0.0.1:50000');
});