Express View engine - PUG (3)

PUG Conditionals

자바스크립트의 if, if else, else 와 같은 구문을 말한다. 대표적으로 로그인 상태, 로그아웃 상태를 활용할 수 있다.

* pug 변수 표기

title #{pageTitle} | wetube
ㄴ 다른 text와 같이 사용될 때는 #{}로 변수라고 정의해야한다.

h1 = pageTitle === h1 #{pageTitle}
ㄴ 단독으로 사용될 때는 '='로 변수를 정의할 수 있다.

* attribute에서 변수 사용법
a(href=`videos/${video.id}` or a(href="videos/"+ video.id
자바스크립트 template string(``백틱)을 사용하거나 + 을 사용해서 활용해야한다.
href, class, id 등과 같은 attribute에서는 #{video.id}을 사용하면 인식이 안된다.

if구문은 자바스크립트와 비슷하게 사용된다. loggedIn이 ture면 Log Out, false면 Login

예 ) JavaSctipt와 동일한 방식... 위 코드와 완전 동일한것은 아님 작동 방식만 확인할 것!

if (fakeUser.loggedIn === false) {
 h1.innerText = Log Out;
}
else {
h1. innerText = Login;
}

Conditionals – Pug

PUG Iteration

elements 요소들의 list를 보여주는 방법. 댓글, 비디오 리스트 등 어떤 리스트를 보여주고 싶을 때 자주 사용하게 된다. list로 보여주고자 하는 array(배열&객체)이 있어야한다. 만약 array이 비어있다면 else 문을 추가해서 활용할 수 있다. (pug가 자동으로 배열 안에 값이 있는지 없는지 체크를 한다.) conditionals는 자바스크립트이지만 iteration, each / else 는 자바스크립트가 아니다! 

 

"each video in videos"

video는 이름을 원하는대로 사용할 수 있지만

videos 는 컨트롤러에서 선언한 이름으로만 사용해야한다.

보통 단수 in 복수 형태로 많이 사용한다.

 

#1 배열에 값이 있을 경우

 

#2 배열에 값이 없을 경우

 

#3 배열에 값을 반대순서로 표시

 

#4 객체 형태의 값을 표시

 

Mixins (smart partial)

mixin은 partial의 형태로 데이터를 받을 수 있다. partial로 만들어진 footer는 페이지가 바뀌어도 데이터가 바뀌지 않는다. 만약 반복하는 동일한 형태의 html 블록이지만 서로 다른 데이터를 가질 때 mixin을 활용하면 된다.

 

(예시: Youtube의 영상의 제목, 게시날짜, view 수 등의 정보는 동일한 형태로 추천 동영상, 인기 동영상 등에서 사용될 때 Mixin을 활용해 component형태로 만들어 사용한다.)

 

 

#mixins 예시

다양한 정보가 들어가 있는 여러 객체들

div ~ li 까지가 반복되는 형태의 html이다. 이부분이 mixins로 나눠 component처럼 활용될 예정

 

# mixin 파일
mixins 폴더를 생성하여 파일 생성 후 (views > mixins > video.pug) 
mixin 설정할 때는 mixin video(info) 선언해줘야 한다. (info : 전달 받을 내용) - mixin mixin_name (data)
구조 짜기 (div~li 까지 tag 잘라 붙여넣기)

# page 파일 (mixin 불러오는 파일)
include mixins/video : mixins/video 을 불러와야 사용이 가능하다.
+mixin_name (item) : videos의 item을 각각 video라는 mixin을 호출하여 정보를 info로 보낸다.
(* item은 videos array의 item)