pug가 몬데요

pug는 html을 조금 더 세련되게 쓸 수 있는 템플릿 언어, express 뷰 엔진이다. npm으로 설치할 수 있다.

이걸 왜 쓰는데요

<p> 라면에 밥 말아서 먹고 싶다 </p> 이렇게 쓰는 것을
p 라면에 밥 말아서 먹고 싶다 처럼 쓸 수 있다.

사실 어떤 템플릿 언어를 써도 무방하다. 하지만, 퍼그는 html과 js의 결합 형태로 나타나서 pug를 조금만 다룰 줄 안다면 반복문이나 삼항연산자 같은 자잘한 것들은 js로 해 주지 않아도 되는 게 좋은 것 같다.

자식과 부모 관계는 한 단계 들여쓰기로 사용한다.

div.box
  p 안녕하세요
<!--퍼그로 작성한 html-->

<div class="box">
  <p>안녕하세요</P>
</div>
<!--일반 html-->

이것보다 더 좋은 기능은 바로 mixin 기능과 block 기능이다. (이 기능들은 아래에 내리면 있다.)

어떻게 쓰는데요

npm install pug
app.set("view engine", "pug");
익스프레스 세팅에 뷰 엔진을 퍼그라고 바꿔 주면 된다. (기본 값은 undefined)

익스프레스는 html 파일을 저장할 수 있는 폴더의 기본 이름이 'views'이므로, 이것에 꼭 맞춰서 설정해 줘야 된다. (바꿀 수도 있지만 그냥 따르는 게 낫지 않을까.)

home.html 대신 home.pug로 확장자를 바꿔 주기만 하면 된다.

---

퍼그의 진정한 가치는 (https://pugjs.org/language/attributes.html) 퍼그 사용법이 담긴 페이지 혹은 (https://jeong-pro.tistory.com/65) 문법을 정리한 글에서 봐 주세요. apend, prepend 등 괜찮은 스킬을 많이 지원하니 한번 보는 것도 나쁘지는 않을 듯.

대표적인 것 세 개만 추려 보았다.

block - 템플릿 상속

dottype html을 복붙 할 필요가 없어지는 최첨단 시스템 block. 평소라면 각각의 페이지마다 닷타임을 복붙하느라 안구에 땀이 찼을 텐데, 이제는 뼈대가 될 레이아웃 안에 block만 선언해 주고, 레이아웃 템플릿을 상속해 준 뒤 그 block만 따로 구성해 주면 되니 눈물이 마르는 것은 물론 찔러도 눈물 한 방울 나오지 않을 수 있다. head를 고칠 경우, 메인 레이아웃만 고치면 되니 일일이 수정 찾아 삼만 리 할 필요도 없어서 더더더더더더더더 좋다.

뼈대가 될 레이아웃을 만든 뒤, body 안에 있는 main에 block를 넣는다. 이 block은 이름을 설정해 주어야 하니, 이름도 설정해 준다.

extends는 확장해 주겠다는 건데, 이 페이지에 index.pug 레이아웃을 끌고 오겠다는 뜻이다.
메인 레이아웃만 선언해 주고, block content(이름)을 쓴 후, 나타내고 싶은 코드를 짜 주면 끝. 아주 쉽다. 아주아주 쉽다. 수백 개를 저렇게 해도 복붙 할 필요도 없다.

include - 파일 분할

조직적인 부분을 다루는데, header 혹은 footer 혹은 버튼처럼 조각만을 따로 담을 때 사용한다. block랑 비슷하지만, 전체를 다 따 올 필요는 없는 경우, 파일을 분할하여 담고 싶을 때 사용하게 된다.

foot 태그가 너무 길어서 따로 모듈화를 시키고 싶다든지 할 때 좋다좋다.

조각을 담고 싶은 페이지에 include 태그를 사용하고, URL을 넣는다. (늦게 확인함) 사진에서는 태그가 두 번 들어갔는데 주황색 태그는 못 본 척해 주길 바란다.

mixins - 재사용 블럭

재사용 가능한 블럭을 만드는 것이다. 위에 있는 block나 include랑 비슷해 보일 수는 있지만, 위의 두 개가 파일 뼈대를 잡거나 하는 데에 쓰였다면, 이것은 수많은 비디오들에게 똑같은 템플릿을 적용시켜야 할 때 그 틀을 전부 복붙 할 게 아니라, 내가 딱 한 번 지정한 일정한 템플릿을 짧은 코드로 변환시켜서 어디에나 붙여 넣을 수 있다는 것이다. 다른 정보, 같은 구조.

include로 적용시킨 뒤, +(이름)으로 사용하면 된다.

블럭으로 만들고 싶은 것의 뼈대를 짠다. mixin은 선언, videoBlock은 이름, 그리고 옆의 괄호는 있어도 되고 없어도 되지만, 없다면 정보를 받아올 수 없고, 있다면 그 값의 정보를 받아올 수 있다. 지금과 같은 경우엔 video의 값을 받아 왔다.

+videoBlock로 불러오게 되면 바로 쉽게 사용이 가능하다. a, video, h4, h6같은 자세한 틀은 이미 mixin에 적어 뒀으니 괄호 안에 쓰여진 건 그 틀 안에 들어갈 정보뿐인 것.

이것 말고도 mixin의 활용은 무궁무진하다. 똑같은 블럭을 무한대로 사용하게 될 때 아주 유용하다. (비디오나 오디오의 스타일 설정이라든지 하는)