Search 기능 만들기

이번에는 Search 기능을 만들어 보려한다.

1. 먼저 Search 페이지를 만들어준다.

search.pug

• input에 name을 꼭 지정해준다.
• controller에서 input의 값을 가져다 쓰기위해선 name을 지정해 주어야한다.

extend base.pug

block content 
    form(method="get")
        input(type="text" placeholder='Search by Title' name="keyword")
        input(type="submit", value="Search") 

2. Router에 연결

globalRouter.js

import express from "express";
import { home, search } from "../controllers/videoConroller";
import { join, login } from "../controllers/userController";

const globalRouter = express.Router();

globalRouter.get("/", home);
globalRouter.get("/join", join);
globalRouter.get("/login", login);
globalRouter.get("/search", search);

export default globalRouter;

3. controller에 search를 추가 해준다

export const search = (req,res) =>{
return res.render("search")
}

4. req.query를 사용하여 input으로 받아온 keyword값을 변수로 저장한다.

export const search = (req,res) =>{
 const {keyword} = req.query
return res.render("search")
}

5. Model.find() 메서드를 사용하여 query에서 받은 keyword값을 object 전체에서 찾아준다.

export const search = async (req, res) => {
  const { keyword } = req.query;
  let videos = [];
  if (keyword) {
    videos = await Video.find({
      title: {
        $regex: new RegExp(keyword, "i"),
      },
    });
  }
  return res.render("search", { pageTitle: "Search", videos });
};

• videos를 비어있는 array로 지정해주어 if문 바깥에서도 호출 할 수 있게 변수로 지정해준다.

let = videos = []

• $regex regex operator(정규표현식)를 이용하여 대소문자 구분없이 filter해서 검색 할수 있도록 해준다. regex는 다음과 같은 매개변수가 있다

$regex: new RegExp(keyword, "i") -> keyword가 포함된 것들을 검색.
$regex: new RegExp(`^${keyword}`, "i") -> keyword로 시작되는 것들을 검색.
$regex: new RegExp(`${keyword}$`, "i") -> keyword로 끝나는 것들을 검색.