Pug Conditional Iteration

1. Conditional

 - 특정 상황의 유저에게만 보이게 하기 위해 Template에 작성

// base.pug
doctype html
html(lang="ko") 
    head 
        title #{pageTitle} | Wetube
        link(rel="stylesheet" href="https://unpkg.com/mvp.css")
    body 
        header
            h1=pageTitle
        main
            block content
    include partials/footer.pug

 - h1=pageTitle 과 h1 #{pageTitle} 은 같긴 하지만 여기선 variable을 다른 text와 섞고 싶지 않기 때문임

   - tag에 variable값 1개만 부여할 것이라면 전자와 같이 작성

 - fakeUser를 임의로 생성하여 로그인이 됐을 때 화면 출력

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

Study pug conditional :books: · Daniel-Jeon/wetube-loaded@4c06c98

 

2. Iteration

 - 반복문이며 Element의 List를 보여줌

   - 정확히는 Array의 모든 Element에 대해 특정 행동을 취할 때 사용

   - each X in Y, Array Y 안에 있는 각각의 Element X에 대해 동일한 작업을 실행

 - 통상적으로 each 단수 in 복수 형태로 사용

// videoRouter.js
export const trending = (req, res) => {
  const videos = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  res.render("home", { pageTitle: "Home", videos });
};

// home.pug
extends base.pug

block content
    h2 Welcome, Here you will see the trending videos 😝
    each video in videos 
        li=video

 

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