개발자 취업을 준비한다면 프론트엔드, 백엔드 가릴 것 없이 반드시 할 줄 알아야하는 git
개인 프로젝트만 진행했던 필자는 협업에서 git을 다루는 법을 잘 모른다.
이번 기회에 branch는 왜 나누고, 어떻게 기능 개발을 각각 다른 사람이 담당하고,
어떻게 그걸 합치고, 어떻게 그걸 배포하는지 알아보고자 한다.
협업 과정
- 리더가 큰 틀을 만든다.
- Repository에 이를 업로드한다.
- 팀원이 이를 clone한다.
- 자기 담당 영역을 구현한다.
- 이를 업로드한다.
- 리더는 변경 사항을 확인하고, main branch에 merge 한다.
리더가 해야할 일
1. 전체 프레임 만들기
리더는 멤버들이 각자의 파트를 맡아서 업무를 진행하기 위해 필요한 큰 틀을 제공한다.
예를들어 레이아웃을 제공한다고 해보자.
리더가 app.js를 만들었다.
2. Repository에 등록하기
이제 전체 프레임을 팀원들이 공유하게 될 Repository에 등록한다.
Github에 Repository를 이미 만들어놨다는 가정 하에 진행합니다.
$ git add .$ git commit -m "[본인의 commit 메세지]"$ git remote add origin [Repository_URL]$ git push origin [branch 이름]짠! 이제 Github에 업로드가 된 것을 확인할 수 있다!
멤버가 해야할 일
이제 Repository에 전체적인 프레임이 올라왔다!
이제 본인이 담당한 파트에 코드를 작성하기 시작한다.
여기서는 newBe1.js를 담당했다고 가정하자.
1. Repository를 clone하기
$ git clone [Repository_URL] [폴더 이름]여기서 폴더 이름을 입력할지 말지는 본인의 선택이다.
만약, 입력하지 않으면 생성되는 폴더 이름이 Repository의 이름으로 자동 지정된다.
위에서 보여드렸던 Repository로 예를 들어보면,
$ git clone [Repository_URL]이렇게 하면, 폴더 이름이 newBe가 되고,
$ git clone [Repository_URL] newBe1이렇게 하면, 폴더 이름이 newBe1이 된다.
2. 본인의 branch 생성하기
$ git checkout -b [브랜치 이름]메인이 되는 branch에 직접 코드를 넣는건 너무 리스크가 크기 때문에,
본인의 branch를 생성해서 작업하자.
3. 본인 담당 구역 작업하기
newBe1.js를 담당했으므로, 열심히 코드를 작성한다.
4. 업로드 하기
여기서도 아까와 마찬가지의 방법이다.
$ git add .$ git commit -m "[본인의 commit 메세지]"$ git push origin [본인이 생성한 branch 이름]필자는 newBe1이라는 이름으로 branch를 생성했고, Repository는 다음과 같이 변경되었다.
생성한 branch가 보이고, 방금 push한 내용이 들어가 있는 것을 볼 수 있다.
그리고, 상단에 Compare & pull request라는 버튼이 보인다.
모두가 해야할 일
1. 코드 리뷰 및 점검 하기
이제 멤버의 코드가 push 되었으니, 코드 리뷰 등 점검 작업을 시작한다.
파일이 나열된 곳 오른쪽 상단의 commits에 들어가서 추가된 코드의 리뷰를 진행하자.
리더가 해야할 일
이제 모두의 리뷰가 끝나고 기능에 합쳐도 괜찮겠다는 결정을 내렸다!
그럼 이제 해야할 일은 merge이다.
1. merge 하기
방금 말했던 Compare & pull request 버튼을 클릭하고 merge를 진행하자.
메세지를 입력하고, create pull request를 누른다.
그러면 아래와 같은 화면이 될 것이다.
다른 거 하다가 화면 캡쳐를 까먹어서 다른 Repository로 대체합니다
이제 Merge pull request를 클릭, Confirm merge를 통해 완전히 merge하도록 하자.
짠! main branch에 newBe1, newBe2 멤버가 작성한 코드가 업데이트 된 것을 확인 할 수 있다!
궁금한 것들
여러 명이 push를 한 경우에는 어떻게 처리할까?
2명 이상의 팀이 업무를 진행하게 되면, 분명히 push가 동시 다발적으로 발생할 것이다.
아래는 newBe1과 newBe2가 모두 push된 상황이다.
이럴 때는 순서를 정해놓고 merge를 진행한다.
newBe1, newBe2 순서로 진행해보자.
Able to merge라는 문구가 보인다! merge가 가능하다는 뜻이다. 진행해보자.
main branch에 제대로 merge가 된 것을 확인할 수 있다.
이번에는 newBe2를 merge해보자.
잘된다. 여기까지는 문제가 없다.
문제는 newBe1이 newBe2가 main에 merge되어 있다는 사실을 모른다는 것이다..!
newBe1은 아무것도 모르는 상태로 자신의 작업을 더 진행하게 된다.
이러면 나중에 push를 하게 될 때, 충돌이 발생할 것이다.
원본에 있는 파일들이 push되는 branch에서는 없기 때문이다.
$ git fetch위 커맨드를 통해서 main 브랜치에 어떤 변화가 발생했는지 확인하도록 하자.
newBe1 기준에서는 다음과 같은 결과가 나온다.
새로운 branch인 newBe2가 보인다.
이제 newBe2로 인한 변경 사항을 자기 자신 newBe1에 반영해주도록 하자.
$ git merge origin/[다른 팀원의 브랜치]혹시 merge를 위해서 메세지를 작성하라고 한다면,
메세지를 입력하고 ,esc를 누른 후, :wq를 입력하고 enter해주면 된다.
이제 newB1 작업 환경에 newBe2 branch에서 작성했던 코드를 볼 수 있다.
$ git add .$ git commit -m "[본인의 commit 메세지]"$ git push origin [본인이 생성한 branch 이름]아까와 마찬가지로 위 과정을 거쳐서 newBe1 branch에 push해준다.
그런데...
Compare & pull request가 안 보인다?!
newBe1은 자신의 branch에 새로운 기능을 추가하고, push까지 했는데,
main branch에서는 Compare & pull request가 보이지 않는다!
이럴 때는,
우측 상단의 Contribue를 누르고, Open pull request를 사용하면 된다.
merge가 가능한 상황이라면 Able to merge가 보일 것이다.
PR 메세지를 작성하고 Create pull request를 클릭하자.
물론, 이건 팀원이 하는게 아니라 리더가 맡아서 하는게 좋을 것이다.
여러 사람이 merge를 진행하면 꼬일 가능성이 높기 때문이다.
Can’t automatically merge.
만약, 두 명이 같은 파일에 손을 대는 경우에 문제가 발생한다.
예를들어, newBe1.js 파일을 newBe1에서도, newBe2에서도 수정하고 push했다고 가정하자.
리더는 newBe1이 먼저 변경이 발생했기 때문에 이를 먼저 merge했다.
아무 이상이 없다.
이어서 newBe2에 변경이 있는 것을 알았고, merge를 시도한다.
그런데...
Can’t automatically merge.라는 문구가 나온다.
merge를 자동으로 할 수 없는 상황이라고 한다. 흠...
이런 경우 팀장은 newBe2에게 말을 한다. Conflict가 발생했으니 확인해달라고.
newBe2는 다른 팀원들의 코드를 merge하면서 Conflict를 찾는다.
$ git merge origin/[다른 팀원의 브랜치]
터미널에서도 이런 문구가 나온다. 자동적으로 merge를 못하니까 고쳐서 commit하라고.
이제, 문제가 발생할 것으로 예상되는 newBe1.js를 살펴보자.
녹색 부분에 Current Change라고 나오면서, newBe2가 작성한 코드가 보이고
파란색 부분에 Incoming Change라고 나오면서, 이미 main에 merge된 newBe1의 코드가 나온다.
어떻게 해결하면 될까?
녹색 부분 위쪽에 작은 글씨들 중에서 Accept Incoming Change를 선택한다.
이미 main에 merge된 것을 따라가야하기 때문이다.
그러면 자동으로 변경 사항이 반영되어 수정되는 것을 확인 할 수 있다.
newBe2는 이를 다시 add, commit, push한다.
다시 merge를 시도해보자.
짠! Able to merge가 보인다. Conflict가 해결된 것이다.
참고 자료
dongyeon1201님 블로그
minwest님 블로그
12716님 블로그
dewworld27님 블로그
korinkorin님 블로그
imacoolgirlyo님 블로그
parkirae님 블로그
