[Git] 소스트리(Sourcetree)로 Back 과 Front를 함께 관리하기 (1)

파이널 프로젝트를 하면서 백과 프론트를 분리하여 사용하는데 도대체 깃에는 어떻게 형상관리를 해야 할까? 팀장으로서 걱정이었다. 그러나 아직 깃을 다루는데 익숙하지 않고, 충돌이나 오류를 해결하기에는 실력이 부족한 것 같아 그냥 프론트 따로, 백 따로 나누어 코드 관리를 진행했다. 다행히도 vscode는 따로 merge를 해주지 않아도 되길래 조금 수월했다. 

 

 

 프로젝트가 끝나고 현재 새로운 프로젝트를 진행 중인데 이번에도 역시 이렇게 따로 나눠서 하기에는 발전적인 모습이 없는 것 같아 이번에는 소스트리를 이용하여 확실하게 백과 프론트를 한 번에 형상관리하는 것에 신경을 쓰려고 한다. 

 

그래서 오늘은 Back 과 Front를 소스트리로 한 번에 관리하는 방법을 적어보겠다~~ 크게 말해 파일 두 개를 한 번에 소스트리에서 관리하는 것이라고 생각하면 된다. 

 

[폴더 생성]

1. 우선 하나의 대왕폴더를 만든다. 
2. 그 안에 Back과 Front 폴더를 하나씩 만든다.
   → 여기서 Back 은 이클립스 폴더이고 Front는 터미널로 생성한 Vue 폴더이다.
3. www.gitignore.io 들어가서 운영체제, 언어 등 환경설정 넣고 ignore 생성 후 대왕폴더 안에 넣는다.

여기까지 하면 .git 을 제외한 폴더 두 개와 gitignore 파일이 생성된다. 

 

[GitHub 레파지토리 생성]

이제 깃허브에서 레파지토리를 하나 생성 해준다. 

 

[Git Bash 실행]

1. 대왕폴더에 우클릭 후 Git Bash를 연다.
2. git init 
3. git status
4. git add .
5. git commit -m ‘메세지’
6. git remote add origin 리파지토리주소
7. git remote -v
8. git push origin master

여기까지 실행이 되면 GitHub 레파지토리에 아까 만들었던 파일과 gitignore가 보일 것이다. 

 그리고는 Master 계정이 putt Request 했다는 노란색 안내문까지 보이는데 클릭하면 메인-마스터 충돌로 실행이 되지 않는다. 아래의 코드를 전부 실행한다! 

git checkout master
git branch main master -f
git checkout main
git push origin main -f

그러면 아까 떠 있던 Pull Request가 사라져 있다. 

 

[소스트리]

여기까지 하면 해당 파일과 Git Repository 가 연결이 되었다. 이제 소스트리에도 적용시켜주자.

1. Clone 버튼을 눌러 레파지토리 주소를 첫 번째 URL 줄에 넣는다. 그러면 아래의 목저지 경로와 이름이 자동으로 따라온다. 그 후 클론 클릭! 

2. 브렌치를 생성해 준다. 나와 팀원은 각각의 브렌치를 생성하였다. 

3. push를 눌러 입력한 브렌치들을 원격 Origin에 넣어 준다. 

 

[이클립스]

이제 IDE 도구에 깃을 연동해줄 차례이다. 

새 워크스페이스 생성 → import → git → with smart import → Clone URI → Url 주소는 깃허브 레파지토리 url → 그 아래에는 마스터의 깃 이메일과 토큰값 입력 → 내 브렌치와 main 만 선택 →  마지막 페이지에서 Maven, 혹은 Gradle 이 쓰여 있는 파일만 클릭하여 Finish 버튼 클릭 

 

프로젝트가 생성되면 main 브렌치로 시작이 되는데 이걸 자신의 브렌치로 바꿔야 한다. 

Team -> Switch To -> Other를 누르면 

이렇게 Remote Tracking에 자신의 브렌치가 있을 것이다. 해당 브렌치를 클릭 후 CheckOut을 진행해준다.