jtwjs Dev Wiki
  • DEV_ROAD
    • 💪🏻 생존하기
    • Week 1
      • 개발 환경 세팅
      • 타입스크립트
      • 리엑트
      • Testing Library
      • Parcel & ESLint
    • Week 2
      • JSX
      • Virtual DOM
    • Week 3
      • React Component
      • React State
    • Week 4
      • Express
      • Fetch API & CORS
      • React Hook
      • useRef & Custom Hook
    • Week 5
      • TDD
      • React Testing Library
      • MSW
      • Playwrite
      • Snapshot
    • Week 6
      • Separtion of Concerns
      • Principle
      • DI, (Dependency Injection)
      • Reflect-metadata
      • TSyringe
      • External Store
      • Follow Redux
      • usestore-ts
      • useSyncExternalStore
    • Week 7
      • Routing
      • Routes
      • Router
      • Navigation
    • Week 8
      • Design System
      • Style Basics
      • CSS-in-JS
      • Styled-Components
      • Global Style & Theme
    • Week 9
      • 개발하기 전 준비
      • 상품 목록 페이지
      • 상품 상세 페이지
      • 장바구니 페이지
    • Week 10
      • 로그인
      • 로그아웃
      • 회원가입
      • 주문 목록 & 주문 상세
    • Week 11
      • 배송 정보 입력
      • 포트원 결제 요청
      • 배송 및 결제 정보 전달
    • Week 12
      • 관리자 웹사이트개발시작
  • DEV_NOTE
    • TypeScript
      • 기본적 문법
        • Enum
        • 다형성
          • Untitled
        • 구조적 타이핑
        • 제너릭 타입
        • 컨디셔널 타입
        • 함수 메서드 타이핑
        • infer로 타입스크립트의 추론 직접 활용
        • 재귀 타입
        • 템플릿 리터럴 타입
        • 추가적인 타입 검사 satisfies 연산자
        • 타입스크립트 건망증
        • 원시 자료형에도 브랜딩 기법 사용 가능
        • 타입 좁히기
        • 유용한 타입 만들기
        • 데코레이터 함수
        • 앰비언트 선언도 선언 병합이 된다.
        • 앰비언트 선언도 선언병합이 된다.
    • Testing
      • Unit Testing
      • 단위 테스트의 두 분파
      • 좋은 단위 테스트를 구성하는 4대 요소
      • 테스트 대역과 식별할 수 있는 동작
      • 단위 테스트 스타일
      • 가치 있는 단위 테스트를 위한 리팩토링
      • 통합 테스트
      • Cross Browsing Testing
      • 기능 테스트 종류
      • React Testing Pattern
      • 프론트엔드 테스트 입문
        • 테스트 범위
        • 단위 테스트 검증
        • Mock
        • UI 컴포넌트 테스트
        • 테스트 커버리지
        • 웹 통합 테스트
        • MSW
        • 스토리북
        • 시각적 회귀 테스트
        • E2E 테스트
        • Github Actions 설정
        • 깃허브 액션에서 E2E
      • 시프트 레프트
        • 테스트 기본중의 기본
        • 단위 테스트
        • 코드 복잡도
        • 리팩터링
        • 코드 리뷰
        • 통합 테스트 패턴
        • 시스템 테스트의 자동화
        • 탐색적 테스트
      • Test Tip
      • vitest
      • playwright
      • Test Data Generator
      • MSW
    • Algorithm
      • coding test
      • Data Structure
    • Next.js
      • Data Fetching
      • Hydration
      • Next 13
      • Optimization
      • Next 15
    • Tailwind
      • Tailwind CSS
      • Theme
      • Directives
      • Tool
      • Design System
    • Storybook
      • Storybook
      • CSF3
      • CDD
      • Headless Component
    • Funtional Programming
      • 함수형 프로그래밍
      • 참조 투명성
      • 부수효과
      • 함수 합성
      • 제너릭 타입 활용하기
      • 암묵적 입출력
      • 액션과 계산, 데이터
      • 계층형 설계
      • 호출 그래프
      • 함수형 설계
      • 불변성
      • 일급 함수
      • 함수형 도구
    • Git
      • Github Actions
      • Conflict
      • Branch 전략
    • Contents Format
      • Audio
    • 3D Graphic
      • 3D keyword
      • Three.js
      • Geometry
      • Material
      • Light
      • Camera
      • Decal
      • Rotation
      • Text
      • Shadow
      • Fog
      • Post Processing
      • Animation
      • Math
        • Vector Space
        • 벡터의 연산
        • 회전 계산
      • 3D 컨텐츠가 만들어지는 과정
      • R3F
      • Env
      • Scene
      • Transform
      • R3F
      • Interaction & Raycast
      • Rendering Algorithnm
      • Blender
      • Blender
    • Accessibility
      • 접근성이란
    • Interactive Web
      • Parallax
      • Canvas
      • requestAnimationFrame
      • Effect
      • HSL
      • React.js + Canvas
      • Matter.js
    • AWS
      • DevOps
      • Amplify
      • S3
      • 클라우드 컴퓨팅
        • 온프레미스와 클라우드
        • 클라우드 도입효과
        • 클라우드 컴퓨팅의 범위
        • 컴퓨팅 옵션
          • EC2 - Virtual Machin
          • ECS, EKS - Container
          • Lambda - Serverless
        • 네트워크 가상화
        • 스토리지
        • 데이터베이스
        • 데이터 수집
        • 머신 러닝 영역
        • IoT 영역
        • 블록체인 영역
      • 클라우드 아키텍처 설계
    • Network
      • Web Server & WAS
    • System Design
      • System Design
      • Component
      • 의존성을 배제한 개발
      • Error Handling
      • Architecture
        • 모노로틱 아키텍처
        • Clean Architecture
        • Layered Architecture
        • 이벤트 기반 아키텍처
      • 상황을 파악하는 메타인지
      • 중복 문제 해결하기
      • Monorepo Arhitecture
        • 모노레포 운영과 트러블슈팅
        • Module Federation
      • 코드 병목지점
      • API 대응
      • 공통 코드
      • Infra 구축
      • 모듈 기반의 개발 방식
      • Design System
        • 최소 수준의 아키텍처 설정
        • 더 효율적인 디자인시스템 만들기
        • 디자인 시스템과 UI 라이브러리 목적
        • 디자인 토큰
      • 효율적인 업무
        • 업무 프로세스 병목 파악
      • Clean Code
      • Design Pattern
        • CQRS Pattern
        • Strangler Fig Pattern
        • 데코레이터 패턴
        • 커맨드 패턴
        • 전략 패턴
        • 옵저버 패턴
      • A/B 테스팅
      • 대규모 리엑트 웹앱 개발
        • 복잡성 관리
        • 모듈성
        • 성능
        • 디자인 시스템
        • 데이터 패칭
        • 상태 관리
        • 국제화
        • 코드 조직화하기
        • 개인화 A/B 테스팅
        • 확장 가능한 웹 아키텍처
        • 테스팅
        • 툴링
        • 기술적 마이그레이션
        • 타입스크립트
        • 라우팅
        • 사용자 중심 API 디자인
        • 리액트 미래
    • Performance
      • React DevTools
      • Component 최적화
      • Page Load
      • API
    • MFA
      • MSA
      • MFA 도입하기
      • Monorepo
        • Monorepo Tool
        • Yarn Berry Workspace
        • Turborepo
      • MFA Composition
      • SPA 통합
      • Design System
      • Package Manager
        • Yarn
        • pnpm
      • Transpiler & Bundler
        • Babel
        • Rollup
        • esbuild
        • swc
        • Webpack
        • Vite
      • 분해와 통합을 위한 여러 기술 비교
    • State Management
      • Zustand
    • React v18
      • Automatic batching
      • Suspense
      • Transition
    • SEO
      • Search Engine Optimization
      • Open Graph Element
      • Metadata
    • FE Develop
      • Scrubbing
      • Clipboard
    • Refactoring
      • 리팩토링 깊게 들여다보기
      • 긴 코드 조각내기
      • 타입 코드 처리하기
      • 유사한 코드 융합하기
      • 데이터 보호
      • 코드 추가 및 제거
    • OAuth 2.0
    • Analytics
      • Mixpanel
    • ETC
      • VSCode
    • React Hook In Action
      • useContext & Provider
      • 커스텀 훅
      • 코드 분할하기 with Suspense, lazy
      • Suspense와 이미지 적재하기
      • useTransition, uesDeferredValue
      • SuspenseList
