Pug 소개

Pug란?

pug는 HTML 전처리기이며 템플릿 엔진으로, 태그를 사용하는 HTML과 달리 인덴트(들여 쓰기)를 이용해 문서를 작성하도록 도와줍니다.

2015년 Jade에서 Pug로 개명되었으며, NodeJS에서 사용되는 기술입니다.

doctype html
html(lang="ko")
  head
    title= pageTitle
  body
    h1.primary-header #{greeting}
    ul#menu
      each item in menuItems
        li: a(href=item.url)= item.label

pug의 예시 코드

 

Pug의 특징

1️⃣ 간결한 문법

pug는 들여쓰기로 자식 요소를 포함하므로 닫는 태그가 필요하지 않습니다.

HTML에서는 자식 요소가 많아질수록 닫는 태그 또한 많아지게 되는데, pug는 닫는 태그가 없으므로 코드량이 그만큼 감소하게 됩니다.

 

2️⃣ 동적 템플릿 지원

pug에서는 js 변수, 조건문, 반복문을 직접 사용 가능합니다.

-
  const users = [
    {
      name: 'koo',
      age: 29,
      phone: '010-1234-1234'
    },
    {
      name: 'jang',
      age: 22,
      phone: '010-5678-5678'
    }
  ]

doctype html
body
  each user in users
    if user.name === 'koo'
      p.username `user name is ${user.name}`
      p.userage `user age is ${user.age}`
      p.userphone `user phone number is ${user.phone}`

pug 파일에서 변수 선언, 조건문, 반복문을 사용하는 예시 코드

 

3️⃣ 컴포넌트 재사용성

pug는 mixin 기능을 제공하여 반복되는 ui를 재사용할 수 있게 해 줍니다.

mixin은 별도의 파일로 관리할 수 있어 코드의 가독성을 높일 수 있습니다.

mixin card(title, content)
  .card
    h2= title
    p= content

+card('제목', '내용')

 

4️⃣ emmet 사용

pug는 html에서 사용하는 emmet을 동일하게 사용할 수 있습니다.

다음과 같은 emmet을 사용할 수 있습니다.

emmet은 생산성을 크게 늘려주므로, 따로 배울 필요 없이 html에서 사용하던 문법을 그대로 사용하면 됩니다.

.container>li.list-${This is list$}*5

.container
  li.list-1 This is list1
  li.list-2 This is list2
  li.list-3 This is list3
  li.list-4 This is list4
  li.list-5 This is list5

 

5️⃣ class, id의 사용

html과 동일하게 . 을 이용해 class를, #을 이용해 id를 나타낼 수 있습니다.

#my-container
  .first-element 
  .second-element