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

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

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

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

1. 공부 시작 시각

2. 공부 종료 시각

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

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

5. 학습 인증샷 1장

6. 학습 후기 700자

마이크로 프론트엔드에서 Web Components를 이용한 프래그먼트 통합 방식은 처음엔 복잡하게 느껴졌다. 기존의 SPA(Single Page Application) 방식에 익숙하다 보니, 여러 개의 독립적인 프런트엔드 애플리케이션을 하나의 페이지에서 조합하는 개념이 어색하게 다가왔다. 하지만 학습을 진행하면서 Web Components의 강력한 캡슐화와 재사용성 덕분에, 마이크로 프론트엔드 아키텍처에서 매우 적합한 솔루션이라는 점이 와닿았다.

특히, Shadow DOM을 활용한 스타일 격리와 Custom Elements를 통한 독립적인 컴포넌트 생성 방식이 인상적이었다. 일반적인 CSS 스타일 충돌 문제를 해결할 수 있다는 점에서, 대규모 프로젝트에서 유지보수성을 높이는 중요한 기술이라는 생각이 들었다. 다만, 서버 사이드 렌더링(SSR)과의 호환성 문제가 걸림돌로 작용할 수 있다는 점은 실무에서 고려해야 할 부분이었다.

이전까지는 마이크로 프론트엔드를 구현할 때 iframes나 Module Federation과 같은 방식만 떠올렸는데, Web Components를 이용한 접근법이 생각보다 훨씬 직관적이고 유연하다는 점이 마음에 들었다. 특히, 서로 다른 프레임워크(React, Vue, Angular 등)를 사용하는 팀 간의 협업에서 Web Components가 중립적인 역할을 할 수 있다는 점은 개발 프로세스를 혁신적으로 바꿀 수 있을 거라는 기대감을 줬다.

물론, 단점도 있었다. Web Components는 아직까지 대중적으로 널리 사용되는 기술은 아니고, 복잡한 상태 관리나 글로벌 데이터 공유 측면에서는 다소 불편한 점이 있었다. 특히, React의 상태 관리 패턴과 Web Components가 자연스럽게 통합되기 어려운 점은 실무 적용을 고민하게 만들었다. 하지만 이는 새로운 기술이니만큼, 적절한 패턴을 찾고 최적화하는 과정이 필요하다는 점에서 도전 욕구를 자극했다.

이번 학습을 통해 Web Components가 단순한 브라우저 API 이상의 가치를 가진다는 것을 실감했다. 단일 애플리케이션을 넘어, 여러 개의 독립적인 애플리케이션을 하나의 유기적인 시스템으로 조합할 수 있다는 점에서 마이크로 프론트엔드의 철학과도 잘 맞아떨어졌다. 앞으로 실무에서 마이크로 프론트엔드를 도입할 기회가 생긴다면, Web Components를 적극적으로 고려해보고 싶다는 생각이 들었다.

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

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