[5일차] 무한스크롤 리팩토링 및 Firebase Firestore로 데이터 관리

오늘 한 일

 

1. 무한스크롤 리팩토링

 

  const useInfiniteScroll = ({
    isLoading,
    hasNextPage,
    fetchNextPage,
  }: ioProps) => {
    const io = useRef(null); // 옵저버를 참조하기 위해 useRef()
    const scrollRef = useCallback(
      (target) => {
        if (isLoading) return;

        // io.current 가 있으면 해제하기
        if (io.current) io.current.disconnect();

        // io.current에 새로운 옵저버를 할당
        io.current = new IntersectionObserver((target) => {
          if (target[0].isIntersecting && hasNextPage) {
            fetchNextPage();
          }
        });

        // 타겟이 존재하면 옵저버가 타겟을 관찰하도록 함.
        if (target) io.current.observe(target);
      },
      [fetchNextPage, hasNextPage]
    );

    return scrollRef;
  };

 

  // BookSearchResultPage.tsx

  const BookSearchResultPage = () => {
    // ... 코드 생략
    // 컴포넌트 가장 하단에 함수를 넘겨서
    // 컴포넌트가 마운트되었을 때 실행되도록 한다.
    <div ref={scrollRef} />;
  };

 

 

2. Firebase Firestore로 데이터 관리

 

• 로그인 시 "users" collection 안에 사용자의 uid document 안에 -> field에 uid와 displayName 저장.
• 검색 결과 페이지에서 책을 클릭하면 "users" collection 안에 사용자의 uid document 안에 -> 새로운 "books" (sub)collection 안에 -> 책의 isbn 안에 -> field에 책 제목과 기타 정보들 저장.
• 해시태그도 저장해야 하는데 내일 해야 할 듯 하다.

 

 

나는 이번 프로젝트로 db는 완전 처음이라.. mongoDB도 강의만 봤지 아직 해본 적은 없어서 좀 헤맨 것 같다. 설계를 처음부터 잘해야 함을 제대로 느꼈다.  그리고 아무리 생각해도 firebase는 documentation이 되게 불친절한 듯. 이게 그들의 잘못은 아니지만, stackoverflow 보면 바로 이해되는 것들이 공식 문서에서는 이해가 안 된다.

 

아무튼 subcollection 만드는 것도 (다른 db 다뤄봤다면 쉬웠을 수도. 근데 난 아님 🥲.) 알아봤더니 이런 식으로 하면 되는 것이었다.

 

 

const userRef = doc(db, "users", currentUser)
const booksCollectionRef = doc(db, "users", currentUser, "books", isbn13);

 

 

collection 까지만 입력하면 안 되고 document까지 써줘야 함. 그렇지 않으면 에러가 뜬다.

 

에러메세지를 자세히 읽어보면  books 뒤에 document를 제공해야 함을 알 수 있다.

 

그리고 firebase 업데이트 후에는 전처럼

 

const userRef = db.collection("users").doc(currentUser)

 

 

이런 식으로는 접근이 안 되니 반드시 위의 방식처럼 해줘야 한다.