Node.js 공부하기) pug and handlebars

Dynamic content & Templates - Rendering more than Static HTML

 

요청, 및 사용자 간의 데이터 공유

 

submit시 사용자가 입력한 키 title과 값이 있는 객체가 나온다. 이 객체를 어떻게 저장할 것인가.

<admin.js>

//상수이긴하나, 배열자체는 같은 객체이기에 새로운 요소를 받을 수 있다. 
const products = [];

// /admin/add-product => POST
router.post('/add-product', (req, res, next) => {
  products.push({ title: req.body.title });
  res.redirect('/');
});

//products배열을 내보내는 것이다. 
exports.products = products;

 

 

Temlplating Engines

ejs, pug(jade), handlebars 등이 있다.

ejs | <p><%= name %></p>

ejs는 일반 HTML을 사용하고 단순한 JavaScript를 사용할 수 있게 하는 플레이스 홀더가 있어서 for 루프를 위해 if문도 작성할 수 있다. 

pug(jade) | p #{name}

pug는 다른 구문을 사용해서 실제html을 사용하지 않거나 최소버전으로 대체하여 사용한다. #{} 구문등을 동적컨텐츠와 함께 출력하게 한다. 

handlebars  | <p>{{ name }}</p>

handlebars는 HTML을 사용하지만 동적 컨텐츠의 경우 ejs 와 비슷하게 이중 중괄호 플레이스 홀더를 사용한다. 

 

 

npm install --save ejs pug express-handlbars

설치.

 

<app.js>

app.set();

사용. app.set();은 express 애플리케이션 전체에 어떤 값이든지 설정가능(=any values globaly set). express가 이해할 수 없는 키 혹은 구성항목도 포함한다. 

view 엔진은 express에게 우리가 렌더링 하려고 하는 동적 템플릿이 있으며 이를 실시하기 위해 특별한 함수가 있으니 그 엔진을 사용해 달라고 알려준다. 

 

 

PUG

app.set('view engine', 'pug');

views폴더로가서 shop.pug파일을 만들고 html:5를 쓰면 pug구문이 나온다. 

 

<shop.pug>

html과 다르므로 아래와 같이 작성한다. 

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title My shop
        link(rel="stylesheet", href="/css/main.css")
        link(rel="stylesheet", href="/css/product.css")
    body
        header.main-header
            nav.main-header__nav
                ul.main-header__item-list
                    li.main-header__item 
                        a.active(href="/") Shop
                    li.main-header__item 
                        a.active(href="/admin/add-product") Add Product

 

<shop.js>

router.get('/', (req, res, next) => {
  res.render('shop');
});

render후 페이지를 확인하면 뜨는것을 볼 수 있다. contents를 채우지 않았기 때문에 nav와 헤더만 보인다. 

 

pug 공식문서 =  https://pugjs.org/api/getting-started.html

 

Pug → HTML

add-product.js 를 pug 파일로 변환한 예시

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title #{pageTitle}
        link(rel="stylesheet", href="/css/main.css")
        link(rel="stylesheet", href="/css/product.css")
        link(rel="stylesheet", href="/css/forms.css")
    body 
        header.main-header
            nav.main-header__nav
                ul.main-header__item-list
                    li.main-header__item 
                        a.(href="/") Shop
                    li.main-header__item 
                        a.active(href="/admin/add-product") Add Product
        main
            form.product-form(action="/admin/add-product", method="POST")
                .form-control
                    label(for="title")Title
                    input(type="text", name="title")#title
                button.btn(type="submit")Add Product

들여쓰기 잊지말아야하고 admin.js로 가서 pug파일을 쓴다는것을 render 해주면 된다.

 

 

Handlebars

express-handlebars@3.0을 설치한다. 

npm install --save express-handlebars@3.0

오류가 생겨서 구현이 안됐다. 아무래도 따라가기 급급해서 그랬던듯. ejs를 사용할거라서 더이상의 업데이트는 안하고, ejs를 충분히 익히려한다. 

 

너무 지루했어...