[GitHub]여러 React 프로젝트를 하나의 레포지토리로 합치는 방법

문제 상황

React 공부를 하면서 mini-blog, my-app처럼 각각 다른 프로젝트를 만들게 되었다. 이들을 각각 GitHub에 올리다 보니 레포지토리가 분산되어 관리가 어렵고, 하나의 레포지토리에서 모아 보고 싶다는 생각이 들었다. 그래서 react-study라는 하나의 레포지토리를 만들어 그 안에 react-start/mini-blog, react-start/my-app 형태로 구조를 통합하려 했다.

하지만 로컬에서는 VSCode 상에서 잘 정리된 구조가 GitHub에는 반영되지 않거나, 중첩된 .git 폴더 때문에 서브모듈 경고가 발생하고 푸시도 되지 않는 문제가 발생하였다.

---

문제 원인

• mini-blog, my-app 폴더 각각이 독립된 Git 리포지토리였기 때문에 .git 폴더가 존재하고 있었다.
• react-study 폴더 자체는 GitHub에서 클론한 게 아니라 그냥 복사한 상태여서 .git 폴더가 없었다.
• GitHub 원격 저장소에는 이미 다른 커밋이 있었기 때문에 강제 푸시가 필요했다.

---

해결 방법

react-study 폴더를 Git 리포지토리로 초기화

cd ~/Desktop/react-study
git init

GitHub 원격 저장소와 연결

git remote add origin https://github.com/사용자명/react-study.git

mini-blog, my-app 내부 .git 폴더 삭제 (중첩 레포 제거)

rm -rf react-start/mini-blog/.git
rm -rf react-start/my-app/.git

Git 인덱스에서 기존 서브모듈 제거 후 실제 파일로 재추가

git rm --cached react-start/mini-blog
git rm --cached react-start/my-app

git add react-start/mini-blog
git add react-start/my-app

git commit -m "fix: remove nested git repos and add actual contents"

 

원격 저장소에 강제 푸시

git push -f origin main

---

최종 폴더 구조

react-study/
└── react-start/
    ├── mini-blog/
    └── my-app/

이제 GitHub에서도 로컬 VSCode에서 보이던 구조와 동일하게 react-start/ 안에 프로젝트들이 정리되어 보여진다. 각각 독립적으로 npm install, npm start로 실행 가능하다.

---

레포지토리를 깔끔하게 관리하고 싶은 사람이라면 Monorepo 구조로 정리해두는 것이 확실히 효율적이다.