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

아 저기 hasMorePosts 를 넣어본것은 원래 ch5부분에 없는건데 자꾸 새로고침할때마다 저부분이 실행이 되어서 다 불러올경우 hasMorePosts가 false 가 되면 새로고침시 저 dispatch가 동작안할거 같아서 임의로 제가 고쳐본거에요, 근데 저부분이 있으나 없으나 상황은 같더라구요.   그럼 일단 ch5부분의 코드가 아직 완성되지 않아서 새로고침시에 계속 포스트가 로딩되는걸로 생각하면 될까요? load Post 에 관련된 부분을 ch5부분으로 전부 깃허브 복붙해서 해도 같은 상황이 발생하더라구요 

지금 쓰고 계신 코드는 오류가 있을 수밖에 없습니다. 서버에서 데이터를 불러오면 hasMorePosts가 true가 되고, hasMorePosts가 true이니 클라이언트에서 한 번 더 데이터를 불러오게 됩니다.

적어주신 코드는 완성된 코드가 아닙니다. 저기서 에러가 나는 것을 하나씩 해결하면 아래 완성 코드가 되는 것입니다.

https://github.com/ZeroCho/react-nodebird/blob/master/ch6/front/pages/user/%5Bid%5D.js

제 강좌를 보실 때 실습 도중 에러가 난다면 제 깃헙 소스코드를 보시고, 현재 코드와 깃헙 소스코드가 많이 차이난다면 기존 방식에 뭔가 문제가 있어서 해결방법을 적용했다고 보시면 됩니다.

콘솔로그 찍어본 결과 새로 고침할때 page/index.js 에서 useEffect 부분이 계속 실행이 됩니다 ㅜㅜ 

redux devtools를 보세요. 콘솔 로그를 찍으시고 load user request랑 load post request가 어디서 호출된건지를 보셔야 합니다. 얘네 둘은 getServerSideProps에 있어서 원래는 거기서 호출되고 클라이언트에서는 호출되면 안 되는 애들입니다. 서버사이드에서 호출된 리덕스 액션은 redux devtools에는 나오지 않습니다. 그런데 나온다면 뭔가 문제가 있어서 호출되는 것입니다. 

새로고침을 누르면 load user request, load post request 가 두번씩 쏟아지는데... 이건 어디를 봐야할까요..?

nodebird.com 들어가보시면 새로고침해도 데이터가 두 번 불러오거나 하는 문제는 발생하지 않습니다. 이 부분은 redux devtools 데이터의 mainPosts를 추적하지 않으면 원격으로는 도와드리기 어렵습니다.

계속 실험해본결과 브라우저를 껐다가 최초로 새로고침 한번도 안누른 상태라면 모든 동작이 완벽히 작동하는데,  새로고침을 한번 누를 때마다 기존게시글에 + 기존게시글을 다시 불러옵니다. 새로고침을 3번누르면 딱 기존게시글에 기존게시글 *3 회가 추가되네요..   혹시 몰라서 page index 에 이런처리를 해도 같은 현상이 발생하네요 ㅠ

라우터, 리듀서, 사가, 페이지 인덱스 등 전부 깃허브 코드로 바꾼다음 진행했는데 이런 현상이 발생했습니다. 

브라우저를 껐다켜면 그 문제가 해결이 되는데 게시글을 썼다가 지웠다가 하다가 새로고침을 눌러버리면 기존 게시글에 또 기존게시글이 불러지는 현상이 발생합니다. 예를들면 1-20번까지 불러들인 상태에서 게시글 추가 및 삭제 하면 게시글을 더이상 불러오지 않는데 새로고침을 눌러버리면 1-20번 에다가 또 1-20번이 생기는 현상이 발생합니다. 이건 버그인가요? 

아 그런데 다시 몇번 게시글 지웠다가 썼다가 하다보면 또 같은 현상이 발생하고.... 계속 같은 게시물을 불러오네요 ㅠㅠ

loadpost 관련된 부분을 전부 제로초님 깃허브 코드로 바꿔서 서버까지 재시작해도 같은 현상이 발생했었는데,  새로고침 말고 브라우저를 꺼버렸다가 다시 시작하니까 같은 문제가 일어나지 않습니다. 혹시 브라우저가 캐싱을 해서 이런 현상이 나타날수도 있나요? 

이 부분은 게시글 로딩 부분이 동시에 여러 번 일어나서 발생하는 문제입니다. 제가 설명드린 쓰로틀링이나 이런 것을 모두 적용하셨나요? 이 부분은 제 깃헙 코드와 비교해보셔야 합니다. if문 조건 하나만 달라져도 이런 현상이 나타날 수 있어서요.