Pug (2)

Pug에 대해 더 알아보겠다.

 

1. 변수를 사용할 수 있다.

자바스크립트에서의 ``(백틱) 처럼 퍼그도 변수를 사용할 수 있다. 방법은 두가지가 있다.

첫번째로, #{변수} 이 방법이다. 중괄호 속에 변수명을 넣으면 퍼그는 이를 변수로 인식하고 변수로 출력한다.

두번째, =변수 이다. 이는 설명하기 어려우므로 예를 들어보면, 다음과 같다.

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

title #{pageTitle} 을 보면 첫번째 방식을 사용해 변수를 쓴것을 볼수 있다. h1=pageTitle 을 보면 두번째 방법을 사용해서 변수를 사용했다. 이 둘의 차이는 다음과 같다.

첫번째 방식은 변수 이외에 다른 문자열이 같이 쓰일때 사용하는 방식이고, 두번째 방식은 변수만 단독으로 써도 상관없을때 쓰는 방법이다.

 

++ 위와 같은 변수 사용법은 attributes 사용에는 쓸 수 없다. 예를들어 다음과 같은 코드는 실행이 되지않는다.

a(href="/videos/#{info.id}")=info.title

이 코드에서 #{ info.id } 부분은 그냥 문자열로 인식된다. 이를 해결하기 위해서는 자바스크립트를 사용한다.

a(href=`/videos/${info.id}`)=info.title

백틱을 사용하여 변수를 표현하면 잘 작동한다.

 

 

2. 조건문, 반복문을 쓸 수 있다.

말 그대로이다. '유저가 로그인이 된 상태라면~' 의 코드를 퍼그안에 작성할 수 있다.

if userLogin
	div 안녕하세요, #{user.name}!
else
	a(href="/login") Login

 로그인이 된 상태(userLogin 이 true) 면, 인사말을 보여주고, 아니라면 로그인할 수 있는 페이지로 이동하는 링크를 만들어 보여줄 수 있다.

 

반복문이라고 쓰기에는 애매하지만 each문을 쓸 수 있다.

extends base.pug
include mixins/video

block content 
    h2 Kitube에 오신 것을 환영합니다!
    each video in videos 
        +video(video)
    else 
        div 현재는 동영상이 없네요 :(

videos 라는 배열에 있는 요소들을 출력하기 위해 each문을 썼다. 특이한 점은 배열안에 요소가 없을때 else로 넘어간다는 것이다. 여기서 mixin도 등장한다.

 

3. mixin

mixin 은 반복되는 특정 코드에 변수가 담겨있을때, 반복은 되지만 그 안의 내용은 쓸때마다 달라져야 할때 사용한다. 사용법은 mixins 파일을 만들어 그 안에 원하는 내용의 코드를 작성하고 이를 include 하는것이다.

mixin video(info)
    div 
        h4=info.title
        ul 
            li #{info.rating}/5
            li #{info.comments} comments.
            li Posted #{info.createdAt}.
            li #{info.views} views.

mixin 파일의 코드이다. 위와 같이 mixin 을 적어주고 이름을 적어준뒤 괄호안에 인자를 넣어준다. 그리고 실제로 사용할때에는 +video(video) 와 같이 사용하면 된다.

 

지금은 익숙하지 않지만 연습하면 되겠지!