신세계백화점 PC 메인, React로 다시 태어나다!

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 형식 변경에 따른 데이터 매핑 작업은 새로운 도전을 요구했다.