mixin: 같은 형식을 모듈화하여 랜더링하기

mixin:

다른 정보 + 같은 형식을 가진 것들을 캡슐화하는 컨셉을 일컫는다.

ex) DB records

db -> web까지의 흐름

1. db.js

2. videoController.js

3. home.pug

4. videoBlock.pug

1. db.js

: db.js에서 객체'enlistedVideo' export하자.

export const enlistedVideo = { ... }

2. videoController.js

: controller에서 'home'페이지로 랜더링 할 때 객체'videos'를 탬플릿으로 전달하자.

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

​

3. home.pug

: home이 videoBlock.pug에게 {item.요소1, item.요소2 ...}, {item.요소1, item.요소2 ...}를 넘겨준다.

형식: + mixin이름( 전달 할 변수 )

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

block content
	.videos
		each item in videos    // videos에 있는 요소들을 하나하나 빼서
			+videoBlock({      // mixin으로 넘겨줌
			title:item.title,
			views:item.views,
			videoFile:item.videoFile
		})

4. mixins/videoBlock.pug

: 전달 받은 데이터가 가지고 있는 속성들 중 title, views등을 빼서, mixin이 쓰는 속성 이름으로 넘겨주면 된다.

형식: mixin name(파라미터 = { })

mixin videoBlock(video = {})
	.videoBlock
		video.videoBlcok__thumnail(src=video.videoFile, controls=true)
		h4.videoBlcok__title=video.title
		h4.videoBlcok__views=video.views