작성한 질문수 29

1

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

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

1

window.screenY로 찍으셨네요!

1

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

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

1

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

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인데도 실행되는 게 아닌지 체크가 필요할 것 같습니다.

0

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

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

제대로 출력 하면 ㅠㅠ

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

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

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

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

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

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

0

그러네요 ㅜㅜ

바로 위에 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;

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

0

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

0

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

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

LOAD_POSTS될시에 

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

조건은 이구요

0

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

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

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

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

ㅠㅠ