프론트엔드
신세계백화점 PC 메인 React 전환기
두줄요약
신세계백화점 PC 메인 페이지를 Spring에서 React와 Next.js 기반으로 전환했습니다.\n초기 로딩, 인피니트 스크롤, SEO까지 함께 고려해 사용자 경험과 유지보수성을 개선했습니다.
문제 상황
- 기존 신세계백화점 PC 메인 페이지가 Spring 기반이라 유지보수와 수정 반영 과정이 비효율적
- 모바일 웹 개편에 맞춘 PC 메인 디자인 일관성 확보와 사용자 경험 개선 필요
해결 방법
- PC 메인 페이지를 React와 Next.js로 새로 구축하고, 서버는 API만 제공하는 구조로 전환
- React Query의 useQuery, useInfiniteQuery를 활용해 데이터 조회와 인피니트 스크롤 처리
- 첫 화면 메인롤링배너는 prefetch query와 SSR로 처리해 초기 빈 화면 완화
성능/운영 포인트
- 유닛 데이터를 3개씩 나눠 호출해 과도한 API 요청 방지
- SSR과 CSR을 적절히 조정해 초기 로딩과 사용자 경험 개선
- 메타 태그, canonical, 구조화된 데이터 스키마 등 SEO 요소 추가