Github Desktop 연습

1. github에서 repository 생성

2. 생성한 repository에 들어가서 github 주소 복사하기
   

3. github desktop 열고 로그인 후 왼쪽 상단의 file -> clone reposiroy 순으로 선택합니다.
   

4. 새로 뜬 창에서 URL을 누르고 아까 github home page에서 복사한 repository 주소를 붙여줍니다.
   

5. 그러면 조금 로딩을 하고 이러한 창으로 바뀝니다. 이곳은 현재 우리가 작업할 repository입니다! -> 이제 작업할 파일들을 초기셋팅합니다. open in Visual Studio Code를 눌러줍니다.
   

6. 그러면 vs code가 뜨고 index.html파일을 생성하고 저장합니다. vs code에서 저장을 누르고 desktop으로 오면 이렇게 바뀌어 있습니다.
   
   

7. 왼쪽 아래 commit to main을 눌러 줍니다. -> 서류과정에서 깃허브 볼 때 커밋 메세지도 본다고 하시니 무슨 커밋을 했는지 한눈에 보이게 메세지를 작성하는게 좋겠죠?!
   

8. 그럼 이제 아래와 같이 push 버튼이 생깁니다.
   

9. push 버튼을 누르면 한번에 적용이 됩니다.(현재 브런치가 main이기 때문에 한번에 적용이 되는 것입니다! pull request에 대해서는 뒤에서 설명 드릴께요!)

10. 이제 우리의 작업 공간인 develop 브런치를 생성하겠습니다.
    Current branch를 누르면 아래와 같이 뜹니다! 여기서 New branch를 눌러줍니다
    

11. 그러면 이렇게 브랜치의 이름을 설정할 수 있습니다.
    (지금은 main 밖에 없기 때문에 main에서 브랜치를 따옵니다(default)! 이후에 뒤에서 특정 브랜치에서 새로운 브랜치를 따오는 것을 설명 드릴께요!) -> 이번에 따오는 브랜치 명은 develop이라고 하겠습니다.
    

12. create branch를 누르면 이제 Current branch는 develop으로 바뀌는 것을 볼 수 있습니다. 이제 이 브랜치를 사용한다고 publish해줍니다.!
    

13. develop 브랜치에서 vscode를 실행해보면 main과 내용이 동일한 것을 볼 수 있습니다.(main에 있던 내용들을 브랜치 따왔기 때문입니다!)

14. 이제 각자 작업할 공간인 feature 브랜치를 따겠습니다.
    아까와 동일하게 Current branch 탭을 누르시고 New branch를 눌러줍니다.
    

15. 이번에는 11번 과정과 다르게 base branch 선택과 브랜치 이름을 설정하라고 합니다! feature branch는 develop에서 따와 줍니다!
    develop을 선택하고 새로운 branch 명은 test라고 하겠습니다.
    

16. 12번과 동일하게 publish 등록을 해줍니다. 이제 vscode를 열어 index.html을 수정해보겠습니다.
    아래와 같이 header, main, footer를 추가했습니다.
    

17. 이제 github desktop으로 돌아오면 6번과 7번 과정과 같은 것을 볼 수 있습니다. 똑같이 커밋을 누르고 push를 누르면 9번과 다르게 한번에 적용되지 않는 것을 볼 수 있습니다. (이제는 main branch가 아니기 때문입니다.)

18. 내가 작업한 것을 다른 브랜치에 적용하고 싶다면 Create Pull Request를 눌러줍니다. -> 그러면 github home page가 뜨는 것을 볼 수 있습니다.
    

19. 아래 사진의 1번은 내가 작업하던 branch 이름을 2번에는 내가 작업하던 것을 합칠 branch를 골라줍니다. 그리고 3번의 create pull request를 해줍니다.(내가 작성한 코드 합쳐줘 라고 요청하는 것입니다!)
    

20. 그러면 아래와 같이 코드를 합쳐달라는 요청 창으로 이동을 하는데 여기서 merge를 해줍니다.(현재 저희는 모두가 merge 권한을 가지고 있지만 권한을 특정 인원에게 한정할 수 있다고 합니다!, 일단 현재 저희는 아무나 1번 버튼을 눌러 요청을 승인해 merge 할 수 있습니다.) -> merge pull request 누르고 다음에 나오는 confirm merge를 눌러줍니다. 2번을 누르면 pull request를 끊을 수도 있습니다.
    

21. 자! 그럼 test에서 수정한 내용을 위의 Merge pull request 버튼을 눌러 develop에게 merge 시켜줬습니다. 이 과정 이후 Delete branch를 해서 branch를 삭제하고 새로 브랜치를 딸 수 있지만 선택사항인 것 같습니다. 지금은 삭제하지 않고 진행하겠습니다.

22. 이제 다시 github desktop으로 와서 Current branch를 develop으로 옮겨주고 옆에 Fetch origin 탭을 눌러줍니다.

