cleanUrl: /blogs/sixshop-micro-frontend
description: "Module Federation으로 확장 가능한 아키텍처 설계"
ogImage: "<https://nashil.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F82f738b5-a0a1-4979-bc81-2daaaacec47b%2Fbf81a943-587e-4925-bb44-c237a4f1d224%2Fnashu.png?table=block&id=2d971f08-b0d9-440a-9e4d-0cfdfb7b600e&spaceId=82f738b5-a0a1-4979-bc81-2daaaacec47b&width=1440&userId=&cache=v2>"
utterances: 
  repo: choinashil/utterances

마이크로 프론트엔드는 프론트엔드 애플리케이션을 작은 단위로 분리하여 독립적으로 개발, 배포, 운영할 수 있게 하는 아키텍처다. 이 글에서는 식스샵에서 마이크로 프론트엔드를 도입하게 된 배경과 적용 과정, 그리고 그 결과를 공유하고자 한다.

도입 배경

‘식스샵 프로’라는 신규 제품에 착수하면서 각 기능들을 앱으로 분리하여 모노레포로 운영하고 있었다.

<aside>

참고:

• 식스샵 모노레포 도입기 </aside>

2023년 2월, 스토어프론트 앱의 웹사이트 설정 화면을 스토어 매니저 앱의 화면 안에 띄워야 하는 요구사항이 있었다.

당시 모노레포에는

1. 스토어 매니저 (판매자향, 이하 A)
2. 에디터 (판매자향, 이하 B)
3. 웹사이트 (구매자향, 이하 C)

3개의 앱이 있었는데, 처음으로 판매자향 제품끼리 통합하게 된 것이다.

이미 각 앱이 분리되어 있었기 때문에 빌드 타임 통합은 고려하지 않았고, 런타임 통합 방식을 고민했다. iframe 등의 의견이 나왔었는데, 마침 “Webpack 5 Module Federation으로 Micro-Frontends 운영하기”라는 FEConf Korea 영상을 흥미롭게 봤던 터라 Module Federation을 제안하여 PoC를 진행했다.