마이크로 프론트엔드(Micro Frontend)

마이크로 프런트엔드란?

마이크로 프런트엔드는 소규모 프런트엔드 서비스를 독립적으로 개발, 배포, 운영할 수 있게 하는 아키텍처 패턴.
전통적인 단일 프론트엔드 애플리케이션 대신 여러 개의 작은 프런트엔드 애플리케이션으로 애플리케이션을 분리합니다.

마이크로 프런트엔드의 주요 목표와 문제 해결 포인트는 다음과 같습니다.

• 독립적인 개발 및 배포: 각 마이크로 프런트엔드는 독립적으로 개발, 테스트, 배포할 수 있어 더 빠르게 애플리케이션을 개선하고 배포할 수 있습니다.
• 기술 스택의 유연성: 마이크로 프론트엔드 아키텍처는 다양한 프런트엔드 기술 스택을 사용할 수 있어 팀이 선호하는 기술을 선택하여 개발할 수 있습니다. (React, Vue, Svelte 등등)
• 재사용성 및 확장성: 기능이나 컴포넌트를 재사용하거나, 새로운 기능을 추가할 때 각 마이크로 프런트엔드를 독립적으로 업데이트할 수 있어 확장성이 좋습니다.
• 팀 간 협업 용이성: 서로 다른 팀이나 조직이 독립적으로 개발할 수 있어 팀 간 협업이 더 유연해집니다.
  

장점

 

- FE 개발의 점진적 업그레이드 / 재작성이 용이해진다.

- 분리배포 용이, 팀 조직운영이 수월해짐

- 응집력 있고 유지보수성을 가지는 코드베이스를 유지할 수 있음

 

 

단점

- 배포 번들 사이즈가 커질 수 있음

- 서로 간의 개발 환경의 차이로 복잡도 증가

- 운영 리소스의 증가로 이어질 수 있음

 

 

---

 

Micro Frontend 통합 방법

 

 

마이크로 프런트엔드는 개발 후 각 애플리케이션을 어떻게 통합할지 고려해야 하는 아키텍처다.

각 화면을 조합하는 컨테이너 애플리케이션이 있고, 그 하부에는 단위 애플리케이션이 있다.

 

 

통합 방식들로는 아래와 같다.

 

서버 템플릿 통합

각 서버로 html을 요청하고, 최종 응답 서버에서 각 템플릿을 조합해서 응답을 보냄

 

빌드타임 통합

단위 애플리케이션을 패키지로 배포하고, package.json에 명시한 후 컨테이너 애플리케이션에서 import 하여 사용함

 

- 각 애플리케이션에 대한 런타임 대응이 안된다.

- 애플리케이션을 릴리즈하고 최종 애플리케이션에서 컴파일해야 한다.

- 대표적으로 webpack의 Module Federation과 같은 방식이 있음

 

iframe 통합

전통적인 방식이면서 가장 간단한 방식

 

- 애플리케이션 통합의 유연성이 높다.

- 애플리케이션 기술 종속성이 없다.

- routing, history, deep-link 같은 것들을 고려해야 함

- 컨테이너 애플리케이션과 iframe에 들어가는 단위 애플리케이션 간의 통신규약 필요

- UX가 iframe안에 갇히기 때문에 어색한 UI가 표현될 수 있음

- 독립적인 렌더링 콘텍스트를 생성해 브라우저 메모리 사용량이 다소 높을 수 있음

 

 

Javascript를 통한 런타임 통합

iframe과 달리 유연한 통합이 가능

 

- 컨테이너 애플리케이션을 단위 애플리케이션 번들을 <script> 태그를 통합 다운로드하음

- 약속된 초기화 메서드를 호출

- 클라이언트(브라우저) 측에서 통합한다.

 

 

WebComponent를 통한 통합

HTML 엘리먼트를 통한 방법으로, static, runtime 둘 다 가능한 방법

 

- javascript 런타임 통합과 비슷하지만 "The web component way"를 지향한다.

- 클라이언트(브라우저) 측에서 통합한다.

 

 

---

도입 전에 고려해봐야 할 것들

어느 정도 복잡성을 가진 시스템에서 유용하므로 관리 자원과 트레이드오프를 생각해 신중하게 도입

 

 

의존성관리

 

- 모노레포 도입으로 효율적인 의존성 관리 (공통 항목 단일화, Package 공유, 단일 이슈트래킹)

- 분산된 CI 보다 속도가 느릴 수 있음

- lerna 같은 툴을 도입해 관리해보기

 

---

 

긴 빌드타임

 

- yarn berry 도입 및 zero install 사용 (빌드 시간을 줄이기 위해 변경사항이 없는 패키지는 빌드하지 않도록)

 

---

 

UI의 일관성을 위해 UI Component Library를 만들어 관리하기

 

- 모든 것을 처음부터 만들기보단, 중복코드가 생기는 시점에 적절히 만들기

- 디자인과 코드의 일관성을 유지하는 팀이 수행

 

---

 

애플리케이션 간의 통신은 Custom events를 사용하기

 

- 커스텀 이벤트를 위해 PubSubJS를 고려해 보자.

- 호출 시 URL 라우팅에 넘기기

 

---

 

백엔드 호출 API 구성

 

- BFF(Backend for Frontend Pattern) 패턴으로 프런트엔드 전용 API를 갖는다.

- 별도의 데이터베이스를 구성할 수도

- 로그인 같은 보안정보들은 통합하는 Container에서 관리하기

 

 

---

Reference

 

https://mobicon.tistory.com/572

[Micro Frontend] 마이크로 프론트앤드 - 개념

 

https://velog.io/@dalbodre_ari/%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%99%80-%EB%AA%A8%EB%85%B8%EB%A0%88%ED%8F%AC-%EC%A0%9C%EB%A1%9C%EB%B9%8C%EB%93%9C

마이크로 프론트엔드와 모노레포 & 제로빌드