Firebase에서 검색 기능 구현하기

김민석·2023년 12월 22일

Issue

목록 보기

7/9

Intro

firebase 에서는 부분 문자열을 통해서 문자열을 검색할수 있는 기능이 없다. 이로 인해서 검색을 구현할 떄에는 완벽히 똑같은 문자열을 통해 검색하거나, 외부 라이브러리를 써야한다. 그러나 firebase 내에서도 부분 문자열을 통한 검색이 구현 가능하다.

이와 같이 미리 가능한 모든 키워드 조합을 만들어내어 Array 에 저장하는 방법이다.

구현 방법

/**
 * 주어진 텍스트에서 특수 문자와 공백을 제거합니다.
 * @param {string} text - 처리할 문자열
 * @returns {string} 처리된 문자열
 */
export const cleaningText = (text: string): string => {
  // 특수문자 및 공백 제거, 다양한 언어 지원
  const regEx = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/ ]/gim;

  const cleanText = text.replace(regEx, "").toLowerCase();

  return cleanText;
};

/**
 * 주어진 텍스트 배열로부터 키워드를 생성합니다.
 * @param {string[]} texts - 키워드를 생성할 텍스트 배열
 * @returns {string[]} 생성된 키워드 배열
 */
export const createKeywords = (texts: string[]): string[] => {
  const keywords = new Set<string>();

  texts.forEach((text) => {
    // 특수문자 및 공백 제거, 다양한 언어 지원
    const cleanText = cleaningText(text);

    const length = cleanText.length;

    // 모든 가능한 2글자 이상, 10글자 이하의 부분 문자열을 생성
    for (let i = 0; i < length; i++) {
      let temp = "";
      for (let j = i; j < length && j < i + 11; j++) {
        temp += cleanText[j];
        if (temp.length >= 2) {
          keywords.add(temp);
        }
      }
    }
  });

  return Array.from(keywords);
};

위와 같이 text 배열을 입력으로 받아, 2 글자 이상, 10 글자 이하인 부분 문자열을 생성해준다.

// 키워드 생성
const keywords = createKeywords(stringFields);

이러한 함수를 통해 부분 키워드 집합을 생성하는 것이 가능하다.

export const getProducts = async (
  startAfterDoc: DocumentSnapshot | null,
  limitNumber = 10,
  filters: any = {},
  order: {
    field: string;
    direction: "asc" | "desc";
  } = { field: "name", direction: "asc" }
): Promise<{
  products: Product[];
  lastVisible: DocumentSnapshot | null;
  hasMore: boolean;
}> => {
  try {
    const productsRef = collection(db, "products");
    let productsQuery = query(productsRef);

    // 필터링 옵션 적용
    for (const [field, value] of Object.entries(filters)) {
      if (field === "keywords" && typeof value === "string") {
        // 키워드 필드에 대한 필터링
        productsQuery = query(
          productsQuery,
          where(field, "array-contains", cleaningText(value))
        );
      } else if (
        field === "keywords" &&
        Array.isArray(value) &&
        value.length > 0
      ) {
        const firstKeyword = value[0];
        productsQuery = query(
          productsQuery,
          where("keywords", "array-contains", cleaningText(firstKeyword))
        );
      }

    // 페이지네이션 적용
    if (startAfterDoc) {
      productsQuery = query(productsQuery, startAfter(startAfterDoc));
    }
    productsQuery = query(productsQuery, limit(limitNumber));

    // Firestore에서 쿼리에 맞는 데이터를 조회합니다.
    const snapshot = await getDocs(productsQuery);
    let products: Product[] = [];
    snapshot.forEach((doc) => {
      products.push({ ...doc.data(), productId: doc.id } as Product);
    });

    // 클라이언트 측에서 추가 키워드 필터링
    if (
      filters.keywords &&
      Array.isArray(filters.keywords) &&
      filters.keywords.length > 1
    ) {
      const additionalKeywords = filters.keywords.slice(1);
      products = products.filter((product) =>
        additionalKeywords.every((keyword: string) =>
          product.keywords.includes(cleaningText(keyword))
        )
      );
    }

    const lastVisible = snapshot.docs[snapshot.docs.length - 1] || null;
    const hasMore = snapshot.docs.length === limitNumber;
    return { products, lastVisible, hasMore };
  } catch (err) {
    console.error(err);
    return { products: [], lastVisible: null, hasMore: false };
  }
};