프론트엔드 보통 코딩

Infinite Scroll 구현

무한 스크롤 기능을 구현하세요

30분

100점

120개 테스트케이스

#3663

문제 설명

스크롤이 페이지 하단에 도달하면 추가 데이터를 로드하는 무한 스크롤을 구현하세요.

요구사항

Intersection Observer API 사용
로딩 상태 표시
더 이상 데이터가 없을 때 처리
스크롤 위치 복원
중복 요청 방지

API

// 페이지당 10개 아이템
fetch(`/api/items?page=${page}&limit=10`)

평가 기준

성능 최적화
UX 고려
에러 처리

예제 테스트케이스

예제 1

입력

53
-208 240 -453 -36 -289 -23 612 -804 195 -395 103 -143 -481 -532 -953 -626 548 -958 158 872 174 670 178 -959 -259 -823 -611 106 514 -312 749 -43 -445 -370 -595 303 937 188 482 13 -702 -327 -18 -144 780 997 -343 -431 780 117 690 -216 954

출력

-1139

예제 2

입력

6
380 -350 -127 684 -616 -626

출력

-655

예제 3

입력

67
80 -382 82 -808 -350 338 -19 -462 697 81 -492 721 -794 -987 -841 828 -1 -18 -684 465 610 136 899 761 112 301 845 469 146 355 -698 796 -990 -165 -165 447 225 281 822 -778 261 838 896 51 331 871 740 542 192 -397 -541 -565 -859 -386 -55 -862 -766 34 -878 -922 426 -819 778 -199 -617 -119 -740

출력

-902

힌트

실행 버튼을 눌러 코드를 실행하세요.