Template에 대해 더 알아 보도록 한다.
-
conditionals
-
iteration
-
mixing
일단 이 세가지가 있다.
conditionals를 가장 많이 쓰게 된다.
if, if else ...
base.pug
body
header
h1=pageTitle이렇게 작성 해주면 Title이 중앙으로 오게 된다.
여기서 알아야 할것이 있다.
head
title #{pageTitle} | Wetube이 부분이랑 다르다.
저 h1 경우에는 오직 하나의 값만을 가진다.
pageTitle이란 variable이다.
h1=pageTitle이렇게 쓰게 된다면 text가 아닌 variable로 인식이 된다.
h1 #{pageTitle} 같은 의미인것이다. 허나 이렇게 적지 않은 이유는
variable를 다른 text와 섞어서 쓰고 있지 않는다.
그래서 h1은 오직 pageTitle의 값만을 갖는다.
home.pug로 가서
block content
h2 Welcome here you will see the trending videos.수정해준다.
base.pug
nav
ul
li Login작성해준다.
Login 문구가 왼쪽 상단에 생겼다.
li
a(href="/login") Login수정해주면 /login으로 가능 url이 생겼다.
Logout 했을시 상황을 한번 만들어 보겠다.
videoController.js
const fakeUser = {
username:"Mercury",
loggedIn:false,
}가짜 유저 객체를 만들었다.
fakeUser는 username이 있고 loggedIn:false인 객체이다.
fakeUser를 Home에다 보낸다.
export const trending = (req, res) => res.render("home", { pageTitle: "Home", fakeUser: fakeUser } );ES6를 알면 이렇게도 써볼수 있다.
export const trending = (req, res) => res.render("home", { pageTitle: "Home", fakeUser } );이전에 쓴거랑 똑같은 의미 이다.
base.pug에서 선택을 해본다.
체크를 해본다. 만일 fakeUser.loggedIn이 true라면
log out을 보여준다.
만약 fakeUser.loggedIn이 false 라면
login을 보여준다.
li
a(href="/login") Log out
li
a(href="/login") Login지금 같은 경우는 logIn log out 둘다 보여 주고 있다.
하나만 선택 되게 해야된다.
이럴때 conditionals가 사용 된다.
conditionals은 JavaScript에서 쓰던 if, else if랑 똑같다.
https://pugjs.org/language/conditionals.html
사이트를 참조 하는게 좋다.
if + 조건문 , else if + 조건문, else
일반 JavaScript의 조건문보다 훨씬 깔끔하다.
(괄호나 중괄호가 없다.)
base.pug에 추가해준다.
ul
if fakeUser.loggedIn
li
a(href="/logout") Log out
else
li
a(href="/login") Login물론 else if 해도 되지만 여기선 별로 필요 없다.
http://localhost:4000/ 가서 확인해 보면 log out이 된 상태로 logIn 이 뜬다.
이제 fakeUser를 바꿔서 로그인으로 만들어 본다.
videoController.js 에서
const fakeUser = {
username: "Mercury",
loggedIn: true,
};true로 변경해 주면 logIn이 된 상태로 log out이 뜬다.
base.pug로 가서 user가 logIn한 경우를 만들어 준다.
header
if fakeUser.loggedIn
small Hello #{fakeUser.username}오직 fakeUser.loggedIn인 상태에서만 fakeUser.username을 나타내준다.
지금은 단지 home으로 보내는 객체에 불과하다.
if, else if은 잘 작동하는걸 볼수 있다.
