프론트엔드
React 리팩토링, 10년 넘은 리디북스 웹도 OK
두줄요약
리디북스 웹의 이기종 기술 스택을 React와 Next.js 중심으로 점진 리팩토링했습니다. SSR·캐싱·자동화 배포와 컴포넌트 일반화로 성능 및 유지보수성을 높였습니다.
문제 상황
- 10년 이상 누적된 이기종 프론트엔드 스택과 도메인별 상이한 컨벤션
- 디자인 변화 없이 생산성·유지보수성 향상을 목표로 한 웹 구현 전면 재개발
- 신규 기능 개발과 리팩토링을 60:40 비중으로 병행하는 점진적 전환
해결 방법
- 기존 비중이 높은 React를 웹 표준으로 선정하고 앱은 React Native로 통합
- 비즈니스 우선순위와 기존 React 전환 상태를 기준으로 서점의 접근성 높은 페이지부터 전환
- Cloudflare와 AWS AppMesh의 헤더 기반 트래픽 제어로 신규 서버와 PHP 서버 공존
구조와 흐름
- Next.js의 pages 중심 구조와 models·services·features·components 레이어 구성
- Redux Toolkit의 createAsyncThunk·slice 기반 API 상태 관리와 Emotion 기반 스타일 격리
- BookDefinition·presets·Context·modularComponent를 활용한 책 표현 컴포넌트 일반화
성능/운영 포인트
- 신규·기존 페이지 혼재 환경에서 CSR을 배제하고 SSR 중심 서비스 구성
- Next.js 서버의 렌더링 결과 캐시와 요청별 처리 분리로 기존 수준 TTFB 확보 및 CSR 성능 향상
- GitHub Actions, AWS CodePipeline, ECS blue-green 배포 기반 자동화와 testing-library/react 기반 테스트 강화
