프로그라피 정기 세션에서 Github으로 협업하는 방법에 대해 발표 및 실습한 자료입니다.

1. 프로그라피 정기 세션 공통 강연
Git 협업
Issue, Pull Request, 협업 규칙, Flow

2. Github로 협업하기

3. 들어가기 앞서..
주의! 회사마다 협업 방식은 매우매우매우 다릅니다!
오늘 실습할 방식은 제 경험을 바탕으로 구성했습니다!

4. 간단 로직
이슈 파기 이슈 해결 풀리퀘 보내기 코드 리뷰 Merge! :)
이렇게 합니다

5. 할 일 작성하기
(버그 해결..
이거 만들기..
저거 고치기..)
이슈 파기 이슈 해결 풀리퀘 보내기 코드 리뷰 Merge! :)
간단 로직
이렇게 합니다

6. 브랜치 파서 코딩코딩코딩…
다하고
git add
git commit
git push
이슈 파기 이슈 해결 풀리퀘 보내기 코드 리뷰 Merge! :)
간단 로직
이렇게 합니다

7. 리뷰 해달라고
같이 일하는 팀원들에게 요청!
이슈 파기 이슈 해결 풀리퀘 보내기 코드 리뷰 Merge! :)
간단 로직
이렇게 합니다

8. 정성스레 한 땀 한 땀
리뷰해주십니다..
이슈 파기 이슈 해결 풀리퀘 보내기 코드 리뷰 Merge! :)
간단 로직
이렇게 합니다

9. 내 코드가
머지되었어요!
아이 씐나
이슈 파기 이슈 해결 풀리퀘 보내기 코드 리뷰 Merge! :)
간단 로직
이렇게 합니다

10. 이슈 파기 이슈 해결 풀리퀘 보내기 코드 리뷰 Merge! :)
간단 로직
사실은.. 이렇게 합디다..
CI 통과 실패!!!테스트 고치고
다시 푸시하고
…
무한반복

11. 이슈 파기 이슈 해결 풀리퀘 보내기 코드 리뷰 Merge! :)
간단 로직
사실은.. 이렇게 합디다..
ㄴㄴ 이거 고치
셈
Add
Commit
Push
무한반복..
CI 통과 실패!!!테스트 고치고
다시 푸시하고
…
무한반복

12. 이슈 파기 이슈 해결 풀리퀘 보내기 코드 리뷰 Merge! :)
간단 로직
사실은.. 이렇게 합디다..
ㄴㄴ 이거 고치
셈
Add
Commit
Push
무한반복..
CI 통과 실패!!!테스트 고치고
다시 푸시하고
…
무한반복

13. 실전 꼬고!
옆자리 짝궁과 사이좋게 Github 레파지토리를 팝시다!

14. 브랜치 전략 정하기
Example.
- 이슈마다 브랜치를 생성한다.
- 각 브랜치는 develop 브랜치에 merge 한다.
- 마일스톤 목표가 끝나면 master브랜치로 develop브랜치를 merge한다.
- 혹은 front는 이렇게, back은 이렇게 한다.

15. 이슈 생성

16. 이슈가 뭔가요?
- 새로운 추가될 가능 , 개선 해야할 가능 , 버그 등등
- 할 일 전부 이슈로 등록하고 그 이슈기반으로 작업을 진행
상품 리스트 페이지 로딩 속도 개선
상품 상세 페이지 이미지 안 뜨는 버그 고치기
메일 안 보내지는 버그 고치기
이슈 생성

17. 저희는 간단하게 트렐로를 사용해봅시다. :)
이슈 생성

18. 각자 개인 보드를 생성해주세요!
이슈 생성

19. 이슈 리스트들을 구성합니다.
이슈 생성

20. 카드를 생성해주세요!
이슈 생성

21. 카드를 생성해주세요!
Description은 최대한 구체적
으로!
누가 봐도 무슨 일을 할건지 알
수 있게 작성하면 좋습니다!
이슈 생성

22. 카드를 생성해주세요!
Members에 자기자신을
지정해주세요!
이슈 생성

23. 카드를 생성해주세요!
Labels에 언제 마일스톤에
해당되는지 달아줍니다!
그 외에도 ‘back’ ‘front’혹은
‘bug’같은 것들을 달아주셔도
됩니다.
이슈 생성

24. 카드를 생성해주세요!
단계 별로 일을 해결해야한다면
checklist도 만들 수 있어요
이슈 생성

25. 카드를 생성해주세요!
꼭 해결해야할 날짜가 있다면
날짜도 기입해줍시다.
이슈 생성

26. 이슈 해결

27. 이제 이슈를 해결하기로 했으니
카드를 ‘IN PROGRESS’단계로 옮겨둡니다.
이슈 해결