Powered by GitBook
On this page
  • Monorepo
  • 특징
  • 장점
  • 단점
  • MFA는 Monorepo가 꼭 필요한가?
  • Monorepo !== Monolith
  • Modular repo
  • Multi repo(Poly repo)
  • Multi repo 단점
  1. DEV_NOTE
  2. MFA

Monorepo

프로젝트 구조와 저장소를 관리하는 여러가지 기법

PreviousMFA 도입하기NextMonorepo Tool

Last updated 1 year ago

Monorepo

잘 정의된 관계를 가진 여러 개별 프로젝트가 포함된 단일 리포지토리

하나의 큰 프로젝트를 적절한 모듈로 나누고 모듈간의 의존관계를 잘 정의해야 한다.

모노레포를 사용 중인 오픈 소스

특징

  • 모노리포 내의 루트 워크스페이스는 각각의 워크 스페이스를 관리하는 역할을 한다.

  • 루트 워크스페이스와 각각의 워크스페이스가 가지고 있는 외부 의존성은 효율적으로 관리되어야 한다. (with Package Manager)

    • 각각의 Package manger는 외부 의존성을 설치하는 방식과 동작하는 방식이 서로 다르다

  • 각각의 워크스페이스는 유기적으로 작업되기 때문에 패키지 간 의존 관계가 명확해야 하고 의존성을 바탕으로 테스크를 수행해야 한다.

  • 각각의 워크스페이스는 앱으로 실행될 수 있고, 모듈의 역할로서 다른 모듈이나 앱에서 사용될 수 있다.

    • 모듈은 npm 패키지와 같은 형태로 제작되어야 함

  • 모듈인 워크스페이스는 패키지로 명확하게 노출한다.

