주제 선정 이유

• CRUD 프로젝트를 몇 번 하면서, 무한 스크롤을 구현하면 좋겠다 라는 식의 말만 하고 사실 구현해본 적 없음
• 또한 프론트엔드 처리와 백엔드 처리 둘 다 요구하기 때문에 개발 데드라인 및 어차피 실제 클라이언트도 없을 거고 우리끼리 만드는 프로젝트인데 오버헤드를 굳이 신경 써야되나? 라는 이유로 시도하지 않았음
  • 로컬로 우리가 보여줄 데이터는 많아야 20개 정도인데 이걸 무한 스크롤로 구현해서 무얼 하나!! 라는 식ㅎ

무한 스크롤(infinite Scrolling)이란?

<aside> 💫 단어 그대롤 연속적인 스크롤을 제공하는 UI/UX

</aside>

<aside> 💫 로드해야 하는 게시글 목록, 이미지 등이 많은 페이지에서 사용자 편의성 및 클라이언트의 부담을 덜기 위해 고안됨

</aside>

• ’페이지네이션’과 비교되는 기법 중 하나로, 웹이나 앱에서 스크롤이 페이지의 끝이나 특정 부분에 도달했을 때, 자동으로 다음 데이터를 요청하여 받아오는 방식으로 별도의 페이지 이동 없이 데이터를 계속해서 불러오는 방식이다.

페이지네이션 vs 무한 스크롤

<aside> 💫 페이지네이션

</aside>

• 장점
  • 사용자에게 많은 정보를 제공할 수 있음
  • 무슨 말이냐면! 사용자가 지금 몇 번째 페이지를 보고 있고, 대략 몇 페이지가 더 있고, 내가 원하는 것이 어디 페이지에 있는 등의 예상이 가능하며 원하는 페이지로 건너뛰기가 가능함
  • 사용자에게 좀 더 자유로운 서비스 사용을 부여
• 단점
  • 추가적인 데이터를 보기 위해 사용자의 행동이 ‘필수적’
    • 위에서 얘기한 사용자의 액션이 필요
    • 웹 서비스에서 중요한 ‘사용자의 이탈’ 관점에서 안좋을 수 있음

<aside> 💫 무한 스크롤

</aside>

• 장점
  • 상하 또는 좌우 스크롤 만으로 데이터를 계속 접할 수 있음
  • ‘스크롤’이라는 행위 자체 → UI/UX 상으로 자연스러움
  • 또한 페이지를 새로고침하지 않기 때문에 자연스러운 사용자 경험 제공
  • 로딩 시간 감소
• 단점
  • 페이지네이션 기법의 장점과 대비됨
  • 즉, 원하는 데이터를 찾고, 기억해야되는 서비스 등에선 적합하지 않을 수 있음

구현 방법