Antigravity Agent
4.0 KiB
독립적인 기능 소유권이 필요한 대규모 React 플랫폼
📌 Brief Summary
독립적인 기능 소유권(independent feature ownership)이 필요한 대규모 React 플랫폼은 주문, 결제 등 각각의 기능이 자체적인 라우팅, 상태 관리, API 계층을 갖추고 개발되는 시스템을 의미합니다 [1]. 이러한 시스템은 관리 오버헤드가 큰 완전한 마이크로 프론트엔드(Micro-frontend) 아키텍처를 피하면서도 강력한 관심사 분리를 달성하기 위해, 단일 호스트 애플리케이션 내에 모듈형 모놀리스(Modular Monolith)나 수직적 슬라이스(Vertical Slice) 패턴을 적용하는 방식으로 설계됩니다 [1-3]. 효율적인 오너십 분리와 유지보수를 위해 Nx나 Turborepo와 같은 모노레포(Monorepo) 도구를 적극적으로 활용합니다 [3, 4].
📖 Core 기Content
-
셸(Shell) 애플리케이션과 모듈의 역할 분리 독립적인 기능 모듈을 통합하기 위해서는 셸(호스트) 애플리케이션의 역할을 라우팅, 인증(Authentication), 전역 레이아웃 관리 등 최소한의 컨텍스트 제공으로만 제한해야 합니다 [5-7]. 반면 개별 기능 모듈(예: 주문 앱, 결제 앱)은 자체적인 라우트, 상태 관리, API 상호작용 및 UI 컴포넌트에 대한 전적인 책임을 지며 단일 셸에 플러그인되는 형태로 작동합니다 [6].
-
모듈형 모놀리스 및 수직적 슬라이스 적용 도메인 간 무분별한 참조로 인한 스파게티 코드를 방지하기 위해 UI부터 데이터베이스까지 이어지는 '수직적 슬라이스(Vertical slice)' 아키텍처를 단일 애플리케이션에 적용합니다 [2]. 다른 기능 간의 직접적인 가져오기(direct imports)는 엄격히 금지되며, 만약 공유해야 하는 요소가 있다면 모든 모듈이 소비할 수 있는 공통 패키지(공유 폴더 또는 라이브러리)로 분리해야 합니다 [6].
-
모노레포(Monorepo)를 통한 경계 및 소유권 강제 팀 간의 독립적인 소유권을 명확히 하면서도 개발 속도를 유지하기 위해 Turborepo, Nx, pnpm/Yarn 워크스페이스 등을 활용한 모노레포 구조가 권장됩니다 [3, 8, 9]. 여러 기능이나 앱을 명확한 범위를 가진 NPM 패키지로 분할하면 개별 팀이 해당 영역의 개발을 자유롭게 주도할 수 있습니다 [9, 10]. 특히 Nx와 같은 도구는 모듈 경계 규칙(module boundary rules)을 적용하여 기능 간의 교차 참조(cross-feature import)를 런타임이 아닌 빌드 타임 에러로 원천 차단해 줍니다 [4].
-
조직적 코드 소유권(Code Ownership) 전략 단일 리포지토리 내에서 각 수직적 슬라이스(폴더나 패키지)는 특정 팀의 소유로 지정되어 해당 팀이 책임을 지고 자유롭게 개발합니다 [10]. 반면 셸이나 인증 모듈처럼 모든 팀이 공유하는 '기반 시설(Foundations)' 영역은 공통 전담 팀의 승인이 있어야만 병합(merge)될 수 있도록 엄격히 관리하여 코드의 안정성을 지킵니다 [10].
🔗 Knowledge Connections
- Related Topics: Micro-frontend, Modular Monolith, Monorepo Architecture, Vertical Slice Architecture, Feature-Sliced Design
- Projects/Contexts: 주문 및 결제와 같이 다수의 독립적 React 앱을 통합하는 플랫폼 재설계, Turborepo 및 Nx를 활용한 대규모 프론트엔드 모노레포 구축 환경
- Contradictions/Notes: 완전한 마이크로 프론트엔드(Micro-frontend) 방식은 기능 간 결합도를 가장 낮출 수 있는 옵션이지만 인프라 및 관리 오버헤드 비용이 가장 높다는 단점이 있습니다. 따라서 이 오버헤드를 피하고자 한다면, 결합도를 효과적으로 통제할 수 있는 모노레포 기반의 모듈형 모놀리스 접근법이 더 나은 절충안으로 제시됩니다 [11].
Last updated: 2026-04-26