Template engine / pug

Template engine / Pug

• Template Engine

  - 지금까지 포스팅한 내용으로 HTML을 이용하여 웹 페이지를 만드려고하면 html의 파일을 읽어 정적으로 사용 해야 할것이다. 이런 html 파일에서 변수에따라 출력을 달리하거나 반복을 만드려면 어떻게 해야할까. 아마 JS의 변수나 반복문이 너무나 그리울 것이다.
  - 템플릿 엔진은 이러한 상황에서 자바스크립트를 사용하여 html을 렌더링 할 수 있게 해준다. 대표적인 템플릿 엔진 PUG(jade)에 대해서 공부해왔다.

• Pug _ Set

  - Pug - getting started
  - 다음을 터미널에서 프로젝트 폴더에 입력하는 것으로 pug 모듈을 설치한다.
  npm install pug --save
  - 아래는 초기 설정을 위한 코드이다.
  app.engine('pug', require('pug').__express) app.set('view engine','pug'); app.set('views','./views');
  - 위 두줄은 pug를 내부에서 어떤 템플릿 엔진을 사용할지 결정해주기 위한 코드고, 맨 아래는 현재 프로젝트 폴더에 생성된 views라는 폴더에서 템플릿 엔진을 로드할 것임을 설정해준다.
  - 위 초기 설정으로 템플릿을 렌더링하고 웹 브라우저에서 개발자 모드를 확인하면 렌더링한 파일의 html 형식이 아닌 지저분한 코드로 어지럽혀 있을 것이다. 이를 평소의 html 코드로 깔끔하게 보고 위해 설정에 다음을 추가한다.
  app.locals.pretty = true;

• res.render

  - 다음으로 지정된 폴더의 index.pug 파일을 렌더링 할 수 있다. 이때 중갈호로 묶여 있는 객체를 인자로 넘겨주어 템플릿 안의 변수를 설정한다.
  res.render('index',{title:'JIN-HWAN'})

• Example _

  - 아래는 지정 폴더에서 파일을 로드하여 랜더링하는 간단한 예제 코드이다.
  "test.js" var express = require('express'); var app = express(); app.engine('pug', require('pug').__express) app.set('view engine','pug'); app.set('views','./views'); app.locals.pretty = true; app.get('/',function(req,res, next){ res.render('index',{title:'JIN-HWAN'}) }) app.listen(3000, function(){ console.log("listen _ port:3000") }); "./views/index.pug" doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') body h1= title p Welcome to #{title}

• Pug _ syntax

  - Pug의 기본 문법을 알아본다. 나는 서버 프로그래밍/ node.js 학습이 우선 목표였기 때문에 너무 깊게 공부하진 않았다. 기본 문법만을 가볍게 공부하였고, 이전에 html/css로 만들었던 웹 사이트를 템플릿으로 변환할 때는 html2jade와 같은 html을 pug(jade)로 변환시켜주는 웹 어플리케이션을 사용하였다.
  tag / text
  - 먼저 Pug는 HTML과 다르게 괄호로 태그를 선언하지 않는다.
  아래 예시에서 처럼 들여 쓰기로 태그의 부모 자식 관계를 규명하고 text를 쓸 때는 태그와 속성 뒤에 한칸 띄고 입력한다.
  "test.pug" doctype html html head title PUG body h1 Hello
  class / id
  - class와 id는 다음과 같이 태그명에 . 과 #을 붙이는 것으로 표현한다. (div의 class/id는 div를 생략하고 적어도 무방)
  "test.pug" p.contents T span#table T .opinion T
  property
  - 태그 안의 속성은 다음처럼 태그에 갈호를 치는 것으로 표현한다.
  "test.pug" a(href="https://www.google.com") T
  - script나 style 태그를 사용하고 싶으면 태그 뒤에 .을 붙여주는 것으로 사용할 수 있다.
  "test.pug" script. var msg ='Hello pug' alert(msg); style. h1{ font-size : 19px; }
  variable
  - 서버로부터 넘겨 받은 변수는 #{}과 =을 이용한다. 텍스트 안에서는 #{} 내부로 변수를 입력하고, 속성에서는 = 뒤를 변수로 입력한다.
  "test.pug" h1= name p Hello #{name}'s blog!! .class= contents "app.js" res.render('test',{name:'jinhwan', contents:'My name is Kim'});