들어가며MF(Module Federation)은 Webpack 5의 핵심 기능으로, 여러 독립적인 애플리케이션 간에 코드와 리소스를 실시간으로 공유할 수 있게 해주는 기술입니다. 이 기술은 마이크로프론트엔드 아키텍처를 구현하는 데 매우 효과적인 도구이며, 대규모 프론트엔드 애플리케이션을 더 작고 관리하기 쉬운 단위로 분할할 수 있게 해줍니다.이에 대한 자세한 설명은 Micro Frontends와 MSA를 위한 Module Federation 글을 참고하시면 이해에 도움이 되실 것 같습니다.문제 상황마이크로프론트엔드 환경에서 MF를 사용하면서 다음과 같은 실제 문제들을 경험했습니다:로컬 개발 시 연결된 모든 서비스를 실행해야 하는 번거로움원격 서버 장애 발생 시 연관된 서비스까지 중단되는 문제컴포넌트 로딩..

현재 저희 회사에서는 마이크로 프론트엔드 아키텍처를 도입해 웹 애플리케이션을 개발하고 있습니다. 이 도입은 아직 1년이 채 되지 않은 과도기적인 상황이라 개발적인 이슈들이 존재하는데, 그중 하나를 "이렇게 개선할 수 있지 않을까?"에 대한 고민을 적어보겠습니다. - remote app: 컴포넌트를 제공하는 앱- host app: 컴포넌트를 사용하는 앱그 중에서도 주요 이슈 중 하나는 host app에서 remote app으로 세션 상태나 API 헤더 초기화 등을 어떻게 처리할 것인가였습니다. 현재는 prop을 통해 세션 키와 유저 정보 같은 global state를 컴포넌트로 전달 후, remote app에서 자체적인 부트스트랩(예: API 헤더 초기화, 상태 재가공 등)을 처리하는 방식을 사용하고 있습..

Micro Frontends의 개념Micro Frontends는 대규모 프론트엔드 프로젝트를 더 작고, 관리 가능한 부분으로 나누는 접근 방식입니다. 이 개념은 백엔드의 마이크로서비스 아키텍처(MSA)에서 영감을 받았으며, micro-frontends.org에서 자세히 설명되어 있습니다. 이 방식의 핵심은 큰 애플리케이션을 분할하여, 각 팀이 독립적으로 작업할 수 있는 구조를 만드는 것입니다. 이렇게 하면 각 팀은 자신의 기술 스택을 선택하고, 애플리케이션의 특정 부분에 집중할 수 있습니다. 결과적으로, 마이크로 프론트엔드는 개발 효율성을 높이고, 코드베이스의 복잡성을 줄이며, 더 빠른 기능 출시를 가능하게 합니다.Module Federation 개념 설명Module Federation은 웹팩(Webpa..