카카오페이지 웹 React 포팅 후기
Source
Evernote/Inbox/카카오페이지 웹 React 포팅 후기 – landvibe – Medium.md
Summary
카카오페이지 웹 서비스의 레거시(Spring+JSP) 아키텍처를 React 기반 SPA로 마이그레이션한 경험과 기술적 의사결정 과정을 다룬 문서입니다. 주요 결정 사항으로는 SEO 확보를 위해 SSR 적용을 선택하고, 개발 편의성 및 생태계 규모를 고려해 Next.js와 TypeScript를 채택했습니다. 또한 코드 포맷팅을 위해 Prettier 도입, 이미지 로딩 우선순위 조정으로 초기 로딩 속도 개선, 그리고 Android 2.3 호환성을 위한 Babel 플러그인 추가 컴파일 등의 실무 팁을 공유합니다.
Key Points
- 기존 Spring+JSP 기반 서버 렌더링 구조를 React SPA로 전환하며 별도 API 서버 연동 필요성 대두
- B2C 서비스 특성상 SEO 필수성으로 SSR 채택, 구축 난이도 및 개발 편의성 고려하여 Next.js 선택
- 대규모 프로젝트 유지보수성 및 IDE 지원(자동 완성, 리팩토링) 향상을 위해 정적 타입 도입
- 커뮤니티 규모 및 라이브러리 타입 지원 우위, VSCode 통합 용이성으로 TypeScript 선택 (Flow 대비)
- 팀 협업 시 코드 스타일 통일 및 인적 비용 절감을 위해 Prettier 강제 적용 권장
- 초기 화면 로딩 최적화를 위해 가시 영역(Viewport) 내 이미지 우선 로딩 전략 적용
- Android 2.3 등 레거시 브라우저 지원을 위해 ES5 호환성 문제 해결 (Babel 플러그인 추가 빌드 단계 도입)