작업중인 파일에 Git 소스트리 연동시키기

현재 진행 중인 프로젝트의 깃 사용법이 너무 엉망이라 어제 공부한 Git source tree (GUI)를 활용하여 현재 진행 중인 React Native 프로젝트의 깃허브를 깔끔하게 정리해 보록 하겠다.

먼저 현재 진행중인 프로젝트의 깃 사용을 얼마나 개판으로 하고 있는지 반성하는 차원에서 현재 상황을 스크린샷으로 정리해 보도록 하겠다.
 
먼저 git을 사용하지 않으면 생기는 문제에 대해 'Git이란 무엇일까?' 타이틀의 글에서 정리했었는데 그 상황이 현재 나의 상황과 매우 유사하다는 것을 아래 화면을 통해 알 수 있을 것이다. (깃 하나를 제대로 못쓰고 있었다니.. 깊이 반성중...)
 
 
 

상황 브리핑 1)

안드로이드 앱 빌드에 문제가 생길 때마다 이름만 바꿔 프로젝트들을 다시 생성하고 있었음 

 
 

이름만 바꿔 같은 문제가 생긴 프로젝트들의 버전을 관리하고 있었음

 
 
 
 

상황 브리핑 2)

프로젝트를 계쏙 다시 생성하다 보니 기존에 CLI 명령어로 연결해 두었던 깃허브 연동상태가 꼬이기 시작해서 현재 어디에 연동된 건지도 헷갈려함

 

 
 
 

상황 브리핑 3)

덕분에 개인 레포지토리에는 각각의 레포지토리가 있고 연동이 꼬여 제대로 관리되지 않을 뿐만 아니라 심지어 같이 쓰고 있는 공용 깃헙까지 같은 파일이 하위폴더에 중복되어 있는 형태로 엉망이 되어 있음

 
 
 

해당 프로젝트관련 개인 레포지토리

 
 
 
 
 

공모전 팀 프로젝트 레포지토리 (중복파일까지 있음)

 
 
 

상황 브리핑 4)

Cli GitHub 연동이 꼬이기 시작한 이후부터는 급한 대로 드래그를 통해 Git에 업로드 중이었음

 
 

 
 
 
 
 
이렇게 보니 정말 Git과 GitHub을 엉망진창으로 사용하고 있었다는 것을 다시 한번 느끼게 되는 순간이다... 
(다시 한번 반성.. 또 반성...)
 
 
이 글을 읽는 분들은 여기서 드는 의문이 상당할 것 같은데, 이렇게 까지 깃과 깃헙을 엉망으로 사용하고 있었지만 어떻게 협업해서 프로젝트를 진행 중이었냐고 물어보신다면 이번 공모전 참여에 진심이었던 프론트엔드 담당자가 혼자여서, 혼자 모든 걸 구현해야 했기에 저렇게 깃허브가 엉망으로 사용되도록 방치될 수 있었던 게 가능하다고 말해주고 싶다.
 
( 원래는 해당 프로젝트x활동뿐만아니라 공모전까지 프론트엔드 3명, 백엔드 3명이 맡았었다. 하지만 나머지 2명이 앱이며 팀플이며 관련 언어까지 거의 처음이라는 핑계로 제대로 시간과 에너지를 투자하지 않고 2명 모두 몇 달 전부터 계획에 잡아뒀던 여행까지 가버리는 바람에 혼자 매일 밤새다시피 와이어프레임을 짜는 것부터 모든 프론트엔드 기능을 구현하게 되었었다.

현재까지는 해당 프로젝트를 진행하며 Git과 GitHub 사용법등을 비롯한 협업능력은 제대로 기르지 못했지만 그보다 훨씬 많은 개인능력을 성장시킬 수 있어 긍정적으로 생각하며 계속해서 공모전에 최선을 다해볼 생각이다. 아직 해당 프로젝트는 미완성이고 갈 길이 멀기에 이 경험을 토대로 공모전까지 프론트엔드 개발자로서의 역량을 이 블로그와 함께 계속해서 성장시켜보도록 하겠다.)

 
 
 
이제 보기만 해도 불편한 화면 속 상황들을 소스트리를 활용해 해결해 보도록 하자.
 
우선 현재 작업 중인 apitest 파일을 제외하
한 파일들부터 모두 제거해보았다. (다른 경로들까지 대략 6개 정도였음)
 
 

 
 
 
이제 첫 번째 여러 프로젝트를 만들어뒀던 부분은 앞으로 막힐 때마다 소스트리를 활용해 되돌리면 되기에 지우면 되기에 삭제하여 해결하였다.
 
 
 
다음으론 깃 명령어를 직접 입력하는 CLi방법으로 깃을 연동하다 이상한 레포지토리에 연결되어 있고 어떤 레포지토리에 연결되었는지 모를 뿐만 아니라 실질적으로 git init, git add, git commit, git remote, git push 등을 활용해 깃 명령어를 사용하면 브랜치 연결과 관련된 에러가 뜨며 연결상태를 초기화하기 위해 remove를 시켜도 제대로 remove 되지 않는 상태를 cli를 사용하지 않고 깃 소스트리를 사용하는 것으로 대체하여 해결해 보도록 하겠다.
 
