AWS Community Day 2022 에서 진행된 [AWS 기반 마이크로 프론트엔드 아키텍처 구축하기] 세션의 발표자료입니다.
발표 영상: https://lnkd.in/g6xqYcyC
이번 세션에서는 마이크로 프론트엔드가 무엇인지, 어떤 문제를 해결하고자 하고 장단점은 어떤 것들이 있는지 얘기하면서 개념을 소개합니다.
그리고 마이크로 프론트엔드의 여러 구현 방식들을 소개합니다. 이번 세션에서는 여러 구현 방식들 중 Javascript 코드가 실행되는 시점에 애플리케이션이 조합되는 Runtime-composition을 다루고, 그 중에서도 브라우저에서 애플리케이션이 조합되는 Client-side composition에 대해 소개합니다. 그리하여 Webpack 5에 도입된 Module Federation 플러그인을 활용하여 Client-side composition을 어떻게 구현할 수 있는지 알려드립니다.
마지막으로 아키텍처 다이어그램과 실제로 동작하는 데모 프로젝트를 살펴보면서 AWS에 마이크로 프론트엔드 아키텍처를 어떻게 구축할 수 있는지 보여드립니다. 나아가 마이크로 프론트엔드가 제품 개발 영역 뿐만 아니라 조직 구조 관점에서 미치는 긍정적인 영향에 대해서도 소개합니다.
발표에서 보여드린 데모 프로젝트의 소스코드는 Github에 공개되어 있습니다.
Github: https://github.com/eunsukimme/micro-frontend-on-aws
7. SEOUL
- Micro Frontends in Action(Michael Geers)
- “The idea behind Micro Frontends is to think about a
website or web app as a composition of features
that are owned by independent teams. Each team
has a distinct area of business or mission it cares
about and specializes in. A team is cross-
functional and develops its features end-to-end,
from database to user interface.”
마이크로 프론트엔드(Micro Frontend)란?
8. SEOUL
마이크로 프론트엔드 등장 배경
- 모놀리식 웹 애플리케이션을 개발하면서 마주하는 문제들
- 증가하는 빌드 및 배포 시간
- 모듈 간 결합도 증가
- 시간이 지날수록 쌓이는 레거시 코드
- 업데이트하기 두려운 의존성 라이브러리
9. SEOUL
- 더 작고 응집도 높은 코드베이스
- 빠른 빌드/배포 시간
- 유지보수가 쉬움
- 애플리케이션을 보다 쉽게 업데이트 할 수 있음
- 독립적인 배포가 가능
- 팀 간 결합도는 낮추고 각 팀이 더 자유롭게 의사결정을 내릴 수 있음
마이크로 프론트엔드의 장점
10. SEOUL
마이크로 프론트엔드의 단점
- 의존성의 중복으로 사용자가 더 많은 번들을 다운받아야 할 수 있음
- 더 많은 개발 및 운영 코스트가 들 수 있음(ex. 더 많은 레포, 툴,
빌드/배포 파이프라인, 서버, 도메인 등)
- 여러 애플리케이션 간 일관된 UX를 제공할 수 있도록 노력해야 함
19. SEOUL
데모 프로젝트 함께보기
- 디렉토리 구조 파악
- packages, cdk, lambda handler
- Webpack Module Federation 플러그인 설명
- 로컬 시연
- 독립적인 개발, 빌드 및 배포
- 프로덕션 시연
20. SEOUL
Micro Frontend is all about Team
Frontend
Backend
Data 팀
Feed
서비스
app-feed
미션
체류 시간
클릭률 증가
팀
Order
서비스
app-order
미션
구매 전환
증가
21. SEOUL
- Source code: https://github.com/eunsukimme/micro-frontend-on-aws
- DEMO URL: https://dl120itgchg9q.cloudfront.net
데모 프로젝트 링크
22. SEOUL
Recap
- 마이크로 프론트엔드는 여러 작은 웹 애플리케이션을 조합하여 하나의
웹 애플리케이션을 만드는 방법론
- 각 애플리케이션은 독립적으로 개발 및 배포가 가능
- Webpack 5 Module Federation을 이용하면 Client-side composition을
손쉽게 구현이 가능
- AWS S3, CloudFront, Lambda@Edge를 사용하여 Client-side
composition 마이크로 프론트엔드 아키텍처를 구축할 수 있음
- 마이크로 프론트엔드 아키텍처는 제품 개발 영역 뿐만 아니라 조직
구조에도 긍정적인 영향을 줌