Pug

---

YouTube에서 사용될 Front부분이 pug에
대해서 알아보고,
pug의 기본적인 사용 문법을 알아본다.

---

1.

우선, front page를 rendering하는 방법.
controller에서 res.render('----')에서
render부분에 rendering할 파일의 name(***.pug)을 적어주면된다.
import가 아님.
불려지는 파일은 pug 파일로 작성 될 것이라,
2번에서 pug세팅에 대해서 알아본다.

export const search = (req, res) => res.send('search')
export const seeVideo = (req, res) => {
  console.log(req.params)
  return res.render('watch', { pageTitle: 'watch' })
}
export const editVideo = (req, res) => res.render('edit', { pageTitle: 'edit' })
export const removeVideo = (req, res) => res.send('remove')
export const uploadVideo = (req, res) => res.send('upload')

2. pug. base

https://pugjs.org/api/getting-started.html

npm i pug

server.js

import express from 'express'
import morgan from 'morgan'
import globalRouter from './routes/globalRouter'
import userRouter from './routes/userRouter'
import videoRouter from './routes/videoRouter'

const PORT = 4000
const app = express()
const logger = morgan('dev')
app.use(logger)

app.set('view engine', 'pug')
///template으로 pug를 사용할 것이라고 설정해줌
app.set('views', process.cwd() + '/src/views')
///pug 파일(template)이 위치하는 장소 지정.
///그리고 src/views폴더 안에 pug파일을 만든다.
app.use('/', globalRouter)
app.use('/videos', videoRouter)
app.use('/users', userRouter)

app.listen(PORT, () => console.log('Server start in 4000'))

2-1. src/views/base.pug

doctype html 
html(lang="ko")
    head 
        //block head
        title #{pageTitle} | JmTube
        link(rel="stylesheet" href="https://unpkg.com/mvp.css@1.12/mvp.css")
    body 
        header 
            small Hello #{fakeUser.username}
            nav
                ul 
                    if fakeUser.loggedIn
                        li 
                            a(href='/logout') logout
                    else
                        li 
                            a(href='/login') login
            h1=pageTitle
        main
            block content
    include partials/footer.pug

첫번째 pug파일.
우선 base.pug파일을 만든다.
이 파일은 모든 파일에 적용시켜 줄 수 있다.
react의 header만드는 거와 비숫.

2-2 src/views/watch.pug

extends base.pug
///맨 처음에 extends base.pug를 적어줌으로써
///위의 base.pug파일을 불러들인다.

//- block head 
//-     title Watch | JmTube

block content 
 h1 Watch Video

3.pug . partials

partials는 모든 pug file에 공통적으로 적용되는 부분을
만들어 놓는것.
여기서는 footer부분을 만들고 모든 파일에 적용시켜본다.

src/views/partials/footer.pug

footer © #{new Date().getFullYear()} JmTube!!! 

src/views/base.pug

doctype html 
html(lang="ko")
 head 
     //block head
     title #{pageTitle} | JmTube
     link(rel="stylesheet" href="https://unpkg.com/mvp.css@1.12/mvp.css")
 body 
     header 
         small Hello #{fakeUser.username}
         nav
             ul 
                 if fakeUser.loggedIn
                     li 
                         a(href='/logout') logout
                 else
                     li 
                         a(href='/login') login
         h1=pageTitle
     main
         block content
 include partials/footer.pug
 ///base.pug에 footer.pug 파일을 넣음.
 ///include로 partiala/footer.pug로 넣는다.

controller에서 변수롤 보내고, pug 파일에서 받는 방법.

src/controllers/videoController.js

const fakeUser = {
username: 'jinyinshu',
loggedIn: false,
}
export const trending = (req, res) => {
///home에 rendering 되는 trending controller임.

///home.pug에 보내질 object로 구성된 array
const videosTitle = [
  {
    title: 'hello1',
    rating: 5,
    comments: 2,
    createdAt: '2min ago',
    views: 59,
    id: 1,
  },
  {
    title: 'hello222',
    rating: 5,
    comments: 2,
    createdAt: '2min ago',
    views: 59,
    id: 2,
  },
  {
    title: 'hello333',
    rating: 5,
    comments: 2,
    createdAt: '2min ago',
    views: 59,
    id: 3,
  },
]
const videos = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
return res.render('home', {
  pageTitle: 'home',
  fakeUser: fakeUser,
  videos,
  videosTitle,
})
}
///위와 같이 render안에 첫번쨰 arg는 rendering될 pug파일
///이름이고, {}부분은 보내지는 props들이다.
///받는것은 home.pug파일을 참고하자
///하지만 모든 파일에서 다 받는 경우는 base.pug에서 받음.

export const search = (req, res) => res.send('search')
export const seeVideo = (req, res) => {
console.log(req.params)
return res.render('watch', { pageTitle: 'watch' })
}
export const editVideo = (req, res) => res.render('edit', { pageTitle: 'edit' })
///여기서는 edit.pug파일에 {pageTitle: 'edit'}를 보내줌.
///아래에서 edit 파일을 확인하자.
//////하지만 모든 파일에서 다 받는 경우는 base.pug에서 받음.  

4. src/views/base.pug

doctype html 
html(lang="ko")
  head 
      //block head
      title #{pageTitle} | JmTube
      ///controller에서 보낸 pageTitle를 받아서
      ///뿌려줌.
      
      link(rel="stylesheet" href="https://unpkg.com/mvp.css@1.12/mvp.css")
  body 
      header 
          small Hello #{fakeUser.username}
          ///controller에서 보낸 fakeUser를 받아서
          ///뿌려줌.
          
          nav
              ul 
                  if fakeUser.loggedIn
                      li 
                          a(href='/logout') logout
                  else
                      li 
                          a(href='/login') login
          h1=pageTitle
      main
          block content
  include partials/footer.pug

5. mixins

react의 map처럼 array를 뿌려줄때 뿌려지는 item들이
미리 디자인된 component임.

src/controllers/videoController.js
controller에서 배열로 된 data를 보내줌.
path는 home, home.pug임.

export const trending = (req, res) => {
 const videosTitle = [
   {
     title: 'hello1',
     rating: 5,
     comments: 2,
     createdAt: '2min ago',
     views: 59,
     id: 1,
   },
   {
     title: 'hello222',
     rating: 5,
     comments: 2,
     createdAt: '2min ago',
     views: 59,
     id: 2,
   },
   {
     title: 'hello333',
     rating: 5,
     comments: 2,
     createdAt: '2min ago',
     views: 59,
     id: 3,
   },
 ]
 const videos = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 return res.render('home', {
   pageTitle: 'home',
   fakeUser: fakeUser,
   videos,
   videosTitle,
 })
}

src/views/home.pug

 extends base.pug
include mixins/video
///사용할 mixins를  include해야 함.

//- block head 
//-     title Home | JmTube

block content   
    h1 Home
    input(placeholder="What is your name")
    button send

    ul 
        each video in videos 
        ///each가 react의 map임.
        ///controller에서 보낸 videos 배열이
        ///li로 뿌려짐.
            li=video
        else 
            li Sorry nothing found.
          
    each potato in videosTitle 
    ///controller에서 videosTitle이라는
    ///array data를 보내줌.
    ///근데, +viedo로 받음.
    /// +video가 mixins임.
    /// 맨 위에서 사용할 mixins를 incude해야 함.
    ///아래에서 설명
        +video(potato)      
    else 
        li Sorry nothing found.

src/views/mixins/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.
           
           ///react의 component라고 생각하면 됨.
           ///info아래는 home.pug에 보내주는 props임,
           ///react의 dish component라고 생각하면 된다.