MFA 와 Module Federation
MFA (mIcro frontend architecture) 등장과 Webpack 의 Module Federation 에 대해 알아보자
MFA ( Micro Frontend Architecture ) 란 무엇인가?
마이크로 프론트엔드라는 말 자체는 2016년에 ThoughtWorks Technology Radar 에서 처음 나온 용어이다. 최근 프런트엔드 개발 환경은 점점 더 복잡해지고 있으며, 대규모 애플리케이션을 효율적으로 관리하는 것이 중요한 과제가 되었다. 이에 대한 해결책 중 하나로 등장한 개념이 마이크로프론트엔드(Micro Frontend Architecture, MFA) 이다. 마이크로서비스 아키텍처에서 영감을 받아 프런트엔드 개발에도 유사한 접근 방식을 적용하는 개념이다.
MFA 의 정의
마이크로 프론트엔드는 하나의 대규모 프런트엔드 애플리케이션을 여러 개의 독립적인 작은 애플리케이션으로 분할하는 아키텍처 패턴이다. 각 마이크로프론트엔드는 개별적으로 개발, 배포 및 운영될 수 있으며, 필요에 따라 서로 통합하여 전체적인 사용자 경험을 제공합니다.
MFA 의 특징
1. 독립적인 개발 및 배포
각 팀이 특정 도메인의 기능을 담당하며, 독립적으로 개발 및 배포 가능
특정 기능 업데이트 시 전체 애플리케이션을 다시 배포할 필요 없음
2. 기술 스택의 유연성
각 마이크로프론트엔드는 서로 다른 기술 스택을 사용할 수 있음
예를 들어, 하나의 팀은 React를 사용하고, 다른 팀은 Vue.js를 사용할 수도 있음
3. 팀 간 경계를 명확히 함
대규모 조직에서는 여러 팀이 동시에 협업해야 하는데, MFE는 팀 간의 책임과 역할을 분명히 할 수 있도록 도와줌
4. 점진적 업그레이드 가능
기존의 모놀리식 프런트엔드에서 MFE로 점진적으로 전환할 수 있음
기존 시스템을 유지하면서 새로운 기능을 추가하는 방식으로 적용 가능
MFA 구현 방식
MFA 를 구현하는 대표적인 방법은 다음과 같다.
Iframe 기반
Web Components 활용
JavaScript 기반 런타임 통합
프레임워크 기반 MFA
MFA 의 장점과 단점
✅ 장점
독립적인 배포: 개별 기능을 빠르게 업데이트 가능
유지보수성 향상: 특정 기능이 분리되어 있어 유지보수가 용이함
스케일링 용이: 여러 팀이 동시에 작업할 수 있어 개발 속도가 향상됨
기술 스택 유연성: 각 팀이 원하는 기술을 사용할 수 있음
❌ 단점
초기 설정의 복잡성: MFA 를 적용하기 위한 설정이 복잡할 수 있음
런타임 성능 저하 가능성: 여러 개의 애플리케이션을 로드하기 때문에 성능 최적화가 필요함
통합 문제: 여러 개의 독립적인 애플리케이션을 원활하게 통합하는 것이 쉽지 않음
마무리
마이크로프론트엔드는 대규모 프런트엔드 애플리케이션을 더욱 유연하고 확장 가능하게 만들 수 있는 강력한 아키텍처 패턴이다. 그러나 모든 프로젝트에 적합한 것은 아니며, 초기 설정과 운영의 복잡성을 고려해야 한다. 적절한 아키텍처 선택과 성능 최적화 전략이 동반된다면, 마이크로프론트엔드는 현대적인 웹 애플리케이션 개발에서 중요한 역할을 할 이다.
Last updated
