인프콘 2022에서 나눈 Stacked Changes 이야기 입니다. https://infcon.day/speaker/%ec%84%9c%ec%a7%80%ec%97%b0-%ec%bd%94%eb%93%9c%eb%a6%ac%eb%b7%b0-%ea%b9%83%ed%97%99/

1. 코드 리뷰의 또 다른 접근 방법:
Pull Requests vs. Stacked Changes
컨택스츠아이오 서지연

2. 코드 리뷰를 잘 한다는 것?

3. 코드 리뷰를 잘 한다는 것?

4. 출처 : 동아출판 중학교 국어 5 182쪽

5. 코드
변경 크기
작업
명확성
빠른
속도
. .

6. 코드
변경 크기
작업
명확성
빠른
속도
. .
근데 왜 잘 안되는거지?!

7. 1
콘텐츠
목차
content
Pull Request 관점에서의 코드 리뷰
Pull Request의 아쉬운점
2 Stacked Changes 관점에서의 코드 리뷰
Stacked changes란 무엇인가?
3 Graphite
너도 Stacked changes 할 수 있어!
4 결론
코드 리뷰를 잘 한다는 것

8. 1 Pull Request 관점에서의 코드 리뷰
Pull Request의 아쉬운점

10. “댓글 기능을 만들어 주세요”

11. 댓글 생성 API endpoint 추가 ➡ 백엔드 로직 추가 ➡ 프론트엔드 댓글 컴포넌트 추가
“댓글 기능을 만들어 주세요”

12. oldest commit
oldest commit
commit (main)
comment - API endpoint 생성
main
feature/add-comment
“댓글 기능을 만들어 주세요”

13. comment - 서버 로직 생성
oldest commit
oldest commit
commit (main)
comment - API endpoint 생성
main
feature/add-comment
“댓글 기능을 만들어 주세요”

14. comment - 프론트 컴포넌트 생성
oldest commit
oldest commit
commit (main)
comment - 서버 로직 생성
comment - API endpoint 생성
main
feature/add-comment
“댓글 기능을 만들어 주세요”

15. oldest commit
oldest commit
commit (main)
이전 작업에서 난 오타 수정
comment - 프론트 컴포넌트 생성
comment - 서버 로직 생성
comment - API endpoint 생성
main
feature/add-comment
“댓글 기능을 만들어 주세요”

16. oldest commit
oldest commit
commit (main)
이전 작업에서 난 오타 수정
line changed: +1500 / -200
comment - 프론트 컴포넌트 생성
comment - 서버 로직 생성
comment - API endpoint 생성
main
feature/add-comment
“댓글 기능을 만들어 주세요”

17. 이 과정 안 개발자들
작업자
프론트
리뷰어
댓글 코드 리뷰 빨리 끝나야
그 다음 작업 하는데…
도대체 리뷰 언제 해주는거야
코드… +1500 -200
어디서부터 봐야하는겨…
난 프론트만 봐야지…
그래도 양이…
막막하다…

18. 변경 내용이 왜 커졌던 걸까
작업 과정 수 많은
고민들과 커밋들
기능을 나누는 기준은?
오타 수정과 같은
아주 작은 단위의 수정은 어떻게 하지?!
한번 받을 때 한꺼번에 리뷰 받는게
빠를 것 같은데?!
작업마다 매번 main
돌아가서 새 branch
만들기 귀찮아 ㅠㅠ
main
feature/add-comment
점심 뭐 먹지??

19. 변경 내용이 왜 커졌던 걸까
main
feature/add-comment
리뷰어가 만난 것

20. 변경 내용이 왜 커졌던 걸까… 그 결과
이슈 못찾음
https://twitter.com/iamdevloper/status/397664295875805184

21. 리뷰 할 내용이 커지면…그 결과
코드 리뷰하기 매우 부담
작은 수정에도 모든 코드가 “리뷰 중” 상태
코드 리뷰 속도 느려짐

22. 코드 리뷰가 길어지면…그 결과
다른 작업 과의 충돌 가능성이 높아짐
코드 롤백 시, 모든 작업이 다 롤백
심적 부담감 증가

23. …그 결과
출처 : 무한도전 무한상사

24. 2 Stacked Changes 관점에서의 코드 리뷰
Stacked changes란 무엇인가?

25. oldest commit
oldest commit
commit (main)
main
feature/add-comment
“댓글 기능을 만들어 주세요”

26. oldest commit
commit
comment - API endpoint 생성 (ft-add-comment-api)
line changed: +10 / -3
흐름을 좌우가 아닌 아래에서 위로!
oldest commit

27. oldest commit
commit
oldest commit
comment - API endpoint 생성 (ft-add-comment-api)
line changed: +10 / -3
comment - 서버 로직 생성 (ft-add-comment-logic)
line changed: +20 / -15
구현 하나 하나 Stack 쌓듯이

28. comment - API endpoint 생성 (ft-add-comment-api)
line changed: +10 / -3
comment - 서버 로직 생성 (ft-add-comment-logic)
line changed: +20 / -15
oldest commit
commit
oldest commit
comment - 프론트 컴포넌트 생성 (ft-comment-comp)
line changed: +150 / -35
구현 하나 하나 Stack 쌓듯이