(Cli는 기본 명령어만 알기에 필요성을 느끼게 되면 집중적으로 한번 공부하여 다시 수정할 예정이다. 지금은 소스트리를 활용하는 것이 되돌리기 기능과 수정 부분을 직관적으로 볼 수 있다는 것이 cli보다 훨씬 유용할 것 같다는 생각이 지배적이기에 당분간은 소스트리를 애용할 생각이다.)
 
 
현재 나는 이클립스를 통해 백준을 풀고 있고, 안드로이드 스튜디오와 vscode를 활용해 공모전 관련 프로젝트를 진행 중이기에 개별 개발 프레임워크에서 지원해 주는 소스트리를 사용하게 되면 각각 git에 키를발급받아 연동시켜야하는 번거로움이 있기에 프레임워크에서 지원해주는 소스트리가 아닌 깃 소스트리를 활용해 GitHub와 진행 중인 프로젝트를 연동시켜 보도록 하겠다.
 
참고로 깃헙에 현재 프로젝트를 커밋하고 소스트리에서 pull이나 Fork 해오는 방법도 존재하지만 소스트리에서 자동으로  onedrive경로로 받아오는 것이 다시 커밋하거나 푸시할 때뿐만 아니라 해당 경로에 새로 프로젝트를 생성할 때 까지도 많은 에러사항을 불러일으켜 나는 진행 중인 프로젝트의 파일들을 로컬저장소에 저장하고 이 로컬저장소를 git에 연동시키는 방법으로 진행중인 프로젝트를 Git에 연동하는 방법을 선택했다.
 
 

 
 
 

1) 로컬에서 'create' 버튼을 눌러 작업 중인 프로젝트 파일경로를 지정해 준다.

글쓴이는 기존에 원격저장소에 연결되어 있었기에 관련 확인창이 하나 더 뜬 모습이다.
 
 
 

 
 
 
 

2) 오른쪽 상단의 '원격' 버튼을 눌러준다음, 맨 오른쪽 화면에서 왼쪽 하단에 있는 '추가' 버튼을 눌러준다.

 
 

 
 
 

3) 원격 이름은 아무렇게 지어주고, URL 경로에 GitHub에 원격저장소 연결할 때 쓰는 링크 중 SSH url을 복사해 지정해 준다. (디폴트 원격을 체크하면 default설정된 브랜치로 연결되며 push나 pull 등의 Git 작업을 할 때, 기본적으로 사용될 저장소로 지정된다.)

 
글쓴이는 default 원격으로 세팅해 줌
 
 

  

 
위와 같은 화면이 보인다면 제대로 원격 저장소에 연결한 것이다. 그다음 중간에 url 같은 것이 틀려 잘못 연결된 것은 아닌지 아래와 같이 확인해 주도록 하자.
 
해당 원격 저장소가 제대로 확인되었는지 확인하기 이전에 글쓴이는 현재 연결시킨 깃헙 레포지토리가 중복파일이 올라와져 추가로 깃 작업을 할 때 혼동될 수 있기에 먼저 기존 깃 파일들을 모두 삭제시켜보도록 하겠다,

 
 
 
 
글쓴이는 일일이 파일들을 삭제하기에는 너무 오래 걸릴 것 같아 레포지토리를 통으로 날리고 새로 만들어 다시 소스트리르 연동하는 방법을 선택했다.
 
 
 

 
 
 
오른쪽 사진은 소스트리에서 해당 레포지토리로 커밋 후 푸시까지 완료 상태이다.
 
 
이제 다시 제대로 연동이 되었는지 해당 프로젝트의 app.js파일의 코드에 아무 말이나 추가한 후  '소스트리연동 테스트 커밋'이라는 커밋 메시지와 함께 커밋하여 push까지 해보도록 하겠다.
 

 
 

 
 
 
 
 
성공적으로 GitHub 저장소에 push까지 완료된 모습이다. ( 찌야아아아아아아스~~ )
그럼 이제 자주 쓰게 될 커밋 되돌리기까지 해서 원상태로 되돌리는 것까지 연습해 보도록 하겠다.
 
 
 

 
 
 
 

해당 커밋까지 브랜치 초기화를 눌러 되돌려주면 성공적으로 아까 추가했던 메세지들이 사라지고 진행 중인 프로젝트가 해당 커밋과 동일한 상태로 되돌아 간 모습이다. 하지만 hard로 설정해도 원격 저장소인 GitHub에는 반영되지 않기에 다시 커밋하여 따로 푸시나 강제 푸시를 더 해줘야 한다.
 
 
 
 
이렇게 현재 엉망으로 사용 중이던 Git과 GitHub을 깔끔하게 정리해 보았는데 이 글이 나와 같이 git과 GitHub사용에 어려움을 겪은 사람들에게 조금이나마 도움이 되었으면 한다.