검색기능 만들기(1) - URL query string

해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다.

 

1. 검색창 만들기

검색을 하려면 검색창이 있어야하기 떄문에 list.ejs 파일에 검색창 UI를 만들어보겠다. 

상단에 아래 코드 삽입

<div class="container input-group mb-2">
  <input class="form-control" id="keyword">
  <button class="input-group-append btn btn-danger" id="search">검색</button>
</div>

 

 

 

2. GET 요청으로 서버에게 데이터 보내기 

서버로 데이터를 보낼 때는 POST 요청을 사용하면 된다. 하지만 GET 요청으로도 서버로 데이터를 보낼 수 있는데 그게 바로 query string을 통해서 데이터를 보내는 것이다.

 

query string이란 쉽게 말해서 GET 요청시 URL 뒤에 데이터를 몰래 심어서 요청하는 것이다. 

 

 

위의 URL과 같이 물음표 뒤에 데이터1 이름 = 데이터1 값 & 데이터2 이름 = 데이터2 값으로 이루어져있는 것이 query string이다.

 

query string의 형식은 
?데이터이름=데이터값이다.

 

 

이제 한번 우리 사이트에 적용해보자. 

방식은 누군가 검색창에 A라는 단어를 입력하고 검색 버튼을 클릭하면 ~/search?value=A으로 URL이 되도록하면 된다.

 

$('#search').click(function(){ //검색 버튼을 누르면
  var inputValue = $('#keyword').val(); //검색창에 입력된 A 값
   window.location.replace('/search?value=' + inputValue); //URL 변경
})

 

 

 

3. 서버에서 query string 확인하기

app.get('/search', (request, response) => {
	console.log(request.query.value);
})

위와 같이 코드를 짜면 데이터 값을 가져올 수 있다. 검색창에 사과라고 검색을 하면 사과가 request.query.value으로 오는 것이다.

 

 

 

4. 서버로 넘어온 데이터를 이용해서 DB에 있는지 확인해서 가져오기

이전에 우리는 DB에 데이터가 있는지 확인하는 방법을 배웠다. find()를 사용하면된다. 

 

app.get('/search', (request, response) => {
    db.collection('post').find({ title: request.query.value }).toArray(function (error, result) {
        response.render('search.ejs', { keyword: result })
    });
})

 

위의 2번줄을 해석하자면 post라는 콜렉션에서 title이 request.query.value인 값을 찾아서 result로 반환해라! 라는 의미이다.