Iteration에 대해 알아 본다.
if, else if conditional을 없앤다.
Iteration은 기본적으로 elements의 list를 보여준다.
videoController.js
export const trending = (req, res) => {
const videos = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
return res.render("home",{ pageTitle:"Home",videos});
};treding 안에 video들이 들어가게 된다.
데이터 베이스에서 가져올거다.
그래서 가짜 비디오의 array을 만든거다.
home template에 videos를 보내줬다.
이제 home에서 각각의 video를 보여주게 한다.
첫째로 template에는 array인 variable이 있어야 된다.
array가 없다면 동작하지 않는다.
each적고 보여주고 싶은 variable이름을 적어준다.
home.pug에다가
block content
h2 Welcome here you will see the trending videos.
ul
each video in videos
li=video이렇게 작성해 주면 list들이 생겨 났다.
videos array 안의 각 element에 대해서
list item을 만들어서 video를 그안에 넣어주는 거다.
li #{video}이렇게 해주는 거랑도 같은 의미 이다.
여기서 주목할 점은 video는 굳이 video가 아니어도 된다.
ul
each banana in videos
li=banana이렇게 작성하여도 아무 상관 없다.
banana는 loop상의 현재 값이다.
array 안의 각 item을 가리킨다.
이름에 주의 해야 되는 것은 videos이다.
즉 videos는 controller 부분의 videos와 같아야 한다.
array가 비어 있을 경우는 아무 것도 안나온다.
그럴때 pug를 이용하여 이렇게 설정 할수 있다.
videoController.js
export const trending = (req, res) => {
const videos = [ ];
return res.render("home", { pageTitle: "Home", videos });
};home.pug
ul
each video in videos
li=video
else
li Sorry nothing found.array가 비어 있을 경우 Sorry nothing found라는 문구를 뜨게 만들어 놓는다.
pug는 자동적으로 videos 안에 뭐가 들어있는지 없는지 부터 체크한다.
JavaScript랑은 다른 구조 이다.
pug만이 할수 있는 구조이다.
https://pugjs.org/language/iteration.html
Iteration에 대한 예제를 더 보고 싶다면 위 사이트를 참고 하자.
댓글이나 비디오, 리스트를 보여주고 싶을때 iteration을 쓴다.
가장 중요한건
each video in videos
in 다음에 오는 variable(videos)은
return res.render("home", { pageTitle: "Home", videos });이 부분(videos)의 이름이 같아야 한다는 거다.
