[PUG] HTML 템플릿 엔진 pug란?

노마드코더 줌 클론코딩을 듣는데 pug라는 걸 사용한다.

pug가 뭘까?

pug는 자바스크립트를 사용하여 HTML을 렌더링할 수 있게 하는 템플릿 엔진 중 하나
따라서, 기존 html 문법과 다르고 자바스크립트 문법이 들어가기도 함

작동원리

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

사용법

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

왜 사용할까? (장점)

• <p> 라면에 밥 말아서 먹고 싶다 </p> 이렇게 쓰는 것을 p 라면에 밥 말아서 먹고 싶다 처럼 쓸 수 있다.
• pug는 html과 js의 결합 형태로 나타나서 pug를 다룰 줄 안다면 반복문이나 삼항연산자 같은 것들은 js로 해주지 않아도 된다.

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문을 쓰는 것과 비슷하다.

// 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)			<==== 이렇게