mixin
views > layouts > partials에서 일종의 모듈을 만들어서 재활용한 경험이 있을 것이다. mixin도 이와 유사하다. 다른 정보지만 같은 형식을 가진 것들(대표적으로 DB records)을 캡슐화한다. 정리하자면 mixin은..
darrengwon.tistory.com
위 내용을 훑어보고 이해해보자
뷰 엔진 설정
npm i pug
app.js에서 다음과 같이 설정합니다.
// app.js
import path from "path"
// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug");우선 app.set은 https://expressjs.com/en/api.html#app.set 여기를 참고하자.
views 폴더에 있는 템플릿 파일들을 렌더링하라는 의미이며 view engine은 pug로 설정하겠다는 코드이다.
ejs를 사용하고 싶다면 npm i ejs로 설치 후에 코드를 ejs로 바꿔주기만 하면 된다.
렌더링하기
res.send가 아닌 res.render를 통해 렌더링하면 된다. 여기서 재미있는 점은 두 번째 인자를 통해 변수를 전달할 수 있다는 것이다.
아래 코드는 index.pug에 title, name이라는 이름으로 변수를 전달하고 있다.
/* GET home page. */
router.get("/", function(req, res, next) {
res.render("index", { title: "Express", name: "Darren" });
});
PUG 작성
HTML과 다른 독특한 문법이 있어 능숙하게 사용하기 위해서는 연습이 필요하다.
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
link(rel="stylesheet", href="/stylesheets/style.css")
style.
/*style하고 점(.)을 찍으면 그 아래에 css 작성 가능*/
.text {
font-size: 30px;
}
title Document
body
-const title = "express" //변수 설정은 앞에 -을 붙입니다.
//- res.render를 통해 넘어온 name 변수 사용
p.text.introduce
| Hello #{title}! I'm from pug.
| My name is #{name}
p#id It's HARD!
button.title(type="submit") submit
script.
// script하고 점(.)을 찍으면 그 아래에 js를 작성 가능.
const sayHi = () => console.log("hello guys")
sayHi()
script(src="./test/index.js")
그.러.나. HTML을 PUG로 변환해주는 사이트도 있으니 적극 이용하자.
HTML to PUG Converter
HTML TO PUG - Online Converter This application is currently under development and released as an experimental public demo.
html-to-pug.com
layouts을 통해 템플릿 divide and conquer
매번 views 내부에 있는 pug 코드를 복붙해서 사용할수는 없다. 필요한 템플릿이 많아질 경우 수작업으로 하는 것이 불가능해진다. 따라서 views 내부에 layouts 폴더를 만든 후 몇 개의 템플릿을 반복적으로 사용하도록 하자
예를 들어 아래와 같은 main.pug를 만든 후
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Wetube
link(rel="stylesheet", href="")
<script src="https://kit.fontawesome.com/d7e3d29952.js" crossorigin="anonymous"></script>
body
include ../partials/header //partials 붙임
main
block contents //내용입력
include ../partials/footer //partials 붙임extends로 삽입한 뒤 block contents 아래에 내용을 작성하도록 한다.
extends layouts/main.pug
block contents
p home! from pug
이 방식을 통해 반복적으로 layout을 사용할 수 있으며 코드를 복붙하는 수고를 덜 수 있다.
또한 main.pug를 구성하고 있는 header나 footer 등의 부분들 또한 이러한 방식으로 사용할 수 있다.
views 내부에 partials 폴더를 생성한 후 header와 footer를 만들어 주었다.
header.header
.header__column
<i class="fab fa-youtube"></i>
.header__column
ul
li
a(href="#") Join
li
a(href="#") Log infooter
.footer__icon
<i class="fab fa-youtube"></i>
span.footer__text Youtube #{new Date().getFullYear()} ©
* pug 내에서 js는 #{} 안에서 작성한다.
PUG 심화
if else문
body
-const condition = false
if condition
div 참입니다
else
div 거짓말하지마
for 문
body
for i in [1, 3, 5]
div #{i}
응용
body
for i in [1, 3, 5]
if i === 1
div 1입니다.
else if i === 3
div 3입니다
else
div 5입니다.
include
헤더나 사이드바와 같이 반복적으로 등장하거나 그 밖에 모든 페이지에서 등장하는 것을 간단히 불러옵니다. 이를 통해 코드의 중복을 손쉽게 해결할 수 있습니다.
body
include ./partials/header
// 해당 경로에 있는 템플릿을 불러옵니다
layout과 block
include가 간단한 partials의 반복을 따오는 것이라면 layout은 말 그대로 구조 자체를 따옴으로써 반복을 해결합니다. layout을 사용할 때는 extends를 통해 layout의 경로를 지정한 후 사용합니다.
block은 layout을 기반으로 코드를 작성할 때 새로운 코드가 쓰여지는 공간을 이야기합니다. layout과 block은 한 몸이라고 생각합시다.
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
link(rel="stylesheet", href="/stylesheets/style.css")
title Document
body
include ../partials/header
block contents // layout을 활용하는 곳에서 작성한 내용은 여기에 붙여짐extends ./layouts/main.pug
block contents
p hew~ it's hard but fun also
script.
style.
script뒤에 점 하나만 찍으면 해당 태그 내부에 js를 작성할 수 있습니다.
script.
cosnt a = {f: 1, s:2, t:3};
const b = {a, ...rest} = rest
console.log(b)
style도 마찬가지 입니다.
style.
.watchForm {
display: flex;
flex-direction: column;
}'Node, Nest, Deno > 🚀 Node.js (+ Express)' 카테고리의 다른 글
| express-session을 통해 세션 사용하기 (3) | 2020.03.27 |
|---|---|
| EJS 뷰 엔진 사용하기 (0) | 2020.03.12 |
| 404 NOT Found, Error 처리 미들웨어 (0) | 2020.03.12 |
| ★ express의 app.js 살펴보기 (0) | 2020.03.10 |
| npm (Node Package Manager) 개론 (0) | 2020.03.10 |
