[Algolia, Firebase, React Native] Algolia 를 이용해서 검색하기

 

이번 포스팅에서는 Node.js 기반으로 Algolia 를 이용해서 검색하는 것을 구현해보겠습니다.

• npm 6.4.11
• algoliasearch 4.12.0
• React Native

 

Algolia 와 Firebase 를 연결하고 index 를 만드는 방법은 이전 포스팅들을 참고해주세요.

2022.01.25 - [PROGRAMMING/기타] - [Firebase, Algolia] Cloud Extension 으로 Algolia 연결해서 검색 구현

[Firebase] Cloud Extension 으로 Algolia 연결해서 검색 구현

 

이렇게 잘 연결만 해뒀다면, 검색은 정말이지 아주 간단합니다. (드디어 긴 여정을 끝낼 때가..)

 

 

1. algoliasearch 설치

$ npm install algoliasearch

npm 으로 algoliasearch 를 설치해줍니다. (https://www.npmjs.com/package/algoliasearch)

 

 

2. Algolia 설정: client, index

다음과 같이 algolia search client 를 APP ID 와 API Key 를 가지고 만들어주고, 검색할 index 를 등록해줍니다.

저의 경우 APP ID 와 Search-Only API Key 를 Front-end 에서 사용하도록 할 것이지만, 그래도 이 정보들을 앱에 두는 것은 좋지 않을 것으로 판단하여 Firebase Firestore 에 넣어두고 가져와서 사용하는 식으로 구현했습니다. (원래 firestore 사용해서 firestore 에 넣어둔 것입니다.)

import firestore from '@react-native-firebase/firestore';

const algoliasearch = require("algoliasearch");
var collectionIndex;

async function initAlgolia() {
    // Get algolia keys first
    const doc = await firestore().collection('Algolia').doc('algolia').get();
    const algolia = doc.data();
    
    // make algolia client and target index
    searchClient = algoliasearch(algolia.AppId, algolia.APIKey);
    const indexName = 'dev_title';
    collectionIndex = searchClient.initIndex(indexName);
};

 

 

3. Search 기능 구현

search 는 정말 필요한 기능에 따라 구현하면 됩니다.

기본적으로 사용하는 것은 collectionIndex.search() 이고, 이 함수는 query 와 options 을 인자로 받는 함수입니다.

(https://www.algolia.com/doc/api-reference/api-methods/search/)

 

그냥 검색을 하면 등록되어 있는 모든 정보를 대상으로 검색을 진행합니다.

저의 경우, 다음의 2가지가 가능한 검색을 구현하려 했습니다.

• title 에서만 검색
• uid 정보가 USER_ID 인 것들만 검색

 

즉, 특정 사용자의 title 이라는 요소 중에서 검색을 하려고 했습니다.

따라서 다음과 같이 search 에서 지원하는 Search API Parameters 중, restrictSearchableAttributes 와 filters 를 사용해서 해당 기능을 구현했습니다.

(Algolia Search API Parameters: https://www.algolia.com/doc/api-reference/search-api-parameters/)

const userFilter = `uid:${USER_ID}`

/**
 * Search by title
 * @param {string} query
 * @returns {Promise}
 */
 async function searchTiccleWithAlgolia(query) {
    // search with Algolia
    const result = await collectionIndex.search(query, {
        restrictSearchableAttributes: [
            "title", // ONLY look at title
        ],
        filters: userFilter,
    });
    var metadataList = [];
    result.hits.forEach(element => {
        const record = {
            id: element.objectID,
            title: element.title,
        }
        metadataList.push(record);
    });
    // return search result
    return new Promise(resolve => {
        resolve(metadataList);
    });
}

 

3-1) restrictSearchableAttributes

restrictSearchableAttributes 를 parameter 로 주면, 해당 field 들에서만 검색을 하게 됩니다.

단, 그러기 위해서는 Algolia 에서 Searchable attributes 에 해당 필드들을 등록해주어야 합니다.

저는 dashboard 에서 다음과 같이 추가해주었습니다. (index -> Configuration -> Searchable attributes)

 

 

 

3-2) filters

filters 는 SQL 과 비슷하게 사용할 수 있으며 결과를 걸러내는 작업을 수행할 수 있습니다.

저의 경우, 특정 uid 에 대한 것들만 결과로 받기 위해서 filters 를 사용하려 했습니다.

그런데 공식 문서의 설명을 보면, 필터를 하려는 field 의 이름에 string value 가 포함된다면 attributesForFaceting 을 설정해야 한다고 나와있습니다.

Format: ${facetName}:${facetValue}
When ${facetName} contains string values, you need to declare it in attributesForFaceting

그래서 index 의 Configuration 의 Attributes for faceting 에서 다음과 같이 uid 필드를 등록해주었습니다.

(이는 index.setSettings() 로 해주어도 되지만, 저의 경우 Search-Only API Key 를 사용하여 setting 을 할 수 없었기도 했고, 한번만 설정하면 되니 dashboard 를 통해 해주었습니다.)

(index -> Configuration -> Facets -> Attributes for faceting)

 

 

 

이렇게 설정까지 다 해주면 위의 코드로 성공적으로 검색할 수 있습니다!

 

---

Algolia 는 Firebase 에서 full text 검색이 안돼서 대안책으로 사용한 것인데, 처음에는 번거롭다고 생각이 들었으나 돌아보니 왜 검색 업체를 따로 연결해서 쓰는지 알 수 있었습니다. 특히, 같은 검색 query 면 cache 를 두는지 (정확히 찾아보지는 않았습니다) 결과가 더 빨리 오더라고요. 연결하는 작업도 처음에 잘 해두면 뒤로는 특별히 손볼 것이 없기도 했습니다.

 

아무튼 이렇게 Firebase 를 Algolia 에 연결하고, 검색을 구현하여 잘 작동하는 것까지 확인해보았습니다!