옆집 백엔드는 MSA한다던데, 우리는? MFA

임동현·2022년 6월 21일
24
post-thumbnail

🙋‍♂️내용에 앞서..

2,3,4,5기 선배님들께서 개발해오던 프로젝트에서 새로운 기능을 추가하는 작업을 맡게 되었는데, 레포지토리에 모든 코드가 존재하는 '모놀리식' 아키텍쳐를 사용하고 있었습니다. 그로 인하여 코드량은 상당히 많았고, 복잡했습니다. 그에다가 js와 mobx를 사용하고 있어서 현재 6기 웹팀과 기술적으로 맞지 않았습니다. 그래서 해결방법을 찾던중에 MFA를 알게 되었고, MFA를 공부할겸 정리하게 되었습니다.

🎬MFA(Micro Frontend Architecture)란?

먼저 mfa는 더 큰 프로덕트를 제공하기 위해 응용프로그램에 사용되는 기능들을 작은 프로덕트로 분할한 구조를 말합니다.

🤷‍♂️MFA를 쓰는 이유는?

일반적으로 페이지가 2~3장 정도 되는 프로덕트는 mfa를 생각할 필요도 없습니다. 하지만 모든 프로덕트가 그렇게 간단하면 좋겠지만, 아닌경우도 있겠죠? 페이지가 20~30 정도되는 프로덕트가 한 레포지토리에서 관리된다면 어떨까요? 굉장히 복잡할 것입니다. 이를 위해서 mfa라는 아키텍쳐가 나온 것입니다.

✌️MFA의 장점

  1. 앱이 작다.
    1. 큰 애플리케이션을 작게 나눔으로써 각 앱의 크기가 작고 간단합니다.
  2. 앱끼리의 결합도가 낮다.
    1. 모든 앱이 분리되어 별도로 개발되기 때문에 서로 독립적입니다.
  3. 빠르게 빌드하고 배포할 수 있다.
    1. 앱이 작기 때문에 빌드하는 시간이 많이 소요되지 않고 빠르게 배포할 수 있습니다.

🗂️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 번들을 생성한다. 그리고 다양한 공통 종속성을 제거할 수 있습니다.

  • 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를 생각할 필요도 없지만 용량이 크다면 사용해야 한다고 생각합니다. 프로덕트의 성격과 특성에 따라 맞는 아키텍쳐를 선택하고 설계하는 것이 가장 중요한 핵심인 것 같습니다...

참고

Micro Frontends, 글로 배워보자구요
React로 마이크로 프론트엔드 아키텍처를 구현하는 방법

profile
깊게 알기 위해 노력하는 주니어 프론트엔드 개발자입니다 😎

1개의 댓글

comment-user-thumbnail
2022년 6월 21일

"옆집"에서 왔습니다 :)

답글 달기