[microfrontend][마이크로프론트앤드] Building Micro Frontends With React : React로 마이크로 프론트엔드 구축

Building Micro Frontends With React

 

Kunalznk

·

Follow

·

232

Unlocking the Power of Micro Applications with React: A Step-by-Step Guide

In the last section, I provided a high-level overview of what Micro Frontends are. Now, in this post, we will dive deeper and build an independent Micro Frontend application using React.

Let’s consider our monolithic e-commerce application, which includes the following pages for user interaction:
- Product search
- Product details
- Purchase flow
- Order monitoring
- Delivery tracking

In the previous section, I briefly touched upon the integration of these Micro Frontend applications. Now, we will discuss the integration methods in more detail. There are mainly three methods we can follow for integration: server-side integration, client-side integration, and build-time integration.

Server-side integration involves integrating the frontend and server backend application on the server side and sending it to the client. This approach can impose a significant overhead on the server.

Build-time integration, on the other hand, allows integration to occur during the build process. For example, when building the main application, we include all the Micro Frontend apps. One way to achieve this is by publishing each Micro Frontend application as an npm package and using them in the main application. This way, all the Micro Frontend applications will be built along with the main application.

For our Micro Frontend, we will be using Runtime integration. This means that the required Micro Frontend applications will be downloaded on the client and integrated at runtime. By doing this, we can reduce the initial load time. To achieve runtime integration, we will use Webpack 5 with Module Federation.

Now, let’s build our three Micro Frontend applications using the `create-mf-app` tool. This tool sets up a Create React App with minimal configuration, including Webpack and React.

To create a Micro Frontend application, run the following command:

When prompted, provide the following information:
- Pick the name of your app: “product” // name of the app
- Project Type: Application
- Port number: 9001
- Framework: React
- Language: JavaScript
- CSS: Tailwind

After providing the above details, your ‘product’ project will be ready to go.

In the Product app, we will have two pages: “/products” for searching products and “/product/prodId” for displaying product details. To begin, let’s install the necessary dependencies, axios and react-router-dom, using the following command:

npm i axios react-router-dom

Next, we need to add routing to our application. Here, the basename prop will be considered as the root route, meaning all links will start with "/products". This ensures that our application is rendered at "/products" and not at "/".

To view the complete code for the Product Micro App, you can check it out here

The last step for our Product Micro App is to expose or share some components that can be used by other apps and the main application. To do this, we need to make a modification in the src/webpack.config.js file. Add the following lines to expose the "product" module:

With this change, we have successfully completed the Product Micro App. You can view the code for the other Micro Apps here

Before we proceed to the next post, please make sure to gather the entire code. I apologize for skipping as it would have made the blog post excessively long, and I wouldn’t want you to fall asleep out of frustration! ????????

In the next post, we will integrate all the Micro Applications into one. For now, I encourage you to explore the other Micro Apps, which are similar to React. If you don’t understand them fully, don’t worry, I assure you that it will become clearer in the next post.

Let’s keep the interaction going! Feel free to share your thoughts and questions.

in the next post will integrate all micro application into one i live to you guys to understand other micro app which is similar to react and if you dont understand i assure you will understand in next post

[출처] https://medium.com/@kunalznk/building-micro-frontends-with-react-7f5a21a99825

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

React로 마이크로 프론트엔드 구축

 

쿠날진크

·

따르다

4분 읽기

232

React로 마이크로 애플리케이션의 힘 활용하기: 단계별 가이드

마지막 섹션에서는 마이크로 프론트엔드가 무엇인지에 대한 높은 수준의 개요를 제공했습니다. 이제 이 게시물에서는 React를 사용하여 더 깊이 알아보고 독립적인 Micro Frontend 애플리케이션을 구축해 보겠습니다.

사용자 상호 작용을 위한 다음 페이지를 포함하는 모놀리식 전자 상거래 애플리케이션을 고려해 보겠습니다.
- 제품 검색
- 제품 세부 정보
- 구매 흐름
- 주문 모니터링
- 배송 추적

이전 섹션에서는 이러한 Micro Frontend 애플리케이션의 통합에 대해 간략하게 다루었습니다. 이제 통합 방법에 대해 자세히 설명하겠습니다. 통합을 위해 따를 수 있는 방법은 주로 서버측 통합, 클라이언트측 통합, 빌드타임 통합의 세 가지입니다.

