[유튜브 클론코딩] #5 TEMPLATES

front-end : HTML5, CSS3, Pug

back-end : NodeJS, MongoDB, Express

#5 TEMPLATES

5.0 Returning HTML

HTML을 직접 텍스트로 적어서 리턴할 수 있으나

반복되는 부분을 매번 복붙하는 것은 비효율적이기 때문에

좀 더 편리하게 리턴하기 위해서 PUG 사용

5.1 Configuring Pug

Pug = 템플릿을 이용해 뷰를 만드는 걸 도와주는 템플릿 엔진

app.set("view engine", "pug");

pug를 설치한 후 express가 view engine으로 pug를 사용할 수 있게 설정해주어야 한다.

 

express는 views라는 디렉토리에 있는 view를 알아서 보기 때문에 따로 import 해줄 필요는 없다.

디렉토리 안의 pug파일을 렌더링 한 후 html로 변환시킨다.

res.render("<view파일이름>");

이와 같이 컨트롤러가 view를 렌더링 시킨다.

 

이때 views 디렉토리의 경로 설정에 주의해야 한다.

package.json에서 node.js가 실행되고 있기 때문에 현재 작업 디렉토리는 package.json이 있는 곳으로 인식된다.

 

5.2 Partials

views 디렉토리 경로를 재설정해주기 위해선 다음과 같이 한다.

//server.js
app.set("views", process.cwd() + "/src/views");

 

Pug의 반복되는 부분을 따로 빼기 위해서 partials라는 폴더 안에 파일을 생성한다.

partials의 파일을 사용하고 싶을 때는 include로 불러오면 된다.

 

예를 들어 footer를 partials 안에 넣어뒀을 때 footer를 불러오고 싶다면 다음과 같이 사용하면 된다.

//home.pug
..
body
    h1 Video!!!!!
include partials/footer.pug

 

Pug의 장점은 1. html의 깔끔한 작성 2. html에 자바스크립트 포함 가능 3. 반복하지 않아도 됨

5.3 Extending Templates

base layout 템플릿을 하나 만들고 그 파일을 확장(extends)하여 다른 템플릿을 생성한다.

 

확장하여 사용할 때 페이지마다 다른 html을 적용하고 싶을 때는 base 템플릿에서 바꾸고 싶을 부분을 block으로 두고

각각의 템플릿마다 block을 채워넣으면 된다.

//base.pug
doctype html
html(lang="ko")
    head
        title Wetube
    body
        block content
   	include partials/footer.pug

//home.pug
extends base.pug

block content
    h1 HoME!!!

5.4 Variables to Templates

템플릿에 변수를 추가하기 위해선 #{변수명}으로 두고

controller가 render할 때 변수를 지정하여 받게 해줘야 한다

//base.pug
doctype html
html(lang="ko")
    head
        title #{pageTitle} | Wetube

//controller.js
export const trending = (req, res) => res.rende("home", {pageTitle: "Home"});

 

 

5.6 MVP Styles

mvp.css는 html에 기본적인 스타일을 알아서 입혀준다.

css 작업을 하기 전 임시방편으로 사용하기에 요긴하다.

//base.pug
doctype html
html(lang="ko")
    head 
        title #{pageTitle} | Wetube
        link(rel="stylesheet" href="https://unpkg.com/mvp.css")

5.7 Conditionals

//layout.pug
body
    header
    	h1=pageTitle

태그에 하나의 변수값만 집어넣을 경우에는 태그=변수로 표시할 수 있다.

 

ul
    if fakeUser.loggedIn
    	li
        	a(href='/logout') Logout
    else
    	li
        	a(href="/login") Login

객체를 받아 (객체명.값) 으로 조건을 설정하여 사용할 수 있다.

(강의에서는 조건을 사용하기 위하여 우선 fakeUser라는 가상의 객체를 만들어서 render하였다.)

5.8 Iteration

iteration(반복)은 elements의 리스트를 보여주는 것이다.

우선 템플릿에는 배열인 변수가 있어야 한다. ( 강의에서는 controller에서 가상의 videos 배열을 만들어서 넘겨줌 )

후에 템플릿에서 each를 적고 보여주고 싶은 변수명을 적음

ex) each video in videos

배열에 값이 없으면 else를 추가할 수도 있다

each video in videos
    li=video
else
    li Sorry noting found

5.9 Mixins

Mixin = 데이터를 받을 수 있는 partial으로 미리 만들어진 html 블럭이다.

html코드를 효율적으로 재사용할 수 있다.

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

 

mixin을 사용할 때는 다음과 같이 사용한다.

1. mixin을 include해준다

2. videos 안의 각각의 potato에 대하여 video라는 mixin을 호출해서 potato라는 정보 객체를 보냄

3. mixin이 해당 정보를 이용하여 html로 나타냄

include mixins/video

each potato in videos
     +video(potato)