신세계백화점 PC 메인, React로 다시 태어나다!
by DD
1년 전
조회수 10
Spring 기반의 기존 PC 메인 페이지를 React로 전환하여 유지보수성 및 사용자 경험을 개선함
Next.js를 사용하여 초기 페이지를 셋팅하고, React Query를 활용하여 API 데이터를 효율적으로 관리함
SSR 적용 및 인피니트 스크롤 구현을 통해 페이지 로딩 속도 개선 및 SEO 최적화를 달성
React 전환, 왜 Next.js를 선택했나?
기존 Spring 기반 환경에서 React로 전환하기 위해 Next.js를 활용했다. 구체적으로 SSR(Server-Side Rendering) 설정을 통해 초기 로딩 속도를 개선하고, SEO 최적화를 위한 기반을 마련했다. 따라서, Next.js는 React 프로젝트의 초기 설정 및 배포 과정을 간소화하는 데 기여했다.
React Query를 활용한 데이터 관리
React Query를 사용하여 API 데이터를 효율적으로 관리하고, 컴포넌트 재사용성을 높였다. useQuery와 useInfiniteQuery를 통해 데이터 페칭, 캐싱, 에러 처리를 간편하게 처리했다. 반면, API response 형식 변경에 따른 데이터 매핑 작업은 새로운 도전을 요구했다.
SSR 적용과 SEO 최적화 전략
초기 페이지 로딩 속도 개선을 위해 SSR을 적용하고, 메타 태그 및 구조화된 데이터 스키마를 설정하여 SEO를 강화했다. 구체적으로, 메인 롤링 배너 유닛에 SSR을 적용하여 사용자 경험을 향상시켰다. 따라서, 웹 접근성과 SEO를 고려한 메인 페이지를 구축했다.
