Mixins

https://pugjs.org/language/mixins.html

• mixins을 사용하면 재사용 가능한 pug blocks을 만들 수 있음

• mixin은 partial이긴 하지만, 데이터를 받을 수 있는 partial임(mixin은 똑똑한 partial이다!!)
  Partials 정리 문서

• footer처럼 반복해서 나오는 HTML block이 필요한데, 형태는 같지만 각자 다른 데이터를 가져야한다면 mixin을 이용한다.

mixin 사용

1. views/mixins폴더 만들고 그 안에 videos.pug파일 만들기

2. pug파일 안에 반복사용할 내용 아래와 같이 작성

video.pug

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

• info는 mixin이 받게 될 데이터를 지칭

3. home에 mixin사용

• mixin은 partial달리 앞에 +을 붙여줘야함

home.pug

extends base.pug
include mixins/video

block content
    h2 Welcome here you will see the trending videos
    each potato in videos
        +video(potato)
    else   
        li Sorry nothing found.

• potato는 item(즉, 영상 데이터)
• videos 안에 각각의 potato에 대해서, video라는 mixin을 호출해서 potato라는 정보객체를 보내고 있는 것임 그리고 그건 video mixin 안에 info가 될것임

루틴

1. include mixins/video로 video mixin을 가져오고

2. video mixin을 사용해서, 어떤 정보를 video mixin으로 보내주고

home.pug

each potato in videos
        +video(potato)

3. 그 정보를 이용해서 HTML로 나타냄

video.pug

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

4. HTML을 return해주는 일종의 function을 갖게된 것임

---

정리

1. video function에 info변수를 보내주고
mixin video(info)

2. info은 potato라는 객체다.

3. potato 객체는 뭐냐? videos라는 array안에 한 item이다.

const videos = [
    {
      title: "First Video",
      rating: 5,
      comments: 2,
      createdAt: "2 minutes ago",
      views: 59,
      id: 1,
    },
    {
      title: "Second Video",
      rating: 5,
      comments: 2,
      createdAt: "2 minutes ago",
      views: 59,
      id: 1,
    },
    {
      title: "Third Video",
      rating: 5,
      comments: 2,
      createdAt: "2 minutes ago",
      views: 59,
      id: 1,
    },
  ]; //fakeVideos