ch5. Templates

0. Returning HTML

• res.send안에 html대로쓰면 써지긴 함 >> but 너무 크다. 그대로다쓰긴 지저분
• 대신 쓰는게 pug

1. Configuring Pug

• 1. npm i pug
• 2. app.set("view engine", "pug"); >> 뷰 엔진이 될거임
• 3. pug파일 생성
  • app.set("views" << 설정필요. >> 기본default : process.cwd() + '/views' >> views폴더& home.pug 파일생성 필요
  • 따로 임포트할필요 없이, res.render("home")

[home.pug]
doctype html
html(lang="ko")
    head    
        title Wetube
    body 
        h1 Welcome to Wetube 
        footer © 2021 Wetube
        
================

export const trending = (req, res) => res.render("home");

• >> process.cwd() >> server.js파일위치가 아닌 그 윗단계 위치로 되어있음 >> 서버를 기동하는 파일의 위치에따라 지정됨(어디서 노드.js를 부르는가. 어디서 서버를 시작하는가 >>package.json임 )
• youtube/src/views/home.pug 가아닌 youtube/views/home.pug 를 찾느라고 못찾아서 에러뜸
• >> default 위치 변경필요 >> 2.

2. Partials

• views폴더위치 알려주기

app.set("view engine", "pug");
app.set("views", process.cwd() + "/src/views");

• pug > 반복이 필요없음
• 그냥 반복해야하는 경우 >> videoController안에 여러페이지만들때 페이지마다 pug만들어야함 >>
• pug html안에서>> ${} 아니고 #{} 임

doctype html
html(lang="ko")
    head    
        title Wetube
    body 
        h1 Watch Video!
        footer © #{new Date().getFullYear()} Wetube

• 아직 이거도 반복많이하는거다. footer수정시 모든 페이지에 수정해줘야 함..>> 
• 하나만 바꾸면 모든곳에서 적용되도록 하고싶음 >> views/partials  폴더 , footer.pug 생성
• include partials/footer.pug

[footer.pug] 
footer © #{new Date().getFullYear()} Wetube

=====================
[watch.pug]
~~
        include partials/footer.pug

• 근데 include~~ 이걸 페이지별로 넣는거도 귀찮다~~ >> 3. 

3. extending Template

• inheritance >> 상속. 일종의 HTML 레이어 베이스를 만들어줌
• 1. 기존꺼 가진 base.pug 파일 생성
  • block 생성
• 다른 pug >> extends 

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

block head  
    title Home | Wetube 

block content  
    h1 Home!

4. Varibale to templates  #{ }

• head title 더 간단하게 만들기
• 컨트롤러에서 렌더링을 함 >> 컨트롤러에서 렌더링할때 변수도같이 보낼수있음
• res.render(view의 name, 변수)

[base.pug]
head
	title #{pageTitle} | Wetube
=================
[videoController.js]
export const trending = (req, res) => res.render("home", { pageTitle: "Home" });

5. MVP styles

• html element이쁘게해줌 (css 는 맨나중에할거라서 이걸로좀 이쁘게 보자)

head            
        link(rel="stylesheet" href="https://unpkg.com/mvp.css")