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

간단 소개

모두싸인은 AST, Eslint Plugin을 활용하여 프론트엔드 코드의 멀티 환경 운영을 효율적으로 개선했습니다.

AI Summary

문제 상황: 모두싸인은 일반 기업용, 공공용, 온프레미스 환경에 맞는 서비스를 제공해야 했고, 초기 조건문 방식은 코드 유지보수성 악화, 온보딩 비용 증가, 코드 복잡성 증가를 야기했습니다.
- 환경별 조건문 남발로 유지보수성 저하
- 신규 개발자 온보딩 부담 가중
- 코드 리뷰 및 QA 복잡성 심화
해결 방법: AST와 Eslint Plugin을 활용하여 Route, Component, Logic 레이어별로 분기 전략을 수립했습니다.
- Route: YAML 설정 파일과 Glob Pattern을 통해 중앙 집중식 관리 및 중복 코드 감소
- Component: AST 파싱을 통해 컴포넌트 메타데이터를 수집하고, YAML 파일로 관리. 캐싱 및 Vite Plugin을 통해 성능 최적화 및 실시간 반영
- Logic: 기존의 boolean 플래그 기반 방식을 유지
결과: 코드 유지보수성 개선, 온보딩 비용 감소, 코드 리뷰 효율화, 성능 개선(50초 -> 7초 이내) 및 개발자 경험 향상
- 조건문 감소 및 단일 설정 파일로 집중화
- 메타데이터 주석 기반으로 학습 곡선 완화
- 표준화된 분기 구조로 리뷰 효율 증대