하나의 프론트엔드 코드로 멀티 환경 운영하기

이 게시물은 하나의 소스코드로 여러 환경(일반 기업용, 공공기관용, 온프레미스)을 지원하면서 유지 보수성과 개발 생산성을 높인 경험을 공유합니다.

문제점과 접근법

• 초기 if/else 조건문 분기 방식의 문제점: 유지보수성 저하, 코드 중복, 신규 개발자 온보딩 어려움
• Feature Flag 도입 검토 후 한계 발견
• Route, Component, Logic 세 레이어로 분기 관리 전략 수립

기술적 구현

• Route 레이어: YAML 설정과 Glob Pattern으로 중앙 집중식 분기 관리
• Component 레이어: 주석 기반 메타데이터와 AST 파싱(ts-morph)으로 분기 정보 수집 및 캐싱, Vite Plugin을 통한 실시간 반영 지원
• Logic 레이어: 기존 boolean 플래그 방식 유지
• ESLint Plugin 도입으로 주석 메타데이터 오류 방지

성과

• 분기 로직의 중앙 집중화로 유지 보수성 및 코드 리뷰 효율성 개선
• 캐싱 및 HMR 적용으로 빌드 시간 50초에서 7초로 단축
• 로컬 환경에서 손쉽게 환경별 UI 확인 가능