react nodeBird 1-14(faker, 인피니트 스크롤링 적용하기)

Faker(페이커) 적용하기

faker 설치

faker 선언

  이제 더미데이터를 페이커를 이용해서 랜덤하게 설정해줄 수 있습니다. npm으로 페이커를 설치하고, faker가 가지고 있는 함수를 통해 닉네임, 글, 이미지등을 가상으로 만들어줄 수 있습니다. 또한, 아래 링크를 통해 페이커 설치, 사용방법을 익힐 수 있습니다.

www.npmjs.com/package/faker

faker

  

페이커를 통한 더미포스트 생성

  이제 페이커를 이용해서 generateDummyPost라는 더미데이터를 만들어주고, 글을 initialState의 mainPosts에 concat으로 글을 추가해줍니다. 이 코드는 generateDummyPost 함수를 이용해서 서버에서 데이터를 불러오는 것을 임시로 만들어주는 역할을 합니다.

concat 시에는 대입해야함

  또한, 자바스크립트의 concat을 사용시에는 draft.mainPosts = 처럼 대입을 꼭 해줘야 합니다. 

pages/index.js

  이제 더미데이터를 직접 써서 보여주는 것이 아니라 페이지가 열리면 서버에서 받아오는 것처럼 useEffect를 이용해서 적용해줍니다. saga, reducer에 LOAD_POSTS_REQUEST를 하는 코드들을 작성해주고, 데이터의 흐름을 생각하며 코드를 작성합니다.

인피니트 스크롤링(Infinite Scrolling) 적용하기

 

인피니트 스크롤링 적용 모습

  generateDummyPost를 통해 가상의 데이터를 만들어줬지만 기존 SNS인 인스타그램처럼 스크롤을 내리면 다음 항목들을 계속 불러오는데 이것을 인피니트 스크롤링이라고 부릅니다. 인피니트 스크롤링을 사가와 리듀서를 가지고 구현을 해볼 생각입니다. 

hasMorePosts라는 데이터를 만듦

  initialState에 hasMorePosts라는 데이터를 만들어주고, true 값을 초기 설정값으로 줍니다. 초기값이 true 값이 되는 이유는 게시글이 0이 경우, 데이터를 가져오려는 시도를 해야되게 때문입니다. draft.mainPosts < 50;는 50개보다 적으면 데이터를 가져오겠다라는 의미입니다. 

  이제 스크롤을 내리면 다음 게시글을 가져오는 코드를 작성해야합니다. 일단 addEventListener를 통해 스크롤을 인자를 받고, return으로 removeEventListener로 스크롤 인자를 지워주는 코드를 작성해줍니다.

일단 스크롤이 어떤 부분이 연관되어 있는지를 알아봐야합니다. 콘솔로그를 통해 window.scrollY, document.documentElement.clientHeight, document.documentElement.scrollHeight 확인해보면 스크롤을 내릴때마다 값이 변하는 것을 알 수 있습니다.

scrollY: 내가 얼마나 스크롤을 내려왔는지

clientHeight: 화면에서 보이는 길이

scrollHeight: 스크롤과 화면에서 보이는 총길이

콘솔로그에서 스크롤 값을 확인해볼 수 있다.

스크롤이 내려왔을 때 dispatch를 통해 다음 게시글이 나타날 수 있게 작성

  이것을 통해 scrollY + clientHeight = scrollHeight라는것을 알 수 있습니다. 이것을 이용해서 if (window.scrollY + document.documentElement.clientHeight = document.documentElement.scrollHeight)로 스크롤이 내려갔을 때 다음 게시글을 나올 수 있게 작성합니다. 

인피니트 스크롤링 안끊기게 사용하려면 위코드처럼 해주는 것이 좋다.

  실무에서는 스크롤이 다 내려오고 나서 다음 게시글이 나오는 것에 연속성이 부족하기 때문에 위 그림처럼 스크롤이 다 내려오기전 300픽셀정도에 다음 게시글이 나올 수 있도록 해주는 것이 좋습니다.