🔖 강의 범위: #6.26~6.27

Preview ❗️

#7 시리즈부터는 지금까지 배운 이론들을 바탕으로 홈페이지의 간단한 기능들을 만들어보는 시간을 가질 것이다.

이번 시간에는 간단히 검색 페이지와 검색기능을 만들어보자.

핵심 개념 🌟

Mongoose 의 Query.prototype.sort()

정렬 순서를 설정합니다. 개체가 전달되면 허용되는 값은 asc, desc, 오름차순, 내림차순, 1 및 -1입니다.
https://mongoosejs.com/docs/api.html#query_Query-sort

Express 의 req.query

라우트 안에 query string parameter를 포함하고 있는 객체로, URL에서 데이터를 가져올 때 주로 사용한다.
예) ?keyword="food" => {keyword: "food"}
query parse가 비활성화로 설정되면 빈 객체 {}이고, 그렇지 않으면 구성된 query parse의 결과입니다.
https://expressjs.com/ko/api.html#req.query

몽고DB 의 regex ($regex)

몽고DB에서 정규표현식을 사용하기 위해 사용하는 키워드
쿼리의 패턴 일치 문자열에 대한 정규식 기능을 제공합니다.
https://docs.mongodb.com/manual/reference/operator/query/regex

JavaScript 의 RegExp mdn

RegExp 생성자는 패턴을 사용해 텍스트를 판별할 때 사용합니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp

RegExp 사용 방법
RegExp 객체는 리터럴 표기법과 생성자로써 생성할 수 있습니다.
리터럴 표기법의 매개변수는 두 빗금으로 감싸야 하며 따옴표를 사용하지 않습니다.
생성자 함수의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용합니다.

/ab+c/i 를 아래 RegExp 생성자를 이용해서 만들 수 있습니다.
new RegExp(/ab+c/, 'i') // 리터럴 표기법
new RegExp('ab+c', 'i') // 생성자 함수

정규식

정규표현식 만드는 사이트
https://www.regexpal.com

참고로 정규식에 대해서 좀 더 이해해보자면

예시1: //키워드//ig
해당 키워드를 가진 모든 문자열 해당
뒤의 플래그 i 는 ingnore 의 약자로 키워드의 대소문자의 차이를 무시하는 옵션임. (ex. welcome = Welcome)
뒤의 플래그 g 는 global 의 약자.

예시2: //^키워드//ig
해당 키워드로 시작하는 문자열만 해당

예시3: //키워드$//ig
해당 키워드로 끝나는 문자열만 해당

강의 내용 ☘️

search 기능을 수행할 url 만들고, 띄울 화면 세팅하고, search 기능 만들기

step 0. 세팅

// Router
globalRouter.get("/search", search);

// Controller 
export const search = (req, res) => {
  return res.render("search", { pageTitle: "Search" });
};

// Template 
	search.pug 생성

Step 1-1. 검색 기능 : req.query

// Template

form(method="GET")
        input(name="keyword" type="text" placeholder="Search By Title")
        input(type="submit" value="Search")
        
// Controller

const { keyworkd } = req.query;
    

url params 에
?input이름=input에적은것
이 추가되는 걸 볼 수 있다.
url 에 데이터를 불러온 것.

step 1-2. 검색 기능 : Model.find()

! 복습
Model.find()
documents를 찾습니다. (findOne과 다르게 전체 document를 찾습니다.)
Mongoose는 명령이 전송되기 전에 모델의 스키마와 일치하도록 필터를 캐스팅합니다.
https://mongoosejs.com/docs/api.html#model_Model.find

// Controller

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


//Template - search.pug

    form(method="GET")
        input(name="keyword" type="text" placeholder="Search By Title")
        input(type="submit" value="Search")
    
    div 
        each video in videos
            +videoMixin(video)

step 2. 검색 기능 개선: 정규식 RegExp

정말 그 키워드를 정확히 입력해야 하는 게 아니고, 그 키워드를 포함하고만 있어도 해당되는 데이터를 불러올 수 있도록 검색 기능을 개선해보자.

//controller 

// 이전
videos = await Video.find({ 
	title : keyword 
});

// 정규식 이용하여 검색 기능 개선 후 

videos = await Video.find({ 
      title : {
        $regex : new RegExp(`${keyword}`, "i"),
     } 
});

추가 공부 ❓

몽고db의 정규식 연산자

regex operator ($regex) 에 대해서 배워보았다.
그외에 db에서 활용가능한 다양한 연산자에 대해서 시간될 때 읽고 정리해보자.
https://www.mongodb.com/docs/manual/reference/operator/query/regex/

req.body vs. req.query

여기 같은 질문이 스택오버플로우에 올라와있다.

정리해보면, req.body 는 put/post 요청을 받은 모든 데이터의 정보를 다 담고 있고, 해당 url param 은 그 정보 중 하나일 뿐이다. req.query 는 모든 매서드의 요청의 url 의 param 정보를 포함한다.
예를 들어 주소가 school.com (param 이 없는 주소)로 요청을 받았다면 req.body 는 받은 정보들 중 param 정보만 없지만, req.query 는 그냥 undefined 라고 뜬다.

요약 💖

• search 기능을 만드는 법을 배우면서 몽구스의 .sort, 몽고 db의 $reqex, express 의 req.query, 자스의 RegExp 기능과 정규식의 기본적인 규칙에 대해서 배워보았다.