[Wetube] DB.js를 이용하여 HOME화면에 동영상 리스트 보여주기

1. 결과물

홈 화면에 DB파일의 동영상 리스트를 송출한 상태

2. 목표

• 테스트 DB.js파일을 작성한다.
• mixin파일에 대해 이해한다.
• mixin파일을 이용해 HOME.PUG 파일로 송출한다.

PUG란?

• Express내에서 사용 할 수 있는 View engine
• 해당 언어에서 사용되는 값을 해당되는 HTML언어로 변화시켜준다.
• HTML을 보다 쉽게 사용할 수 있게한다.

mixin 이란?

• reuserble한 코드블럭을 생성하는 방법 중 하나이다.
  • 계속해서 등장하는 캡슐화, 쪼개서 프로그래밍하는 방법 중 하나, 이는 유지보수를 편리하게 한다.
  • 특정한 기능을 하는 코드를 캡슐화 했기 때문에 반복되는 코드를 줄일 수 있다.

참고링크

https://velog.io/@bluestragglr/Vue.js-Mixin-기능-반복-제거하기

3. 코드

DB.js

export const videos = [
	{
		id: 3526666,
		title: "video awsome",
		description: "This video is something i like",
		views: 24,
		videoFile:
			"https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4",
		creator: {
			id: 11515,
			Name: "YJ",
			email: "yj@abc.com",
		},
	},
	{
		id: 344444,
		title: "video super",
		description: "This video is something i like",
		views: 24,
		videoFile:
			"https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4",
		creator: {
			id: 11515,
			Name: "YJ",
			email: "yj@abc.com",
		},
	},
	{
		id: 3521111,
		title: "video nice",
		description: "This video is something i like",
		views: 24,
		videoFile:
			"https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4",
		creator: {
			id: 11515,
			Name: "YJ",
			email: "yj@abc.com",
		},
	},
];

videoController.js

import { videos } from "../db";

export const home = (req, res) => {
	res.render("Home", { pageTitle: "home", videos });
};
export const upload = (req, res) => {
	res.render("Upload", { pageTitle: "Upload" });
};
export const videoDetail = (req, res) => {
	res.render("ViedoDetail", { pageTitle: "video Detail" });
};
export const deleteVideo = (req, res) => {
	res.render("DeleteVideo", { pageTitle: "delete Video" });
};
export const search = (req, res) => {
	const {
		query: { term: searchingBy },
	} = req;
	res.render("search", { pageTitle: "search", searchingBy, videos });
};

export const editVideo = (req, res) =>
	res.render("editVideo", { pageTitle: "edit video" });

VideoBlock.PUG (mixin)

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

비디오 리스트를 캡슐화 한 상태

videoBlock내에, 비디오,타이틀,조회수를 묶어 캡슐화했다.

앞으로 비디오 리스트를 수정하고 싶다면 해당 mixin파일로 넘어와서 수정하면 될 것이다.

Home.PUG

extends layouts/main.pug
include mixins/videoBlock

block content
    .videos
            each item in videos
                +videoBlock({
                    title:item.title,
                    views:item.views,
                    videoFile:item.videoFile
                })

4. 배운점

• DB파일을 작성하여, Mixin파일로 캡슐화 시킨다.
  • 해당 파일들을 export, include 시키는 것 잊지않기.
  • video 리스트는 videos 변수명으로 정의하였음.
• videoController.js에서 DB파일 내의 videos import하기
• Home화면 내 videos를 송출하도록 render함수 내에 사용
• HOME.PUG화면 내 mixin을 송출
  • 변수의 개수를 알 수 없을 경우(계속 추가 될 경우?) Rest argument 구문을 사용한다.
  • Rest argument

5. 에러 수정

계속해서 동영상 재생이 안되고 플레이어만 뜨는 문제가 발생했다.

(별다른 에러문구 없음)

대체 왜이러나 이틀을 내내 고생하던 중 

video 태그의 띄어쓰기가 잘못 된 점을 발견했다...ㅠㅠ

참 별거로도 다 에러가 난다... 삽질만 시작했다 하면 기본이 하루이틀이니 ㅠㅠ

correct

        video.videoBlock__thumbnail(src=video.videoFile, controls=true)

error

        video.videoBlock__thumbnail(src= video.videoFile, controls=true)