React & Github - Conflict(병합 충돌)

1. Conflict - 병합 충돌

• Conflict란? Github의 다른 branch 에서 같은 파일의 같은 줄에 작업을 할때 코드가 중복되어 발생하는 충돌 상태를 의미한다. Git으로 프로젝트를 관리하게 되면 자주 발생되는 부분이다.

(Conflict 발생 과정)

2. Conflict가 발생하는 이유?

• 개인 프로젝트를 제외하고 2명이상 팀 프로젝트를 진행하게 되면 팀 단위로 하나의 프로젝트를 진행하면서 서로 다른 branch에서 같은 파일내 같은 줄에 작업을 하는 경우가 많다. 이때, Pull Resquest를 올린 뒤, branch와 branch가 Merge(병합) 되는 과정에서 서로 중복되는 부분에 변경사항이 있을 시, 어떤 branch의 내용을 반영해야 할지 판단할 수 없기 때문에 Conflict가 일어나게 된다.

3. Conflict 발생 예시

• 예를들어 김코드와 김개발 이라는 2명의 개발자가 Git과 Github로 프로젝트를 진행하면서 name.md 파일의 같은 줄에 코드를 작성하는 상황이라고 가정해보자

1. 먼저 feature/gaebalKim 브랜치에서 name.md 파일에 Hello I’m GaebalKim 이라고 코드를 작성하여 Github에 push 하고 PR을 작성했다.
   

2. 동시에 김코드가 feature/codeKim 브랜치에서 name.md 파일에 Hello I’m code Kim이라고 코드를 작성하여 Github에 push 하고 PR을 작성했다.
   

3. Github상에는 김개발과 김코드의 PR이 존재하고 있는데 김개발이 올린 PR이 main branch에 merge 되었다.
   

4. Github의 remote(로컬)에서 main branch에 코드가 업데이트 되었기에 main branch에서 git pull origin main으로 최신화 시켜준다.
   

5. 병합하고자 하는 브랜치로 이동후에 main branch와 작업 중인 branch를 병합시켜주면? 아래와 같이 자동 병합 즉, merge 하려는 순간 Conflict가 발생했다는 문구를 작업자에게 표시해준다.
   

6. Github 상에서도 김코드 branch에서 아래와 같이 Conflict가 발생해 병합을 할수 없는 상황임을 알 수 있도록 보여주게 된다. (즉, Conflict로 인해 main branch와 병합을 할 수 없다는 뜻으로 이해하면된다.)
   

4. Conflict 해결

• merge 중에 conflict이 일어나게 되면 Git은 문제가 발생했음을 직감하고 병합을 중단하기 때문에, 이런 상황이 일어났을땐 당황하지 않고 침착하게 문제원인을 찾아서 해결하는 것이 중요하다. 충돌이 발생한 부분과 이전 코드 상황을 비교해서 어떤 코드를 사용할지 변경 사항을 수정해서 충돌을 해결하고 작업을 계속해서 진행해야 한다.

5. Conflict 해결 예시

1. VS Code의 Source Control 탭을 클릭 후, Merge Changes 안에서 충돌이 발생한 파일을 확인하여 수정을 해줍니다. 충돌이 발생한 name.md파일을 열면, 아래의 기호로 섹션이 구분되어 있기 때문에 어떤 부분에서 충돌이 발생했는지를 확인할 수 있다.

• <<<<<< : 내가 작업 중인 브랜치의 변경된 부분의 시작 위치 (김코드의 코드)
• ====== : 충돌이 발생한 코드의 구분선 (<와 =이 한 블록 =와 >이 한 블록)
• >>>>>> : 병합하면서 들어온 브랜치의 변경된 부분의 종료 위치 (김개발의 코드)

2. Conflict를 수정했더라도 git에 push 하기 이전까진 끝난 상태가 아니므로 충돌 부분을 수정하고 git add 명령어를 통해서 추가 상태를 만들어 줘야 한다.

git add .

3. Conflict를 해결했다는 Commit을 남겨서 병합을 마무리 해준다.

git commit -m "Fix: conflict 해결"

4. 다시 git remote(원격 저장소)에 push 해준다.

git push origin feature/codeKim

Conflict 요약

• 충돌이 발생하면 코드를 확인해서 충돌이 일어난 부분을 확인한다.
• 문제를 확인후 수정하면 해당 파일을 추가 상태를 만들어 커밋을 하고 병합을 완료한다.
• git remote branch에 push 해준다.

Reference

• 해당 Conflict 내용은 위코드에서 제공해준 자료를 정리한것으로 무단으로 사용하는것을 엄격히 금지합니다.