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

💡 실습 포인트!

• MongoDB 의 indexing 을 이용한 검색 기능을 만들어보았다.
• 대부분의 DB 들은 주로 영어에 최적화된 검색 기능을 제공하고 있어, 한글에 최적화된 기능을 만드는 게 쉽지 않음을 알게 되었다.
• 블로그를 쓰는 현재에도 검색 기능은 내가 생각한 수준에는 도달하지 못했다. (이는 추후 조금 더 고민해봐야 할 부분이다.)
  • 한글에 초점을 맞추었더니 영어는 일부 내용만 검색하는 경우 검색이 되지 않는다.
  • 한글을 한 글자만 가지고 검색하는 경우 검색이 되지 않는다.

---

💜 URL Query string

🤍 검색창 UI 만들기

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

 

• 기존의 할일 리스트 페이지 HTML 파일에 Bootstrap 을 이용하여, 검색창 레이아웃을 추가해주었다.
• 후에 검색했을 때 보이는 화면도 동일한 레이아웃이 필요하므로 내용을 그대로 복사해서 search 라는 파일명을 가진 EJS 파일을 만들어주었다.
• JavaScript 코드 작성시 용이하게 하기 위하여 input 태그와 button 태그에 id 를 각각 부여해주었다.

---

🤍 GET 요청으로 서버에 데이터 보내기

• 서버에 데이터를 보낼 때는 POST 요청을 사용하면 되고, 이 경우 req.body 와 같은 형태로 꺼내어 사용이 가능하다.
• 이외에 GET 요청으로도 URL 뒤에 데이터를 심는 방식으로 간단한 데이터 전달이 가능하다.
  
  • URL 뒤에 데이터를 심는 방식이란. URL 에서 물음표 뒤에 정보를 입력하는 것을 말하며 이는 형식이 정해져있는데 이를 query string 또는 query parameter 라고 한다.

---

🤍 Query string 작성하여 GET 요청하기

$('#search').click(function(){
    let searchVal = $('#search-input').val();
    // 검색 버튼을 누르면 /search?value=입력내용 경로로 이동, GET 요청
    window.location.replace(`/search?value=${searchVal}`); 
})

• input 태그에 입력된 값을 searchVal 이라는 변수에 할당하여, 검색 버튼을 클릭하면 url 의 /search?value= 뒤에 들어갈 수 있도록 코드를 작성해주었다.

---

🤍 서버에서  Query string 확인하기

app.get('/search', function(req, res){
    db.collection('post').find({할일: req.query.value}).toArray(function(err, result){
        res.render('search.ejs', {post : result});
    })
})

• console.log(req.query) 를 해보면 query string 을 object 형태로 가져와서 볼 수 있다.
• 검색한 내용을 가진 데이터를 전부 가져와서 보여주어야 하므로 .findOne() 함수가 아닌 .find().toArray() 함수를 사용했다.
• db.collection 중 post 에서 검색한 내용을 찾을 때에는 req.query.value 의 형태로 작성해주어야 검색한 문자열 그대로의 형태로 DB 에서 검색이 가능하다.

---

💜 게시물에 index 만들기

🤍 DataBase 가 게시물을 찾는 방법 알아보기

• 그냥 게시물을 확인하여 원하는 데이터를 찾는 방법은 원하는 데이터를 찾는 데에 시간이 오래 걸릴 가능성이 높다.
• 따라서, DB 는 Binary Search 라는 알고리즘을 사용하여 데이터를 찾는데 이 방법을 사용하려면 미리 순서대로 정렬이 되어있어야 한다.
• 이러한 순서 정렬은 숫자뿐만 아니라 문자열도 가능한데, 이를 indexing 이라고 하며, 해당 collection 의 정렬된 사본을 하나 더 만들어주는 것이다.

 

📌 MongoDB 에서 index 만들기

• MongoDB 에서 indexing 을 하려면 아래의 방법으로 진행하면 된다.

