Module Federation을 통한 Micro Frontends
Micro Frontends는 마이크로서비스의 원칙을 브라우저에 적용합니다. 각 팀이 독립적으로 배포된 UI 슬라이스를 소유하며, Webpack의 Module Federation이 런타임에 이를 함께 연결합니다. 이 트랙은 모놀리식 프론트엔드를 자율적인 단위로 분할하는 것부터 페더레이션 애플리케이션을 프로덕션에 배포, 보안 및 최적화하는 것까지 전체 아키텍처를 다룹니다. 이 기술은 여러 팀이 조정 병목 없이 동일한 페이지에 배포해야 하는 조직에서 프로덕션에 증명되었습니다.
학습 내용
Micro Frontend 아키텍처 뒤의 구조적 원칙을 이해하고, Webpack Module Federation을 처음부터 구성하며, 중복 없이 리모트 전체에서 라이브러리를 공유하는 방법을 배웁니다. 이 트랙은 페더레이션 경계를 넘는 라우팅과 네비게이션, 에러 격리 및 복원력 전략, Micro Frontend 간 통신 패턴을 다룹니다. 또한 페더레이션 앱에 특화된 테스트 전략, 독립적인 배포를 위한 CI/CD 파이프라인, 성능 최적화, 런타임에 원격 코드를 로드할 때의 보안 고려 사항을 다룹니다.
학습 경로
12개 과정이 A1부터 C1까지 걸쳐 있습니다. 이 트랙은 Micro Frontends 아키텍처 소개로 시작하여 B1에서 Webpack 및 Module Federation 기초와 첫 번째 페더레이션 애플리케이션 구축으로 진행됩니다. B2 블록은 고급 모듈 공유, 라우팅, 에러 핸들링, 테스트 및 배포를 통해 작업을 심화합니다. 최종 4개의 C1 과정 — Micro Frontend 간 통신 패턴, Micro Frontends 성능 최적화, Micro Frontends 아키텍처의 보안, 고급 시나리오 및 모범 사례 — 는 가장 어려운 프로덕션 문제를 다룹니다.
작동 방식
각 과정은 실시간 피드백과 함께 내장 코드 에디터에서 완료하는 짧고 실습적인 강의로 나뉩니다. 설정 에러와 아키텍처 질문을 플랫폼을 떠나지 않고 해결할 수 있도록 막힐 때마다 AI 튜터를 이용할 수 있습니다.