패스트 캠퍼스 챌린지 27일차 미션 (2월 27일) : 마이크로 FE 강의 후기

이 글은 네이버 블로그에 2025년 2월 27일에 올렸던 것을 그대로 옮겨온 것입니다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

[ 마이크로 프론트엔드(MFA:Micro Frontend Architecture) : 대규모 서비스 설계부터 운영까지 (feat.모노레포&모듈페더레이션)

1. 공부 시작 시각

2. 공부 종료 시각

3. 클립 1번 수강 인증 사진

4. 클립 2번 수강 인증 사진

5. 학습 인증샷 1장

6. 학습 후기 700자

Module Federation 기술을 활용한 마이크로 프론트엔드 구축 후기[최종 정리]

이번 Module Federation 강의에서는 마이크로 프론트엔드(Micro Frontend) 패턴을 실무에 적용하는 데 필수적인 설정과 구현 방법을 배울 수 있었다. 특히, 여러 개의 독립적인 프론트엔드 애플리케이션을 하나의 프로젝트처럼 통합할 수 있는 방법을 심도 있게 다뤄, 실제 프로덕션 환경에서도 충분히 활용할 수 있도록 구성되어 있었다.

1. 다른 서버의 React 컴포넌트에 TypeScript의 타입 설정하기 (27:34)

처음 다룬 내용은 다른 서버의 React 컴포넌트에 TypeScript 타입을 설정하는 방법이었다. Module Federation은 기본적으로 런타임에 모듈을 로드하기 때문에 타입 정보를 미리 알기 어렵다. 이를 해결하기 위해 @types를 활용하거나 TypeScript의 declare 문법을 사용하여 외부 모듈의 타입을 지정하는 방법을 다뤘다. 실무에서 마이크로 프론트엔드를 적용할 때 타입 안정성을 확보하는 것이 중요하기 때문에, 이 부분이 상당히 유용하게 느껴졌다.

2. 다른 서버의 리액트 앱을 가져와서 엘리먼트에 렌더하기 (격리) (24:00)

다음으로 다른 서버의 React 애플리케이션을 가져와 특정 엘리먼트에 렌더링하는 과정을 실습했다. 여기에서는 여러 개의 애플리케이션을 독립적으로 실행하면서도, 특정한 페이지나 컴포넌트를 서로 공유할 수 있도록 설정하는 것이 핵심이었다. 특히 ReactDOM.createRoot를 사용하여 애플리케이션을 격리된 상태에서 마운트하는 과정이 인상적이었다. 이 기법은 마이크로 프론트엔드를 적용할 때 개별 애플리케이션 간의 충돌을 방지하는 중요한 요소 중 하나다.

3. 여러 페이지가 있는 두 개의 앱을 하나로 통합하기 (feat. react-router-dom) (1:12:27)

이 강의에서 가장 인상 깊었던 부분 중 하나는 여러 페이지가 있는 두 개의 애플리케이션을 통합하는 과정이었다. Module Federation을 활용하여 서로 다른 애플리케이션에서 페이지를 공유하고, react-router-dom을 활용하여 라우팅을 연결하는 방식을 배울 수 있었다. 특히, BrowserRouter와 MemoryRouter를 적절히 활용하여 독립적인 애플리케이션을 통합하는 방식이 인상적이었다.

라우팅을 공유하면서 발생할 수 있는 문제들을 해결하는 방법도 다뤘는데, 예를 들어 히스토리 모드가 충돌하지 않도록 basename을 설정하거나, 각 애플리케이션이 독립적인 상태를 유지할 수 있도록 관리하는 방법이 유용했다. 이를 통해 대규모 프로젝트에서 여러 개의 애플리케이션을 유기적으로 결합할 때 발생할 수 있는 이슈를 미리 고려할 수 있었다.

4. 전역에서 Redux를 사용할 때, 다른 서버의 React 컴포넌트를 가져오면서 리듀서를 추가하기

마지막으로, Redux를 전역 상태 관리 도구로 사용하면서, 외부 서버의 React 컴포넌트를 가져오는 방법을 실습했다. Redux를 사용하는 마이크로 프론트엔드 구조에서는 각 애플리케이션이 자체적인 상태를 관리할 수도 있고, 글로벌 상태를 공유할 수도 있어야 한다.

강의에서는 redux-injector 패턴을 활용하여 동적으로 리듀서를 추가하는 방법을 소개했다. 즉, 외부에서 로드된 React 컴포넌트가 특정 기능을 제공할 때, 필요한 리듀서를 전역 Redux 스토어에 동적으로 주입하는 방식이었다. 이는 실제로 여러 개의 독립적인 애플리케이션이 하나의 프로젝트처럼 동작할 수 있도록 도와주는 중요한 기법이었다.

마무리 및 느낀 점

이번 강의를 통해 Module Federation을 활용한 마이크로 프론트엔드 구조를 깊이 있게 이해할 수 있었다. 기존에는 하나의 거대한 프론트엔드 애플리케이션을 유지보수하는 것이 당연했지만, Module Federation을 활용하면 각 기능을 독립적인 애플리케이션으로 개발하고, 필요할 때 동적으로 로드하는 방식을 실현할 수 있었다.

특히,

• 타입 안정성을 유지하면서 모듈을 공유하는 방법
• 격리된 상태에서 애플리케이션을 렌더링하는 방법
• 서로 다른 애플리케이션을 라우팅으로 통합하는 방법
• 전역 상태 관리(Redux)와 동적 리듀서 주입 방법

이 네 가지 핵심 개념이 실무에서 유용하게 적용될 것 같았다. 대규모 프로젝트를 운영하거나, 여러 팀이 독립적으로 프론트엔드를 개발해야 하는 환경에서 Module Federation이 강력한 솔루션이 될 수 있음을 다시 한번 체감한 유익한 강의였다.

필수 URL https://bit.ly/4gL1f1o

#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완