NODE JS - pug(mixin) 사용법

📢NODE JS - pug(mixin) 사용법

📋MIXIN

▼mixin 은 pug의 함수의 일종이다. 반복적으로 사용되는 html 구조를 mixin의 정의하고 그값을 인자함수로 정의해줌으로써 반복되는 html 안에 변수를 설정해줄수있다. 아래 소스의 +는 mixin을 포함하여 실행한다는 뜻이다.

💻videoBlock.pug

mixin videoBlock(video ={})
    .videoBlock
        video.videoBlock__thumbnail(src=video.videoFile, controls=true)
        h4.videoBlock__title=video.title
        h6.videoBlock__views=video.views

 

💻home.pug

include mixins/videoBlock

each object in videos //for .. in 같은 pug 전용 반복문이다.
    +videoBlock({
        title: object.title,
        description:object.description
    })

💻videoController.js (단지 pug의 videos의 객체를 전달해주기 위함)

const videos = {title : '제목' , description : '내용'};
const home = (req,res) => {
    res.render('home',{videos});
};