Search 페이지

검색기능을 하는 페이지를 만들어보자.

일단 라우터를 만들어야한다. 검색기능은 globalRouter에 해당되므로, globalRouter.get("/search",search)를 작성해준다. 그리고 해당 페이지를 화면에 띄워야하므로, 템플릿을 만들어준다. search.pug 파일을 만들고 아래와 같이 작성한다. 

extends base.pug

block content 
    form(method="GET")
        input(placeholder="제목을 통해 검색하세요!",type="text",name="keyword")
        input(type="submit" , value="검색")

검색 페이지에서는 백엔드로 요청 보낼 것이 딱히 없기 때문에, method를 get으로 사용해준다. 사용자가 input에 입력하는 값은 url에 만영이 되고, 이를 알아내어 검색에 활용해야 하기 때문에 우리는 request의 query를 사용해주어야 한다. 따라서 search 컨트롤러는 다음과 같다.

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 });
}

req.query는 get을 사용할 때 url로 부터 얻을 수 있는 데이터가 담겨있다. 사용자가 검색창에 "python" 이라고 검색을 하면 url에 keyword="python" 이라고 반영되고, 이를 req.query로 받아올 수 있다.

사용자가 검색하지 않았으면 keyword 는 undefined이므로 조건문이 실행되지 않는다. 검색을 했을때, 제목을 토대로 검색을 하므로, 몽구스에서 제공하는 find메서드를 사용하여 찾는다. 이때 정규표현식을 사용하면 좀 더 세련되게 검색할 수 있다. 예를들어, 특정 단어가 들어간 제목을 모두 검색하거나, 특정 단어로 끝나는 제목을 찾거나 등등.... 나는 특정 단어가 들어간 제목을 찾는 검색 기능을 구현했는데 위의 코드와 같다. $regex는 정규표현식을 사용하기 위해 필요한 것이다.