피드로 돌아가기
Dev.toFrontend
원문 읽기
7,558행의 거대 Constant 파일 제거 및 모듈 구조 설계를 통한 빌드 최적화
What I learned refactoring a codebase with a 7,558-line constants file"
AI 요약
Context
6개 제품이 하나의 코드베이스에 통합된 React/Gatsby SaaS 환경에서 기능 중심의 폴더 구조 없이 모든 파일이 알파벳순으로 배치된 한계 발생. 7,558행의 constant.js와 1,115행의 utils.js 등 모놀리식 파일로 인한 디버깅 지연 및 빌드 성능 저하가 심화된 상황.
Technical Solution
- 기능 중단 없는 점진적 리팩토링을 위해 제품별 PR 분리 전략 채택
- Monolithic 파일을 제품별/기능별로 세분화하여 모듈 아키텍처로 재구성
- Path Alias 설정을 통해 파일 이동 과정에서 발생하는 경로 참조 마찰 최소화
- ESLint Rule을 통한 강제적 아키텍처 준수 가드레일 구축
- 불필요한 npm 패키지 제거를 통한 빌드 파이프라인 경량화
- Component State에 종속된 Idle Timer를 적절한 위치로 이동시켜 Auth Race Condition 해결
실천 포인트
1. 대규모 리팩토링 전 Target Structure를 명확히 정의했는가?
2. 기능 개발과 병행 가능한 작은 단위(제품/모듈별)로 PR을 분할했는가?
3. 단순 가이드라인 대신 ESLint 등 자동화 도구로 아키텍처를 강제하고 있는가?
4. 빌드 성능 저하를 유발하는 Dead Package가 포함되어 있지는 않은가?