인프런 커뮤니티 질문&답변

scrollHeight는요. 화면 전체 길이입니다. 평소에는 변경되면 안 되고 게시글이 로딩될수록 더 길어지겠죠.

그리고 처음에 전체 스크롤이 880인거고 화면 높이가 768인 것이면 처음부터 바로 dispatch가 되는 상황도 맞습니다. 그리고 이 때 dispatch REQUEST가 돼서 loadPostLoading이 true가 돼서 다음번 REQUEST가 호출되면 안됩니다. loadPostLoading까지 같이 한 번 찍어보세요. 최종적으로 SUCCESS가 한 번만 뜨는 거면 됩니다.

window.screenY로 찍으셨네요!

scrollHeight는 전체 스크롤 길이라서 변경 안 되는게 맞고요.

REQUEST가 여러 번 되더라도 SUCCESS는 한 번만 되면 문제없긴 합니다. 단, REQUEST를 할 때 loadPostLoading이 true가 되는지는 확인해보셔야 합니다.(제 강좌에서는 loadPostsLoading이었는데 오타가 아닌지도 확인해보세요)

네 이게 브라우저에 따라 스크롤 관련 버그들이 있는 것 같습니다.

if (hasMorePosts & !loadPostLoading) 내부에

console.log(window.pageYOffset, document.documentElement.clientHeight, document.documentElement.scrollHeight)

을 넣어서 가장 위로 올렸을 때(버그 상황) 어떤 값들이 나오는지 알려주세요.

https://www.inflearn.com/questions/62801 여기 질문에서 window.scrollY(window.pageYOffset)가 0인데도 scroll이벤트가 실행되는 버그가 있었는데 이것처럼 0인데도 실행되는 게 아닌지 체크가 필요할 것 같습니다.

이런...멍청    ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ한 

실수네요..하..참 ㅠㅠ창피해 죽겠네요..

제대로 출력 하면 ㅠㅠ

본론으로 돌아와서...document.documentElement.scrollHeigh  가 증가하면 안된다고 하셨는데.. 여기에서 증가하는 모습을 보입니다.. 그래서ㅜㅜ

저는 이게 맞는 거라고 생각했는데.. ㅠㅠㅠ

"세번째 답글"에 올렸던 console.log(window.pageYOffset , document.documentElement.clientHeight , document.documentElement.scrollHeight);과 다른 모습을 볼 수 있습니다.

제 생각에는 특정  '0'이될때가 아닌

크기가 변하지 않아, 0 768 880인 경우에도  조건에 성립 하여서 생긴 문제라고 생각했습니다ㅜㅜ

*추가적으로  말씀해 주셨던  loadPostsLoading는 ...reducers/post.js에서도 제가 단수로 명시했더라구요 ㅎㅎ 제로초님이 싫어하시는 단수 복수 규칙을 명확하게 지키지 않았습니다 ..ㅎㅎ 그래도  결과는 변함 없이 나오고 있었습니다! ㅠㅠ 이런 상황도 브라우저에 따라 스크롤 관련 버그 인건지요 ㅜㅜ

그러네요 ㅜㅜ

바로 위에 console 찍은 코드는 이건데..

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import PostForm from '../components/PostForm';
import PostCard from '../components/PostCard';
import AppLayout from '../components/AppLayout';
import { LOAD_POSTS_REQUEST } from '../reducers/post';
import { LOAD_MY_INFO_REQUEST } from '../reducers/user';

const Home = () => {
  const dispatch = useDispatch();
  const { me ,logInError} = useSelector((state) => state.user);
  const { mainPosts, hasMorePosts, loadPostsLoading,retweetError } = useSelector((state) => state.post);
  
  useEffect(() => {

    if (retweetError) {
      return alert(retweetError);
    }
  }, [retweetError])

  useEffect(() => {

    if (logInError) {
      return alert(logInError);
    }
  }, [logInError])

  useEffect(() => {
    dispatch({
      type:LOAD_MY_INFO_REQUEST
    });
    dispatch({
      type: LOAD_POSTS_REQUEST,
    });
  }, []);

  useEffect(() => {
    
    
    function onScroll() {
      if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
        console.log(window.screenY,document.documentElement.clientHeight ,document.documentElement.scrollHeight )
        if (hasMorePosts && !loadPostsLoading) {
         
          const lastId=mainPosts[mainPosts.length -1]?.id;//없을경우도 있으니까
          dispatch({
            type: LOAD_POSTS_REQUEST,
            data:lastId
          });
        }
      }
    }
    window.addEventListener('scroll', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, [mainPosts, hasMorePosts, loadPostsLoading]);

  return (
    <AppLayout>
      {me && <PostForm />}
      {mainPosts.map((c) => (
        <PostCard key={c.id} post={c} />
      ))}
    </AppLayout>
  );
};

export default Home;

 뭐가 문제 인지 찾아보겠습니다 ㅠ.ㅠ.......

앞에 두 개 더한 값이 뒤의 값보다 작은데 어떻게 콘솔에 찍히는거죠?

아 왜 그러냐면  제가 수업 듣고 복습 용이랑 혼자 작성용 코드를 두개를 써서 하는데  다른 코드에서는 

document.documentElement.scrollHeigh 가 증가했습니다 ㅠㅠ 그래서 증가해야 된다고 생각했던 것 같습니다 ㅜㅜ지금 사진은

LOAD_POSTS될시에 

console.log(window.screenY,document.documentElement.clientHeight,document.documentElement.scrollHeight ) 결과 입니다.

조건은 이구요

우선 load_post 되는 시점에 console을 찍어보면 

일시에 출력되게 했습니다.

 document.documentElement.scrollHeight가 변경이안되고있는것 같습니다.

그리고 추가적으로 LOAD_POSTS가 동시에 여러번 실행 되는것 같습니다. (throttle와 if (hasMoreposts && !loadPostLoading) 조건 사용)

ㅠㅠ