Pug, Template #02(Iteration, Mixin)

문자열화된 (string representation)객체를 만들어 준다.

videoController.js

export const trending = (req, res) => {

const videos = [

{

title: "Hello",},

{title: "video #2",

},

{

title: " What's up",

},

];

 

http://localhost:4000/ 확인해 보면

[object Object]

[object Object]

[object Object]

이런식으로 나온다. 수정 가능 하다.

videos안에 video가 있으니 video는 title이 있다.

home.pug으로 가서 video.title이라 적는다.

ul

each video in videos

li=video.title

title이 나오게 된다. 이처럼 객체들의 리스트도 보내줄수 있다.

숫자일 필요도 없고 객체여도 된다.

좀 더 복잡한 video를 만들어 본다.

mixin이라는 걸 이용해 볼거다.

mixin은 base.pug에서 써봤던 partials와 같은 거다.

mixin은 partials이긴 하지만 데이터를 받을수 있는 partial을 말한다.

footer에선 html의 한 조각을 나타내고 데이터를 받진 못한다.

footer는 페이지가 바뀌어도 내용이 그대로 이다.

mixin은 footer에서 썼던 거랑은 다르게 똑같은 구조의 html 블록이지만 데이터를 바꿔서 넣는다.

mixin은 똑똑한 partial이다.

videoController.js

export const trending = (req, res) => {

const videos = [

{

title: "First Video",

rating: 5,

comments: 10,

createdAt: "2 minutes ago ",

views: 100,

id: 1,

},

{

title: "Second Video",

rating: 3,

comments: 5,

createdAt: "2 minutes ago ",

views: 20,

id: 1,

},

{

title: "Third Video",

rating: 4,

comments: 8,

createdAt: "2 minutes ago ",

views: 80,

id: 1,

},

];

확인해 보면 Title만 나오고 있다.

home.pug로 가서 수정 해준다.

block content

h2 Welcome here you will see the trending videos.

each video in videos

div

h4=video.title

ul

li #{video.rating}/5.

li #{video.comments} comments.

li Posted #{video.createdAt}.

li #{video.views} views.

Title부분은 더이상 li로 사용할 필요가 없어서 div로 바꿔 주었다.

component라 불리우는 video이다.

소프트웨어 개발자 혹은 풀스택 개발자처럼 생각해본다면 유튜브를 떠올려 보자.

여러 비디오들이 나오고 썸네일도 보일것이고 제목, 조회수가 보일것이다.

그 비디오들 중 하나를 클릭해서 재생을 하게 되면 사이드바엔 다른 비디오 재생 목록들이 보일것이다.

이전 페이지에서 클릭해서 재생하는 비디오와 비슷한 종류의 비디오들이 보일 거다.

썸네일 , 제목 , 조회수 같은 것들 즉 , 어느 곳에서나 재사용이 가능한 component이다.

유튜브에서는 component를 여러 페이지에서 재사용하고 있다.

추천 동영상 사이드바, 첫 페이지, 인기 동영상 페이지, 각 채널들 모든 비디오들이 전체적인

틀에서는 같아 보인다.

결국 그렇게 반복적으로 쓰이는 문구를 최소화 하기 위해서 쓰게 될 partial가 mixin이다 .

데이터를 받을 수 있는 일종의 미리 만들어진 html block이라 볼수 있다.

views 폴더에 mixins 폴더를 만들어 준다.

그 안에 video라는 mixin을 만들어준다.

일반적인 partial는 처음에 별도로 추가 해줄게 없지만 mixin은 다르다 추가를 해줘야 한다.

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.

이렇게 만들어 주었으니 원래 home.pug에 있던 건 삭제 한다.

그리고 수정해준다.

block content

h2 Welcome here you will see the trending videos.

each view in videos

+video(view)

videos 안의 각각의 view 에 대해서 video라는 mixin을 호출해서

view라는 정보 객체를 보내고 있다.

그리고 video mixin안의 info가 된다.

그러고 나서 새로고침 하면 에러가 난다.

video는 function이 아니다. pug_mixins.video는 function이 아니다.

video를 쓰고 있다. 그리고 footer를 넣었을때와는 다른 형태로 video를 쓰고 있다.

footer는 단순히 include 시킨거 뿐이다.

mixin의 경우엔 +를 넣었다.

home.pug 에 추가해준다.

extends base.pug

include mixins/video

이후에 새로고침 하면 전과 같이 작동한다.

이제 mixin 을 어느 페이지에다 적용을 할수 있게 되었다.

홈페이지, 검색페이지, 사이드바, 채널페이지

이게 바로 html 코드를 재사용 하는 방법이다.