pug
pug란 express 뷰 엔진으로 html을 좀 더 보기 좋게 사용할 수 있게 하는 템플릿 언어, express 뷰 엔진이다.
사용을 위해서는 아래의 명령어를 터미널에서 실행시켜줘야한다.
npm i pug
그 이후엔 아래의 코드를 파일에 삽입해야 view engine이 pug로 설정된다.
app.set("view engine","pug");
그렇다면 우리가 알던 html코드와 pug코드의 차이점은 무엇일까?
평소 우리가 알던 html은 아래와 같이 작성하는데
<body>
<div>
<h1>Hello</h1>
<p>this is a html file<p>
</div>
</body>
pug를 사용한다면 아래와 같이 작성된다.
<>를 사용하지 않아도 되며 부모자식 관계는 들여 쓰기로 사용한다.
body
div
h1 hello
p this is a pugfile
물론 pug를 사용하지 않을 수 있지만
pug는 다양한 기능이 존재하고 이는 매우 편리하다.
기능 1) if문, 삼항연산자등 js코드를 html코드에서 사용이 가능하다.
원래 html 파일에선 js에서 사용할 수 있던 문법을 사용할 수 없었지만 pug에선 가능하다.
//if-else
if video.views==1
h3 #{video.views}view
else
h3 #{video.views} views
//삼항연산자
h3 #{video.views} #{video.views === 1 ? "view":"views" }
기능 2) iteration
array의 모든 element에 대해 특정 코드가 취해져야 할 때 사용한다.
each item in array로 array 변수는 꼭 존재해야 하며 item이 없는 경우를 대비해 else 문을 사용할 수 있다.
아래의 코드를 본다면 videos 객체 배열 속 객체 하나를 video 변수에 담고 객체값이 있을 경우 h4, h5를 각각 보여주고 있다.
또한 videos가 비어있다면 else를 통해 이를 알릴 수 있다.
block content
each video in videos
div
h4 #{video.title}
h5 date of creation : #{video.createdAt}
else
div Sorry nothing found
기능 3) inheritance
원래의 경우 html파일마다 기본적인 틀 ( !doctype, head, body) 을 하나하나 작성하거나 복붙 했었을 것이다.
그러나 pug를 사용한다면 베이스가 될 파일에 뼈대를 구축하고 별도로 추가해야 할 공간은 block으로 선언하여
새로 만들어갈 페이지에 베이스 파일을 상속받아 block부분에 대한 코드만 작성하면 된다.
특히 head의 내용을 변경할 때 html 파일마다 head를 고치지 않고 베이스 파일에 있는 head만 수정하면 되니 편리하다.
아래와 같이 base.pug로 뼈대를 구축하고 home.pug에선 base.pug를 extends 한 뒤 block에 들어갈 내용만 작성하면 된다.
//base.pug
doctype html
html(lang=ko)
head
link(rel="stylesheet" href="https://unpkg.com/mvp.css@1.12/mvp.css")
body
header
h3 Hello #{user.name}
nav
ul
li
if(user.logged)
a(href="/login") LOGOUT
else
a(href="/login") LOGIN
main
block content//home.pug
extends base
block content
div this is a home.pug file
이렇게 되면 pug가 파일을 렌더링시에 home에서 작성한 block의 내용을 base파일에 넣어 완전한 home파일을 만들어준다.
기능 4) partials
위의 경우 앞으로 만들어갈 모든 페이지의 기본 틀을 만들어놓고 파일에 extends 하여 사용하는 방식이었다면
partials는 기본 틀 중에 일부분(header나 footer)을 나누어 파일에 별도로 관리하는 방식이다.
이렇게 되면 더욱 깔끔하고 관리하기 용이하다.
아래와 같이 footer.pug를 만들어 별도로 코드를 작성한 뒤
footer © #{new Date().getFullYear()} partials test
필요한 부분에 include 하면 그곳에 위의 코드가 삽입되어 렌더링 된다.
doctype html
html(lang=ko)
head
body
header
h3 Hello #{user.name}
nav
ul
li
if(user.loggined)
a(href="/login") LOGIN
else
a(href="/login") LOGOUT
include partials/footer
기능 5) mixins
mixins는 재사용 가능한 블럭을 만드는 것으로
일부분의 코드를 별도로 관리하며 필요할 때 가져와 사용하는 것이라면 partials와 비슷하다 생각할 수 있지만
partials는 기본적인 뼈대를 구축해 나가는 데에 사용되고 mixins는 어디에서나 필요할 때마다 가져다 쓸 수 있는 것이 차이점이다.
예를 들어 수많은 비디오 데이터를 가져와 똑같은 템플릿을 적용시켜야 할 때 데이터 수만큼 템플릿 전부를 복붙 하는 게 아닌
템플릿을 짧은 코드로 변환시켜 그 코드를 사용하는 것이다.
아래의 코드를 보며 이야기해 보자면
[ mixin mixin명(매개변수) ] 의 형태로 선언하여 mixins 템플릿을 만든다.
//video.pug
mixin video(data)
div
h4 #{data.title}
h5 date of creation : #{data.createdAt}
그리고 mixins을 사용하고 싶은 파일에 include를 하고 원하는 위치에 +mixins명(인수값) 으로 불러오면 된다.
//home.pug
extends base
include mixins/video.pug
block content
each video in videos
+video(video)
'기타' 카테고리의 다른 글
| [ MongoDB + Mongoose ] mac os에서 사용하기 ( DB연결 및 모델 생성 ) (0) | 2023.04.27 |
|---|---|
| [EXPRESS] req.params / req.query / req.body (0) | 2023.04.27 |
| [ PUG ] pug파일을 찾지 못하는 오류 해결 - 폴더 위치 (0) | 2023.04.26 |
| [ Node JS ] Node.js개발환경 준비 - express, babel.js, nodemon, morgan (0) | 2023.04.25 |
| [ HTML ] 공백 넣기(띄어쓰기), 줄 바꿈하는 법 (1) | 2023.02.09 |