기존 모놀리식 프론트엔드는 전체 소스코드를 하나의 저장소에서 개발하고 빌드와 배포까지 하나의 팀이 수행하는 방식이었다. 백엔드의 MSA 방식을 프론트엔드에 접목하여, 서로 독립된 형태의 프론트엔드 애플리케이션을 통합해 하나의 큰 프론트엔드를 구현하는 것이 마이크로 프론트엔드이다.
가장 큰 특징이 독립과 통합이다
- 독립은 나누어진 모듈이 다른 모듈에 영향을 주지않고 독립적으로 기능이나 화면을 제공하는 것이다. 간단하게 개별 모듈이 개발-빌드-배포 생명주기를 가지면 독립적인 상태로 볼 수 있다. 진정한 독립은 코드뿐 아니라 모듈을 개발 및 유지보수하는 팀도 독립된 상태가 되어야한다.
- 통합은 개발 과정에서 나눠진 모듈을 다시 조합해 더 큰 단위의 애플리케이션을 구성하는 것을 의미한다.
- 한팀에서 관리하는 코드양 및 복잡도 개선 → 개발 및 유지보수 용이 → 품질 향상
- 모듈로 분리된 환경에서 각 모듈 개발에 필요한 인원만 참여 → 담당자 규모가 축소되어 의사소통 비용 감소
- 하나의 팀이 담당하는 배포의 규모와 범위 축소 → 모듈 배포에 대한 전체 시스템 영향도 감소
- 각 모듈이 병렬적으로 업무를 수행하여 조직 전체 개발속도 향상
- 런타임 장애에 장애 발생 모듈만 격리하여 확산 차단
- 모듈간 중복코드가 많아져 전체 리소스 크기 증대 → 성능 저하 → 중복 관리 관건
- 초기 개발 환경 구성 까다로움 → 분리와 통합을 위해 더 많은 설정과 도구 필요
- 모듈 통합, 모듈간 통신을 위한 코드 추가로 인해 통합 과정에서의 복잡성이 높아질수있음
- 빌드타임에 문제 없다가 런타임환경에서 모듈이 조합되며 에러 발생 가능성 있음
- UI/UX 파편화 주의 필요함
- 소스코드 규모가 비대해진 상황에서 특정부분 수정의 사이드 이펙트 빈도가 높아질 때
- 소스코드의 복잡도가 개발팀이 수용할 수 있는 한계에서 벗어나 소스코드에 대한 통제력을 상실한 상태임, 장애가 발생할 확률이 매우 높다. 하나의 팀이 관리하는 코드의 크기를 줄여 복잡도를 낮춰야 함
- 간단한 수정 사항 반영에도 개발부터 배포까지 긴 리드타임이 소요
- 조직 전체의 생산성을 해침
- 하나의 수정 사항을 위해 수많은 구성원 간의 의사소통이 필요해 효율성 저하
- 기획/디자인/백엔드 모두 포함
- iFrame기반의 런타임 통합
- 웹 컴포넌트를 통한 통합
- 빌드 타임 통합
- 서버측 템플릿 조합
- Module Federation: 자바스크립트 기반의 런타임 통합
- Safe Component: 에러바운더리 등을 활용한 런타임 에러의 확산 방지
- Monorepo: 하나의 저장소에서 여러개의 프로젝트를 관리하여 분리된 모듈과 공통 모듈의 효율적 관리
- 모노리스 (Monolith): 하나의 소프트웨어를 구성하는 모든 모듈을 한 프로젝트에서 관리하는 방식
- 멀티레포 (Multi Repo): 저장소를 각 도메인 및 기능 시스템 단위로 생성해 운영하는 방식 → 공통 모듈을 추출하고 모듈의 버전을 관리해야 한다는 단점
- 모노레포 (Monolithic): 하나의 저장소에서 여러 개의 프로젝트를 관리하는 방식 → 모듈 별 개발 환경 구성을 위한 설정들을 하나의 저장소 안에서 공유
- Design System: 모듈별 개발팀은 서로 독립되어 있기 때문에 UI/UX 관점에서 파편화될 가능성있음 이를 막기 위해 디자인 시스템 도입 가능
- UI/UX의 일관성 유지
- 의사소통 비용의 감소