장점

  • 모노리포 내의 내가 담당하지 않는 프로젝트여도 자유롭게 개선을하고 PR을 올릴 수 있음

  • 동료들간의 코드와 리소스를 쉽게 공유하므로 기술적이든 비지니스적이든 성장 할 기회가 많이 열린다.

  • 여러 프로젝트들이 코드들을 공유하고 재사용하기 때문에 중복 작업을 줄이고, 개발 시간을 절약할 수 있다.

  • 각 프로젝트마다 설정이 일관적이고 동일한 개발자 경험을 가지게 되어 관리하기 쉬워진다.

  • 전체 히스토리가 한번에 보인다.

단점

Monorepo의 단점들은 역으로 Multirepo의 장점이 된다.

  • Mono repo를 위한 추가적인 러닝커브 발생

  • Multi repo보다 상대적으로 의존성 연결이 쉬워 과도한 의존 관계가 나타날 수 있다.

  • 하나의 CI를 구성할 수 있지만 방법이 복잡하다.

  • 리포지토리 자체가 빠르게 무거워진다.

  • 모든 코드가 리포지토리 하나에 밀집되어 있어 사소한 문제가 크리티컬한 문제가 될 수 있다.

    • 여러 곳에 영향을 주는 코드들은 그 코드에 영향을 받는 코드 담당자들과 면밀히 검토하는 과정이 필요

  • 코드 관리 및 소유권 등의 문제가 생길 수 있다.

  • 대규모 리팩토링이 쉬워지는게 장점이자, 단점

MFA는 Monorepo가 꼭 필요한가?

MFA는 Monorepo가 필수는 아니지만 여러 프로젝트를 잘 정의된 관계를 가지도록 개발해야하기 때문에 좋은 옵션이 된다.

  • MFA는 여러 프로젝트가 하나의 큰 프로젝트로 구성이되는 아키텍처이기 때문에 여러 프로젝트가 필요하다.

  • 프로젝트들이 잘 정의된 관계로 구분되어 있다.

    • 공통으로 쓰는 코드들은 별도의 모듈로 패키지화해서 사용하고 이러한 패키지는 의존 관계를 명확히 가지고 있어야 한다.

    • 수정된 패키지가 어떤 마이크로 앱에 영향을 주는지 확실히 알아야 한다. → 배포의 범위를 결정

잘 정의된 관계를 그래프로 도식화해서 어떤 마이크로앱들이 배포가 정확히 되어야하는지 판단할 수 있어야한다.

Monorepo !== Monolith

Monolith repo란 하나의 리포지토리 안에 하나의 앱에 관련된 모든 코드와 리소스를 넣어 관리하는 방식

  • 하나의 앱을 하나의 프로젝트로 관리하는 것

  • 프로젝트 하나안에 페이지, UI 컴포넌트, 상태 로직, 서버 데이터 처리 등 모든 것들이 들어있다.

Modular repo

소스 코드를 관심사에 맞게 여러 모듈로 나누어 패키지로 만들고 패키지 간 필요한 패키지를 가져다 쓰는 방식

  • 패키지 간 잘 정의된 관계가 없다면 Monorepo가 아니다

  • 패키지 간 잘 정의된 관계로 여러 패키지를 하나의 리포지토리에 관리하는 방식이 Monorepo

Multi repo(Poly repo)

여러 모듈로 나눈 패키지를 각각의 리포지토리로 관리하는 방식

즉, 여러 개의 리포지토리가 서로 유기적인 관계를 가지면서 개발하는 방식

Multi repo 단점

Multi repo의 단점들은 역으로 Monorepo의 장점이 된다.

  • 참조하고 있는 다른 리포지토리의 코드가 수정되거나 버그가 있는 경우 해당 리포지토리 모듈을 버전업을 하여 사용해야 해서 번거롭다.

  • 히스토리가 한번에 보이지 않는다.

  • A1에서 A2의 기존 코드를 활용하려는 경우 의존성 흐름을 관리해주어야 하기 때문에 해당 코드를 따로 관리하는 리포지토리를 새로 생성해서 관리해주어야 하므로 추가 비용 발생이 발생한다.

  • 각 프로젝트마다 설정이 일관적이지 않아 컨텍스트 스위칭과 유지보수 맥락 흐름이 끊긴다.

babel
primitive
폴리리포주의자'가 모노리포를 반대하는 3가지 이유