Youtube Clone Coding (3. PUG)

pug 사용

1) npm에서 pug를 설치한다.

• npm i pug

2) express에서 view engine을 pug로 설정 해준다.

• app.set("view engine", "pug")

3) index.pug라는 이름의 Pug 템플리트를 views 디렉토리에 작성한다.

4) views할것을 자기가 원하는 폴더 경로로 지정 해 주어야 한다.

• app.set("views", ${process.cwd()}/src/views);
  • app.set("views")의 Default는 ${process.cwd()}/views이다.

5) 만든 index.pug를 사용할려면 res.render("index.pug")로 사용이 가능하다.

• .pug는 생략가능

pug 문법

1) 반복되는 tag사용

• 반복되는 tag를 pug파일로 저장후 사용할려면 include 파일경로 로 사용가능

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 Wetube
  body
    h1 Watch Video! 
    include partials/footer.pug

2) 반복되는 layout/block사용

• 반복되는 layout을 pug파일로 저장후 불러올 때는 extends 파일경로로 저장한다

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")
    block head
  body 
    block content
    include partials/footer.pug

extends base.pug

block head 
  title Home | Wetube
block content 
  h1 Home

3) res.render로 pug에 변수 주기

• pug를 render해주는 controller에 가서 res.render("~.pug", {변수이름: "value"})라고 작성하면 해당 pug에서 변수를 이용 할 수 있다.
  

pug에서 if사용

body
    header
      if fakeUser.loggedIn
        small Hello #{fakeUser.username}
      nav 
        ul
          if fakeUser.loggedIn
            li  
              a(href="/users/logout") Logout
          else 
            li  
              a(href="/login") Login
      h1=pageTitle
    main 
      block content
    include partials/footer.pug

pug에서 반복문 사용

each video in videos 
  li=video
else 
	li no video

pug에서 mixins사용

1) mixins할 내용 pug에 저장

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

2) mixin을 쓸 pug파일에서 mixin불러오기

• include mixins/video

3) 불러온 mixins사용하기

each potato in videos 
    +video(potato)