Skip to content

Latest commit

 

History

History
67 lines (47 loc) · 3.24 KB

2024-11-12.md

File metadata and controls

67 lines (47 loc) · 3.24 KB

🗓️ 2024-11-12

🐌 스크럼

  • 학습 목표 1. Intersection Observer API를 이용한 인피니티 스크롤 구현 로직 이해 및 정리

💡 새로 배운 내용

1. 인피니티 스크롤

사용자가 페이지의 하단에 도달했을 때, 컨텐츠를 로드해서 보여주는 UX 방식

  • 장점

    • 더 나은 UX 제공
      • 다음 컨텐츠를 보기 위한 추가 클릭 X, 로드 시간이 짧다.
    • 모바일 기기에 적합
      • 손가락 스와이프 제스처로 작은 화면을 쉽고 간편하게 둘러볼 수 있다.

  • 단점

    • 원래 스크롤 위치로 돌아오기 힘들다. (=== 특정 컨텐츠를 다시 찾기 힘들다.)
    • 스크롤 막대가 실제 데이터 양을 반영하기 힘들다.
    • 중간에 광고가 있으면 페이지가 끝난 것처럼 보인다.
    • 푸터에 접근할 수 없다.
    • 컨텐츠가 많을 수록 페이지 속도가 느려진다.

2. Intersection Observer API

Web API 중 하나
Intersection Observer는 교차 관찰자로, 관찰 중인 요소(element)가 Viewport와 교차하고 있는지를 감지하는 API이다.
👉🏻 사용자가 보고 있는 화면에 관찰 중인 요소가 들어왔나?

intersecion observer

2-1. 내가 구현한 인피니티 스크롤

  • initInfiniteScroll()

    1. Intersection Observer를 사용하여 스크롤 엘리먼트가 사용자가 보고 있는 화면에 진입했는지 감지한다.
    2. 엘리먼트가 화면에 잡히면 loadPoatsData()를 호출한다.

  • loadPostsData()

    1. 서버에서 게시글 데이터를 받아와 현재 보여지는 게시글 배열에 추가한다.
      1-1. 게시글은 한 번에 4개씩 받아온다.
    2. 데이터를 가져오는 동안 로딩 애니메이션을 표시한다. Lottie 활용!
    3. if 가져온 데이터가 4개보다 적다면, 서버에 존재하는 게시글 데이터는 모두 로딩된 것이다. 따라서 stopInfiniteScroll()를 호출한다.

  • stopInfiniteScroll()

    • Intersection Observer을 중지하여 인피니티 스크롤을 끝낸다.

    무제

👩🏻‍💻 오늘의 도전 과제와 해결 방법

👏🏻 오늘의 회고

  • 코드 리팩토링이 더 어려운 거 같다.
  • api 명세서 피드백을 받고 부족한 부분들을 확인받을 수 있어 좋았다. 그런데 DELETE 응답 값은 어떻게 구체화하면 좋을지 고민이다. 🤔

🔗 참고 자료 및 링크