pug 템플릿 엔진(template engine) 정리 및 요약

pug를 정리하게 된 계기

Node.js를 사용해서 프로젝트를 진행하다 보니 다양한 템플릿 엔진을 접할 수 있었습니다. ejs나 pug도 그중에 하나인데, ejs는 한 번 사용해본 적이 있었으나 pug라는 템플릿 엔진을 이번에 처음 알게 되어서 간단하게라도 정리해보려 합니다.

 

Getting Started – Pug

위 사이트가 pug의 공식 사이트인 것 같고, 다양한 문법과 작성법이 작성되어 있어 위 사이트를 참고하여 정리하겠습니다.

---

pug란?

일단 pug가 뭔지부터 제대로 정리하고 가려고 합니다. 앞서 말한 바와 같이 pug가 template engine의 종류 중 하나인 것은 알겠는데, 아래 캡쳐 이미지를 보면 express-generator를 이용해 생성한 프로젝트에서 jade라는 확장자로 생성된 파일이 있고, 문법이 pug에서 봤던 거랑 비슷해서 의문이 들었습니다.

이는 바로 jade가 pug의 옛 이름이기 때문이었고, 최근에는 pug라는 이름으로 바뀌어 사용되고 있기 때문이었습니다.

 

그렇기 때문에, 사이드 프로젝트에서 pug template engine을 사용하기 위해 문법을 본격적으로 정리해 보겠습니다.

---

템플릿 엔진 (template engine) 이란?

생각해보니 템플릿 엔진이라는 개념을 정리하지 않은 것 같기 때문에, 템플릿 엔진 개념부터 정리하겠습니다.

 

템플릿 엔진은 기존에 웹 페이지 구성시에 사용하던 정적인 markup language인 HTML이 자체적으로 동적인 기능을 추가하지 못하고 자바스크립트와 결합해서 사용하던 것을 개선하기 위해 등장했습니다.

 

템플릿 엔진을 이용해도 자바스크립트를 사용하기는 하지만, 방식에 약간의 차이가 있는데 템플릿 엔진은 자바스크립트를 사용하여 지정된 양식(템플릿 엔진)에 데이터를 추가(자바스크립트가 추가해줌)하여 HTML을 렌더링(rendering)하는 방식으로 웹 페이지를 생성합니다.

 

대표적인 템플릿 엔진으로는 ejs, pug(jade) handlebars 등이 있다고 합니다..

 

추후에 템플릿 엔진만을 정리하는 글을 작성해야 할 것 같습니다. 일단은 pug에 대한 지식이 필요하기 때문에 pug부터 정리하겠습니다.

---

pug 문법 요약 정리

기본적으로 HTML과 유사하지만, 약간 다른 문법을 이용하며 tag 사이에 부분적인 변수 및 코드를 작성하는 ejs와 비교하여 pug는 코드를 굉장히 간소화할 수 있다는 장점을 지니고 있습니다.

 

pug는 다음의 예시를 보면 알 수 있듯이 들여 쓰기를 이용하여 기존 HTML 문서의 요소들의 포함 범위를 구분합니다.

<div class="main_body" onload="init()"></div>
<script>
	function init(){
    	console.log("Hello world!!\n");
    }
</script>

div(class="main_body" onload="init()")

script.
   function init(){
     console.log("Hello world!!\n");
   }

---

PUG는 다음과 같은 특징을 가집니다!

• HTML에서 사용하던 닫는 태그를 사용하지 않고, 이를 들여 쓰기로 대신한다.
• 들여쓰기 이후 공백 가지 태그로 인식한다.
• 태그의 속성 값을 작성하고 싶은 경우 괄호를 활용한다.
• 여러 줄을 입력하고 싶을 때에는 '|'를 사용한다.
• id 속성 값은 #를 앞에 붙여서 class 속성 값은 .을 붙여서 표기한다.

---

1. 일반적인 태그 입력 방법

<ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
    <li>Item D</li>
    <li>... </li>
</ul>

tag로 감싸서 표현하던 기존의 HTML 방식과 다르게

ul
   li Item A
   li Item B
   li Item C
   li Item D
   li ...

pug에서는 위와 같이 들여 쓰기를 이용해 태그를 입력할 수 있습니다.

---

2. 태그에 클래스와 아이디를 입력하는 방법

HTML
<div class="classA">hi</div>
<div class="classA classB">hi</div>

