Dooray! 의 프런트엔드는 거대한 모놀리식 SPA로 구성되어 있었습니다. 최근에 디자인을 리뉴얼하며 실험적으로 마이크로 프런트엔드를 도입하였습니다.이와 관련해 어떤 목표를 가지고 왜 그런 결정을 했는지, 구체적으로 어떻게 진행되었는지 다룹니다.

목차

• 점진적이지 않았던 두레이 서비스 리뉴얼 프로젝트
• 마이크로 프론트엔드 아키텍처 소개
• 여러가지 마이크로 프론트엔드 아키텍처
• Webpack5 Module Federation 으로 점진적인 분할 과정 소개
• 사례) Pages 와 Fragment, 그리고 상태의 분리
• 코딩보다 중요한 것

리뉴얼 프로젝트

리뉴얼 작업 전

Monorepo(Yarn Workspace)

• 디자인 시스템 패키지
• 메인 서비스 - 모놀리틱 SPA
• React
• TypeScript
• Vite
• Redux + Redux-Saga

리뉴얼 프로젝트는