2,3,4,5기 선배님들께서 개발해오던 프로젝트에서 새로운 기능을 추가하는 작업을 맡게 되었는데, 레포지토리에 모든 코드가 존재하는 '모놀리식' 아키텍쳐를 사용하고 있었습니다. 그로 인하여 코드량은 상당히 많았고, 복잡했습니다. 그에다가 js와 mobx를 사용하고 있어서 현재 6기 웹팀과 기술적으로 맞지 않았습니다. 그래서 해결방법을 찾던중에 MFA를 알게 되었고, MFA를 공부할겸 정리하게 되었습니다.
먼저 mfa는 더 큰 프로덕트를 제공하기 위해 응용프로그램에 사용되는 기능들을 작은 프로덕트로 분할한 구조를 말합니다.
일반적으로 페이지가 2~3장 정도 되는 프로덕트는 mfa를 생각할 필요도 없습니다. 하지만 모든 프로덕트가 그렇게 간단하면 좋겠지만, 아닌경우도 있겠죠? 페이지가 20~30 정도되는 프로덕트가 한 레포지토리에서 관리된다면 어떨까요? 굉장히 복잡할 것입니다. 이를 위해서 mfa라는 아키텍쳐가 나온 것입니다.
나눠진 마이크로 프론트엔드를 결국에 나중에는 합쳐야 합니다. 이 합치는 방법으로는 여러가지 방법이 있습니다.
각 서버로 html 템플릿을 요청하고, 최초 응답서버에 각 템플릿을 조합해서 응답을 보냅니다. Nginx를 사용하여 라우팅을 합니다. 각 프로덕트가 /profile, /home, /search 로 라우트 되면서 서로 다른 코드로 짜여져 있는 프로덕트지만 같은 인증정보를 사용할 수 있습니다.
마이크로 프론트엔드를 패키지로 배포하고, 컨테이너 앱이 그것들을 라이브러리 종속성으로 포함하도록 하는 것입니다. 아래와 같은 package.json이 작성될 수 있습니다.
{
"name" : "@product/container",
"version" : "1.0.0",
"description" : "large app",
"dependencies" : {
"@product/profile" : "^2.0.0",
"@product/order-food" : "^3.0.0",
"@product/user-profile" : "^4.0.0",
}
}
이방식은 배포가능한 단일 js 번들을 생성한다. 그리고 다양한 공통 종속성을 제거할 수 있습니다.
각 마이크로 앱들을 번들로 변환시켜 스크립트 태그를 통해 페이지 포함되는 방식입니다. 컨네이너 앱에서 마이크로 앱 번들들을 스크립트 태그로 다운로드 받고, 컨테이너 앱에서 각 앱들을 라우팅 해줍니다.
<html>
<head>
<title>product</title>
</head>
<body>
<script src="https://profile.product.com"></script>
<script src="https://home.product.com"></script>
<script src="https://search.product.com"></script>
<div id="micro-frontend-root"></div>
<script type="text/javascript">
//라우팅
render('micro-fronted-root');
</srcipt>
</body>
</html>
빌드타임 통합과의 달리, 각 번들파들을 독립적으로 배치할 수 있고, iframe 통합과는 달리 원하는대로 마이크로 앱들 간의 통합이 가능하도록 유연성을 제공합니다.
웹/앱은 시간이 지날수록 복잡해지고 커집니다. 용량이 작고 간단한 웹앱은 mfa를 생각할 필요도 없지만 용량이 크다면 사용해야 한다고 생각합니다. 프로덕트의 성격과 특성에 따라 맞는 아키텍쳐를 선택하고 설계하는 것이 가장 중요한 핵심인 것 같습니다...
"옆집"에서 왔습니다 :)