Express SSR과 Pug/EJS, 페이지별 JS·CSS가 얽힌 인프런 프론트엔드를 서비스 중단 없이 Vite·React로 옮긴 여정을 여러 문제와 해결 키워드로 정리한다. 사용량이 가장 많은 학습 페이지부터 점진적으로 바꿔 사업 효과와 위험을 검증하는 '달리는 기차의 바퀴 갈아끼우기' 전략을 따라간다.
핵심 포인트- 문자열 클래스명으로만 파일이 연결돼 탐색·삭제가 어려운 레거시 SSR을 전면 재작성 대신 핵심 페이지부터 교체, 쿠키 기반 기능 플래그로 개발자·QA만 새 화면을 열고 운영 중 동적 비활성화·즉시 롤백이 가능한 점진 배포 구성
- 레거시 헤더·푸터를 두고 가운데만 React로 바꾸며 전역 CSS 침범을 Shadow DOM으로 격리했으나 SSR 표현·GTM 호환 한계로 철회, 대신 헤더·푸터 자체를 공용 React 컴포넌트로 이전(번들 파일명은 Vite manifest로 자동 삽입)
- 공용 라이브러리가 패키지마다 버전을 올려야 하는 병목을 Module Federation으로 해소해 소비 앱 재배포 없이 최신 헤더·푸터를 런타임에 반영
- 모든 요청이 여전히 레거시 Express를 지나 부하가 안 줄던 문제를, 수십 개로 불어난 CloudFront behavior 대신 전용 리버스 프록시가 기능 플래그·경로를 보고 신·구 서버로 라우팅하도록 단순화
왜 읽나대형 레거시 프론트엔드를 무중단으로 현대화하려는 팀에게 기능 플래그·Shadow DOM 철회·Module Federation·리버스 프록시로 이어지는 실제 전환 경로를 주는 여정기.