[항해99 46일차] 2022.04.21 TIL (무한스크롤 수정)

📔 오늘 할 일 📔

 

1. 무한스크롤 고치기..

---

📖 오늘 배운 개념 📖

Intersection Observer API

 

무한 스크롤은 로드해야하는 게시글 목록이 많은 페이지에서 사용자의 편의성과 클라이언트의 부담을 덜어줄 수 있는

획기적인 아이템입니다.

Intersection Observer API는

타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 API입니다.

---

🤔 해결한 문제 🤔

 

아니 자꾸 페이지 넘버가 타겟에 닿아버리면 계속 넘어가져서..

무한 로딩이 되는 상황이 발생했다. ???ㅋㅋㅋㅋㅋㅋ멘붕이 시작되었다.

 

우리 조 에이스님과 함께..

콜백함수가 실행되며 페이지 넘버가 넘어가는 그 시점에

그냥 if조건문을 넣어서 해결했다.ㅠㅠ

 

 

import React, {  useState,useCallback,useRef } from 'react';
import Header from '../components/Header';
import { MainGrid } from '../elements/index';
import PostWrite from '../components/PostWrite';
import PostList from '../components/PostList';
import CommentWrite from '../components/CommentWrite';
import { useSelector,useDispatch } from 'react-redux';
import {postCreators as postActions} from '../redux/modules/post';
import Spinner from '../components/Spinner';
import Post from '../components/Post';

const Main =()=>{

  const dispatch =useDispatch();
  const post_list =useSelector((state)=>state.post.post_list);
  const totalPage = useSelector((state)=>state?.post?.page?.totalPage);
  //console.log(crrPage)

  //const token = sessionStorage.getItem("user");
  const [pageno,setPageno] = useState(1);
  const [target, setTarget] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const callback = async ([entry], observer) => {
   // console.log(entry);
    if (entry.isIntersecting && !isLoading) {
      observer.unobserve(entry.target);
      setIsLoading(true);
      await new Promise((resolve) => {
        setTimeout(resolve, 2000);
      });
      
        if(totalPage>pageno){
          setPageno((pre) => pre + 1);
        }
      

      
      setIsLoading(false);
      observer.observe(entry.target);
    }
  };

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

  React.useEffect(()=>{
    
      dispatch(postActions.getPostDB(pageno));
      console.log(pageno)
  },[pageno]);

 

    return (
        <>
          <MainGrid bg="#F2F3F5">
            <Header />
            <MainGrid display="flex" padding="16px 0 0 8px" position="relative" top="56px" bg="#F2F3F5" height="100vh-56px">
            
                <MainGrid position="relative" >
                  <Post />
                  <PostWrite/>
                  <Rooms/>
                  {post_list && post_list?.map((c,idx)=>{
                    return <PostList key={idx} {...c} />
                  })}
                 
                  
                </MainGrid>
             
              </MainGrid >
              {isLoading ? (
                    <Spinner />
                  ): null }

              { totalPage>pageno ?<div ref={setTarget}> </div>:
              null}
                 
              </MainGrid>
        </>
      );
};





export default Main;

---

 

😊 주절주저리 😊

 

내가 무한스크롤을 구현해야되는줄도 모르고 있었는데..

구현해야된다는 사실을 알았을 때 너무 막막하고 눈물나고 그랬다..ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

나 자신이 과연 할 수 있을지도 의문이었다..

진짜 더 배우고 .. 프로젝트를 하고 싶다는 생각도 들었는데, 

배우는 시간이 길어지면 취업이 늦어지니까 ㅠㅠ 

취업하고 더 배우는 시간을 갖는다면,, 실력은 지금보다 향상될 것이라고 생각했는데...

 

순간...멘붕이 와버려서 ㅜㅜ 남편한테 하소연했닼ㅋㅋㅋㅋㅋㅋㅋ울 남편이 짱이다ㅠ_ㅠ

 

뷰그리는 건 자신 있는데

기능 구현에는 약간 자신이 없다ㅠㅠ

자신감이 생길 수 있게 포기하지 않고..끝까지 !!!!

무한반복 공부하면 나아지겠지?

 

그래도 게시물 CRUD를 맡으면서 데이터의 흐름을 어느정도 이해했다.ㅎㅎ

지난주에는 데이터의 흐름을 이해하지 못한 채 넘어갔었는데..

이렇게 한단계 성장한 느낌이다.ㅎㅎ

---

✅ 내일 할 일 ✅

 

드디어 실전 프로젝트 시작이다 !!!!!!!

꺄오.....이제 6주만 버티면 이 항해 과정도 끝이난당 ㅠㅠ