[Git] 깃 라이브러리화 만들기 - 멀티 레포

📌 우당탕탕 회사 개발일지

 

 

 

깃 모든 레포지토리에 들어갈 수 있는 라이브러리화 만들기

 

 

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

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

 

 

- 내가 하고싶은것은?

공통 컴포넌트를 하나의 repo에서 만들고, 여러 다른 프로젝트(레포)에서 import해서 사용하고 싶음

 

 

방법1. 멀티레포 구조

 

1.  공통 라이브러리를 위한 새 프로젝트 만들기
2. React 컴포넌트나 유틸 함수를 작성
3. 다른 레포에서 npm install git+https://github.com/yourname/shared-components.git 식으로 가져와서 사용

 

방법2. 모노레포 구조

 

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

한 레포안에서 프로젝트를 모두 관리하는 방식이면 추천하나 컴포넌트 여러 레포에서 쓰고 싶을때는 사용 X

 

 

방법3. npm으로 라이브러리 배포

 

1. npm 로컬 로그인
2. 배포할 폴더 생성
3. npm publish로 배포 후 import 하여 사용

 

Q) 그럼 멀티레포와 npm publish배포와 뭐가 달라?

A) 

멀티레포 방식: github에 올린 컴포넌트 repo를 직접 물리는 것

안정성, 캐시, 릴리즈 추적이 불편함

npm install git+https://github.com/your-org/common-components.git

 

npm publish 방식: npm에 배포한 라이브러리를 설치

설치 속도가 빠르고 버전관리가 확실

npm install @your-org/common-components

 

 

 

 

각 방법의 장/단점

 

모노레포

장점

1. 공통 패키지로서 버전관리가 쉽다.
2. 코드 재사용성이 좋다.
3. 한 프로젝트로 보기 편하다.
4. 공통 컴포넌트 수정이 쉽다.

단점

1. 깃 플로우관리가 어렵다.
2. 용량이 커지면 빌드 시간이 길어질 수 있다.

 

멀티레포

장점

1. 개별 배포가 쉽다.
2. 분업화에 유리하다.
3. 빠른 빌드가 가능하다.

단점

1. 코드 재사용성이 어렵다.
2. 버전이 안 맞을 경우에 에러가 생길 수 있다.
3. 공통라이브러리 프로젝트 수정 시 각 레포마다 업데이트를 해주어야한다.

 

항목	모노레포 장점	모노레포 단점	멀티레포 장점	멀티레포 단점
의존성 관리	공통 패키지, 버전동기화 쉬움	모든 변경이 한 저장소에 있어서 충돌 위험 있음	프로젝트 간 독립성 확보	공통 패키지 간 버전 충돌, 중복 발생 가능
개발 환경 통일	eslint, prettier등 통합 설정 용이	초기 설정 복잡	설정 단순화 기능	설정 따로따로 관리 필요
배포 자동화	turbo, nx, changesets로 전체 릴리지 자동화 가능	릴리지 분리 어려움	개별 배포 전략 유리	패키지 간 의존성 버전 수동 관리
협업 효율	전체 코드 베이스 한눈에 보임, cross-team 협업 용이	변경서항이 많아지면 pr 리뷰 혼잡해짐	팀별 분업화 용이	협업 간 공유 어려움
공통 모듈 관리	한 곳에서 수정하면 전체에 반영	영향도 크면 전체 리빌드 필요	각 repo에서 독립적으로 관리	중복 코드 많아짐
ci/cd 관리	하나의 ci 파이프라인으로 통합 가능	빌드 시간이 길어질 수 있음	빠른 빌드 가능	각 repo마다 ci 구성해야함
테스트 통합	전체 통합 테스트 가능	전체 테스트 비용 증가	테스트 범위 작고 명확	공통 기능 테스트 어려움

 

 

선택 기준권장                                         

팀 규모가 작고 서로 의존적인 패키지가 많다	✅ 모노레포 추천
각 프로젝트가 독립적이고 별도 배포가 많다	✅ 멀티레포 추천
공통 컴포넌트가 많고, 모든 프로젝트가 함께 버전 관리되면	✅ 모노레포가 효율적
각 팀이 서로 다른 릴리즈 주기와 규칙을 갖는다면	✅ 멀티레포가 안전

 

 

