pug 정리
템플릿 엔진(뷰 엔진)
기본적으로 express는 cwd + /views에서 pug파일을 찾음.
그래서 따로 세팅을 해줘야 함.
cwd(현재 작업 디렉토리)는 서버를 가동하는 파일(package.json)의 위치에 따라 결정됨.
package.json이 node.js를 실행하고 있음.
server.js
const path = process.cwd();
app.set('view engine', 'pug');
app.set('views', `${path}/src/views`);
home.pug
doctype html
html(lang="ko")
head
meta(charset="UTF-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Video Storage App
body
h1 Welcome to Video Storage App
footer © 2021 Video Stoarge App
globalRouter.js
import { trending } from '../controllers/videoController';
globalRouter.get('/', trending);
videoController.js
export const trending = (req, res) => {
return res.render('home');
};
퍼그에서 자바스크립트를 쓰는법
partials/footer.pug
footer © #{new Date().getFullYear()} Video Stoarge App
퍼그에서 코드 재사용 하는법
#기호는 attribute에는 사용할 수 없음. 자바스크립트 템플릿을 사용.
a(href=
/videos/${video.id}
)=video.title
base.pug
doctype html
html(lang="ko")
head
meta(charset="UTF-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title #{pageTitle} | VSA
body
block content
include partials/footer.pug
렌더링 하는 곳에 변수를 넣어서 화면을 각각 다르게 만듬.
export const trending = (req, res) => res.render("home", { pageTitle: "Home" });
home.pug에 적용
extends base.pug
block content
h1 Home
conditional
const fakeUser = {
username: 'test',
loggedIn: false,
};
export const trending = (req, res) => {
return res.render('home', { pageTitle: 'Home', fakeUser });
};
header
if fakeUser.loggedIn
small Hello #{fakeUser.username}
nav
ul
if fakeUser.loggedIn
li
a(href="/logout") Log out
else
li
a(href="/login") Log In
Iteration
export const trending = (req, res) => {
const videos = [
{
title: 'Hello',
},
{
title: 'Hello2',
},
{
title: 'Hello3',
},
];
return res.render('home', { pageTitle: 'Home', videos });
};
extends base.pug
block content
h2 Welcome here you will see the trending videos
ul
each video in videos
li=video
else
li Sorry nothing found.
mixin
블록은 같은 형태를 지니지만 서로 다른 데이터를 가져야 한다면 mixin(일종의 똑독한 partial) 사용
export const trending = (req, res) => {
const videos = [
{
title: 'Hello',
rating: 5,
comments: 2,
createdAt: '2 minutes ago',
views: 59,
id: 1,
},
{
title: 'Hello2',
rating: 5,
comments: 2,
createdAt: '2 minutes ago',
views: 59,
id: 2,
},
{
title: 'Hello3',
rating: 5,
comments: 2,
createdAt: '2 minutes ago',
views: 59,
id: 3,
},
];
return res.render('home', { pageTitle: 'Home', videos });
};
home.pug
extends base.pug
include mixins/video
block content
h2 Welcome here you will see the trending videos
ul
each video in videos
+video(video)
else
li Sorry nothing found.
video.pug
mixin video(info)
div
h4=info.title
ul
li #{info.rating}/5.
li #{info.comments} comments.
li Posted #{info.createdAt}.
li #{info.views} views.
relative url
a(href=
edit
) Edit Video →
/ 현재 위치에 edit을 더하게 됨.
http://localhost:4000/videos/edit
absolute url
a(href="/edit") Edit Video →
루트에 edit을 더하게 됨.
http://localhost:4000/edit
get은 데이터를 backend에서 받아오는 법.
form에서 get방식은 검색할때 사용
post는 데이터를 backend에 보내는법.
form에서 post방식은 파일을 보내거나, database에 있는 값을 바꾸는 뭔가를 보낼 때, 로그인 할때 사용
videoRouter.route('/:id(\\d+)/edit').get(getEdit).post(postEdit);
export const getEdit = (req, res) => {
const { id } = req.params;
const video = videos[id - 1];
res.render('edit', { pageTitle: `Editing: ${video.title}`, video });
};
export const postEdit = (req, res) => {
const { id } = req.params;
const { title } = req.body;
videos[id - 1].title = title;
return res.redirect(`/videos/${id}`);
};
form(method="POST")
input(name="title", placeholder="Video Title", value=video.title, required)
input(value="Save", type="submit")
express application은 form을 어떻게 다루는지 모름. 따라서 아래의 코드를 작성해야 함.
app.use(express.urlencoded({ extended: true }));
// extended는 body에 있는 정보들을 보기 좋게 형식을 갖춰주는 일을 함.
// form을 javascript object 형식으로 바꿔줌.
Author And Source
이 문제에 관하여(pug 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hrj0903/pug-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)