29. Stacked Changes
comment - API endpoint 생성 (ft-add-comment-api)
line changed: +10 / -3
comment - 서버 로직 생성 (ft-add-comment-logic)
line changed: +20 / -15
comment - 프론트 컴포넌트 생성 (ft-comment-comp)
line changed: +150 / -35
sequence of dependent code changes
tested, reviewed, and merged independently

30. Stacked Changes 장점
comment - API endpoint 생성 (ft-add-comment-api)
line changed: +10 / -3
comment - 서버 로직 생성 (ft-add-comment-logic)
line changed: +20 / -15
comment - 프론트 컴포넌트 생성 (ft-comment-comp)
line changed: +150 / -35
코드 변경 크기 📉
작업의 명확성 📈
리뷰 속도 📈

31. approve!
approve!
approve!
approve!
approve!
approve!
approve!
approve!
approve!
approve!
gt stack submit
gt stack submit
gt stack submit
gt stack submit
gt stack submit
gt stack submit
gt stack submit
gt stack submit
gt stack submit
gt stack submit
approve_10개_받은_내_모습.jpg
Stacked Changes 장점

32. 구글의 Gerrit, 메타의 phabricator
• Google internal로 사용하다가 Android Open
Source Project를 지원하기 위해 오픈
• 단위 : Patch set
• Patch set 단위로 코드 리뷰
• Facebook internal로 시작 후 외부로 공개
• Meta, Twitter, Dropbox, Uber 등에서 사용중
• LLVM, FireFox 프로젝트에서 사용중
• 단위 : Differential

33. Phabricator - Firefox
https://firefox-source-docs.mozilla.org/contributing/stack_quickref.html

34. 유명인이 좋다고 하면 뭔가 더 좋아보이죠?
“깃헙이 새로운 기능을 발표하는 것도 좋지만
우리가 진짜 필요한건 Stacked Diff 에요. 네?!”
“Stacked diff야 말로 우리가 깃헙에서
정말로 보고싶은 기능이에요!”

35. “오! 그럼 우리도 Phabricator 써볼까?”

36. “오! 그럼 우리도 Phabricator 써볼까?”
응..안돼..
https://www.phacility.com/phabricator/

37. 이미 GitHub 사용 중인데요?

38. 3 Graphite
너도 Stacked changes 할 수 있어!

39. Graphite
open-source CLI and a code review dashboard
write and review smaller pull requests, stay unblocked, and ship faster.
https://graphite.dev/

40. Graphite
open-source CLI and a code review dashboard
write and review smaller pull requests, stay unblocked, and ship faster.
https://graphite.dev/

41. comment - API endpoint 생성 (ft-add-comment-api)
line changed: +50 / -25
comment - 서버 로직 생성 (ft-add-comment-logic)
line changed: +200 / -15
oldest commit
commit
oldest commit
comment - 프론트 컴포넌트 생성 (ft-comment-comp)
line changed: +150 / -35
Graphite로 직접 stacked changes 해봅시다

42. Graphite - create stack

43. Graphite - create stack

44. Graphite - create stack

45. Graphite - create stack

46. Graphite - create stack

47. Graphite - create stack

48. Graphite - create stack

49. Graphite - create stack

50. Graphite - create stack
git branch <stack> 과 git commit

51. Graphite - submit stack

52. Graphite - submit stack

53. Graphite - submit stack
git push 와 PR 생성

54. Graphite - dashboard

55. Graphite - dashboard

56. Graphite - dashboard

57. Graphite - dashboard

58. https://github.com/jiyeonseo/stacked-changes-example
GitHub PR vs. Graphite Dashboard

59. GitHub PR vs. Graphite Dashboard

60. GitHub PR vs. Graphite Dashboard
작업자의 고민과 의식의 흐름까지 공유
작업의 결과 공유

61. “리뷰 요청 수가 너무 늘어나는 거 아닐까요?”

62. “리뷰 요청 수가 너무 늘어나는 거 아닐까요?”
10줄 변경 & 10번 리뷰 vs. 100줄 변경 & 1번 리뷰
https://twitter.com/iamdevloper/status/397664295875805184

63. “좋은건데 왜 GitHub은 안하는거죠?”
Open Source, Community led project
10줄 변경 & 10번 리뷰 < 100줄 변경 & 1번 리뷰
팀 내 협업
10줄 변경 & 10번 리뷰 > 100줄 변경 & 1번 리뷰

64. 4 결론
코드 리뷰를 잘 한다는 것

65. 코드
변경 크기
작업
명확성
빠른
속도
. .
결론

66. Pull Requests
결론
Stacked Changes
From `main` branch
기능 단위 변경
작업 전체 변경분 비교
Changes를 `main` 과 비교
From previous changes
코드 변화 단위 변경
Stack 별로 비교
Changes를 차곡 차곡 쌓이는 것

67. 결론
여러 팀이 함께 작업하는 경우
잦은 리뷰 처리가 어려운 경우
작은 변경이 많은 경우
팀이 빠르게 움직이고자 하는 경우
Pull Requests Stacked Changes

68. 결론
코드 리뷰는 💚함께💚 하는 것
중요한건 💚공감💚

69. 모두 즐거운 코드 리뷰 하세요 💚