무한 스크롤웹 페이지나 애플리케이션에서 사용자가 스크롤할 때마다 새로운 콘텐츠를 계속해서 불러오는 방식을 말한다.사용자가 페이지의 끝에 도달하면 자동으로 다음 콘텐츠를 로드하여 화면에 추가하는 방식으로, 페이지를 새로고침하거나 추가적인 페이지로 이동할 필요 없이 연속적인 스크롤을 통해 콘텐츠를 볼 수 있다.React-Intersection-Observer이란?React-Intersection-Observer는 React 를 위한 라이브러리로, 웹 페이지의 특정 요소가 사용자의 Viewport(화면) 내에 들어오는지를 감지하는 기능을 제공한다.이 라이브러리는 브라우저의 기본 API인 Intersection Observer API를 기반으로 하여, React 컴포넌트에서 쉽게 사용할 수 있도록 만들어졌다.G..

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