TIL 76. NextJS - 검색기능 만들기.

NextJS와 파이어베이스를 사용한 프로젝트에서 검색기능을 만들었다.

startAt() 또는 startAfter() 메서드를 사용하여 쿼리의 시작점을 정의한다.
startAt() 메서드는 시작점을 포함하고, startAfter() 메서드는 제외한다.

예를 들어 쿼리에서 startAt(A) 를 사용하면 전체 알파벳이 반환된다.
대신 startAfter(A) 를 사용하면 BZ 를 반환한다.
마찬가지로 endAt() 또는 endBefore() 메서드를 사용하여 쿼리 결과의 끝점을 정의한다.

	[중략...]

	if (value && lastVisible) {
		q = query(
       		collection(dbService, 'post'),
	        orderBy(option),
    	    startAt(value),
        	endAt(value + '\uf8ff'),
	        limit(4),
    	    startAfter(lastVisible)
      	);
    }

	[중략...]

  	const querySnapshot = await getDocs(q);
  	querySnapshot.forEach((doc) => {
    	getData.push({ id: doc.id, ...doc.data() });
	    if (querySnapshot.docs.length === 0) {
    		lastVisible = -1;
    	} else {
      		lastVisible = querySnapshot.docs[querySnapshot.docs.length - 1];
    	}
  	});

 	return getData;

위 코드에서 중요한 건 startAt, endAt이다.
startAt, endAt에 사용자가 입력한 값이 들어간다.
startAfter로 이미 불러온 docs를 제외한 다음 docs를 불러오는 것처럼, 문자열에도 사용할 수 있다.