🌳 고급 고급
마이크로프론트엔드가 뭔가요?
쉽게 이해하기
대형 백화점을 상상해보세요. 각 층마다 다른 브랜드가 독립적으로 매장을 운영하지만, 고객 입장에서는 하나의 백화점으로 보이죠. 마이크로프론트엔드도 이처럼 여러 팀이 각자 독립적으로 프론트엔드를 개발하지만, 사용자에게는 하나의 앱으로 보이게 만드는 방식이에요.
핵심 정리
큰 프론트엔드를 작은 독립적인 앱으로 나눠서 개발하고 합치는 아키텍처예요.
자세히 알아보기
마이크로프론트엔드는 마이크로서비스의 개념을 프론트엔드에 적용한 아키텍처입니다. 전통적으로 프론트엔드는 하나의 큰 애플리케이션으로 개발했는데, 팀이 커지고 코드베이스가 복잡해지면서 여러 문제가 생겼어요.
이를 해결하기 위해 프론트엔드를 기능별로 나눠서 독립적인 작은 앱으로 만들고, 런타임에 이를 합쳐서 보여주는 방식이 마이크로프론트엔드예요. 예를 들어 쇼핑몰 사이트에서 상품 목록, 장바구니, 결제 페이지를 각각 다른 팀이 독립적으로 개발하고 배포할 수 있죠.
각 마이크로프론트엔드는 자체 빌드 파이프라인을 가지고, 독립적으로 배포할 수 있어요. 한 팀이 기능을 수정해도 다른 팀의 코드에 영향을 주지 않고, 각자 원하는 프레임워크를 선택할 수도 있습니다.
실무에서는 Module Federation(Webpack 5), Single-SPA, iframe 등의 기술로 구현해요. 대규모 엔터프라이즈 애플리케이션에서 여러 팀이 협업할 때 특히 유용하지만, 설정이 복잡하고 네트워크 오버헤드가 있을 수 있어 규모가 작은 프로젝트에서는 오히려 과한 선택일 수 있어요.