마이크로 프론트엔드(Micro Frontends) 는 프론트엔드 애플리케이션을 여러 개의 독립적인 모듈로 나누어 개발하고 관리하는 아키텍처이다.
이는 백엔드의 마이크로서비스(Microservices) 개념을 프론트엔드에서도 적용한 것으로, 대규모 애플리케이션을 보다 효율적으로 운영할 수 있도록 도와준다.
왜 필요할까?
기존의 프론트엔드 개발 방식 모놀리식 프론트엔드 (Monolithic Frontends) 는 하나의 거대한 코드베이스로 구성되기 떄문에 프로젝트가 커질수록 여러가지 문제가 발생하기도 한다.
- 코드베이스가 비대해짐(Codebase Bloat) → 유지보수와 기능 추가가 어려워짐
- 팀 간 충돌 증가(Team Conflicts) → 여러 팀이 동일한 코드베이스를 수정하면서 충돌이 빈번하게 발생
- 배포의 어려움(Deployment Challenges) → 작은 변경 사항에도 전체 애플리케이션을 다시 빌드 및 배포해야 함
- 기술 스택 변경의 어려움(Technology Lock-in) → 특정 프레임워크나 라이브러리에 종속되기 쉬움
이러한 문제를 해결하기 위해 마이크로 프론트엔드(Micro Frontends) 아키텍처가 등장 했다.
개념
1. 독립적인 배포(Independent Deployment)
각 프론트엔드 모듈이 개별적으로 개발 및 배포될 수 있어야 한다.
2. 기술 스택의 자유(Freedom of Tech Stack)
각 모듈은 서로 다른 프레임워크(예: React, Vue, Angular)를 사용할 수 있다.
3. 루트 애플리케이션(Root Application)
각각의 마이크로 프론트엔드 모듈을 통합하고, 사용자가 이를 하나의 애플리케이션처럼 경험할 수 있도록 한다.
4. 라우팅 분리(Routing Isolation)
각 모듈이 자체적으로 라우팅을 관리하며, 특정 URL에서 개별적으로 동작할 수 있다.
5. 팀 단위 개발(Team Autonomy)
각 기능을 담당하는 팀이 독립적으로 개발, 유지보수, 배포를 수행할 수 있다.
구현방식
1. 빌드 타임 통합 (Build-Time Integration)
- 여러 개의 프론트엔드 애플리케이션을 하나의 번들로 빌드하여 배포.
- 모듈 간 강한 결합이 필요할 때 적합.
- 예: Webpack Module Federation
2. 런타임 통합 (Run-Time Integration)
- 개별적인 프론트엔드 모듈을 독립적으로 로드 및 실행.
- 더 높은 유연성과 독립성을 제공.
- 예: iframe, Single-SPA, Web Components
장점
- 팀별 독립적인 개발 및 배포 가능(Independent Team Development & Deployment) → 병렬 개발이 가능해 생산성이 향상
- 부분적인 기능 변경 가능(Partial Updates Without Full Deployment) → 전체 애플리케이션을 다시 배포하지 않아도 됨
- 기술 스택 변경 용이(Flexible Technology Stack) → 새로운 프레임워크나 라이브러리를 도입하기 쉬움
- 유지보수성 향상(Maintainability Improvement) → 코드베이스가 작아지고 명확한 책임 분리가 가능
단점
- 아키텍처 관리의 복잡성 증가(Increased Architectural Complexity) → 여러 개의 애플리케이션을 조합해야 함
- 성능 문제 가능성(Potential Performance Issues) → 여러 개의 독립적인 모듈을 로드해야 하기 때문
- 스타일 충돌 가능성(Style Conflicts) → 각 모듈 간 CSS 스타일이 겹칠 가능성이 있음