[항해 99 주특기 주차 13일차]

<회고록>

오늘은 팀원들과 함께 인피니티 스크롤을 구현하는 시간을 가졌다. 그래서 인피니티 스크롤을 어떻게 구현할 수 있을지 조사를 하면서 얻은 정보가 있다. 그래서 오늘은 이 정보에 대해서 같이 공유를 하는 시간을 가질까 한다.

 

1. scrollHeight, scrollTop , clientHeight 넌 도대체 머니??..

scrollHeight는 말그대로 scroll 높이 이다. 여기서 중요한 것은 누구의 높이 즉 주어가 누구냐 이다. 내가 이번 로직을 작성할 때는 document가 그 주소가 되었다. 이렇게 scrollTop , clientHeight 모두 document의 Height다. 그렇다면 이를 가지고 어떻게 인피니티 스크롤을 구현할까? 이를 알려면 먼저 인피니티 스크롤이 무엇인지 부터 알아야 한다. 인피니티 스크롤이란 사용자가 특정 페이지 하단에 도착했을 때 콘텐츠가 계속 로딩되는 UX 방식이다. 즉 우리가 총 받을 데이터가 100개라고 한다면 무한 스크롤은 처음에 10개를 보여주고 페이지 하단으로 갔을 때 10개를 더 보여주는 방식이다. 이런 방식의 좋은 점은 처음에 100개를 받을 필요가 없기 때문에 초기 랜더링 속도가 높고 전체적인 렌더링 속도도 일반 스크롤 보다 높다. 왜냐하면 처음에 다 가져오는 것이 아니라 끊어서 가져오기 때문에 렌더링하는 속도가 당연히 후자가 더 빠르다. 그렇다면 이제 위 도구들을 가지고 어떻게 인피니티 스크롤을 구현할 지 살펴보자. 

만약에 스크롤을 맨 밑으로 내렸다는 것을 어떻게 판별할까?

이를 판별하는 방법은 다음과 같다.

clientHeight + scrollTop >= scrollHeight

위 조건문을 통과하는 경우에는 현재 스크롤이 특정 페이지에서 하단을 가르킨다는 것을 확인할 수 있다. 즉 이때 api로 부터 데이터를 더 가져오고 그 데이터를 지금 데이터에다가 추가를 해주면 될 것이다. 즉 다음과 같은 알고리즘으로 무한 스크롤은 구현된다.

1. 현제 페이지의 가장 하단에 스크롤이 있는지 확인

2. 만약 있다면 추가적인 데이터를 받아오기

3. 추가적인 데이터를 기존의 데이터에 추가하기

4. 추가한 데이터를 다시 렌더링하기

즉 크게는 이런 형식으로 작동하는 것을 확인할 수 있다. 다음번에는 확대 , 축소를 해도 스크롤이 가능한 옵저버를 통한 무한 스크롤을 구현해보겠다.