pug
div.classA hi
div.classA.classB hi

HTML
<div id="idA">hello</div>

pug
div#idA hello

 

위와 같이 class를 부여할 때는 "."을 이용하고 여러 개의 class를 부여하고 싶은 경우 이어서 "."을 통해 클래스 명을 부여하면 됩니다.

 

id를 부여하고 싶은 경우 "#"을 사용하면 됩니다.

---

3. Plain Text(평문)을 작성하는 경우

일반 문장의 경우 태그를 정의한 이후 띄어쓰기 이후에 작성하면 됩니다.

 

반면, 여러 줄의 문장을 작성하는 경우 '|' 파이프를 이용해야 합니다.

<p>
Pipe is going to be at the beginning position of its own line.
</p>

p
  | Pipe is going to be at the beginning position
  | of its own line.

---

4. 주석 작성

한 줄 주석 작성

//

여러 줄 주석 작성 (이렇게 주석 작성하면 pug에서만 보인다.)

//-

 

body
   // 이렇게 pug에서만 보이도록 한 줄 주석 작성이 가능합니다.
   
   //-
      여러 줄의 주석을 작성하고 싶은 경우에는 '//-'를 사용하면
      이렇게 여러 줄의 주석을 작성할 수 있습니다.
   //
      이렇게 주석을 작성하면 HTML로 변환될 때 보이도록 주석 처리
      가 됩니다.

// 를 사용하여 들여쓰기를 한 후에 주석을 여러 줄 작성하면 html 변환 시에 같이 주석으로 변환되어 작성됩니다. 이걸 숨기고 싶은 경우에는 //- 작성 후에 들여쓰기를 통해 여러 줄로 주석을 작성하면 됩니다.

---

5. 속성(Attributes) 작성

속성은 다음과 같은 문법으로 작성할 수 있습니다.

하나의 속성을 작성하는 방법

input(
   type="button"
   name="submit_btn"
   onclick="onClick()"
)

rendering 이후
<input type="button" name="submit_btn" onclick="onClick()" />

---

6. 템플릿의 상속

pug는 다른 템플릿을 상속받아 공통적인 부분을 공유하여 새로운 템플릿을 만들 수도 있습니다.

// layout.pug
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='stylesheets/style.css')
  body
    block content

위와 같은 layout.pug 파일을 다음과 같이 상속받아 사용할 수 있습니다.

// index.pug
extends layout

block content
  h1= title
  p Welcome to #{title}

상속받은 index.pug 템플릿은 사실상 다음과 같은 구성을 갖는 것과 다름이 없습니다.

// 실제로 렌더링될 index.pug
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1= title
    p Welcome to #{title}

이를 통해 알 수 있는 점은 block이라고 하는 개념을 사용해서 웹 페이지의 header, footer는 미리 작성해둔 상태에서 content block 부분 만을 페이지에 따라서 다르게 작성하는 구현 또한 가능하다는 점입니다!

---

7. 템플릿 내에 case 조건문 

다음과 같이 case와 when, default 등의 keyword를 이용해서 다른 언어에서의 case문과 같이 pug template 내에서도 case 조건절을 구현할 수 있습니다.

위처럼 template engine에 작성하게 되면, 아래와 같이 rendering이 됩니다. 추가적으로 위의 부분에서 '-'를 앞에 붙여서 코드를 삽입할 수 있습니다.

<p>option one</p>

---

8. 템플릿 내에 코드 삽입하기

앞서 case 조건문을 설명할 때 '-'을 이용해서 코드를 삽입할 수 있다고 설명한 바와 같이 다음과 같이 '-'을 붙여서 javascript 코드를 pug template 내에 삽입할 수 있습니다.

위처럼 작성된 template이 rendering 된다면 다음과 같을 것입니다.

<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>

여러 줄의 tag를 for문을 이용해 반복적으로 작성하는 코드를 구현하고 싶은 경우에는

이런 식으로 '{' 중괄호로 감싸도록 코딩을 하면 됩니다. 또한 이렇게 for문을 통해 추가하는 코드의 들여쓰기 기준은 '-'이 대쉬가 위치한 지점을 기준으로 작성되니 이 점을 주의⚠해야 할 것 같습니다!

 

추가적인 기본 문법은 pug template engine을 사용하면서 정리할 예정입니다!

조금이라도 도움이 되셨다면, 좋아요 한 번씩 눌러주시면 감사하겠습니다! 😀😀