IntersectionObserver를 활용한 Lazy Loading 적용
홍유진:
문제앞서 웹 성능 최적화 파트에 이어서 웹툰 목록을 조회하는 기능을 구현하던 중 많은 데이터 목록을 한 번에 불러와 렌더링 속도가 느려지는 현상이 있었다. 해결 전영상에서 보면 한번에 이미지가 많이 불러와 지는 것을 볼 수 있다.이를 해결하기 위해서 초기 화면에 보여지는 만큼의 목록만 불러오고, 사용자가 스크롤을 내릴 때 추가 이미지를 불러오는 방식을 적용했다. 이 과정에서 IntersectionObserver를 사용한 Lazy Loading을 도입하여 성능을 최적화 할 수 있었다. IntersectionObserver이란?요소가 뷰포트(Viewport) 내에서 보이는지 여부를 비동기적으로 관찰할 수 있는 API이다. 스크롤 이벤트를 직접 다루지 않고도 특정 요소가 화면에 들어오거나 나가는 시점을 쉽게 ..