🐶 pug란?

SSR에서 html을 조금 더 세련되게 쓸 수 있도록 돕는 express 뷰 엔진이다. 이는 html태그들과 javascript를 함께 실행할 수 있게 돕는다

작동원리

pug는 파일을 렌더링하여 html로 변환한 뒤 내부의 javascript(없을 수도 있음)를 실행하여 텍스트로 바꾼 후 유저 UI를 형성한다.

사용법

• npm i pug
• app.js에 app.set("view engine","pug")
• 경로지정, app.set("views", process.cwd()+"/src/views")
• views 폴더에 index.pug 등과 같이 사용

간단한 규칙들

• 모든 건 소문자로! ex) doctype html...
• 속성은 괄호에 넣는다! ex) link(href="abc")
• 닫는 태그 필요 없음!
• 자식태그는 부모와 2칸 띄어쓰기 또는 tap

렌더링 방법

express, res.render("index",{pageTitle:"home"});과 같이 사용
여기서, "index"는 index.pug를 말하고
두 번째 파라미터는 객체 형태로 값을 전달할 수 있다. ex) h1=pageTitle // home

3가지 장점!

1. 상속 (block & extends)

뼈대가 될 레이아웃 안에 block만 생성해주고 이를 상속받은 후 block 내부를 채워줌으로써 객체처럼 템플릿을 이용할 수 있다! 특히 일일이 head 내용을 바꿀 필요 없어서 꿀꿀!

<예시>

// base.pug
doctype html 
html(lang="ko")
    head
        title 제목입니다
        link(...)
    body
        main
            block content
    script

// main.pug
extends base

block content
    h1 hello world!

2. 파일 분할 (include)

header나 footer처럼 특정 조각만을 다루는 경우 유용하다. footer태그가 너무 길어지는 경우 모듈화하여 가독성을 좋게 하는 데 좋다.

// footer.pug

footer © #{new Date().getFullYear()} Wow!

// base.pug

doctype html 
html(lang="ko")
    head
        title 제목입니다
        link(...)
    body
        main
            block content
        include footer		<====== 이렇게 첨부
    script

3. 블럭 재사용 (Mixins)

이는 수많은 블럭들에 똑같은 템플릿을 적용해야할 때 사용하면 꿀이다. 마치 for문을 쓰는 것과 비슷하다. include로 적용 후 each ~ in 안에 +(함수명)으로 사용하면 된다.

<예시>

// video.pug

mixin video(info)
    a(href=`/videos/${info.id}`).video_mixin
        div.video_mixin_data
            span.video_mixin_title=info.title
            div.video_mixin_meta
                span #{info.owner.name} ▪ 
                span #{info.meta.views} 회

// main.pug

include mixins/video
extends base

block content
    div
    	each video in videos
        	+video(video)			<==== 이렇게

😀 정리

pug는 기존 html에 익숙한 사람이라면 조금 낯설 수 있다. 하지만 닫힌 태그가 없고 가독성을 높일 수 있으며 사용법이 나름 간단한 편이라서 조금만 익힌다면 SSR에서 템플릿을 다루는 것을 쉽게 할 수 있는 장점이 있다.
특히 위에서 언급한 3가지 장점은 템플릿 뷰 엔진으로 pug를 사용할만한 설득력 있는 이유가 될 것이다.

얼른 렌더링 끝내자. 자 드가자~