핵심 요약
올리브영의 프론트엔드 팀은 SPA의 스크롤 복구를 다섯 가지 시나리오로 제시하고 실전 팁을 공유합니다.
구현 방법
- 정적 데이터: History API로 scrollY 저장 후 beforeunload, popstate로 복구
- 동적 데이터: scrollY와 보이는 아이템 정보를 sessionStorage에 저장, 데이터 로드 후 기준 아이템으로 위치 재현
- 레이지 로딩: 스켈레톤으로 공간 확보하고 필요한 데이터 배치 로드
- React Query: 캐시로 즉시 렌더링하고 스크롤 정보를 저장해 복구
- 가상화: 화면 내 아이템 기준으로 먼저 로드하고 시퀀스/페이지 정보를 이용해 위치 복원, 주변 데이터 프리로딩
주요 결과
- UX 개선 및 복구 안정성 증가
- CLS 개선에 스켈레톤/가상화 기여
- 다양한 로딩 방식에서도 일관된 복구 흐름 확보
