무한스크롤을 어떻게 적용할까
현재 구현 페이지
현재 구현 페이지의 코드
현재 구현 페이지의 코드
여기서 한번 짚고 넘어갈 포인트
무한스크롤을 구현함으로써 얻는 이점이 무엇인가?
(디자인을 제외한 개발적인 측면에서)
- 음...개발적으로 얻을 수 있는 이점은..
- 페이스북, 트위터, 핀터레스트 등 잘나가는 곳 들도 했으니..!
여기서 한번 짚고 넘어갈 포인트
무한스크롤을 통해 감수해야 할 점이 무엇인가?
(디자인을 제외한 개발적인 측면에서)
- 추가적인 구현이 필요
- 로드하면 로드 할 수록 사이트가 느려지는 구조
사실 데이터가 별로 없어서..현재로썬 큰 문제는 아닙니다
그래도
UX에서 오는 이점이
많을 것이라 생각하고
시작
생각했던 방법들
JQuery
현재 겟차의 컨텐츠 갯수는
70개(뉴스) + 200개 (출고후기)
추가되겠지만
많은 양이 아니기 때문에
전부 로드를 한 후
무한스크롤 처럼 보이게
만들기
굳이...
jquery .show() / .hide() 이용
JSTL + JS DOM
content에 값을 전부 받고
javascript 배열에 값을
넣어 준 후 DOM객체를
append 해주는 것
(뒤에 예시 있습니다)
React
하나의
<Article/> component 를 만들어
append 한다.
DOM을 사용하는 페이지이기 때문에 좋지 않을까..
데이터를 어떻게 받아오지..
mapping..
그 중 가장 쉬운
한가지를 만들어 봤습니다.
코드 부분
현재 스크롤의 높이 == document의 높이 - 보고있는 창의 높이
JSTL + JS DOM
그중 JSTL과 Javascript를 이용한
예시입니다.
뷰 부분에서의 수정만 이뤄졌고
jstl과 javascript가
호환이 되어 편하게 사용했음
초기 10개, 바닥에 도달할 경우 5개가 로드
생각보다 느리지도 않음(오히려 빠른 것 같기도 했습니다.)
https://webpub.getcha.kr/news.jsp 에서 볼 수 있습니다.
추후 생각해야 할 부분
- 이미지가 로드되는 것을 보여줘야 함(기존의 lazy효과)
한번에 로드하여 자바스크립트 배열에 넣는것은
비효율적인 작업일 것(나중에 느려질 여지 충분)
- 존재하는 좋은 라이브러리가 있으면 사용하자
- 계속해서 이 효과를 쓴다면 React사용을 생각해보자