Pug, Template (Conditionals)

0_cyberlover_0·2022년 3월 19일
0

Node.JS # 02

목록 보기
9/19
post-thumbnail

Template에 대해 더 알아 보도록 한다.

  1. conditionals

  2. iteration

  3. 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은 잘 작동하는걸 볼수 있다.

profile
꿈꾸는 개발자

0개의 댓글