프론트엔드
버즈빌 프론트엔드 변천사
두줄요약
버즈빌은 AngularJS에서 Vue·React·Next.js로 전환하며 통합 어드민과 웹뷰 기반 배포 유연성을 확보했습니다. BFF, 모노레포, Server-Driven UI, Hybrid SDK로 개발·운영 복잡도를 개선했습니다.
문제 상황
- 분리된 AngularJS 어드민의 기능 중복과 높은 변경 난이도
- MSA 환경에서 Django 레이어를 직접 관리해야 하는 프론트엔드 팀의 부담
- WebView 프로젝트 증가에 따른 공통 코드·의존성·설정 관리 복잡도
구조와 흐름
- AngularJS 어드민을 Vue 기반 통합 어드민으로 전환한 뒤 React·Next.js 중심 표준 스택으로 이동
- Node.js Express 기반 BFF로 API 조합·인증·캐싱을 처리하고 일부 기능은 Next.js API Routes로 통합
- WebView React SPA, Turborepo 모노레포, Server-Driven UI, Hybrid SDK로 배포·운영·네이티브 연동 개선
선택 이유
- Vue의 낮은 학습 난이도와 AngularJS 템플릿 방식과의 연속성
- SSR과 Server-Driven UI 초기 데이터 로딩을 위한 Next.js 채택
- 설정 최소화와 생산성 중심의 Turborepo 선택
트레이드오프
- BFF 추가에 따른 모니터링 지점 증가와 APM 도입
- Server-Driven UI의 배포 없는 실험·커스터마이징과 조합 설계·UX 검증·운영 도구 복잡도
- 대규모 Vue 어드민 일괄 전환 위험을 피하기 위한 iframe 기반 점진적 React 마이그레이션