23. 그러면 아래와 같이 pull을 받으라고 합니다.(pull을 눌러 아까 test branch 에서 수정하고 develop branch에 merge한 내용들을 받아줍니다.)
    

24. vscode를 실행하면 develop branch에 있는 index.html파일 내용이 변경된 것을 볼 수 있습니다.

여기까지가 혼자 깃허브 데스크탑 사용할 때 입니다.

아래에서는 협업할 때 깃허브 데스크탑 활용하는 내용입니다.

• 아래 상황에서는 test라는 사람과 yws라는 사람으로 branch를 나눠 한 쪽이 작업을 하고 develop으로 merge를 한 경우 다른 한 쪽은 어떻게 행동해야되는지 알려주는 내용입니다.

---

25. 이제 develop에서 test가 아닌 새로운 브랜치를 따겠습니다.
    현재 branch가 develop인 상태에서 14번, 15번 과정과 같이 새로운 브랜치를 생성합니다. 이번에는 yws 브랜치라고 하겠습니다.(만약 현재 branch가 develop이 아닌 다른 branch라면 main과 해당 branch 중에 고르라고 나올 것 입니다! develop branch에서 해주세요)
    위의 했던 과정과 같이 publish를 눌러 등록해줍니다.

26. yws 브랜치도 develop에서 따왔기 떄문에 develop branch의 파일들과 내용이 동일한 것을 볼 수 있습니다.

아래와 같이 yws branch에서 index.html에 header 내용을 추가하고 commit을 하겠습니다.

커밋을 한 후, 다시 일부만 수정을 해줍니다.(아직 push하지 않았습니다. 그리고 일부만 수정한 부분은 commit을 하지 않은 상태입니다.)

27. 이제 test 브랜치로 이동합니다. 그러면 아직 commit을 하지 않은 작업들에 대해 아래와 같이 어떻게 할 것인지 물어봅니다. (만약 commit을 하지 않은 부분이 없다면 아래와 같은 창은 뜨지 않습니다.)
    -> 위에 버튼은 stash라는 공간에 잠시 보관하겠다는 버튼이고, 아래 버튼은 변경사항을 가지고 다른 브랜치로 이동하겠다는 것입니다. 저는 위에 stash라는 공간에 보관하고 다른 브랜치로 이동하겠습니다!)
    
    이렇게 stash라는 공간에 잠깐 맡겨두고 이 친구는 잠시 잊고 이따가 보겠습니다.

28. test branch로 이동하고, test branch에서는 yws branch에서 수정한 내용을 아직 모르고 있습니다.(yws branch에서 수정한 내용을 아직 develop branch으로 push(merge)를 하지 않았고 test branch는 develop branch에 내용을 받아오지 않았기 때문입니다.)
    

29. test branch에서도 내용을 수정해주고 commit하고 이번에는 develop으로 push까지 해줍니다. 19번 부터 24번의 과정(develop에서의 merge와 pull과정)을 반복합니다.
    
    

30. 이제 develop branch가 갱신 되었으니 yws branch에 변경된 내용을 적용해주러 이동합니다. 그러면 왼쪽 아래에 저희가 잠깐 보관해놨던 작업 내용들이 있는 Stashed가 있습니다.
    
    Stashed Changes를 누르면 아래와 같은 창이 뜹니다. Restore를 눌러줍니다.
    

31. 그리고 test branch의 수정된 내용으로 갱신된 develop branch의 내용을 아래의 과정을 통해 yws branch로 가져옵니다.
    Current branch 탭을 눌러주고 아래의 Choose a branch to merge into yws 버튼을 눌러줍니다.
    

32. 그럼 아래와 같은 창이 뜹니다. develop branch에 있는 내용을 받아와야 되므로 develop를 선택하고 2번을 눌러줍니다.
    

33. 그러면 충돌(conflict)이 일어나지 않는 한 잘 받아 온 것을 볼 수 있습니다.

34. 이제 다시 yws branch에서 작업하던 것을 이어가면 됩니다.
    만약 아래와 같은 창이 뜨지 않았다면 당황하지 않고
    
    아래의 사진처럼 위의 탭에서 repository를 누르고 해당 폴더를 열거나 vscode를 열 수 있습니다.
    

35. 마저 작업을 끝내고 commit과 develop branch에 push와 pull request를 날려줍니다.
    

36. github home page에서 request를 수락하고 github desktop에서 current branch를 develop으로 선택하고 pull을 받습니다!

develop이 갱신되었으므로 test에 갱신된 내용을 적용하러 갑니다.

37. test에서도 31번과 32번 과정으로 새로 갱신된 develop branch의 내용을 가져옵니다.

37번 과정까지 끝내셨다면 develop, test, yws branch의 index.html 파일 내용이 같은 것을 확인할 수 있습니다.