내용 목차
오늘은 “Git을 이용한 미니 프로젝트 관리” 라는 제목으로 포스팅을 해본다.
git으로 프로젝트를 관리하려는 이유
새로운 프로그램 언어나 라이브러리를 공부하게 되면 시험 삼아서 여러 개의 미니 프로젝트를 만들었다가 지웠다 하면서 공부하게 된다.
예를 들면 React를 배우게 되면 create-react-app으로 node 모듈을 비롯한 수 많은 모듈들이 일시에 설치하게 되는 데 시간도 좀 걸리고 하드디스크에 수백 메가바이트의 용량이 소모된다.
기본 라이브러리를 불러와서 설치하는데 꽤 많은 시간이 소요된다. 매 프로젝트마다 이렇게 node모듈이나 여러 dependency들을 설치하게 되면 하드디스크도 상당히 잡아 먹게 된다.
실제 코딩하는 프로젝트 코드는 몇 킬로바이트도 안되는데 그때마다 create-react-app으로 프로젝트를 만들다 보면 좀 진이 빠지는 느낌이 든다.
이런 점들을 피하기 위해 최초에 기본 라이브러리는 한번만 설치하고 나머지 미니 프로젝트들은 모두 git의 branch로 관리하는 것이 더 낫겠다는 생각이 들어서 이렇게 관리하는 것이다.
git을 이용한 미니 프로젝트 관리 개념
기본적인 개념은 아래의 그림과 같다. create-react-app은 한번만 설치하고 Git의 branch를 이용해서 미니 프로젝트를 진행한다는 것이다.
vs-code 편집기의 터미널에서 브랜치를 이동(checkout)하면 즉시 해당 프로젝트로 이동하게 되며 이동되는 즉시 React로 실행된 웹페이지가 실시간으로 변경된다.
git 를 설치 및 기본 명령어 공부
우선 기본적으로 git이 설치되어 있어야 하고 기본적인 명령어 몇개는 알고 있어야 한다. 그리고 깃이 뭐하는 것인지 모르시는 분이라면 우선 그것부터 잠깐 공부하고 이 글을 봐야 한다. git에 대해 배우려면 유튜브 강좌만 해도 엄청 많으니 참고하시면 좋습니다.
🚀 Git 공식 홈페이지 : https://git-scm.com/
npx create-react-app myapp 실행
위 명령을 실행하면 myapp폴더에 기본 React 프로젝트 가 생성된다. create-react-app을 실행되면 이 프로젝트에 대한 git이 기본으로 초기화 되어 있다. 굳이 git init을 할 필요가 없다.
git log 명령을 내려보면 자동으로 초기화된 내용을 볼 수 있다.
![git react 프로젝트 관리](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_896,h_212/https://nscworld.net/wp-content/uploads/2022/12/image.png)
위와 같이 우리는 git commit을 한적이 없지만 commit 4a2046ed… 과 같이 되어 있다.
현재 브랜치 위치 확인 : git branch
현재 이 프로젝트의 브랜치는 뭐가 있고 내가 어떤 브랜치에 있는지를 확인해 볼 수 있다.
![git react 프로젝트 관리](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_899,h_106/https://nscworld.net/wp-content/uploads/2022/12/image-1.png)
새로 만든 브랜치가 없으므로 디폴트인 master 브랜치만 있으며 *는 내가 현재 머물러 있는 브랜치를 뜻한다.
브랜치 생성 : git branch [브랜치이름]
![](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_900,h_134/https://nscworld.net/wp-content/uploads/2022/12/image-2.png)
위와 같이 “quizApp”라는 브랜치를 새로 만들었다.
브랜치이동 : git checkout [이동하려는 브랜치이름]
![](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_896,h_286/https://nscworld.net/wp-content/uploads/2022/12/image-3.png)
위와 같이 *가 quizApp로 이동해서 현재 위치가 옮겨졌다. 다시 master 브랜치로 이동하려면 마찬가지로 git checkout master 하면 된다.
이제 퀴즈앱에 필요한 내용으로 자유롭게 수정하면 브라우저에서도 그대로 반영된다.
브랜치 작업 후 반드시 git add 와 git commit 할 것
작업 후에 자주 git status 해봐서 commit 안 한 것이 있는 지 확인한다. 대략 작업이 끝났으면 git add . 와 git commit를 해줘야 한다. 작업을 완료하면 파일을 저장하고 add와 commit를 해줘야 결과가 반영된다.
마스터 브랜치로 다시 이동 : git checkout master
최초 create-react-app의 기본만 설치되어 있는 master 브랜치로 이동하면 그와 동시에 브라우저도 최초 설치 원본으로 되돌아온 내용 그대로 자동으로 전환 된다.
이런 식으로 프로젝트들을 이동하면서 작업을 할 수 있다.
브랜치 삭제
브랜치를 임시로 만들었다가 필요없어지면 삭제해야 하는 경우도 있다. 브랜치 삭제에 대해 알아보자. 원래 브랜치는 작업을 모두 마치면 master이나 다른 브랜치와 병합하기 위해 만드는 경우가 대부분이다.
그래서 브랜치는 삭제하려면 기본적으로 병합이 끝나고 필요 없어지는 경우에만 삭제하도록 권장한다. 그래서 브랜치를 삭제하는 방법도 두 가지 입니다. 다만 차이는 한 글자 뿐이다.
![](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_899,h_75/https://nscworld.net/wp-content/uploads/2022/12/image-4.png)
단지 대문자와 소문자 차이이다. 우리는 각각 독립적인 미니 프로젝트 형태로 브랜치를 관리했으므로 병합 안된 채 사용하는 대문자 -D 이다.
결론
굳이 매 프로젝트마다 폴더를 새로 만들어서 할 필요가 없이 git의 branch 기능을 이용해서 프로젝트들을 관리하면 편하다.
리액트 뿐이 아니라 다른 작은 프로젝트도 이런 식으로 관리하면 무척 편리하다. 굳이 Github에 올릴 필요조차 없는 그런 프로젝트 또는 공부 삼아서 간단히 하는 그런 것들은 좀 편하다.