마이크로 프론트엔드 - 전역 Redux 사용 시, 다른 서버의 React 컴포넌트를 가져오면서 리듀서를 추가하기

main-app에서 redux store를 생성하고, remote app이 로드될 때 동적으로 리듀서를 추가하는 방식으로 진행해보도록 하자. 루트 프로젝트 세팅pnpm initcorepack use pnpm@8.10.0 pnpm-workspace.yaml 생성packages: - "apps/*" 마이크로 앱 세팅apps 디렉토리에서 다음 명령어를 통해 마이크로 앱을 설치해주도록 하자.pnpm create mf-app 각 마이크로 앱의 이름을 main-app, remote-app으로 짓도록 하자. main-app과 remote-app에 redux, react-redux를 설치해주도록 하자.pnpm --filter main-app add @reduxjs/toolkit react-reduxpnpm --fil..

• format_list_bulleted 프론트엔드 개발
• · 2025. 5. 3.
• textsms

마이크로 프론트엔드 - 여러 페이지가 있는 두 개의 앱을 하나로 통합하기

이번에는 라우터가 있는 마이크로 앱을 통합시키는 프로젝트를 진행해보도록 하자. 루트 프로젝트 세팅pnpm initcorepack use pnpm@8.10.0 pnpm-workspace.yaml 생성packages: - "apps/*" 마이크로 앱 세팅apps 디렉토리에서 다음 명령어를 통해 마이크로 앱을 설치해주도록 하자.pnpm create mf-app 각 마이크로 앱의 이름을 app-shell, app-jobs, app-network으로 짓도록 하자. app-shell은 router를 갖고 있는 마이크로 앱을 통합(연결)해주는 역할을 하는 마이크로 앱이다. 그 다음 각각의 마이크로 앱에 react-router-dom을 설치해주도록 하자.pnpm --filter app-shell add react-r..

• format_list_bulleted 프론트엔드 개발
• · 2025. 5. 2.
• textsms

마이크로 프론트엔드 - 다른 서버의 리액트 앱을 가져와서 엘리먼트에 랜더하기 (격리)

이번에는 기존에 다른 마이크로 앱의 컴포넌트를 가져와서 렌더링하는 것과 달리 아예 리액트 앱을 가져와서 렌더링 시키는 방법에 대해서 살펴보려고 한다. 루트 프로젝트 세팅pnpm initcorepack use pnpm@8.10.0 pnpm-workspace.yaml 생성packages: - "apps/*" 마이크로 앱 세팅apps 디렉토리에서 다음 명령어를 통해 마이크로 앱을 설치해주도록 하자.pnpm create mf-app 각 마이크로 앱의 이름을 main-app, isolated-app으로 짓도록 하자. isolated-app 세팅isolated-app에 boostrap.tsx 파일을 생성하여 App 컴포넌트를 DOM에 렌더링해주는 코드를 작성한다.import App from "./App";imp..

• format_list_bulleted 프론트엔드 개발
• · 2025. 5. 2.
• textsms

마이크로 프론트엔드 - Lazy, Suspense, ErrorBoundary를 통한 통합

만약 main-app의 서버만 켜져 있는 채로 요청을 보내게 되면 브라우저에서는 어떻게 표시를 해줄까? 다음 명령어로 main-app만 실행한 채로 localhost:3000번에 접속해보자pnpm --filter=main-app start다음과 같이 화면에 에러가 발생하고 있음을 알 수 있다. 이 결과로 우리는 다른 마이크로 앱에서의 장애가 발생할 때 대응이 필요하다는 것을 알 수 있다. 먼저 main-app에서 ErrorBoundary 관련 라이브러리를 설치해주도록 하자pnpm --filter=main-app add react-error-boundary 그리고 다른 마이크로 앱에서 가져온 컴포넌트를 Suspense와 에러바운더리로 감싼다.import React, { Suspense } from "rea..

• format_list_bulleted 프론트엔드 개발
• · 2025. 4. 29.
• textsms

마이크로 프론트엔드 - React Context 공유하기

모노레포에 패키지를 만들 것이기 때문에 pnpm-workspace.yaml에 packages를 포함할 수 있도록 다음과 같이 수정한다.packages: - "apps/*" - "packages/*" 그리고 packages 디렉토리를 만들고, 다음 명령어를 통해 packages에 react 프로젝트를 추가한다.pnpm create vite shared-library --template react-swc-ts 그 다음 shared-library에 NameContext.tsx 파일을 만들어 Context API를 활용한 컴포넌트를 만들고 index.ts에서 외부에 노출할 수 있도록 한 번 더 export 해준다.// NameContext.tsximport { createContext, PropsWithCh..

• format_list_bulleted 프론트엔드 개발
• · 2025. 4. 28.
• textsms

마이크로 프론트엔드 - shared 옵션이란?

ModuleFederationPlugin의 shared 옵션을 통해 마이크로 앱들이 런타임에 사용하는 여러 라이브러리를 어떻게 공유해서 사용할 것인지 설정할 수 있다. 패키지 설치하기먼저 아래의 명령어를 통해 main-app과 component-app에 lodash와 @types/lodash를 설치해주도록 하자pnpm --filter main-app add lodash@4.17.21 pnpm --filter main-app add @types/lodash -Dpnpm --filter component-app add lodash@4.17.21pnpm --filter component-app add @types/lodash -D 이렇게 되면 main-app과 component-app 모두 같은 버전의 l..

• format_list_bulleted 프론트엔드 개발
• · 2025. 4. 28.
• textsms