주제: 무한스크롤 및 속도 개선

1. 무한스크롤

처음에 무한스크롤을 구현할 때, 내가 보고있는 화면과 전체 화면의 차이를 이용하여 일정 값 내려갔을 때 불러오도록 설정하여 진행하는 도중, 모든 페이지에서 스크롤 이벤트가 동작하였다. 이유를 생각해본 결과 .이번 프로젝트에서 싱글페이지 라우터가 문제라고 생각하였다. 이를 해결하기 위해 무한스크롤 이벤트를 페이지마다 분기를 나눠 remove 하려고 시도하였지만, 비동기 처리로 인해 state값을 불러오는 속도보다 스크롤이 되는 속도가 빠르게 되어 값을 불러오는 사이에 무한스크롤이 진행되어 페이징이 늘어나게 되었다. 비동기 처리를 잡기 위해 api에서, 페이지에서 여러 분기를 두며 시도를 해보았지만, 스크롤 이벤트의 속도가 더 빨랐고,결국 무한스크롤은 다른 방법을 사용해야겠다고 결론지었다.

• 해결방법: observer 라이브러리를 사용하니 모든것이 한번에 해결되었다... 정말 편리한 observer. 잊을 수 없다. https://slog.website/post/8

• 두번째 문제가 발생.

  **사용자가 다른 페이지로 접속하거나 다른페이지에서 새로고침하면 page.now가 그 페이지로 되고 메인으로 나오면

post.js의 서버로부터 포스트를 호출하는 getPostAPI() 에서 호출을 끊고(return 해버림) page.now와 page.pre를 main으로 바꾸지만

• 코드 if (whatPages.now !== whatPages.pre) { console.log(whatPages.now, whatPages.pre); console.log("끊겠음2"); dispatch(whatPage("mainPage")); return; } // 다른페이지 들어갔다가 다시 메인페이지 왔을때 포스트를 호출하는 getPostAIP()를 호출하는것을 막기 위함
  

스크롤로 다시 getpostAPI()를 실행할 수 없어서 포스트가 안불러와지는 현상 발생. ( 스크롤 관련 useEffect와 기본 useEffect는 서로 다른 useEffect에 있다)

그래서 pageCheck 라는 친구를 둬서 그 친구가 바뀔 때 마다 서버로부터 포스트를 가져오는 getPostAPI()하는 useEffect가 리랜더링 되도록 하였다.

pageCheck는 기본값이 false . 즉 메인페이지가 아닌 다른페이지 경로로 먼저 들어왔을 경우 메인페이지로 이동했을때

true로 바꾸어 위에있는 useEffect를 렌더링시켜 getPostAPI()를 호출하였다. 하지만 이럼에도 문제가 발생했으니..

• 코드

  React.useEffect(() => {
   
   dispatch(postActions.isMainPage(true));
   
   dispatch(postActions.whatPage("mainPage"));
   
   *if* (post_list.length === 0) {
   
   dispatch(postActions.getPostAPI());
   
   }
   
   }, [is_stack_clicked, is_sort_clicked, is_reBook_clicked, pageCheck]);
   
   React.useEffect(() => {
   
   *if* (inView === true) {
   
   setPaging(paging + 9);
   
   console.log("내가 페이지", paging);
   
   dispatch(pageAction.getPage(paging));
   
   *if* (post_list.length === 0 && pageCheck === false) {
   
   dispatch(postActions.pageCheck(true));
   
   }
   
   }
   
   }, [inView]);

화면이 그려질때 observer div가 보여져서 처음 메인화면에서 새로고침 했을 때에 getPostAPI()가 두번 호출당하는 사태가 발생

그것을 해결하기 위해 서버로부터 받아온 post_list 가 없고, pageCheck가 false일때 obsever div보다 위에 안보이는 height가 500px인 div를 넣었다.

이렇게 되면 자연스러운 스크롤 줄 수 있다.

{post_list.length === 0 && pageCheck === false && (

<>

<div *style*={{ height: "500px" }}></div>

</>

)}

• 해결방안 : 페이징을 프론트에서 처리하도록 API를 개선하였다. 서버에서 받아올때 push하던 부분을 = 로 바꿔주었다 처음에 모든 포스트를 받아오고, 페이징 처리를 프론트에서 하기로 API를 바꾼이상 더이상 push를 할 필요가 없어졌다.
• 위에서 시도했던 유령 div는 삭제했다

2. 속도 개선

• 메인페이지에서 Filter와 Sort, Infinity Scroll 등 처리해야할 요소들이 많아지면서 포스트를 로딩하는 속도가 저하되는 현상 발생.
  • 해결방법: 각 모듈을 따로 만들어 불러오는 형식으로 포스트를 불러오는 API를 경량화 하였더니 속도가 개선되었다.