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

1. SEOUL
SEOUL

2. SEOUL
AWS 기반 마이크로 프론트엔드
아키텍처 구축하기
김은수 | Grepp

3. SEOUL
김은수(Eunsu Kim)
- 현) Grepp(프로그래머스) Frontend Developer
- 전) Mathpresso(콴다) Frontend Developer

4. SEOUL
마이크로 프론트엔드란?

5. SEOUL
마이크로 프론트엔드(Micro Frontend)란?
“별도로 개발 및 배포 가능한 여러 작은 웹 애플리케이션을 조합하여
하나의 웹 애플리케이션을 만드는 개발 방법론”

6. SEOUL
예시) E-commerce 웹 사이트

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를 제공할 수 있도록 노력해야 함

11. SEOUL
마이크로 프론트엔드 아키텍처 구현

12. SEOUL
- Build-time composition
- shared library(ex. npm package)
- Run-time composition
- Client-side composition
- iframe
- Javascript(ex. single-spa)
- Webpack 5 Module Federation
- Edge-side / Server-side composition
- Lambda@Edge(AWS re:Invent 2019: Building serverless micro frontends at the
edge)
마이크로 프론트엔드 아키텍처 구현 방법

13. SEOUL
- 모든 애플리케이션은 컨테이너
- Host / Remote 컨테이너로 구분
- Host 컨테이너
- Remote 컨테이너의 자바스크립트 모듈을 불러와 사용하는 컨테이너
- Remote 컨테이너
- 자바스크립트 모듈을 다른 컨테이너에서 사용할 수 있도록 노출(expose)하는
컨테이너
Webpack 5 Module Federation
App Header
expose
Host Remote

14. SEOUL
데모 프로젝트 살펴보기

15. SEOUL
데모 프로젝트 다이어그램

16. SEOUL
데모 프로젝트 다이어그램

17. SEOUL
데모 프로젝트 아키텍처 다이어그램

18. SEOUL
AWS CDK

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 마이크로 프론트엔드 아키텍처를 구축할 수 있음
- 마이크로 프론트엔드 아키텍처는 제품 개발 영역 뿐만 아니라 조직
구조에도 긍정적인 영향을 줌

23. SEOUL
- https://martinfowler.com/articles/micro-frontends.html
- https://javascript.plainenglish.io/whats-the-difference-between-a-component-
and-a-micro-frontend-43aefd0af062
- https://github.com/santoshshinde2012/micro-frontends-mindmaps
- https://youtu.be/0Eq6evGKJ68
- https://levelup.gitconnected.com/a-complete-aws-architecture-for-module-
federated-micro-frontends-a0306ba466e3
- https://micro-frontends.org/
- https://www.trendmicro.com/ru_ru/devops/21/h/micro-frontend-guide-technical-
integrations.html
- https://microfrontends.info/microfrontends/
References

24. SEOUL
Thank you
@eunsukimme
@eunsukimme
@eunsukimme

25. SEOUL