우선 공부하면서 글로만 읽으니까 monolith(모노리스) 와 mono repo(모노레포)가 굉장히 헷갈렸다...
둘다 monolithic 이라는 단어를 쓰고 있어서 혼란이 왔는데 완전히 다르다!
이 그림을 보면 가장 빠르게 이해할 수 있다.
https://sunup1992.tistory.com/56
이 글로도 이해할 수 있다
MonoRepo (Monolithic Repositories)
: 하나의 레포지토리에서 여러 개의 프로젝트가 구성된 것
일반적으로는 보통 하나의 레포지토리 안에 하나의 프로젝트가 들어있다.
이런 일반적인 형태의 프로젝트 구성을 Multi-repo, PolyRepo 라고 한다.
장점
-
하나의 레포지토리로 여러개의 프로젝트 관리
: 편의성, 하나의 IDE에서 하위폴더를 이동해가며 코드 작성 가능 -
중첩되는 코드의 공통화
: 공통으로 사용해야하는 로직을 분리하고 이를 각자 패키지에서 import 하여 쉽게 사용 가능 -
중첩되는 모듈은 하나만 설치해서 사용
: 공통으로 사용하는 모듈은 root path에만 node를 설치하고 끌어다 사용 가능
단점
-
Dependency 충돌 문제
: 특정 패키지가 특정 버전의 모듈을 필요로 하는 경우, 다른 버전의 모듈을 사용하는 패키지와 dependency 충돌 발생 가능성 -
단일 레포지토리 문제
: 관리하는 패키지가 증가하면 오히려 가독성이나 여러가지 측면에서 관리가 어려워질 가능성 -
긴 초기 프로젝트 설정시간
: 일부가 필요한 경우에도 node_module 설치가 필요
Micro-frontends
왼쪽이 MSA 오른쪽이 Micro-frontends 이다.
마이크로 프론트엔드는 개별 팀이 담당하는 비즈니스 영역을 모듈화하여 각 팀 내에서 db부터 사용자 인터페이스에 이르기까지 end-to-end를 완료하는 것이다.
그림의 가장 오른쪽 단계이다.
저렇게 프로젝트를 나눠서 모노레포로 묶는 것이 요즘 트렌드인듯 하다.
장점
- 화면 영역까지 서비스를 독립, 더 완전한 MSA
- 각각마다 다른 고유한 기술 스택 사용 가능
- 화면을 점진적으로 개발, 분리 배포하는데 용이
- 팀 조직에 용이
단점
- 마이크로 프론트엔드 간에 너무 많은 종속성을 요구한다면 빌드/배포 지옥
- 에러를 추적하는 디버깅 과정이 복잡하고 까다로움
- 컴포넌트의 적절한 개발을 위해 비즈니스와 프로그램 아키텍처에 대한 깊은 이해 필요
- 모든 페이지의 UX/UI 일관성 지켜지지 않을 수 있음
마이크로 프론트엔드 구축 방법
- 서버사이드 템플릿 통합
- 빌드타임 통합
- iframe을 통한 런타임 통합
- js를 통한 런타임 통합
- Web Components를 통한 런타임 통합
https://www.youtube.com/watch?v=DHPeeEvDbdo
이 세션도 들어보고 조금 더 정리해야겠다.
참고자료
https://velog.io/@sms8377/DevOps-MonoRepo%EB%9E%80
https://velog.io/@eungyeole/Micro-Frontends-%EA%B5%AC%EC%B6%95%EA%B8%B0-1
