Antigravity Agent
25 lines
4.1 KiB
Markdown
25 lines
4.1 KiB
Markdown
# [[마이크로 프론트엔드를 대체하는 모듈식 단일 아키텍처(Modular Monolith) 설계]]
|
|
|
|
## 📌 Brief Summary
|
|
마이크로 프론트엔드 아키텍처의 대안으로 제시되는 '모듈식 모놀리스(Modular Monolith)'는 단일 배포 애플리케이션(Single Deployable Application) 내에서 기능(Feature) 단위로 UI, 상태 관리, API 계층을 완전히 분리하여 관리하는 설계 방식입니다 [1, 2]. 이 접근법은 다수의 프론트엔드 애플리케이션을 관리해야 하는 마이크로 프론트엔드의 런타임 복잡성(예: 모듈 페더레이션, 중복된 React 인스턴스 등)을 피하면서도 팀 간 독립적인 기능 소유권과 명확한 관심사 분리를 달성할 수 있게 해줍니다 [2]. 주로 Turborepo, Nx와 같은 모노레포(Monorepo) 설정과 결합하여 엄격한 모듈 경계를 빌드 타임에 강제함으로써 대규모 프론트엔드 프로젝트의 확장성을 확보합니다 [1, 2].
|
|
|
|
## 📖 Core Content
|
|
* **단일 셸 애플리케이션과 독립적 모듈 구성**
|
|
각 라우트마다 별도의 React 앱을 로드하는 대신, 라우팅, 인증(Authentication), 레이아웃 등 공통 관심사만을 처리하는 단일 셸(Shell) 애플리케이션을 구축합니다 [2]. 개별 기능(예: 주문, 결제 등)은 이 셸에 플러그인 형태로 등록되는 모듈로서 작동하며, 각 모듈은 자체 라우트, 상태 관리, API 상호 작용 및 UI 컴포넌트의 소유권을 온전히 가집니다 [1, 2].
|
|
|
|
* **수직적 슬라이스(Vertical Slice) 아키텍처 적용**
|
|
프론트엔드부터 백엔드 데이터에 이르기까지 교차 도메인 임포트(Cross-domain imports) 없이 도메인별로 완전히 분리된 수직적 슬라이스를 구성합니다 [3, 4]. 각 슬라이스는 특정 팀이 자유롭게 개발을 주도하는 고유한 영역이 되며, 인증이나 공통 레이아웃처럼 기능 간 공유가 필요한 요소는 모듈 간 직접 임포트하는 대신 'Foundations' 또는 'Shared core'와 같은 별도의 공통 패키지로 분리하여 소비하게 합니다 [2, 5, 6].
|
|
|
|
* **도구를 활용한 엄격한 모듈 경계(Module Boundaries) 강제**
|
|
모듈식 모놀리스가 무질서한 스파게티 코드로 변질되는 것을 막기 위해서는 모듈 간 직접적인 임포트를 강력히 통제해야 합니다 [2, 7, 8]. Nx나 Turborepo와 같은 모노레포 구축 도구를 사용하면 모듈 간 경계 규칙을 적용할 수 있으며, 규칙을 위반한 교차 기능 임포트가 발생할 경우 이를 코드 리뷰 단계가 아닌 빌드 타임 에러로 사전에 완벽히 차단할 수 있습니다 [2, 9, 10].
|
|
|
|
* **기능 분할 설계(Feature-Sliced Design, FSD)와의 시너지**
|
|
대규모 모놀리스 환경을 효과적으로 관리하기 위해 FSD를 도입할 수 있습니다. 프론트엔드를 공유 컴포넌트(Shared), 도메인 엔티티(Entities), 비즈니스 로직을 포함하는 기능(Features) 등의 레이어로 나누고 단방향 의존성을 강제합니다 [11, 12]. 패키지의 진입점(Public API 역할을 하는 `index.ts`)을 명확히 설정하고 의도치 않은 깊은 임포트(Deep imports)를 차단함으로써 결합도(Coupling)를 대폭 낮출 수 있습니다 [7, 8, 13].
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** [[Monorepo Architecture]], [[Vertical Slice Architecture]], [[Feature-Sliced Design]]
|
|
- **Projects/Contexts:** [[Turborepo and Nx Workspaces]], [[Scalable React Component Architecture]]
|
|
- **Contradictions/Notes:** 조직에 따라 독립성을 완전히 보장하기 위해 별도 저장소를 두는 다중 저장소(Polyrepo)나 완전한 마이크로 프론트엔드를 선호할 수 있습니다. 그러나 공통 UI와 디자인 토큰을 자주 공유해야 하고, 기능 간 교차 변경(Cross-cutting changes)이 빈번하게 일어나는 프론트엔드 환경의 특성상, 엄격한 경계를 설정한 '모노레포 기반의 모듈식 모놀리스'가 비용과 통합 관점(Integration cost)에서 훨씬 효율적인 대안으로 소스에서 권장되고 있습니다 [1, 2, 14, 15].
|
|
|
|
---
|
|
*Last updated: 2026-04-26* |