• 원하는 collection 을 선택한 후, indexes 탭에 들어가면 CREATE INDEX 버튼 클릭!

 

• 나는 할일 내용에 따라 정렬을 할 예정이므로 필드명은 할일, 타입은 text 로 설정해주었다.

 

• 그러고 나면 위와 같은 index 가 만들어진다.

---

💜 한글 검색에 적합한 검색 기능 만들기

🤍 인덱스를 활용한 검색 기능 만들기

app.get('/search', function(req, res){
    db.collection('post').find({ $text : { $search: req.query.value }}).toArray(function(err, result){
        res.render('search.ejs', {searchPost : result});
    })
})

• .find() 함수 안에 $text : { $search : req. query.value } 와 같이 작성하면 만들어둔 text 인덱스에서 검색엔진처럼 검색이 가능하다.
  • 공부 강의 라고 검색하면 공부 또는 강의가 포함된 데이터들을 찾아준다.
  • 공부 -강의 라고 검색하면 공부가 포함된 데이터들 중 강의가 포함된 데이터들 제외한 나머지 데이터들을 찾아준다.
  • "공부 강의" 라고 검색하면 정확하게 따옴표 안의 문구가 포함된 데이터들을 찾아준다.
• 하지만 이 방법은 영어에 최적화된 방식으로 영어가 아닌 언어(특히, 조사가 많이 쓰이는 언어)는 검색이 제대로 되지 않는다는 단점이 있다.
  • 첫번째 해결책 : 검색할 문서의 양을 제한한다.
  • 두번째 해결책 : text search 기능을 써야한다면 indexing 대신 nGram 과 같은 알고리즘을 사용한다.
  • 세번째 해결책 : Search index 를 사용한다.

 

📌 MongoDB Atlas 에서만 제공하는 기능인 Search index 사용하기

• Cluster 의 Search 탭을 눌러 접속한 후, Create Search Index 버튼을 클릭한다.

 

• Visual Editor 를 선택 후 Next 버튼을 클릭한다.

 

• Index Name 을 만든 후, 어떤 collection 에 있는 항목을 indexing 할 것인지 선택한다.

 

• Refine Your Index 를 클릭한다.

 

• 기존의 lucene.standard 를 lucene language-lucene.korean 으로 바꾸어준다. (한글 검색 최적화가 목적이기 때문!)
• Add Field 부분은 추가해도 되고 안해도 상관은 없다.

 

• lucene.korean 으로 잘 변경되었는지 확인 후 Save Changes - Create Search Index 를 클릭한다.

 

• 정상적으로 모든 과정이 완료되었다면 위와 같은 화면을 확인할 수 있다.

---

🤍 Search index 를 이용해서 검색 요청하기

app.get('/search', function(req, res){
    let condition = [
        {
            $search : {
                index : 'todoSearch',
                text : {
                    query : req.query.value,
                    path: '할일' // 할일과 마감일 둘 다 찾고 싶으면 ['할일', '마감일']
                }
            }
        },
        {
            $sort : { _id : 1 } // 1 은 오름차순, -1 은 내림차순
        },
        {
            $limit : 10 // 가져올 데이터 개수 제한
        }
    ];
    db.collection('post').aggregate(condition).toArray(function(err, result){
        res.render('search.ejs', {searchPost : result});
    })
})

• .aggregate() 함수를 사용하면 검색조건을 여러개 붙일 수 있다.
• 단, 가시성을 위해 condition 이라는 변수를 만들어서 배열의 형태로 작성해주었다.
  • $search 라는 operator 를 넣으면 search index 에서 index 를 골라서 검색할 수 있다.
  • $sort 라는 operator 를 넣으면 특정 속성을 기준으로 오름차순, 내림차순으로 정렬할 수 있다.
  • $limit 이라는 operator 를 넣으면 검색된 전체 데이터가 아니라 해당하는 개수만큼 상위에 존재하는 데이터를 가져올 수 있다.