[Wetube] 정규표현식 Search 로직 구성

1. 결과물

• 검색어로 해당 동영상이 검색된다.
• 검색어를 포함한 동영상이 검색된다.

2. 목표

1. regular expression (정규표현식) 에 대해 안다.

2. Search 로직을 구성한다

3. 코드

videoController.js

import routes from "../routes";
import Video from "../models/video";

export const home = async (req, res) => {
	try {
		const videos = await Video.find({}).sort({ _id: -1 });
		console.log(videos);
		res.render("Home", { pageTitle: "home", videos });
	} catch (error) {
		console.log(error);
		res.render("Home", { pageTitle: "home", videos: [] });
	}
};

export const getUpload = (req, res) => {
	res.render("Upload", { pageTitle: "Upload" });
};

export const postUpload = async (req, res) => {
	const {
		body: { title, description },
		file: { path },
	} = req;
	const newVideo = await Video.create({
		fileUrl: path,
		title,
		description,
	});
	res.redirect(routes.videoDetail(newVideo.id));
};
// TO DO: upload and save video
export const search = async (req, res) => {
	const {
		query: { term: searchingBy },
	} = req;
	let videos = [];
	try {
		videos = await Video.find({
			title: { $regex: searchingBy, $options: "i" },
		});
	} catch (error) {
		console.log(error);
	}
	res.render("search", { pageTitle: "search", searchingBy, videos });
};

export const videoDetail = async (req, res) => {
	const {
		params: { id },
	} = req;
	try {
		const video = await Video.findById(id);
		res.render("videoDetail", { pageTitle: video.title, video });
	} catch (error) {
		console.log(error);
	}
};

export const getEditVideo = async (req, res) => {
	const {
		params: { id },
	} = req;
	try {
		const video = await Video.findById(id);
		res.render("editVideo", { pageTitle: `Edit ${Video.title}`, video });
	} catch (error) {
		res.redirect(routes.home);
	}
};

export const postEditVideo = async (req, res) => {
	const {
		params: { id },
		body: { title, description },
	} = req;
	try {
		await Video.findOneAndUpdate({ _id: id }, { title, description });
		res.redirect(routes.videoDetail(id));
	} catch (error) {
		res.redirect(routes.home);
	}
};

export const deleteVideo = async (req, res) => {
	const {
		params: { id },
	} = req;
	try {
		await Video.findOneAndDelete({ _id: id });
	} catch (error) {
		console.log(error);
	}
	res.redirect(routes.home);
};

Search.pug

extends layouts/main.pug
include mixins/videoBlock


block content
    .search__header
        h3 Searching for: #{searchingBy}
    .search__videos
        if videos.length === 0
            h5 No Videos Found
        each item in videos
            +videoBlock({
                title:item.title,
                views:item.views,
                videoFile:item.videoFile,
                id:item.id
            })

4. 배운점

regular expression (정규표현식)

• 문자열(string)에서 데이터를 받아옴
• 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용
• 문자열에서 해당하는 문자열의 존재 확인
• 특정 문자열 변경

이번 강의에선, 정규표현식을 이용해

1. 동영상을 검색 후 검색어와 일치하거나,
2. 검색어를 포함하는 데이터를 보여주는것을 목표로 한다.

정규 표현식 - 위키백과, 우리 모두의 백과사전

Regular expression 작성법

export const search = async (req, res) => {
	const {
		query: { term: searchingBy },
	} = req;
	let videos = [];
	try {
		videos = await Video.find({
			title: { $regex: searchingBy, $options: "i" },
		});
	} catch (error) {
		console.log(error);
	}
	res.render("search", { pageTitle: "search", searchingBy, videos });
};

위의 코드와 같이 검색 Target 내에 regex함수를 입력해준다. 해당 함수 내 i는 검색수준(검색어 포함, 대소문자 구분x)를 의미한다.

 

let, const, var 의 차이점

 

var : function-scope

 

const, let : block-scope

var,let,const 의 특징

 

search블럭 내 videos는 let함수를 사용하였는데, 빈 배열 내, 검색 된 동영상을 새로 할당해주기 위해서이다.

(이런식으로 새로 할당을하고, 내용을 저장해주면 채팅이되는건감!?)

 

5. 에러 수정

코드작성 중, Mixin이 작동을 안하는 에러가 발생했는데,

mixin.pug

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

해당 코드는 video.id를 파라미터로 받아 작동하는 함수인데,

기존 Search.pug 내 mixin부분에 ID 할당이 안되어있어서 작동하지않았다.

따라서 ID할당 해 줌.

videoBlock 내 id:item.id 로 id 할당.

 

 

이전 글 보기

 

2020/09/16 - [TodayILearned/Wetube] - [Wetube] Delete video 구현

2020/09/09 - [TodayILearned/Wetube] - 자바스크립트의 비동기식 처리

2020/09/06 - [TodayILearned/Wetube] - MongoDB_show collections is not working

2020/09/06 - [TodayILearned/Wetube] - Error on DB connection:MongoNetworkError: failed to connect to server

2020/09/03 - [TodayILearned/Wetube] - [Wetube] Video Data 작성하기 / MVC모델