서버 측 통합에는 서버 측에서 프런트엔드와 서버 백엔드 애플리케이션을 통합하여 클라이언트로 보내는 작업이 포함됩니다. 이 접근 방식은 서버에 상당한 오버헤드를 부과할 수 있습니다.

반면, 빌드 타임 통합을 사용하면 빌드 프로세스 중에 통합이 발생할 수 있습니다. 예를 들어 기본 애플리케이션을 구축할 때 모든 Micro Frontend 앱을 포함합니다. 이를 달성하는 한 가지 방법은 각 Micro Frontend 애플리케이션을 npm 패키지로 게시하고 이를 기본 애플리케이션에서 사용하는 것입니다. 이런 방식으로 모든 Micro Frontend 애플리케이션이 기본 애플리케이션과 함께 구축됩니다.

Micro Frontend에서는 런타임 통합을 사용할 것입니다 . 이는 필요한 Micro Frontend 애플리케이션이 클라이언트에 다운로드되어 런타임에 통합된다는 것을 의미합니다. 이렇게 하면 초기 로드 시간을 줄일 수 있습니다. 런타임 통합을 달성하기 위해 모듈 페더레이션과 함께 Webpack 5를 사용합니다 .

이제 'create-mf-app' 도구를 사용하여 세 가지 Micro Frontend 애플리케이션을 빌드해 보겠습니다. 이 도구는 Webpack 및 React를 포함하여 최소한의 구성으로 Create React App을 설정합니다.

Micro Frontend 애플리케이션을 만들려면 다음 명령어를 실행하세요.

메시지가 표시되면 다음 정보를 제공합니다.
- 앱 이름 선택: "product" // 앱 이름
- 프로젝트 유형: 애플리케이션
- 포트 번호: 9001
- 프레임워크: React
- 언어: JavaScript
- CSS: Tailwind

위의 세부 정보를 제공하면 '제품' 프로젝트를 시작할 준비가 됩니다.

제품 앱에는 제품 검색을 위한 "/products" 페이지와 제품 세부 정보 표시를 위한 "/product/prodId"라는 두 페이지가 있습니다. 시작하려면 다음 명령을 사용하여 필요한 종속성인 axios 및 React-router-dom을 설치해 보겠습니다.

npm 과 axios 반응 라우터 돔

다음으로 애플리케이션에 라우팅을 추가해야 합니다. 여기서 basenameprop은 루트 경로로 간주됩니다. 즉, 모든 링크는 "/products"로 시작됩니다. 이렇게 하면 애플리케이션이 "/"가 아닌 "/products"에서 렌더링됩니다.

Product Micro 앱의 전체 코드를 보려면 여기에서 확인하세요.

Product Micro App의 마지막 단계는 다른 앱과 기본 애플리케이션에서 사용할 수 있는 일부 구성 요소를 노출하거나 공유하는 것입니다. 이렇게 하려면 파일을 수정해야 합니다 src/webpack.config.js. "제품" 모듈을 노출하려면 다음 줄을 추가하세요.

이번 변경으로 Product Micro App이 성공적으로 완성되었습니다. 여기에서 다른 Micro Apps의 코드를 볼 수 있습니다.

다음 포스팅을 진행하기 전에 전체 코드를 꼭 모아두시기 바랍니다. 블로그 글이 너무 길어질 것 같아서 건너뛴 점 사과드리며, 답답함 속에 잠들지 않으셨으면 좋겠습니다! ????????

다음 포스팅에서는 모든 Micro Application을 하나로 통합해보겠습니다. 지금은 React와 유사한 다른 Micro Apps를 탐색해 보시기 바랍니다. 완전히 이해하지 못하더라도 걱정하지 마세요. 다음 게시물에서 더 명확해질 것이라고 확신합니다.

계속해서 상호작용을 해보자! 여러분의 생각과 질문을 자유롭게 공유해 주세요.

다음 게시물에서는 모든 마이크로 애플리케이션을 하나로 통합할 것입니다. 반응과 유사한 다른 마이크로 앱을 이해하기 위해 여러분에게 제공하고 이해하지 못하는 경우 다음 게시물에서 이해할 것이라고 확신합니다.