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

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

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

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

1. 공부 시작 시각

2. 공부 종료 시각

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

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

5. 학습 인증샷 1장

6. 학습 후기 700자

Module Federation 심화 과정 학습 후기

이번 학습에서는 Module Federation을 활용하여 다른 서버에서 React 컴포넌트를 동적으로 가져오는 기술을 심화적으로 다루었다. 이를 통해 마이크로 프론트엔드(Micro Frontend) 패턴의 핵심 개념을 직접 체험할 수 있었다.

1. 다른 서버의 React 컴포넌트를 동적으로 가져와 사용하기

처음에는 단순히 동일한 서버에서 제공하는 컴포넌트를 불러와 조합하는 방식이었다면, 이번에는 서버가 서로 다른 환경에서도 컴포넌트를 가져와 사용할 수 있도록 하는 과정을 다루었다. 특히, Module Federation을 통해 원격(Remote) 컴포넌트를 가져올 때 React의 Suspense와 lazy 기능을 적극 활용하여 동적으로 로드하는 방법이 인상적이었다. 이를 통해 초기 번들 크기를 최소화하면서도 필요한 컴포넌트만 로드할 수 있는 최적화된 방식으로 애플리케이션을 구성할 수 있다는 점을 실감했다.

2. 다른 서버의 React 컴포넌트를 동적으로 지정하기

더 나아가, 특정한 서버를 동적으로 변경하여 컴포넌트를 로드하는 방법을 배웠다. 기존에는 Webpack의 remotes 설정을 통해 정적인 서버 주소를 지정해야 했지만, 이를 동적으로 변경하면 보다 유연한 마이크로 프론트엔드 구성이 가능해진다. 이 방식은 여러 개의 독립적인 팀이 각자 자신의 애플리케이션을 관리하면서도 동일한 컨테이너(Container)에서 다양한 서비스의 조합을 동적으로 로드할 수 있도록 한다는 점에서 실무적인 활용도가 높다고 느꼈다.

학습 후 느낀 점

**이전까지 프론트엔드 개발에서 다른 서비스의 UI를 재사용하려면 **라이브러리 배포 방식(NPM 패키지, CDN 등)을 활용해야 했다. 하지만 Module Federation을 사용하면 각 서비스가 독립적으로 배포되면서도 동적으로 최신 컴포넌트를 불러올 수 있는 구조를 만들 수 있어, 마이크로 프론트엔드 방식의 확장성을 실감할 수 있었다.

또한, 이 방식을 적용하면 각각의 팀이 독립적으로 배포와 업데이트를 진행하면서도 전체 애플리케이션을 하나의 시스템처럼 유지할 수 있다. 하지만, 원격 컴포넌트가 의존하는 라이브러리(예: React 버전)가 서로 다를 경우 충돌 문제가 발생할 수 있기 때문에 버전 관리 및 공통 의존성의 최적화 전략이 필요하다는 점도 고려해야 한다.

이번 학습을 통해 대규모 프로젝트에서 마이크로 프론트엔드를 도입할 때 어떤 방식으로 접근해야 하는지 감을 잡을 수 있었고, 실무에서도 적용할 수 있는 중요한 기술임을 체감했다. 앞으로 더 심화적인 내용을 학습하며 유연하고 확장 가능한 아키텍처를 설계하는 능력을 키우는 것이 중요하겠다고 느꼈다.

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

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