무한 스크롤을 구현해볼려고 하는데

[김동진]

export default function Home() {
  const [dbData, setData] = useState([]);
  const [dbDataSlice, setDbDataSlice] = useState([]);
  const [loading, setLoading] = useState(false);
  const [target, setTarget] = useState("");
  const [num, setNum] = useState(4);

  useEffect(() => {
    dbService
      .collection("board")
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          setData((prev) => [doc.data(), ...prev]);
        });
      });
  }, []);                             // 파이어베이스에 있는 데이터들을 전부 가져옴

  useEffect(() => {
    setDbDataSlice(dbData.slice(0, 16));
  }, [dbData]);               // 파이어베이스에서 데이터를 가져오면 16개를 잘라서 

                                            DbDataSlice 스테이트에 넣음 

                                             맨처음 들어오면 보여줄 이미지들.

  const onIntersect = async ([entry], observer) => {
    if (entry.isIntersecting) {
      observer.unobserve(entry.target);
      setLoading(true);
      setDbDataSlice((prev) => [...prev, dbData.slice(4 * num, 4 * (num + 1))]);
      setLoading(false);
      setNum(num + 1);
      observer.observe(entry.target);
    }
  };

//아까 맨 처음 보여 줄 이미지가 16개까지 잘랐기 때문에 

setDbDataSlice((prev) => [...prev, dbData.slice(4 * num, 4 * (num + 1))]); 이 코드를 넣었고, num의 기본 값은 4 이고, 함수가 실행되면 num + 1 을 해줌

  useEffect(() => {
    let observer;
    if (target) {
      observer = new IntersectionObserver(onIntersect, {
        threshold: 0.4,
      });
      observer.observe(target);
    }
    return () => observer && observer.disconnect();
  }, [target]);

  console.log(dbDataSlice);
  return (
    <div className='container'>
      <div>
        {dbDataSlice.map((a, i) => (
          <이미지 src = {dbDateSlice[i].img} />
        ))}
      </div>

      {loading ? (
        <div className='rnlcks'>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
        </div>
      ) : (
        <div ref={setTarget}>
          <p>이거 절대 못봄ㅋㅋㅋㅋ 보면 만원드림 ㅋㅋㄹㅃㅃ</p>
        </div>
      )}
      <style jsx>{`
        .container {
          width: 1080px;
          margin: 0 auto;
        }
        img {
          width: 260px;
          height: 260px;
          object-fit: cover;
        }
        .rnlcks {
          display: flex;
          flex-wrap: wrap;
          gap: 5px;
        }
        .img {
          width: 260px;
          height: 260px;
          background: gray;
        }
      `}</style>
    </div>
  );
}

4일째 혼자서 이것저것 해봤는데 좀 있으면 파이어베이스 무료.. 읽기가 초과되서

질문을 남겼습니다 처음에 useEffect로 setDbDataSlice 에 값 넣는건 되는데

onIntersect 함수 안에 setDbDataSlice도 안되고.. 제가 하는 방법이 맞는지 잘 모르겠어염

[codingapple]

컬렉션에 있는걸 전부 가져온다음에 16개씩 보여주는 식으로 코드짜고계신거면 과금이 끝도없어지겠군요 

.get() 말고 .collection("board").orderBy(~~).limit(16).then() 이런거 쓰면 16개씩 가져옵니다

다음 16개 가져오고 싶으면 .orderBy(~~).startAfter(가져왔던마지막게시물).limit(16) 쓰면될듯요 

 

 

[김동진]

오...제가 생각을 안하고 코드를 만들고있었네여

[김동진]

선생님 firebase를 버리고
nextjs, prisma, ec2, mariadb를 쓰면서 통계기능을 만들고 있는데
db에 저장되어 있는 유저가 1억명있다고 가정하고 
20살 이상인 유저가 몇명인지, 평균나이가 어떤지 구할려고 db에서 조회하고 데이터를 불러올 때 
prisma로 db에 있는 데이터를 조회하고 가져올 때 비용이 발생하나요??
가져온 데이터들을 api 페이지에서 정리해서 통신할 때 비용이 발생하는건가요??

[codingapple]

db 호스팅 서비스면 조회당 비용이 발생할 수 있는데 
ec2같은 컴퓨터에 db 설치해놓은거면 조회당비용은 없습니다

[글쓴이]

글