프론트엔드/기타

[Micro Frontend] 대규모 서비스를 효과적으로 관리하는 마이크로 프론트엔드 아키텍쳐

잡캐헨리 2024. 3. 20. 17:18

마이크로 프론트엔드?

 

마이크로 프론트엔드는 전체적인 웹 애플리케이션을 여러 개의 작은 독립적인 프론트엔드 애플리케이션으로 분할하는 아키텍처 패턴이다. 마치 MSA (Micro service architecture) 의 프론트엔드 판이라고 볼 수 있는데, 각 서비스를 분할해 관리함으로써 '독립적인 개발과 배포' , '기술 스택의 다양성' , '유지보수 용이성', '스케일링 용이성', '재사용성과 통합' 에서의 이점을 가진다

런타임 통합 vs 빌드타임 통합

마이크로 프론트엔드 아키텍쳐에서는 개별의 어플리케이션이 통합되는 시점에 따라 '런타임 통합' 과 '빌드타임 통합' 으로 나눠 볼 수 있다. 각각의 장/단점을 비교해보자면

  런타임 통합 빌드타임 통합
구현 난이도 상대적으로 높음 상대적으로 낮음
배포 효율성 상대적으로 효율적 상대적으로 비효율적
컨테이너와 앱의 결합도 상대적으로 낮음 상대적으로 높음

 

런타임 통합의 경우, 브라우저에서 해당 서비스에 접속했을 때 동적으로 서비스를 불러오게 된다. 이를 구현하기 위해서 추가적인 코드 작성이 필요할 수 있어 구현의 난이도가 상대적으로 높은 편이다. 

반면 배포에 있어서 상대적으로 효율적인데.

 

빌드타임에 통합을 할 경우, 각각의 어플리케이션에 변경사항이 있을때 마다 다시 빌드를 하고, 배포를 하는 과정이 반복된다, 추가적으로 컨테이너와 각각의 어플리케이션이 강하게 결합하게 된다

 

대부분의 경우, 마이크로프론트엔드라고 하면 런타임 통합을 의미한다고 할 수 있다.

장점

독립적인 개발과 배포
각 마이크로 프론트엔드는 독립적으로 개발, 테스트, 배포될 수 있다. 이는 대규모 어플리케이션에서 각 팀이 맡은 피쳐를 자유롭게 개발하고 관리할 수 있도록 하고, 이는 애플리케이션의 유연성과 빠른 개발/배포 속도를 제공한다.

 

기술 스택의 다양성

각 마이크로 프론트엔드는 서로 다른 기술 스택과 프레임워크를 사용할 수 있다. 가령 Product 1팀은 Vue 를 사용하고, 2팀은 React, 3팀은 Angular, 4팀은 JQuery 를 사용해도 하나의 앱에서 통합할 수 있다 이를 통해 특정 기술에 종속되지 않고 다양한 기술을 선택할 수 있고, 레거시 코드의 점진적 변화 혹은 신규 프레임워크가 나오더라도 통합이 가능하다

유지 보수 용이성
각 마이크로 프론트엔드는 작고 단일한 책임을 가지므로 유지 보수가 용이하다. 수정 또는 업데이트가 필요한 경우 해당 마이크로 프론트엔드만 변경하면 되므로 전체 애플리케이션을 다시 빌드하거나 배포할 필요가 없다 (런타임 통합)

 

스케일링 용이성
특정 부분의 트래픽이나 부하가 증가할 경우 해당 마이크로 프론트엔드만 스케일링하여 대응할 수 있다. 예를 들어 e커머스에서 이벤트를 진행해서 주문 서비스만 폭주할 경우, 주문 서비스만 선택적으로 업스케일링 할 수 있다. 이는 전체 애플리케이션의 성능을 향상시키고 리소스를 효율적으로 사용할 수 있도록 한다.

재사용성

마이크로 프론트엔드는 재사용 가능한 컴포넌트로 구성될 수 있으며, 필요에 따라 다른 애플리케이션과 통합하여 사용할 수 있다. 예를 들어 회원가입 마이크로 프론트엔드를 하나 만들어놓고, 여러가지 서비스에서 사용할 수 있는 형태로 재사용 할 수 있다