node.JS PUG #3

404·2021년 12월 30일
0

node.js no.07

PUG에서 조건, 반복을 사용하는 방법

PUG에서는 조건, 반복을 사용하여 HTML block을 제어할수 있다.

1. conditional

가상의 유저를 생성했다.

const fakeUser = {
  ID: "FUNco",
  loginCheck: true,
};

이 유저의 로그인 상태에 따라 페이지를 다르게 보여준다.
보통의 경우라면 <script> 태그 안에 조건문을 사용하여 html을 제어했을 것이다.
하지만 PUG에서는 아래와 같이 직접적으로 사용할 수 있다.

ul
  if fakeUser.loginCheck
     li
       a(href="/logout") Log out
  else 
     li
       a(href="/login") Log in

가상유저의 로그인 상태가 true 라면 log out 링크를, false라면 log in 링크를 보여준다.

2. literation

컨트롤러에서 변수로 array를 받았다. 어떻게 활용해야 할까?

// videosInfo is array
each video in videosInfo
	 ul
     	li #{video}

Python에서 for 문을 사용할때 쓰는 형식과 똑같다. PUG는 ul 태그를 생성하고 그 아래 videosInfo array 안의 인자들을 하나씩 꺼내 li를 만들것이다.

그렇다면 array와 object가 섞인 변수에서는?

// videosInfo is object
each video in videosInfo
	 div
            h4=video.title 
              ul
                 li video # #{video.code} | runtime : #{video.runTime}

위와같이 사용할 수 있다.

3. mixin

mixin은 일종의 partial과 같다. 데이터를 받을 수 있는 미리 만들어진 html block이다.

mixin은 partial과 같은 개념이지만 html block 안의 데이터를 받아 내용을 다르게 만들 수 있다는 점에서 차이가 있다. 그리고, partial과 같이 별도의 파일로 떼어네어 include 하는 형식으로 사용할 수 있다.

// videosInfo is object
// dir = /mixins/video.pug
mixin video(info)
	 div
          h4=info.title 
            ul
               li cideo # #{info.code} | runtime : #{info.runTime}

mixins 폴더를 별도로 생성해 video.pug 파일을 생성하고 아래 home.pug에서 호출한다.

// home.pug
include mixins/video.pug

each video in videosInfo
      +video(video)

위 코드의 결과는 2번 하단의 코드와 같다.

profile
T.T

0개의 댓글