Vite and Module Federation Makes Micro-Frontends EASY! 모듈 연합(Module Federation)은 React에서 코드와 컴포넌트를 런타임에 공유하여 여러 개의 애플리케이션을 관리하는 다중 팀을 가진 회사에 아키텍처적 이점을 제공합니다. - 🚀 새 플러그인을 통해 두 배포 애플리케이션 간에 코드 공유를 가능하게 하여 다중 팀이 다중 애플리케이션을 관리하는 회사에 아키텍처적 이점을 제공합니다. - Vite와 Rollup 애플리케이션을 위한 새 플러그인이 두 배포 애플리케이션 간에 코드 공유를 가능하게 하여 동적 업데이트를 재배포하지 않고 가능하게 하며, 다중 팀이 다중 애플리케이션을 관리하는 회사에 아키텍처적 이점을 제공합니다. - 두 개의 Vite 애플리케이션 간에 모듈 연합(Module Federation)과 공유 스토어를 사용하는 방법을 배우고, Webpack과 호환성을 보장하며 빌드 시간 공유 시스템과 모노레포에서 런타임 공유 시스템의 장단점을 살펴보세요. - 이 강의에서는 다양한 프레임워크에서 마이크로 프론트 엔드 시스템을 사용하는 이점, 설치, 구성 및 예제에 대해 다룹니다. - 👥 모듈 연합(Module Federation)을 사용하여 React 애플리케이션 간에 컴포넌트를 공유할 수 있습니다. 이 기능을 보여주기 위해 원격 애플리케이션 코드에 대한 고정 URL을 만들어 원격 및 호스트 애플리케이션을 만듭니다. - 모듈 연합(Module Federation)을 사용하면 React 애플리케이션 간에 컴포넌트를 공유할 수 있으며, 이 튜토리얼에서는 이 기능을 보여주기 위해 원격 및 호스트 애플리케이션을 만듭니다. - React에서 모듈 연합을 사용하려면 원격 애플리케이션 코드에 대한 고정 URL이 필요하며, 이는 엄격한 포트를 사용하여 구현할 수 있습니다. - 👨‍💻 모듈 연합(Module Federation)을 위한 사용자 정의 버튼 컴포넌트를 만들고 구성합니다. - 호스트 애플리케이션과 공유할 컴포넌트를 만들고, 커넥션을 만드는 방법을 보여주기 위해 사용자 정의 버튼을 사용합니다. - 모듈 연합을 사용할 때는 훅과 로컬 상태가 있어야 React가 올바르게 구성되며 다중 React 인스턴스 오류를 피할 수 있습니다. - 호스트 애플리케이션을 만들고 플러그인을 추가하여 원격 버튼 컴포넌트를 참조합니다. - 모든 공유 컴포넌트를 포함하는 원격 애플리케이션 매니페스트는 특정 URL에 있어야 하며, 연합 플러그인으로 구성해야 합니다. - 📦 Vite에서 애플리케이션 간 의존성 및 컴포넌트를 공유하려면 파일 경로를 지정하고 애플리케이션을 빌드 및 서비스한 다음 정적 스토어에 에셋을 배포하고 모듈 연합을 구성합니다. - Vite에서 버튼과 해당 의존성을 노출하려면 파일 경로를 지정하고 필요한 라이브러리를 공유하고 빌드 구성을 조정한 다음 애플리케이션을 빌드 및 서비스하고 assets/remote에서 원격 엔트리를 확인합니다. - 원격 엔트리 매니페스트는 사용하는 애플리케이션에서 공유 라이브러리 및 컴포넌트에 액세스하기 위해 필요하며, 다른 JavaScript 파일과 마찬가지로 assets 디렉토리에 빌드하고 서비스해야 합니다. - 에셋(모듈 포함)을 S3와 같은 정적 에셋 스토어에 배포하여 서버 측 애플리케이션이 다운되지 않도록 합니다. - 호스트에서 원격 엔트리를 사용하도록 구성하고, components를 가져오기 위한 remoteApp 키를 정의하고, 여러 개의 복사본을 다운로드하지 않도록 라이브러리를 공유하고, 연합 모듈이 호스트와 원격 간에 중재할 수 있도록 허용합니다. - 포트 4173에서 코드를 빌드하고 미리보기 합니다. - 📦 모듈 연합(Module Federation)은 애플리케이션 간 코드 공유를 가능하게 하지만, 상태 공유는 Jotai와 같은 별도의 접근 방식이 필요합니다. - 모듈 연합(Module Federation)은 애플리케이션 간 코드를 공유하지만 상태를 공유하지 않으므로 상태를 공유하려면 Firebase와 같은 상태 공유 접근 방식을 사용해야 합니다. - 스피커는 버튼의 CSS를 변경하고 Button dot CSS라는 새 파일을 만들어 공유 버튼 클래스를 얻기 위해 원격을 다시 배포했습니다. - 모듈 연합은 주로 마이크로 프론트 엔드에 사용되며, 호스트 애플리케이션과 마이크로 프론트 엔드 간에 상태를 공유하려면 Jotai와 같은 원자적 상태 관리자를 사용하는 것이 좋습니다. - 스피커는 useCount라는 사용자 정의 훅을 만들고 count라는 원자(atom)를 정의하여 튜플로 값을 제공하고 설정할 수 있는 use atom을 반환하여 상태를 여러 곳에서 업데이트할 수 있습니다. - 원격 및 호스트 애플리케이션 간에 스토어를 공유하려면 "button"을 "store"로 변경하고 Jotai가 스토어를 구현하는 데 필수적임을 지정합니다. - 🔬 마이크로 프론트 엔드에서 상태 관리를 위해 Jotai는 원자(atom)를 사용하도록 권장하며, Rollup, Vite 및 Webpack 5 간의 모듈 연합 호환성 테스트가 진행 중입니다. - Jotai 공유 원자(atom)는 원자적 상태 관리를 통해 공유 데이터를 쉽게 확장할 수 있어 결합도를 높이지 않고 호스트 애플리케이션과 마이크로 프론트 엔드 간에 상태를 공유하는 데 적합합니다. - Rollup, Vite 및 Webpack 5 간의 모듈 연합 호환성을 테스트하고 동일한 버튼을 가져오는 새로운 Webpack 5 애플리케이션을 만듭니다. - React 및 Webpack CLI 버전을 업그레이드하고 create root 및 react dom client로 전환하며, Vite 측에서 dark mode CSS를 추가합니다. - 👨‍💻 모듈 연합(Module Federation)을 사용하여 스피커는 Vite, Rollup 및 Webpack 간에 컴포넌트를 공유하고, 두 개의 애플리케이션이 컴포넌트를 공유하고 공유 스토어 프로젝트를 가진 모노레포 버전을 보여줍니다. - 모델 생성 플러그인에 대한 원격 구성을 localhost 5001로 사용하도록 구성합니다. - 스피커는 Vite와 Webpack의 Ecmascript 모듈 문제를 겪었지만, 응용 프로그램을 빌드하는 다른 방법을 지정하고 모듈 유형의 새로운 인덱스를 만들어 이를 해결합니다. - 스피커는 모듈 연합(Module Federation)을 사용하여 Vite, Rollup 및 Webpack 간에 컴포넌트를 공유하고, 두 개의 애플리케이션이 컴포넌트를 공유하고 공유 스토어 프로젝트를 가진 모노레포 버전을 보여줍니다. - 🚀 모노레포에서 빌드시간 공유는 TypeScript 통합, 단위 테스트 및 일관된 배포를 제공하지만, 모듈 공유에는 TypeScript 공유 문제 및 런타임 위험이라는 단점이 있습니다. - 이 프로젝트는 TypeScript 통합, 단위 테스트 및 일관된 배포를 포함한 모노레포에서 빌드시간 공유의 이점을 보여줍니다. - 모듈 공유는 원활한 업데이트를 허용하지만, TypeScript 공유 문제 및 런타임 위험이라는 중요한 단점이 있습니다