[Node.js/Pug] 템플릿 엔진, 퍼그

Bam·2022년 3월 8일

Node.js

목록 보기

13/19

템플릿 엔진

템플릿 엔진이란 템플릿의 양식과 데이터의 모델에 따른 입력 데이터를 결합해서 사용자가 원하는 결과 문서를 출력해주는 소프트웨어 또는 컴포넌트를 말합니다. 우리가 알아볼 템플릿 엔진은 웹 문서의 결과로 출력될 예정이니 웹 템플릿 엔진이라고 합니다.

템플릿 엔진을 이용하면 html 문서같은 경우 코드를 엄청나게 줄일 수 있고, 재사용하기에 편하다는 장점이 있어서 수 많은 템플릿 엔진들이 사용되고 있습니다.

퍼그 Pug (구 Jade)

Pug는 가장 인기있는 웹 템플릿 엔진 중 하나입니다. 문법이 간단하다는 특징이 있지만 기존 html 코드와는 크게 달라서 적응이 힘들 수도 있습니다. npm을 통해 설치합니다.

npm install pug

그리고 다음과 같이 pug를 사용하기 위해 실행 메인 js파일에 set을 추가합니다. 그럼 이제 퍼그의 문법들을 알아보겠습니다.

const express = require('express');
const path = require('path');
const app = express();

app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.listen(app.get('port'), () => {
    console.log('포트 번호: ', app.get('port'));
});

그러면 자주 쓰일 대표적인 문법들 몇 가지를 소개해드리겠습니다.

HTML 표현

HTML 문서

퍼그로 html을 표현하기 위한 문법들 부터 소개하겠습니다.

기본적으로 태그는 <>없이 이름만 적습니다. 구분은 모두 들여쓰기로 하기 때문에 들여쓰기에 주의를 해서 사용해야합니다. 또한 각 태그의 속성은 ()소괄호를 이용해서 표시할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>express with pug</title>
    <link rel = 'stylesheet' href='./style.css/'></link>
  </head>
  <body>
  </body>
</html>

//퍼그
doctype html
html
  head
    title = express with pug
    link(rel='stylesheet', href='./stylesheets/style.css')
  body

id와 class 속성

id와 class 속성의 표현입니다. 여기서 div 태그는 태그명을 생략하고 사용할 수 있다는 특징이 있습니다.

<div id='apple'></div>
<div class='banana'></div>
<span id='sugar'></span>
<h1 class='salt'></h1>

#apple
.banana
span#sugar
h1.salt

텍스트

태그 텍스트는 태그/속성 뒤에 space 한 칸을 주고 작성합니다. 여러줄 텍스트는 |를 삽입합니다.

<p>text</p>
<div id='hi'>text...?</div>
<p>
    안
    녕
    <br>
    클레오파트라
</p>

p text
#hi text...?
p
  |안
  |녕
  br
  |클레오파트라

인라인 스타일 코딩

<script>나 <style>에 인라인 스타일을 적용하고 싶은경우에 태그 뒤에 .을 붙입니다.

<script>
    const getSum = () => 1 + 1;
</script>

<style>
  p {
    background: #00f;
  }
</style>

script.
  const getSum = () => 1 + 1;
  
style.
  p {
    background: #00f;
  }

자바스크립트 변수 사용하기

자바스크립트 변수도 또한 템플릿 엔진에서 렌더링시킬 수 있습니다. #{}와 =를 사용하게 됩니다. #{}는 자바스크립트 템플릿 문자열 처럼 중괄호 안의 내용이 자바스크립트로 해석되는 것이고, = 기호는 = 뒤쪽(우항)에 오는 구문들이 자바스크립트로 해석되게 됩니다.

또한 퍼그 구문 내부에 직접적으로 자바스크립트 구문 사용이 가능한데 맨 앞에 마이너스 기호(-)를 넣고 사용합니다.

<p>Hello express</p>

- const hello = 'Hello'
- const express = 'express'
p #{hello} #{express}

반복문

반복문을 사용할 수 있다는 점도 템플릿 엔진의 특징입니다. 기존의 테이블을 반복문 구문을 이용하면 편하게 작성할 수 있습니다.

each 혹은 for 키워드로 반복문을 사용할 수 있습니다.

<ul>
  <li>dog</li>
  <li>cat</li>
  <li>bird</li>
  <li>mouse</li>
</ul>

ul
  each animals in ['dog', 'cat', 'bird', 'mouse']
    li animals

인덱스를 가져올 수도 있습니다.

ul
  each animals, index in ['dog', 'cat', 'bird', 'mouse']
    li= (index) + '번 인덱스: ' + animals

조건문

조건문도 사용이 가능합니다. 우리가 알고있는 if문과 case문을 사용할 수 있습니다.

if flag
  p TRUE입니다.
else
  p FALSE입니다.
  
case animals
  when 'dog'
    p dog
  when 'cat'
    p cat
  when 'bird'
    p bird
  when 'mouse'
    p mouse
  default
    p So...What is this?

다른 파일 첨부

include 구문을 통해 다른 퍼그나 html 파일을 삽입할 수 있습니다.

<header>
  <p>난 헤더</p>
</header>
<main>
  <p>나는 메인</p>
</main>
<footer>
  <p>난 푸터다냐옹</p>
</footer>

include header
main
  p 나는 메인
include footer

그 밖에도 레이아웃과 블록 부분을 따로 삽입할 수도 있습니다. 레이아웃은 여러 html파일 중 공통적인 부분을 모아둔 것이고, 블록은 페이지에서 달라지는 부분만을 의미합니다. 다음 html5 코드를 레이아웃과 블록으로 나누어서 pug로 변환해보겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>express with pug</title>
    <link rel='stylesheet' href='./style.css'></link>
  </head>
  <body>
    <header>
      <p>헤더</p>
    </header>
    <main>
      <p>본문</p>
    </main>
    <script src='./app.js'></scirpt>
  </body>
</html>

//레이아웃
doctype html
html
  head
    title express with pug
    link(rel='stylesheet', href='./style.css')
  body
  header
    p 헤더
  block content
  block script
  
//블록
extends layout

block content
  main
    p 내용
    
block script
  script(src='./app.js')