Pug(2)

1. Partial

 - View 파일마다 매번 복붙하여 화면을 통일해도 되지만 고정된 부분들을 따로 관리하고 싶을 때 사용하는 것이 Partial

// src/views/partials/footer.pug
footer © #{new Date().getFullYear()} Wetube

// home, watch.pug에 include
	include partials/footer

- https://pugjs.org/language/includes.html

Includes – Pug

 - pug을 사용함으로써 HTML을 깔끔하게 작성가능하고 내부에 javascript를 포함시키기 용이함

 - 하지만 body를 제외하곤 여전히 반복되는 부분들이 있어서 이런 부분을 더 개선해야함

 

2. inheritance(상속)

 - https://pugjs.org/language/inheritance.html

Template Inheritance – Pug

 - 간단한 예로 레이아웃의 베이스, HTML의 베이스를 만들고 확장함

   - java에서 배웠던 것과 비슷한 개념

// views/base.pug 생성
doctype html
html(lang="ko") 
    head 
        title Wetube 
    body 
        h1 Base!
    include partials/footer.pug
    
// home watch edit.pug
extends base.pug

 

 - 하지만 기존과 다르게 모든 페이지가 Base!로 표시됨

 

2. Block

 - like Template window

 - 무언가를 집어 넣을 수 있는 공간이며 우선 body에 block을 만듦

// base.pug
doctype html
html(lang="ko") 
    head 
        block head 
    body 
        block content
    include partials/footer.pug
    
// watch.pug
extends base.pug

block head 
    title Watch | Wetube

block content
    h1 Watch Video!

 

3. Variable

 - 예로 각 타이틀마다 이름을 직접 쓸수 있지만 우린 사소한 오차없이 완성시키고 싶음

 - 변수를 선언하여 값을 받으면 오타없이 쓸 수 있지만 변수를 생성할 방법을 모름

// base.pug
doctype html
html(lang="ko") 
    head 
        title 
            #{pageTitle} | Wetube
    body 
        block content
    include partials/footer.pug

 - base.pug을 rendering 하는것은 controller고, 해당하는 곳은 현재 videoController임

// videoController.js
export const trending = (req, res) => res.render("home", { pageTitle: "home" });

 - https://github.com/Daniel-Jeon/wetube-loaded/commit/a22a4e0d2586e33d50d2d6dcdc66ece95e25d8a1

Study Pug :dog: · Daniel-Jeon/wetube-loaded@a22a4e0