마이크로 프론트엔드와 모노레포
monorepo
프로젝트는 레포지토리를 만드는 것부터 시작이다.
Monolith Repo?
- 한 저장소에 하나의 앱에 관련된 모든 코드와 리소스를 넣는 방식
- 프로젝트는 하나.
- Monolith != Monorepo
Modular Repo
- 소스 코드를 분류하여 여러개의 모듈로 나누고 모듈을 각각의 패키지로 만들어 패키지간 필요한 패키지를 가져다 쓰는 방식.
- 패키지간 잘 정의된 관계가 없다면 Monorepo가 아니다.
- 이러한 패키지 간 잘 정의된 관계로 여러 패키지를 하나의 레포에서 관리하는 방식
모노레포와 폴리레포?
모듈로 나누어 연관 짓는다 라는 개념 아래서 하나의 레포로 관리하면 모노레포, 모듈마다 레포를 가지고 관리하면 폴리레포 혹은 멀티레포라고 한다.
폴리레포에서의 단점은 모노레포의 장점이다.
- 히스토리가 한번에 보이지 않는다.
- 기존 코드를 활용하려면 추가적인 비용
- 프로젝트를 새로 생성할 때, 비용이 크다.(초기 세팅)
- 각 프로젝트마다 설정이 일관적이지 않아 컨텍스트 스위칭과 유지보수 맥락이 끊긴다.
- 이슈 수정을 하다가 라이브러리를 수정해야 해서 번거로운 일이 발생한다.
반대로 모노레포에서의 단점은 폴리레포의 장점이다.
- 과도한 의존 관계가 나타날 수 있다.
- 하나의 CI를 구성할 수는 있지만, 방법이 복잡하다.
- 저장소 자체가 빠르게 무거워질 수 있다.
- 모든 코드가 밀집되어 있어 사소한 문제가 크게 확대될 가능성이 있다.
모노레포는 잘 정의된 관계를 가진 여러 개의 개별 프로젝트가 포함된 단일 레포지토리이다.
- 프로젝트들이 잘 정의된 관계를 가지고 있다
- 이러한 패키지들이 의존 관계를 명확히 가지고 있다.
- 수정된 패키지들이 어떤 앱에게 영향을 주는지 알아야 한다. -> 배포의 범위
디자인 시스템과 MFA
디자인 시스템은 여러 페이지와 채널에서 공유 언어와 시각적 일관성을 유지하면서 중복을 줄여 대규모로 디자인을 관리하기 위한 일련의 표준이다.
- 디자인 시스템은 명확한 표준에 따라 재사용 가능한 구성 요소의 모음으로, 여러 애플리케이션을 구축하기 위해 함께 조립할 수 있다.
- 디자인 시스템은 애플리케이션이나 웹사이트와 같은 디지털 제품 설계 및 제품 개발에 도움이 된다.
- 디자인 시스템에는 패턴 라이브러리, 디자인 언어, 스타일 가이드, 코딩된 구성 요소, 브랜드 언어 및 문서가 포함될 수 있지만 이에 국한되지는 않는다.
디자인 시스템의 두가지 중요한 요소
- the design repository
- Style Guide 인터페이스, 구체적인 구현 지침, 시각적 레퍼런스 및 디자인 원칙
- Component Library 재사용 가능한 UI 요소
- Pattern Library UI 요소 그룹 또는 레이아웃의 컬렉션, 콘텐츠 구조, 템플릿
- the people who manage it
디자인 시스템의 장점
- 디자인부터 프로덕션 워크플로우까지 간소화
- 재사용 가능한 컴포넌트와 공유된 논리적 근거를 통해 제작 속도 향상
- 더욱 응집력 있는 사용자 경험과 일관된 디자인 언어를 통해 더 나은 제품을 제공
- 설계 및 기술 부채 감소를 통한 유지 관리 및 확장성 개선
- 공통된 문제를 해결하여 팀이 사용자 요구 사항을 해결하는 데 집중할 수 있으므로 제품 팀의 집중력 향상
모노레포
- 루트 프로젝트가 앱이나 라이브러리가 되지 않는다. 보통 각각의 워크스페이스를 관리하는 역할을 수행
- 루트 프로젝트와 각각의 워크스페이스가 가지고 있는 외부 의존성이 효율적으로 관리되어야 한다.
- 각각의 워크스페이스를 독립적으로 제작하기 보다는 유기적으로 작업하기 때문에 패키지 간 의존성이 명확해야 하고 의존성을 바탕으로 태스크를 수행해야 한다.
- 각각의 워크스페이스 앱으로 실행될 수도 있고, 모듈로서 다른 앱이나 모듈에서 사용될 수 있다. 모듈인 워크스페이스는 패키지로 명확하게 노출한다. 패키지 제작을 위해 여러가지 도구를 사용해야 한다.
멀티레포
차이점 정리
- 싱글 레포는 단독으로 동작하는 앱이거나 독립적이고 범용적인 라이브러리에 어울리는 형태이다.
- 멀티 레포지토리는 여러개의 레포지토리가 서로 유기적으로 관계를 가지면서 개발하는 방식이다.
- 모노 레포지토리는 단일 레포지토리이면서 내부에 여러 패키지가 유기적으로 서로 관계를 가지면서 함께 개발하는 방식이다.
다음은 모노레포를 구성하기 위한 도구들에 대해서 좀 알아보고 실제로 프로젝트를 구성해보자