What is Mixins

• partials이긴 한데, 데이터를 받아올 수 있는 partials이다.(partials 예시: footer같은거.). 일종의 똑똑한 partial임
• 이 블록은 같은 형태를 지니지만 서로 다른 데이터를 가짐. 즉, 똑같은 HTML구조인데 서로 다른 데이터를 가질 것임.
• footer와 같은 partial는 데이터를 못 받고, 미리 만들어 놓은 HTML구조만 이곳저곳에 쓰는 것임.
• 객체를 받아서, 그 객체의 어떤 데이터를 사용하여, 어떤 HTMl구조로 유저에게 보여줄지 그 구조를 미리 만들어 놓아서 이곳저곳에서 쓰는 것임.
• 다른 데이터를 받아오지만 같은 형태의 HTML구조를 보여줌
• 하나의 mixin Pug파일 내의 여러 Mixin 구조를 가질 수 있고(약간 함수 같은 느낌임.), 원하는 Mixin을 쓰면됨.

Mixins

Home.pug에서 사용한다고 mixins를 사용한다고 하자.

1. 우선 Home.pug에 다음과 같이 video객체 (array)를 보내준다.

export const trending = (req,res) => {
    const videos = [
       {
           title:"First Video",
           rating:5,
           comment:2,
           createdAt:"2 minutes ago",
           views:59,
           id:1,
       },
       {
            title:"Second Video",
            rating:5,
            comment:2,
            createdAt:"2 minutes ago",
            views:59,
            id:1,
        },
        {
            title:"Third Video",
            rating:5,
            comment:2,
            createdAt:"2 minutes ago",
            views:59,
            id:1,
        },
        ];
    return res.render("home",{pageTitle : "Home", videos:videos});
}

2. Home.pug에서 다음과 같이 controller에서 보내준 video객체를 사용할 준비를 한다.

each video in videos

3. src/view 폴더에 mixins라는 폴더를 만든 뒤, 그 안에 video.pug라는 mixin용 파일 하나를 만든다. 이후 우리가 Home.pug에서 받았던 video객체를 어떤 식으로 HTML구조로 사용하고, 어떤 데이터를 사용한 뒤, pug문법에 맞게 HTML을 작성한다.
   이 때 ' mixin mixin명(객체) ' 이런식으로 작성하고, 객체는 임의의 이름으로 지정해도 상관없다.

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

4. 다시 Home.pug로 돌아와서 방금 작성한 video.pug mixin파일을 사용하기 위해, 이 파일을(정확히는 파일의 경로를) include해준다. 다음 코드를 Home.pug에 작성(extend밑에 작성하는게 좋을듯!)

include mixins/video.pug

5. 사용하기 -> 2번에서처럼 받아온 객체의 하나하나의 item을 받아온 뒤, 다음과 같이 사용해준다. ' +mixin명(사용할 객체array의 내용물 (한개씩)) '

each video in videos
            +video(video)