Node - 익스프레스 템플릿(Jade, Pug), Express template

템플릿

템플릿은 서식이나 틀을 말한다. 

익스프레스의 템플릿은 html 템플릿이다. 

[템플릿과 프레임워크의 차이점]

- 템플릿은 CI프레임워크의 MVC 중 V 즉 view에 해당합니다. - 프레임워크는 URL라우팅과 데이터베이스, 기타 유용한 라이브러리(템플릿도 포함 가능)의 모음이라 할 수 있습니다. 출처 : https://cikorea.net/bbs/view/free?idx=5932

html 의 header 와 footer 중에 하나라도 수정해야 한다면 모든 파일을 바꾸지 않는다.

프로그래밍의 핵심은 반복의 최소화하는 건다. 

DRY(Don't Repeat Yourself)라고 하는 원칙이다. 

이를 해결하기 위해서 템플릿이 있다.

Pug(구 Jade)

가장 유명한 템플릿 중 하나로 Pug가 있다. Jade로 더 유명한데

이름의 라이센스 문제로 Pug로 강제 개명당했다.

Ruby스타일의 간단한 문법이 인상깊은데

about.html과 main.html을 Pug로 바꿔보자.

[ 주의 ]

참고로 Pug로 이름을 바뀌어서 확장자도 jade가 아니라 pug이다. 

또한 pug 특성상 들여쓰기에 주의해야 한다.

※들여쓸수록 하위 태그가 된다

들여씨기는 space든 tab이든 상관없지만 하나로 통일해야 하고 항상 일정한 간격으로 들여써야 한다.

2칸이면 2칸, 4칸이면 4칸을 유지해야 한다.

about.html -> about.pug

doctype html
html
  head
    meta(charset='utf-8')
    title About
  body
    header 턴제 게임
    div 제작자: test
    footer Copyright test. All right reserved.

main -> main.pug

doctype html
html
  head
    meta(charset='utf-8')
    title 턴제 게임
  body
    header 턴제 게임
    form#start-screen
      input#name-input(placeholder='영웅 이름을 입력하세요', autofocus)
      button#start 시작
    #screen
      #hero-stat
        span#hero-name
        span#hero-level
        span#hero-hp
        span#hero-xp
        span#hero-att
      form#game-menu(style='display:none;')
        #menu-1 1.모험
        #menu-2 2.휴식
        #menu-3 3.종료
        input#menu-input(name='menuInput')
        button#menu-button 입력
      form#battle-menu(style='display:none;')
        #battle-1 1.공격
        #battle-2 2.회복
        #battle-3 3.종료
        input#battle-input(name='battleInput')
        button#battle-button 입력
      #message
      #monster-stat
        span#monster-name
        span#monster-hp
        span#monster-att
    footer Copyright ZeroCho. All right reserved.
    script(src='turn.js')

pug가 얼마나 간단한지 느껴질 것이다.

잘보면 about.pug와 main.pug에는 공통되는 부분이 있다.

바로 새로 넣은 header와 footer다. 

이것을 layout.pug로 빼보자.

layout.pug

doctype html
html
  head
    block title
  body
    header 턴제 게임
    block content
    footer Copyright ZeroCho. All right reserved.
    script(src='turn.js')

그 후 about.pug와 main.pug 수정 하면

about.pug

extends ./layout.pug
block title
  title About
block content
  div 제작자: test

main.pug

extends ./layout.pug
block title
  title 턴제 게임
block content
  나머지 부분

이렇게 공통되는 부분은 layout으로 빼고 다른 부분만 파일을 다르게하여 관리할 수 있다.

특히 about.pug와 main.pug파일에서는 extends 문을 통해 layout을 불러오는 것에 주목해야 된다.

layout.pug파일은 block구문을 통해 미리 다른 파일이 들어올 틀을 마련해두었다.

나머지 부분이란 layout.pug와 겹치는 부분을 제외한 나머지 부분을 가리킨다.

또한 pug는 자바스크립트를 사용해서 반복문이나 조건문을 만들 수도 있다.

퍼그 문서 : https://pugjs.org/api/getting-started.html

express에서 pug엔진 사용

npm install pug --save

server.js

const express = require('express');
const path = require('path');
const app = express();
const route = require('./route.js');
app.set('view engine', 'pug'); // (1)
app.set('views', path.join(__dirname, 'html')); // (2)
app.use(express.static(path.join(__dirname, 'html')));
app.use('/', route);
// 에러 처리 부분
app.listen(8080, () => {
  console.log('Express App on port 8080!');
});

route.js

const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
  res.render('main'); // (3)
});
router.get('/about', (req, res) => {
  res.render('about'); // (4)
});
module.exports = router;

(1)은 엔진을 pug로 설정하는 부분이고,

(2)는 pug파일이 있는 폴더를 정하는 부분.

(3),(4)에서 res.sendFile 메소드 대신에 res.render로 해당 pug파일을 전송해 준다.

그러면 header와 footer가 생겨난다.

그 외

pug외에도 ejs,mustache 같은 엔진이 더 있다.

취향에 따라 사용하면 될 것 같다.

출처 : https://www.zerocho.com/category/NodeJS/post/578c64621e3613150037d3b3