요즘 프론트엔드 분야 기술 블로그와 유튜브 영상, 교육 콘텐츠, 콘퍼런스 발표에서 꾸준히 등장하는 키워드가 있는데요. 바로 ‘마이크로프론트엔드(Micro Frontend)’입니다. 이는 오늘날 프론트엔드 기술 트렌드이자 웹 개발의 혁신적인 아키텍처 패턴으로 꼽히는데요. 프론트엔드를 개별로 개발, 배포할 수 있는 더 작고 독립적인 단위 또는 모듈로 세분화하는 게 특징이죠. 마이크로프론트엔드는 모놀리식 프론트엔드 한계를 보완할 수단으로 주목받습니다.
저는 프론트엔드 엔지니어로서 마이크로프론트엔드를 깊이 알고자 여러 자료를 찾아보고 개념과 특징, 적용 방법 등을 학습했는데요. 오늘은 제가 학습 과정에서 정리한 마이크로프론트엔드 지식을 나누고자 합니다. 지금부터 마이크로프론트엔드 개념과 특징, 등장 배경, 장단점, 도입 시 고려 사항과 모범 관행을 자세히 살펴보겠습니다.
마이크로프론트엔드 개념과 특징
마이크로프론트엔드를 사용한 엔드투엔드 팀. 출처=micro-frontend.org마이크로프론트엔드는 대규모 웹 애플리케이션의 프론트엔드 개발을 위한 아키텍처 패턴입니다. 이는 웹사이트나 웹 애플리케이션을 ‘독립적인 팀이 소유한 기능의 구성’으로 보는데요. 애플리케이션을 작고 독립적인 모듈로 분할하며, 이 모듈은 개별로 개발, 배포, 유지 관리하는 게 기본 아이디어죠.
다시 말하면, 마이크로프론트엔드는 프론트엔드를 애플리케이션의 특정 기능이나 특징을 각각 담당하는 여러 독립적인 모듈로 나누는데요. 예를 들어, 쇼핑몰 웹사이트에 마이크로프론트엔드를 적용하면 상품 목록, 로그인, 회원가입, 장바구니, 결제 등 기능을 별도 프론트엔드 모듈로 분리할 수 있습니다.
마이크로프론트엔드는 모듈식 접근방식을 취해 유연성, 확장성, 독립적 개발에 도움이 됩니다. 핵심 특징은 다음과 같은데요.
- 파트는 세분화되고, 도메인 경계는 두텁습니다. 이에 각 기능은 각 마이크로프론트엔드 안에서 작동합니다.
- 애플리케이션이 느슨하게 결합했습니다. 따라서 모든 컴포넌트를 독립적으로 구축, 배포, 확장할 수 있으며, 이는 독립적으로 실패할 수 있습니다.
- 팀은 자율적으로 운영됩니다. 이에 기술 스택을 자유롭게 채택할 수 있고, 다른 개발팀과 릴리즈를 조율할 필요가 없습니다.
- 각 팀의 애플리케이션 코드는 분리됐습니다. 같은 프레임워크를 사용할 때도 여러 작업팀 간에 런타임은 공유되지 않습니다. 애플리케이션에 글로벌 변수나 공유 상태가 없습니다.
- 각 마이크로프론트엔드를 하나의 페이지에서 응집력 있는 형태로 결합합니다.