핵심 요약
올리브영의 라이브관 프런트엔드 팀은 신규 아키텍처 기반으로 라이브관을 구축하고 SSR과 CSR를 조합해 로딩 속도와 페이지 품질을 개선했다.
주요 경험
- Next.js 12를 기반으로 TypeScript, Recoil, React Query를 도입해 프런트엔드 아키텍처를 분리하고 초기 렌더링을 개선했다.
- Next/Image를 적극 활용하고 Lazy loading과 Skeleton 이미지를 도입해 콘텐츠 로딩 품질을 높였다.
- Custom hook으로 비즈니스 로직과 화면 렌더링을 분리하고 useMemo/useCallback, dynamic import로 렌더링 최적화를 적용했다.
얻은 인사이트
- SSR 기반 렌더링이 초기 화면 품질에 긍정적 영향을 주는 것을 확인했다.
- 소규모 팀에서도 프런트엔드 공통 규칙과 코드 리뷰의 가치가 크다.
- Next.js 13 대비 방향성 준비의 필요성을 확인했다.
