pug 정리

템플릿 엔진(뷰 엔진)
기본적으로 express는 cwd + /views에서 pug파일을 찾음.
그래서 따로 세팅을 해줘야 함.

cwd(현재 작업 디렉토리)는 서버를 가동하는 파일(package.json)의 위치에 따라 결정됨.
package.json이 node.js를 실행하고 있음.

server.js

const path = process.cwd();
app.set('view engine', 'pug');
app.set('views', `${path}/src/views`);

home.pug

doctype html
html(lang="ko")
  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 Video Storage App
  body
    h1 Welcome to Video Storage App 
    footer © 2021 Video Stoarge App 

globalRouter.js

import { trending } from '../controllers/videoController';

globalRouter.get('/', trending);

videoController.js

export const trending = (req, res) => {
  return res.render('home');
};

퍼그에서 자바스크립트를 쓰는법

partials/footer.pug

footer © #{new Date().getFullYear()} Video Stoarge App 

퍼그에서 코드 재사용 하는법

#기호는 attribute에는 사용할 수 없음. 자바스크립트 템플릿을 사용.

a(href=/videos/${video.id})=video.title

base.pug

doctype html
html(lang="ko")
  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} | VSA
  body
    block content
  include partials/footer.pug 

렌더링 하는 곳에 변수를 넣어서 화면을 각각 다르게 만듬.

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

home.pug에 적용

extends base.pug

block content 
    h1 Home 

conditional

const fakeUser = {
  username: 'test',
  loggedIn: false,
};

export const trending = (req, res) => {
  return res.render('home', { pageTitle: 'Home', fakeUser });
};

header
      if fakeUser.loggedIn 
        small Hello #{fakeUser.username}
      nav 
        ul 
          if fakeUser.loggedIn 
            li 
              a(href="/logout") Log out 
          else 
            li 
              a(href="/login") Log In

Iteration

export const trending = (req, res) => {
  const videos = [
    {
      title: 'Hello',
    },
    {
      title: 'Hello2',
    },
    {
      title: 'Hello3',
    },
  ];
  return res.render('home', { pageTitle: 'Home', videos });
};

extends base.pug

block content 
    h2 Welcome here you will see the trending videos
    ul 
        each video in videos 
            li=video
        else 
            li Sorry nothing found. 

mixin

블록은 같은 형태를 지니지만 서로 다른 데이터를 가져야 한다면 mixin(일종의 똑독한 partial) 사용

export const trending = (req, res) => {
  const videos = [
    {
      title: 'Hello',
      rating: 5,
      comments: 2,
      createdAt: '2 minutes ago',
      views: 59,
      id: 1,
    },
    {
      title: 'Hello2',
      rating: 5,
      comments: 2,
      createdAt: '2 minutes ago',
      views: 59,
      id: 2,
    },
    {
      title: 'Hello3',
      rating: 5,
      comments: 2,
      createdAt: '2 minutes ago',
      views: 59,
      id: 3,
    },
  ];
  return res.render('home', { pageTitle: 'Home', videos });
};

home.pug

extends base.pug
include mixins/video

block content 
    h2 Welcome here you will see the trending videos
    ul 
        each video in videos 
            +video(video)
        else 
            li Sorry nothing found. 

video.pug

mixin video(info)
  div 
    h4=info.title 
    ul 
      li #{info.rating}/5.
      li #{info.comments} comments.
      li Posted #{info.createdAt}.
      li #{info.views} views.

relative url

a(href=edit) Edit Video →
/ 현재 위치에 edit을 더하게 됨.
http://localhost:4000/videos/edit

absolute url

a(href="/edit") Edit Video →
루트에 edit을 더하게 됨.
http://localhost:4000/edit

get은 데이터를 backend에서 받아오는 법.
form에서 get방식은 검색할때 사용

post는 데이터를 backend에 보내는법.
form에서 post방식은 파일을 보내거나, database에 있는 값을 바꾸는 뭔가를 보낼 때, 로그인 할때 사용

videoRouter.route('/:id(\\d+)/edit').get(getEdit).post(postEdit);

export const getEdit = (req, res) => {
  const { id } = req.params;
  const video = videos[id - 1];
  res.render('edit', { pageTitle: `Editing: ${video.title}`, video });
};

export const postEdit = (req, res) => {
  const { id } = req.params;
  const { title } = req.body;
  videos[id - 1].title = title;
  return res.redirect(`/videos/${id}`);
};

    form(method="POST")
        input(name="title", placeholder="Video Title", value=video.title, required)
        input(value="Save", type="submit") 

express application은 form을 어떻게 다루는지 모름. 따라서 아래의 코드를 작성해야 함.

app.use(express.urlencoded({ extended: true }));
// extended는 body에 있는 정보들을 보기 좋게 형식을 갖춰주는 일을 함.
// form을 javascript object 형식으로 바꿔줌.