[Node.js] 검색기능 만들기

게시물에서 내가 원하는 값을 입력하고 그 입력한 값이 포함된 게시물을 검색하는 기능을 추가하려했다.

 

1. 검색 UI 하나 만들고 거기에 "안녕" 이라고 검색어를 입력해서 서버로 전송하면

2. 서버는 DB에서 "안녕"이 포함된 제목을 가진 게시물들을 찾아서

3. 그 게시물들을 ejs 파일에 넣어서 유저에게 보내주기

 

한글로 풀면 위같은 과정이 필요하다.

 

    <input class="search">

    <button class="search-send">검색</button>

 

검색 ui 를 만들어줬다.

 

form 태그를 이용할 수도 있었지만 다른 방법을 선택했다.

 

    <script>

      document.querySelector('.search-send').addEventListener('click', function(){

        let inputdata = document.querySelector('.search').value

        location.href = '/search?val=' + inputdata

      })

    </script>

 

아래에 위의 javascript 코드를 넣어줬다.

 

class 가 search-send 인 곳을 찾아서, click 동작을 했을 때 function 함수 기능을 실행시킨다.

-> class 가 search 인 곳에 입력된 value 값을 inputdata 변수 안에 넣어준다.

(location.href 를 사용하면 새로고침이 됨)

/search 로 데이터를 보내는데 뒤에 ?val= 를 붙여서 변수를 실어서 같이 보내준다.

 

app.get('/search', async (요청, 응답) => {

  let result = await db.collection('post')

  .find({

    $or: [

      { title: { $regex: 요청.query.val } },

      { content: { $regex: 요청.query.val } }

    ]

  }).toArray()

  응답.render('search.ejs', { 글목록 : result})

})

 

result 변수를 만들고 DB 의 'post' 안에 있는 데이터들을 다 불러와줄건데,

find 괄호 안에 조건을 넣어준다.

 

요청.query.val 은 /list 페이지로부터 받은 데이터 값.

 

$regex 는 정규식이다. 요청.query.val 값이 포함된 값을 찾아준다.

 

나는 추가로 title 뿐만 아니라 content 에서도 해당 값이 포함된 데이터를 불러오기를 원했고

 

처음에는

{ title: { $regex: 요청.query.val } },

{ content: { $regex: 요청.query.val } }

 

위처럼만 진행했더니 title 과 content 둘 다에 검색한 값이 있는 데이터, 즉 and 연산자 처럼 처리되었다.

 

검색해보니 위 코드처럼 $or 을 사용해주면 내가 원하는 코드를 구현할 수 있었다.