Pug

퍼그 귀여워

퍼그는 html 을 좀 더 편리하게 작성할 수 있도록 만든 것이다. 태그들을 닫을 필요도 없고, 자바스크립트 코드를 퍼그 안에 작성 할 수도 있다. 무엇보다 로고?인 퍼그 얼굴이 넘무 귀엽다.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

아무튼 퍼그의 장점을 보자.

1. 간편한 HTML 작성

doctype html
html(lang="ko")
    head 
        block head
    body 
        block content
    include partials/footer.pug

이 파일은 base.pug 이다. HTML로 작성했다면 열고 닫았어야할 수많은 태그들이 간단하게 작성되어있다. 또 attributes들은 괄호속에 넣어 작성하면 된다.

 

2. 귀찮은 일을 여러번 안해도 된다!

위의 코드를 보면 include, block 등 HTML에서는 볼 수 없는 코드가 있다. 첫번째로 include 는 말 그대로 다른 파일의 코드를 가져오는 코드이다. partials폴더의 footer.pug코드를 가져오는 것이다.

footer © #{new Date().getFullYear()} Kitube

이는 partials 폴더의 footer.pug이다. 많은 파일에 반복 될 것 같은코드를 따로 파일로 정리해 두고 이렇게 인클루드 하면 나중에 수정 할 떄 아무래도 편리 할 수 밖에 없다. 

두번째로 block은 공간을 만들어 저 공간에 다른 코드가 들어갈 수 있다는 의미이다. base.pug 는 다른 파일에서 기본으로 쓰고싶은 파일이라고 해보자. 이때 extends base.pug를 다른 파일에 작성하면 base.pug의 코드를 모두 사용가능하다.

extends base.pug

block head 
    title Watch | Wetube
block content 
    h1 Watch Videos!

이는 watch.pug 이다. 보다시피 block head를 치고, 원하는 코드를 집어넣었다. 약간 변수 느낌으로 HTML을 사용한 것이다. 

 

 

++추가 내용

위의 코드에서 block head부분을 다 지우고 base.pug 에서 다음과 같이 작성한다.

doctype html
html(lang="ko")
    head 
        title 
            #{pageTitle} | Kitube
    body 
        block content
    include partials/footer.pug

 pageTitle은 변수이고, 이 템플릿을(pug파일을) 렌더링 할때 변수 값을 전달해 줄 수 있다. 렌더링 하는 것은 컨트롤러의 담당이므로 컨트롤러에 가서 다음과 같이 작성한다.

export const trending = (req, res) => res.render("home", { pageTitle: "Home" });

이렇게 되면 home.pug를 렌더링 할때 pageTitle 변수는 Home이라는 문자열로 채워진다.