방법.1로 공통 라이브러리 작업 진행해보기

 

** 챗지피티와 블로그가 오류가 많으니 꼭 직접해보길 바란다!

 

 

1. 공통라이브러리에 사용할 깃 프로젝트를 설치한다.

npx create-react-app@latest shared-components

 

 

2.설치 공통으로 사용할 컴포넌트와 export할 컴포넌트를 만든다.

 

** 이때 지피티는 나에게 이구조로 만들라고 했었다.

 

shared-components/
├── src/
│   ├── index.js
│   └── MyButton.js
├── package.json

 

허나 src안에는 이미 index.js가 있어 또 만들 수 없기에 폴더안에 넣어줬다.

 

shared-components/
├── src/
│   ├── components/
│   │   └── MyButton.js
│   ├── index.js ← 앱 실행용
│   └── export/   
│       └── index.js 
├── package.json

 

 

이 구조로 컴포넌트를 만들어주면된다.

 

src/components/MyButton.js

import React from "react";

export const MyButton = ({ label }) => {
  return <button>{label}</button>;
};

 

 

src/export/index.js

export * from "../components/MyButton.js";

 

 

3. 바벨릭 설치

 

** 처음 지피티는 나에게 배포를 하지 않아도 사용할 수 있다고 하더니 일도 되지 않았다. 바벨릭 설치해줘야한다.

여기서부터 삽질ON 허나 마지막 정상 바벨릭만 보여주겠다.

 

{
  "presets": [
    ["@babel/preset-env", { "modules": false }],
    "@babel/preset-react"
  ]
}

 

 

4. package.json 수정 -> 이 부분이 전부 들어가 있어야 한다.

 

{
  "name": "shared-components",
  "version": "0.1.0",
  "main": "dist/export/index.js",
  "type": "module",
  
  ...
  
    "scripts": {
    "start": "react-scripts start",
    "build": "babel src --out-dir dist",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  
  ...
  
    "devDependencies": {
    "@babel/cli": "^7.27.0",
    "@babel/preset-env": "^7.26.9",
    "@babel/preset-react": "^7.26.3"
  }

 

 

4. npm run build 실행

 

하고나면 dist라는 폴더에

dist/
├── export/
│   └── index.js     
├── components/
│   └── MyButton.js 

 

이 구조가 생겨야 하고 

 

index.js안에 이 코드가 생겨야 한다.

import { MyButton } from '../components/MyButton.js';
export { MyButton };

or

export * from "../components/MyButton.js";

 

 

5. 깃허브 메인에 푸쉬한다.

 

6. 라이브러리를 적용할 프로젝트가 미리있다면 해주고 아니면 새로만들어주자

난 새로 만들어주고 초기화면에 이렇게 넣어줬다.

import logo from "./logo.svg";
import "./App.css";
import { MyButton } from "shared-components";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <MyButton label="Hello!" />
      </header>
    </div>
  );
}

export default App;

 

 

 

7. 결론

 

 

 

밑에 Hello! 버튼이 생기면 성공이다..!

 

 

삽질ON

 

1.package.json을 저렇게 수정하면 import 구문에 js를 추가하라는 부분이 나온다. 처음엔 이해를 못했는데 그냥 바벨릭을 설정하면 정확하게 import 구문에 .js를 붙여야하기 때문에 임포트구문에 .js를 넣어주면 된다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App.js";
import reportWebVitals from "./reportWebVitals.js";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

2. 다 끝났다고 생각했는데 마지막에 계속 MyButton을 못 찾겠다는 오류가 났다. 계속 찾아보니

내가 무한삽질을 하는 통에 캐시가 물려 새로운 버전이 아닌 전버전으로 계속 npm이 실행됐던 것이다.

 

rm -rf node_modules/shared-components
npm install git+https://github.com/username/shared-components.git#main

 

 

또는

 

이렇게 커밋 이름을 같이 붙혀주면 최신화된다.

npm install git+https://github.com/username/shared-components.git#<라이브러리테스트_v5>

 

 

 

지피티가 나와도 삽질은 계속된다...