28. 이 이슈를 처리할
새로운 브랜치를 만들어 checkout 합니다.
git checkout -b fix-bug-in-user-page
브랜치 이름은 이슈에 대해 파악할 수 있도록
간략하게 지으면 좋습니다!
이슈 해결

29. vim(vi or nano 그냥 편집기 아무거나) fix_bug.py
이슈를 해결(하는 척)합시다!
이슈 해결

30. 이슈 해결

31. 버그를 해결했으니 푸쉬합시다!
git add .
git commit -m “버그 고침”
git push --set-upstream origin fix-bug-in-user-page
이슈 해결

32. 풀리퀘 날려보기

33. Pull request
Github 레포지토리에 들어가서 Pull request를 날려봅시다!

34. 브랜치를 어디서 어디로 합칠것인지 확실하게 정해주세요!
Pull request

35. 파일이 어떻게 달라졌는지 확인할 수 있습니다.
Pull request

36. 풀리퀘스트를 생성하고 한 일들을 작성합니다.
Pull request

37. Github에서는 대부분 텍스트를 마크다운으로 작성가능해요!
Pull request

38. 코드리뷰를 위해 옆자리 짝궁을 리뷰어로 지정해주세요!
Pull request

39. 코드 리뷰 해주기

40. 이제 리뷰할 시간! 상대방의 코드를 맘 껏 털어보세요.
코드 리뷰

41. 코드리뷰를 하며 러버덕 효과를 누릴 수 있습니다!
코드 리뷰

42. Add your review를 누르면
확인할 수 있습니다!
Github에서는리뷰어가 코드리뷰에대해
3가지의 의사표현을 할 수 있어요!
코드 리뷰

43. Github에서는리뷰어가 코드리뷰에대해
3가지의 의사표현을 할 수 있어요!
그냥 코멘트만 달아줍니다.
찬성도 반대도 아니에요
코드에서 버그를 발견했습니
다!
고쳐달라고 요청을합니다!
이 코드가 합쳐지는 것을 동의
합니다!
코드 리뷰

44. 저는 보통 다음과 같은 단계로 코드 리뷰를 진행해요!
1. File changed에서 변경사항 확인
2. 이해가 안되면 local에 받아서 돌려보기
3. File changed에서 한 줄 한 줄 마다 댓글을 답니다.
4. 의사표현을 남깁니다( Approve/ Request changes / 그냥 comment)
코드 리뷰

45. 어떻게?? 이상한게 보이면 코멘트를 달아줍니다.
자문자답한거 안비밀..
번호에 마우스를 갖다대면 +
버튼이 뜹니다. 그럼 원하는 줄
에 코멘트를 달 수 있어요
코드 리뷰

46. 코드 리뷰
어떻게?? 이상한게 보이면 코멘트를 달아줍니다.
자문자답한거 안비밀..
ADD Single comment를 누
르면 즉시 코멘트가 달립니다.
Start a review를 누르면
코멘트가 달리고 pending 상
태가 됩니다.
Pending 상태는 나만 볼 수 있
는 상태에요!

47. 코드 리뷰
만약에 변경사항 생겨서 다시 커밋, 푸쉬하더라도
풀리퀘를 다시 만들 필요가 없어요!
git add .
git commit -m “주석 처리함”
git push

48. 코드 리뷰
해당 브랜치에서 커밋, 푸쉬하면 자동으로 풀리퀘 안에 포함되어 올라갑니다.

49. 드디어 Merge!!!

50. Merge
이제 별다른 문제가 없다면 Merge 해줍시다!
원하시는 merge를 선택해서
머지하면 됩니다.

51. Merge
트렐로에서도 Done으로 옮겨주세요!

52. 근데.. 왜.. 왜 이렇게 일하나요?
그냥 막 코딩쿠다다다다다 하고싶다..

53. 모든게 기록으로 남는다.
우리는 망각의 동물이니.. 일주일만 지나도 내가 한 코딩인지 기억안나더라구요..
(이게 내가 짠 코드라고? 눼가?? 진짜??? 이런 더러운 코드가??)

54. 나중에.. 이력서 쓸 때 좋습니다..
무슨 일했는지 이슈기반으로 작성하면 매우 좋음

55. 서로가 서로를 감시함

56. 이 이슈 언제 팠는
데 아직 해결 못함?
니가 이 이슈 맡은거 다
알고 있드아아

57. 나중에 무슨 문제 생기면???
에비 난 모르는일일세!
니가 짠 코드아잉겨!!
ㅋㅋㅋㅋㅋㅋ방관꿀잼서버 터졌다!!!

58. 코드리뷰 했으니 1/n 책임제
리뷰하는 순간 이미 한 배를 탄 것이야..

59. 리뷰할수록 아름다워지는 코드

60. 이런 장점들이 있으니..
모두 열심히 협업합시당 :)