chapter 05. Git & Github (2) 원격 저장소(remote repository), 협업, 병합 충돌,GUI

* 본 포스팅은 테킷 프론트엔드 온보딩트랙 강의(조경민 강사님)를 참고하였으며,

그 외의 자발적 학습 활동을 진행한 것을 토대로 작성되었습니다.

 

이전 포스팅 chapter 05. Git & Github (1) 터미널 사용법, 로컬 git 저장소 생성(이전 포스팅 바로가기)에 이어,

chapter 05. Git & Github (2)에서는 github를 사용하는 소스 반영 및 협업, GUI에 대해 소개한다.

 

|목차

chapter05.(1)

1. Git & Github의 등장과 역할

2. Git 설치 및 세팅

3. Git 동작 흐름과 구성요소

4. 로컬 Git 저장소 생성

*추가: 참고하기 좋은 사이트

chapter05.(2)

5. Github에 소스 반영

6. Github로 협업하기

7. Git GUI 활용하기

 

---

이전 포스팅에서는 바탕화면에 test 폴더를 생성하고, test 폴더 안에 test.txt 파일 및 .gitignore 파일을 생성하였다. 

설치한 Git 프로그램을 바탕으로 init 명령어를 사용하여 .git 숨김폴더를 생성하고, 파일을 수정 후 수정된 버전을 기록해보는 실습, 그리고 branch를 이동해보는 실습 등을 진행하였다.

 

이번에는 Git 프로그램 뿐만이 아니라 Github를 사용하여 어떻게 웹서비스 프로그램을 관리할 수 있을지 직접 실습해보고자 한다.

---

실습을 시작하기 전에,

깃허브 사이트에 들어가 회원가입을 진행한다.

https://github.com/

GitHub: Let’s build from here

 

회원가입 후, 창의 좌측 상단을 보면 아래와 같이 녹색의 'new' 버튼이 있다.

new 버튼을 눌러 새로운 repository(=저장소)를 생성한다. 저장소의 이름은 test 로 설정하였다.

(*모자이크 처리된 부분은 작성자가 직접 설정한 닉네임)

 

5. Github에 소스 반영

앞서 언급한 내용에 따라, Github사이트에 test라는 이름의 외부 저장소를 생성하였다.

생성 후에는 아래와 같은 창이 뜰 것이다.

... or create a new repository on the command line

-> git remote add origin https://github.com/(사용자명)/test.git 

 

위 캡처화면에서 드래그한 부분이 바로 command line에서 git 명령어를 입력할 내용이다. 이를 복사하여 아래의 캡처화면과 같이 command line에 붙여넣기한다.

cmd 창에서 붙여넣기를 할 때에는 우클릭 등의 기능을 사용하면 된다.

 

이렇게 사용한 명령어의 구조는 아래와 같다.

$ git remote add origin <원격 저장소 주소>

즉, 로컬(local) 저장소의 프로젝트를 원격(remote) 저장소에 반영하는 명령어이다. 

 

이번에는 위에서 Github로 생성한 원격 저장소에서 branch 관련 명령어를 사용해보자. 

이전 포스팅에서 로컬(local) 저장소의 branch를 main으로 이동 및 변경하는 명령어는 아래와 같았다.

//로컬 저장소의 branch
$ git branch -M main

 원격(remote) 저장소에서 branch를 변경하려면 다른 명령어를 사용해주어야 한다. 이는 아래와 같다.

//원격 저장소의 branch
$ git push -u origin main

로컬 저장소의 branch 이동과는 달리 원격 저장소에서 위 push 명령어를 사용하면, 바로 실행되지 않고 웹브라우저 창이 하나 뜰 것이다. push 대상 원격 저장소 계정 정보 인증을 필요로 하기 때문이다.

Github의 계정 정보를 인증하면 아래와 같이, 비로소 명령어가 실행된다.

이렇게 원격 저장소로 push된 코드는 웹사이트(Github)에서도 확인할 수 있다. 

 

Github 사이트로 돌아가 새로고침을 해보면, 아래와 같이 이전 포스팅에서 로컬(local) 저장소에 저장해둔 test 폴더의 내역을 github(=원격 저장소)에서도 확인할 수 있다. 

이전 포스팅에서 

$ git commit -m "the first commit"

위의 명령어(=버전 기록 메세지)를 사용한 흔적 또한 고스란히 남아있다.

또한 해당 파일을 각각 눌러 내부 코드 및 파일 내용을 읽는 것이 가능하다. 

 

6. Github로 협업하기

Github로 협업하는 방법을 배우기 전에, 효과적인 실습을 위해 바탕화면에 있던 test 폴더는 지우고 시작하기로 한다. 이제부터 Github 외부 저장소에 저장해둔 test 폴더 파일을 받아올 것인데, 폴더 이름이 동일하므로 지워두고 시작하는 것이다.

 

