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

...

템플릿 엔진 이란?

웹페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다.

주어진 기능만 사용할 수 있으며, 직접 기능을 추가할 수 없다. 그러나 자바스크립트와 함께라면 가능하다.

템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링할 수 있게 해준다.

따라서 기존 HTML과 문법이 살짝 다를 수도 있고, 자바스크립트 문법이 들어가기도 한다.

템플릿 엔진에는 대표적으로 퍼그 (Pug), 넌적스 (Nunjucks), EJS, Handlebars 등이 있다.

PUG 설치 & 설정

PUG 는 HTML 을 PUG 문법으로 작성하면 HTML 로 바꿔주는 기능을 한다.

pug 는 express의 패키지 view engine이다.

$ npm install pug

Getting Started – Pug

Getting Started Installation Pug is available via npm: $ npm install pug Overview The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an

pugjs.org

pug 와 express 연결

설치가 끝나면 views 라는 폴더를 만들고 안에 파일은 .pug 라는 확장자를 붙인다

그이후 app.js 에 아래와같이 설정한다.

app.set('views', path.join(__dirname, 'views'); // 폴더 경로 지정
app.set('view engine' , 'pug'); // 확장자 지정

// => 해당 폴더에서 확장자가 pug인걸 고르겠다는 의미

pug 특징

일단 html에서 닫는 태그가 없다 (</head>, </body>, </title> 등)
들여쓰기로 어디서 부터 어디까지인지 구분하기 때문에 닫는 태그를 적을 필요가 없다.
들여쓰기한 이후에 공백까지가 태그로 된다.
title Pug 로 쓰여있으면 title태그안에 Pug가 들어간 것을 확인할 수 있다.
마찬가지로 h1 pug~~, p You are ~~ 를 봐도 다 첫번째 문자열이 태그로 들어간다.
내가 원하는 태그를 넣고 싶으면 'content 123' 이런식으로 쓰면 '<content>123</content>' 가 만들어진다.
태그 사이가 아닌 태그의 속성으로 넣으려면 ()괄호 사용.
html(lang='en') , script(type='text/javascript')
여러줄 입력할 때 ( | ) 로 작성.
id입력할 때 #container 처럼 #입력 (태그없을 때는 div가 자동적으로 들어가나보다)
클래스는 .col 처럼 .입력

pug

doctype html
html(lang='en')
  head
    title Pug
    script(type='text/javascript').
      foo = true;
      bar = function () {};
      if (foo) {
      	bar(1 + 5)
      }
  body
    h1 Pug - node template engine
    #container.col
      p You are amazing
      p
        | Pug is a terse and simple
        | templating language with a
        | strong focus on performance
        | and powerful features.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      foo = true;
      bar = function () {};
      if (foo) {
      bar(1 + 5)
      }
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>
        Pug is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
      </p>
    </div>
  </body>
</html>