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에 대한 주소는 적지 않는다.

• 

Remote Application은 완전한 모듈로서 exposes 를 통해 밖으로 내보낸다.

Host Application은 expose된 application만 등록하고서 렌더링해주면 Remote Application에서 동적으로 수정해도 반영되게끔

Rendering

• Host에서 Remote를 렌더링한다.

  • Remote 모듈에서 버튼을 가져와 로드한다.

• 동적으로 가져오기 때문에 React.Suspense로 로드될 때의 fallback을 설정

Retmoe module 호출 타이밍

정리

• Module Federation은 런타임에서 다이나믹로드를 통해 모듈을 불러오는 기능

• 의존도를 낮추고, 레포지토리가 분리되어 있어도 모듈을 주고받는 좋은 방법

• 여러 팀이 선발되어있는 회사에서 적합하게 공유할 수 있는 방법