[리액트 심화반] 4주차 개발일지

1. 배운 내용

무한 스크롤 구현

firestore에서 데이터 정렬해서 가져오기

firestore의 복합 쿼리 사용해보기

firebase의 realtime database 사용해보기

 

 

2. 새로 알게 된 내용

1) 무한 스크롤 동작 원리

- 게시글을 한번에 여러개를 가져오면 페이지 로드 속도가 엄청 나빠진다. 한 화며냐에 담기는 게시글은 그렇게 많지 않기 때문에 한 화면에 담기는 게시글 수만 가지고 오고 스크롤이 화면 밑에 닿았을 때 다음 게시글을 불러오면 된다.

- 무한 스크롤 컴포넌트를 만들고, 게시글 컴포넌트들, 다음 목록을 불러올 함수, 파이어스토어에서 불러오는 중 여부 판별자, 다음글 여부 판별자를 넘겨준다.

- 그전에 게시글을 가져올 때, 어디까지 가져왓는지, 다음엔 뭐부터 가져올지 페이징 정보, 게시글을 가져오는 중이구나 알 수 있도록 스피너 컴포넌트 만든다.

 

2) 게시글 id와 작성 일시 역순으로 정렬해서 가져오기

commentDB
      .where("post_id", "==", post_id)
      .orderBy("insert_dt", "desc")
      .get()

 

3) realtime database 리스너 구독 설정과 해제

// 구독 설정
notiDB.on("value", (snapshot) => {
        console.log(snapshot.val());
        
        setIsRead(snapshot.val().read);
    });
    
// 구독 해제
return () => notiDB.off();

 

3. 느낀 점

firestore가 기존에 많이 쓰던 mysql과 쿼리문 사용법은 유사해서 이번 주차 강의를 이후로도 충분히 사용할 수 있겠다는 생각이 들었다. 그리고 realtime db에서 구독 얘기가 나와서 이벤트 리스너에 대해 잠깐 이야기하셨는데 그 부분을 까먹고 있어서 다시 찾아봤는데 이런 내용이었구나 했다. 예전에 강의에서 들은 적이 있었는데 이게 구독이라는 개념인지 모르고 그냥 썼던 것 같다. 지금이라도 이벤트 리스너 구독 개념을 알게 되어서 다행이라고 생각한다.