프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.

9월 8일 (수)

📚 TIL

무한 스크롤 UI 구현

• 버튼과 스크롤 이벤트를 통한 데이터 렌더링 기법

• intersectionObserver를 활용한 데이터 렌더링 기법

📮 Feelings

무한 스크롤 UI 구현

오늘은 Vanilla JS만을 사용하여 무한 스크롤 UI를 SPA 형태로 여러 방법을 통하여 직접 구현해보았습니다.

페이지내의 현재 스크롤 위치와 버튼 클릭 이벤트 등으로 api 호출을 통해 받아온 이미지 데이터를 페이지에 쌓아 페이지의 높이가 증가함에 따른 무한 스크롤이 이루어지게 하였습니다.

먼저 스크롤만을 활용한 무한 스크롤을 구현하기 전에 더보기 버튼의 클릭 이벤트를 활용하여 페이지에 데이터를 쌓아가는 방법으로 먼저 구현을 해보며 웹에서 많이 경험했었던 더보기 버튼들에 대하여 동작원리를 이해할 수 있었습니다.

다음으로 버튼 이벤트가 아닌 스크롤 이벤트를 활용하여 사용자의 현재 페이지의 위치 값을 활용하여 특정 위치에 도달할 경우에 api 호출이 이루어지도록 하여 무한 스크롤 UI를 구현해 보았습니다.

이 과정에서 window 객체의 높이 값을 다루는 다양한 변수들의 개념에 대해서 비교하며 공부를 할 수 있어서 좋았습니다.

마지막으로 처음 다루어보았던 intersectionObserver API를 활용하여 무한 스크롤 UI를 구현하여 보았는데 스크롤 이벤트의 경우 엄청난 횟수의 이벤트가 발생하게 되는 반면 intersectionObserver API는 타겟 요소와 상위 요소의 뷰포트 간격에 대해 비동기적인 실행이 이루어지므로 메인 스레드에 영향을 주지 않으면서 위치 변경 사항을 감지해주는 성능 좋은 API임을 배울 수 있어서 좋았습니다.

마치며 🙏

무한 스크롤 UI를 3가지 방법을 통하여 구현을 해보며 느낀점은 모든 상황에서 절대적인 방법은 존재하지 않다라고 느끼게 되었고 상황에 따라 더 보기와 같은 버튼을 활용하여 필요한 데이터를 제한하여 직접 불러오는 인터랙션 방법이 더 좋은 성능을 초래할 수 도 있다라는 점을 배우게 되어 좋았습니다.

intersectionObserver API의 observe, unobserve, threshold 값에 따른 observe 노출에 관하여 자세한 사용법이 궁금해지게 되었고 자세히 다룬 내용을 포스팅 하려고 계획을 세우게 되었습니다.

📅 Future Action Plans

• 디렉터리별 라우팅이 가능한 PhotoAlbum에 Breadcrumb 기능 추가하여 구현하기