mixin

views > layouts > partials에서 일종의 모듈을 만들어서 재활용한 경험이 있을 것이다.

mixin도 이와 유사하다. 다른 정보지만 같은 형식을 가진 것들(대표적으로 DB records)을 캡슐화한다.

정리하자면 mixin은 다른 정보 같은 형식

 

먼저 controller를 통해 템플릿으로 변수 전달 해주자.

import { enlistedVideo } from "../db";

export const home = (req, res) =>
  res.render("home", { pageTitle: "Home", videos: enlistedVideo });

 

더미 데이터가 든 enlistedVideo를 videos라는 이름으로 home 템플릿으로 넘겨줬다.

 

이제 mixin을 생성해보자.

views > mixins 폴더를 생성하여 videoBlock.pug를 생성하고 다음과 같이 작성하자.

 

mixin [생성할 mixin 이름](변수 = {})

전달 받은 변수에서 title, views 등을 빼서 쓰면 된다.

mixin videoBlock(video = {})
    .videoBlock
        video.videoBlock__thumnail(src=video.videoFile)
        h4.videoBlock__title=video.title
        h6.videoBlock__views=video.views

 

home.pug에는 컨트롤러 단에서 받은 videos를 each로 각각 mixin으로 뿌려보자.

+mixin 이름에 본래 더미 데이터가 가지고 있는 속성들을 mixin이 쓰는 속성 이름으로 넘겨주면 된다.

extends layouts/main.pug
include mixins/videoBlock // mixin을 include

block contents
    div.video
        each i in videos
            +videoBlock({
                title: i.title,
                views: i.views,
                videoFile: i.videoFile
            })