Module Federation
Module Federation
웹 어플리케이션 개발에서의 코드 공유 자유도를 높이는 방법
모듈 기반의 효율적으로 일하는 최대한의 방법
배포 가능한 "자유로운 모듈" 단위로 분리
분리된 모듈을 "동적으로 로드"
Webpack의 Module Federation을 사용
Production 코드들을 Webpack을 사용해야하는 암묵적인 룰이 생기게됨
Vite와 같이 결과 파일이 Webpack으로 떨어지는 경우들이 많음
협업의 애매한 포인트
Monorepo의 공유 단위는?
완성된 컴포넌트, 공통의 코드, 비즈니스 로직, API
단독으로 사용될 수 있는 어떠한 "코드"
컴포넌트 단위가 아니라 모듈 단위로 공유하고 싶다.
공통의 렌더링을 담당하는 주체와 콘텐츠를 담당하는 주체를 명확히 분리하고 싶을 때

Host Application, Remote Application 개념으로 접근
Host Application: 모든 것들을 취합해서 렌더링시켜줌
Remote Application: 특정한 영역만 렌더링, 비동기적으로 실행
분리된 레파지토리 단위로 운영이됨
Module Federation은 "자유로운 모듈 단위"로 캡슐화를 해준다.
Repository 단위로 서로간 데이터를 교류할 수 있도록 제공한다.
Host-Remote 구조로 나뉘며, Host Application이 최종 렌더링을 결정하고, Remote Application은 Host에 등록된다.
장점
협업 시의 모듈 단위 공유를 통한 생산성 강화
팀 내 작은 모듈 단위로 개발하여 코드 응집 및 캡슐화를 통한 변경에 강한 코드 작성 가능
모듈 단위가 레이아웃 단위로도 가능
모노레포 내부에서도 사용가능하지만 모노레포와 상관없이 기능 사용 가능
모듈 단위로 축적되는 코드를 통해 새로운 프로젝트 시 확장성을 강화할 수 있음
모듈 단위로 히스토리가 남기 때문에 히스토리 추적의 용이
단점
규모가 작은 어플리케이션의 경우 되려 복잡해지는 구조로 생산성이 하락될 수 있음
개발 및 운영의 학습이 필요한 난이도가 있음
100% 안전성을 보장하기 힘든 아직 연구가 진행중인 부분이 다수 있음
동적 로드 상황에서의 보안의 취약점 존재
동적 로드된 것을 스니핑을 해와서 다르게 조작하여 다시 모듈을 넣는 등의 보안의 위험성 존재
웹 환경 자체가 보안의 취약하기 때문에 흠..
Module Federation Architecture
Infra Architecture

Host, Remote가 어떠한 형태로 S3 버킷에 빌드 파일 저장이 된다.
Module Federation은 React Component Rendering 단계에 Remote Application을 렌더링한다. (동적 로드)
Host Application

https://github.com/module-federation
거의 유일무이한 module-federation organization
해당 코드 기반으로 대다수의 module federation이 이루어짐
Webpack.config.js
name: 불러올 앱의 이름과 연관
remoteEntity: 모듈 데이거 담기게 됨
remotes: 모듈을 불러올 remote 주소 (remoteEntry.js를 등록하면 됨)
shared: react, react-dom은 모듈 페더레이션에서 같은 라이브러리로 공유됨
Remote Application

webpack.config.js
name: 불러올 앱의 이름과 연관
remoteEntry: 모듈 데이터가 담김
exposes: 모듈을 밖으로 내보낸다.
shared: react, react-dom은 모듈 페더레이션에서 같은 라이브러리로 공유 됨
Host Application에 대한 주소는 적지 않는다.
Rendering

Host에서 Remote를 렌더링한다.
Remote 모듈에서 버튼을 가져와 로드한다.
동적으로 가져오기 때문에 React.Suspense로 로드될 때의 fallback을 설정
Retmoe module 호출 타이밍

정리
Module Federation은 런타임에서 다이나믹로드를 통해 모듈을 불러오는 기능
의존도를 낮추고, 레포지토리가 분리되어 있어도 모듈을 주고받는 좋은 방법
여러 팀이 선발되어있는 회사에서 적합하게 공유할 수 있는 방법
Last updated