[Git] 깃 라이브러리화 만들기 - 모노레포 구조

📌 우당탕탕 회사 개발일지

 

 

 

모노레포 구조로 한레포지토리안에 모든 프로젝트 관리하기

 

 

Q) 컴포넌트화와 라이브러리화는 뭐가 다른건가요?

용어	설명
컴포넌트화	UI나 로직을 하나의 파일/모듈로 만들고 재사용하기 쉽게 구조화함 (주로 프로젝트 내부).
라이브러리화	여러 컴포넌트를 하나로 묶어서 다른 프로젝트에서도 쉽게 사용할 수 있도록 패키지로 구성함.
모노레포 구조	여러 프로젝트와 공통 컴포넌트를 한 레포지토리에서 관리함 (예: TurboRepo, Nx, Yarn Workspaces).

 

 

- 내가 하고싶은것은?

하나의 레포 안에 여러 프로젝트를 넣어서 관리하고 싶다.

 

 

모노레포 구조란?

 

하나의 레포 안에 여러 프로젝트를 넣는 방식

 

 

실습해보기

 

나는 pnpm, react, vite를 이용해서 만들 예정이다.

 

pnpm이란?

npm보다 2배 빠르고 효율적이며, 모노레포를 지원하고 아무 패키지에 접근하는 코드가 허용되지 않아서 엄격한 패키지 매니저

 

장점

1. 빠르다.
2. 용량 최적화.

 

최종 목표 폴더 구조

 

project/
├── pnpm-workspace.yaml
├── package.json
└── packages/
    ├── common/
    │   └── src/
    │       └── MyButton.jsx

            └── index.jsx
    ├── project_a/
    │   └── src/
    │       └── App.jsx
    └── project_b/
        └── src/
            └── App.jsx

 

 

1. 최상단 프로젝트를 만든다.

mkdir project
cd project

 

 

2. 루트 초기화

pnpm init

 

 

3. 최상단 루트에 pnpm-workspace.yaml 파일을 추가

packages:
  - "packages/*"

 

 

4. 폴더 구조 만들기

mkdir -p packages/common
mkdir -p packages/project_a
mkdir -p packages/project_b

 

 

5. 공통 컴포넌트 만들기

 

packages/common/package.json:

{
  "name": "@my/common",
  "version": "1.0.0",
  "main": "./src/index.jsx",
  "exports": {
    ".": {
      "import": "./src/index.jsx"
    }
  },
  "private": true,
  "peerDependencies": {
    "react": "^18.0.0"
  }
}

 

packages/common/src/index.jsx:

 

// index.jsx
export { default as MyButton } from "./MyButton.jsx";

 

packages/common/src/MyButton.jsx:

import React from "react";

const MyButton = ({ children }) => {
  return <button style={{ padding: "10px" }}>{children}</button>;
};

export default MyButton;

 

 

 

6. react 프로젝트 생성

 

각 프로젝트 디렉토리에서 React 앱 생성(vite 기준)

cd packages/project_a
pnpm create vite . --template react
pnpm install

cd ../project_b
pnpm create vite . --template react
pnpm install

 

 

7. 각 프로젝트에서 common 사용 설정

 

packages/project_a/package.json

packages/project_b/package.json

"dependencies": {
  "@my/common": "workspace:*"
}

 

 

8. 사용예시

 

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import { MyButton } from "@my/common"; // 이 부분
function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
      <MyButton>버튼 A</MyButton>
    </>
  );
}

export default App;

 

 

9. 루트에서 전체 설치

 

project/

pnpm install

 

 

10. 실행

 

project_a

pnpm dev

 

 

 

 

 

실행되고 버튼 A가 생기면 실행된겁니다~~

 

 

모노레포 구조의 단점

 

1. 레포가 커지면 빌드 성능 저하

2. Git 히스토리 관리 어려움

3. CI/CD가 복잡해짐