Upgrade to Pro — share decks privately, control downloads, hide ads and more …

200107 SSAFY

하조은
January 07, 2020

200107 SSAFY

협업을 위한 클린코드

하조은

January 07, 2020
Tweet

More Decks by 하조은

Other Decks in Technology

Transcript

  1. 협업을 위한 클린코드
    Samsung Software Academy For Youth
    하조은

    View Slide

  2. Overview
    경험 공유
    01
    담대한 협업과 클린코드
    라이브 코딩1
    02
    나쁜 코드를 깨끗하게
    라이브 코딩2
    03
    함수형 프로그래밍
    라이브 코딩3
    04
    테스트와 스타일 가이드

    View Slide

  3. 경험 공유
    "담대한 협업과 클린코드"

    View Slide

  4. Index
    야생 개발자
    01
    담대한 협업
    02
    클린코드
    03
    뱅샐 개발자
    04

    View Slide

  5. 야생 개발자
    01

    View Slide

  6. 야생?

    View Slide

  7. Wild [waɪld]

    animals or plants live or grow
    in natural surroundings and are
    not looked after by people.

    View Slide

  8. 야생 개발자?

    View Slide

  9. 협업 경험이 적은 개발자

    View Slide

  10. 문과 출신 개발자

    View Slide

  11. 나름대로 문학소년

    View Slide

  12. 프로그래밍을
    처음 배우며 했던 생각

    View Slide

  13. "프로그래밍,
    이거 제법 문과스러운데?"

    View Slide

  14. 시(詩) 쓰듯 프로그래밍

    View Slide

  15. 멋진 코드는
    함축적인 코드

    View Slide

  16. View Slide

  17. View Slide

  18. 대출 상품 페이지.html

    View Slide

  19. 우아한 코드는
    적당히 어려운 코드

    View Slide

  20. View Slide

  21. 깨끗한 코드는
    짧고 예쁜 모양의 코드

    View Slide

  22. View Slide

  23. View Slide

  24. 조금 어려워도 옆사람만
    이해하면 된거 아니야?

    View Slide

  25. 응, 아니야

    View Slide

  26. 협업을 위한
    코드가 아니니까

    View Slide

  27. 협업을 위한 코드?

    View Slide

  28. 담대한 협업
    02

    View Slide

  29. View Slide

  30. 담대한 협업?

    View Slide

  31. 공유와 피드백

    View Slide

  32. 냄맡빠공

    View Slide

  33. 냄새를
    맡으면
    빠르게
    공유

    View Slide

  34. 개발자의 공유와 피드백

    View Slide

  35. 코드 리뷰

    View Slide

  36. 개발자의 담대한 협업
    코드 리뷰를 잘하는 것

    View Slide

  37. 협업하기 좋은 코드
    리뷰하기 좋은 코드

    View Slide

  38. View Slide

  39. 클린코드
    03

    View Slide

  40. Subject
    깨끗한 코드
    01
    의미있는 이름
    02
    함수와 주석
    03
    오류 처리
    04

    View Slide

  41. Subject
    깨끗한 코드
    01
    의미있는 이름
    02
    함수와 주석
    03
    오류 처리
    04

    3장과 4장의 내용

    7장의 내용

    View Slide

  42. 코드의 품질을 측정하는 척도

    분당 "이건 뭐지?"를 외치는 정도

    View Slide

  43. View Slide








  44. WTF?
    WTF?
    WTF?
    WTF?
    WTF?
    WTF?
    WTF?

    View Slide




  45. WTF?!!?@
    WTF?!!@!?@!!

    View Slide

  46. View Slide

  47. 깨끗한 코드
    "깨끗한 코드는 잘 쓴 문장처럼 읽힌다"
    by. Grady Booch (p.10)

    View Slide

  48. View Slide

  49. 간결하지만
    잘 읽히진 않는다

    View Slide

  50. View Slide

  51. 문장으로 읽힌다

    View Slide

  52. View Slide

  53. 의미 있는 이름
    "의도를 분명하게 밝혀라"
    by. Uncle Bob (p.23)

    View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. 의미 있는 이름은
    의도를 분명히 드러낸다

    View Slide

  62. 의미 있는 이름은
    팀을 소통하게 만든다

    View Slide

  63. 함수
    "프로그래밍은 여느 글짓기와 비슷하다"
    by. Uncle Bob (p.61)

    View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. View Slide



  70. 서술적으로
    표현하기

    View Slide

  71. 주석

    View Slide

  72. 코드 자체가 글인데
    주석은 왜 써야해?
    by. Uncle Bob (઱ࢳী ؀ೠ Ѽ೧)

    View Slide

  73. 주석을 쓰기 시작하면
    코드의 가독성이 떨어진다

    View Slide

  74. 주석 대신 코드로
    이야기하자

    View Slide

  75. View Slide

  76. View Slide

  77. 서술적인
    이름을 짓자

    View Slide

  78. View Slide

  79. View Slide

  80. 오류 처리
    "논리와 오류 코드를 뒤섞지 마라"
    by. Uncle Bob (p.142)

    View Slide

  81. 논리와 오류 코드를
    뒤섞지 마라

    View Slide

  82. 비즈니스 로직에
    집중할 수 있게 해라

    View Slide

  83. 논리와 로깅 코드를
    뒤섞지 마라

    View Slide

  84. "필터가 변경될 때마다
    이벤트 로그를 남겨주세요!"

    View Slide

  85. View Slide

  86. View Slide

  87. View Slide

  88. 로깅 코드가 숨어들어
    논리에 집중하기 어려움

    View Slide

  89. 논리와 로깅 코드를
    뒤섞지 말자

    View Slide

  90. View Slide

  91. View Slide

  92. 로깅 코드가 분리되어
    논리에 집중된다

    View Slide

  93. Summary
    깨끗한 코드
    01
    문장처럼 읽힌다
    의미있는 이름
    02
    의도를 드러내라
    함수와 주석
    03
    프로그래밍은 글짓기
    오류 처리
    04
    논리에 집중해라

    View Slide

  94. 뱅샐 개발자
    04

    View Slide

  95. View Slide

  96. 멋진 코드는
    함축적인 코드?

    View Slide

  97. 멋진 코드는
    설명이 필요 없는 코드!

    View Slide

  98. 우아한 코드는
    적당히 어려운 코드?

    View Slide

  99. 우아한 코드는
    예상 가능한 코드!

    View Slide

  100. 깨끗한 코드는
    짧고 예쁜 모양의 코드?

    View Slide

  101. 깨끗한 코드는
    수정이 용이한 코드!

    View Slide

  102. 휴가 떠나서
    불안해 하지 말자

    View Slide

  103. 클린코드는
    협업을 위한 코드다

    View Slide

  104. 라이브 코딩1
    "나쁜 코드를 깨끗하게"

    View Slide

  105. 나쁜 코드를 깨끗하게
    리팩토링 해보자

    View Slide

  106. https://github.com/joeunha/clean-code-ssafy
    Source Code

    View Slide

  107. Remind
    깨끗한 코드
    01
    문장처럼 읽힌다
    의미있는 이름
    02
    의도를 드러내라
    함수와 주석
    03
    프로그래밍은 글짓기
    오류 처리
    04
    논리에 집중해라

    View Slide

  108. Live Coding ▶

    View Slide

  109. 라이브 코딩2
    "든든한 우리형, 함수형"

    View Slide

  110. "깨끗한 코드는
    한 가지를 제대로 한다"
    by. Bjarne Stroustrup

    View Slide

  111. 클린코드를 위한
    함수형 프로그래밍

    View Slide

  112. 한 가지를 제대로 하는 방법

    View Slide

  113. 논리를 꼬집어라

    View Slide

  114. 결괏값으로 소통하라

    View Slide

  115. 함수를 합성하라

    View Slide

  116. Live Coding ▶

    View Slide

  117. 라이브 코딩3
    "테스트와 스타일 가이드"

    View Slide

  118. 믿을 수 없는 코드

    View Slide

  119. 믿을 수 있는 조건을
    검증하는 방법 ✅

    View Slide

  120. Unit Test

    View Slide

  121. JEST

    View Slide

  122. Live Coding ▶

    View Slide

  123. 서로 다른 코드 스타일

    View Slide

  124. 일관된 코드 스타일을
    적용하기 위한 도구

    View Slide

  125. LINT

    View Slide

  126. ESLint

    View Slide

  127. Live Coding ▶

    View Slide

  128. Thank You

    View Slide