지금부터 소챕터 5. Github에 소스 반영 <- 에서 Github 원격 저장소에 저장해둔 파일을 받아올 것이다. 

$git clone <원격 저장소 주소>
$git clone  https://github.com/ [계정명] / [프로젝트명] .git

위의 명령어를 통해 프로젝트 명의 디렉토리를 만들고 그 안에 웹페이지에서 볼 수 있던 코드를 다운로드 할 수 있다. 

(이때, 위의 명령어에서 원격 저장소 주소를 불러올 때, '.git' 으로 끝나지 않으면 git clone으로 데이터를 불러올 수 없으므로 주의해야 한다.) 아래는 git clone을 사용한 결과이다.

위와 같이 git clone 명령어를 사용하고나면, 바탕화면에 test 폴더가 생성되는 것을 확인할 수 있다.

 

이때 폴더를 클릭해보면 원격저장소에 저장되었던 파일들이 그대로 나타나는 것을 아래의 캡처화면과 같이 확인할 수 있다. (.git 폴더는 숨김폴더로, 설정하면 아래와 같이 보이게 만들 수 있다. 설정해두지 않으면 보이지 않는 것이 정상이다.)

이제 git checkout 명령어를 사용해 main에서 벗어나 새로운 공간(branch)를 만들어보자. 

명령어는 아래와 같다.

$git checkout -b <브랜치명>
$git checkout <브랜치명>

위와 같은 명령어를 사용해 우리는 'feature-1'이라는 공간을 만들어보자. 

$git checkout -b feature-1

feature-1을 만든 후, 새로운 branch인 feature-1로 넘어간다. 이때 다시 main으로 돌아가고 싶으면 아래와 같은 명령어를 사용하면 된다. 

$git checkout main

위와 같은 명령어를 사용한 결과는 아래와 같다. 

이때 다시 브랜치를 feature-1으로 이동하며, test.txt를 임의적으로 수정해보자.

 

아래와 같이, test.txt 파일을 수정한다면

(기존의 Hello! 가 삽입된 test.txt파일에서 아래 문단을 추가하여 안녕하세요! 라는 문구를 추가하여 수정)

 

test.txt의 정보가 수정(Modified)되었다는 정보를 확인할 수 있다.

이때, main에 있던 origin 파일을 위와 같이 변경한 내용에 대해 아래와 같이 버전을 기록해둔다. 

그후 main으로 이동하면 수정 이전의 원래의 test.txt 파일이 있을 것이다. 아래와 같이 원본 파일을 확인할 수 있다.

이번에는 main 브랜치에서 파일을 수정해보자. 아까 feature-1에서와는 달리 이번에는 '안녕!' 이라는 새로운 문단을 추가해본다. (아래의 캡처화면 참고) commit 명령어를 통해 변동사항을 기록해둔다.

그후, 이번에는

서로 다른 브랜치(main과 feature-1)의 같은 곳에 위치한 코드(test.txt)가 다른 상황에서,

병합을 진행해보자. 

 

사용할 명령어는 아래와 같다. 

$git merge <브랜치명>
$git merge feature-1

 

이와 같은 상황에서 위와 같은 명령어를 사용하면 아래와 같이

충돌(conflict)이 일어나게 된다. 

충돌이 일어난 경우 위와 같이 어떤 내용이 다르고 어떤 내용을 수정할 수 있을지에 대한 정보가 뜨고, 위에서 선택해서 수정해줄 수 있다.

방금 main에서 수정한 current change와 feature -1에서 수정했던 Incoming change에 대해서 위와 같이 어떻게 다른지 확인할 수 있다.

나는 강의를 따라 feature-1에서 수정했던  '안녕하세요!'를 선택하여 수정하였고, add .  명령어를 통해 변경사항을 저장하기로 하였다. 

충돌이 일어난 부분에 대해 수정을 거치고 저장한 후, commit 명령어를 통해 버전을 기록한다.

그리고 feature-1에 대해서  merge를 다시 진행해보면 이미 merge가 완료되었으므로 'Already up to date'라는 문구를 띄워주고, merge를 진행하지 않는다.

 

7. Git GUI 활용하기

(1) git fork (다운로드 링크 바로가기)

 

이전 소 챕터 6. Github로 협업하기 <- 에서 clone 명령어를 사용하여 원격저장소의 소스를 가져왔는데, 이렇게 터미널 명령어를 사용하지 않고 GUI(Graphic User Interface: 그래픽 유저 인터페이스)

 

(2) VS code 확장 프로그램 : GitLens

fork 대신 위와 같은 확장 프로그램에서도 gui 활용이 가능하다. 

 

8. 학습 후기