토토등 2015 - 코드의 품질 - 이철희

1. 코드의 품질
CODE QUALITY
Created by /Ironhee @이철희

2. 명품이라 불리는 제품들은 공통점이 있습니다.

3. 잘 동작합니다. 또한,

4. 부품 하나하나에는
정성과 철학이 담겨있고,

5. 그러한 부품들의 결합은
예술로 느껴지기까지 합니다.

6. 우리는 품질이 높다고 말합니다.

7. 소프트웨어는 어떨까요?

8. GMAIL

9. STARCRAFT

10. 이러한 소프트웨어들에도 공통점이 있습니다.

11. 코드가 잘 동작할 뿐만 아니라
잘 정돈되어 있습니다.

12. 즉 코드의 품질이 높습니다.

13. 코드를 제대로 짜지 않는다면...

14. 코드를 수정하거나 추가하기 힘들어집니다.

15. 코드를 이해하기 힘들어집니다.

16. 팀원들에게 비난받을수 있구요.

17. 당신의 코드를 본 팀원은 질문을 할 겁니다.

18. 그리고 야근을 합니다.

19. 코드의 품질을 높이는 방법

20. 반복하지 않기
Don't Repeat Yourself

21. 같은 코드가 중복된다면,
수정도 여러번해야 한다.

22. Example Data
<ul>
<li class="item" data-id="5">Lee</li>
<li class="item" data-id="3">Kim</li>
<li class="item" data-id="15">Hong</li>
</ul>

23. BAD
function removeItem (id) {
$('.item[data-id="' + id + '"]').remove();
}
function updateItemText (id, text) {
$('.item[data-id="' + id + '"]').html(text);
}

24. GOOD
function getItem (id) {
return $('.item[data-id="' + id + '"]');
}
function removeItem (id) {
getItem(id).remove();
}
function updateItemText (id, text) {
getItem(id).html(text);
}

25. 한가지만 하기
Do One Thing

26. 함수는 한 가지를 해야한다.
그 한가지를 잘해야 한다.
그 한가지만을 해야 한다.

27. BAD
// ... some code
isEdible: function () {
if (this.expirationDate > Date.Now() &&
this.approvedForConsumption === true &&
this.inspectorId !== null) {
return true;
} else {
return false;
}
}

28. GOOD
// ... some code
isEdible: function () {
return this.isFresh() &&
this.isApproved() &&
this.isInspected();
}

29. 의미있게 이름짓기
Reasonable Naming

30. BAD
// ... some codes
function checkData ( b, c ) {
return a[ b ][ c ].booleanData1 === true;
}

31. GOOD
// ... some codes
function getCell( map, x, y ) {
return map[ x ][ y ];
}
function hasBomb ( cell ) {
return cell.hasBomb === true;
}

32. 지뢰찾기에서 사용되는 코드입니다.
Game Options Help

33. 나쁜 주석 피하기
Avoiding Bad Comment

34. 나쁜 코드에 주석을 달지 마라.
새로 짜라.

35. BAD
/*
이것은 지뢰찾기 맵에서의 한 방에 지뢰가 있는지 없는지를 확인하는 함수입니다.
======Arguments======
a: 지뢰찾기 맵입니다.
b: 방의 가로 좌표입니다.
c: 방의 세로 좌표입니다.
*/
function checkData ( a, b, c ) {
return a[ b ][ c ].booleanData1 === true;
}

36. GOOD
function getCell( map, x, y ) {
return map[ x ][ y ];
}
function hasBomb ( cell) {
return cell.hasBomb === true;
}

37. 라이브러리 사용하기
Using Library

38. 우리가 구현하려는 대부분의 기능은
이미 라이브러리로 구현된 경우가 많다.

39. 또한 문서화가 잘 되어있어,
학습비용도 줄어든다.

40. 유지보수 또한 활발하게 이루어진다.

41. 개발, 문서화, 학습 비용을 상당히 아낄 수 있다.

42. 코딩 스타일
Coding Style

43. 많은 사람이 코드를 작성했더라도
마치 한 사람이 작성한 것처럼 보여야 한다.

44. JQUERY JAVASCRIPT STYLE GUIDE
// Bad
var foo = true;
var bar = false;
var a;
var b;
var c;
// Good
var a, b, c,
foo = true,
bar = false,
arr = [
a,
b,
c
];
Full

45. AIRBNB JAVASCRIPT STYLE GUIDE
// bad
var items = getItems(),
goSportsTeam = true,
dragonball = 'z';
// good
var items = getItems();
var goSportsTeam = true;
var dragonball = 'z';
Full

46. 자신의 팀에 맞는,
하나의 코딩 스타일 가이드를 선택합시다.

47. 테스트 주도 개발
Test-Driven Development

48. 테스트를 먼저 짜고,
코드를 작성하는 개발 방법.

49. 자세한내용은 켄트벡의 TDD 검색하기!

50. 보이스카우트 규칙
Boy Scout Rule

51. 캠프장은 처음 왔을 때보다
더 깨끗하게 해놓고 떠나라.

52. 코드를 Pull 했을 때 보다,
더 깨끗하게 해놓고 Push 하라.

53. 단순한 설계규칙 지키기
simple design

54. 단순한 설계규칙 4가지
1. 모든 테스트를 실행한다.
2. DRY원칙에 따라 중복을 제거한다.
3. 프로그래머 의도를 표현한다.
4. 클래스와 메서드 수를 최소로 줄인다.

55. 한 Commit 에는 하나의 변경사항만 있어야 한다.

56. 코드의 품질을 어떻게 측정하죠?

57. 코드 품질을 측정하는 유일한 척도 =
분당 내지르는 WTF! 횟수
(WTF: What The F**k)

58. 팀에게 존경받는 개발자가 되고싶나요?

59. 팀에게 고통을 주고싶나요?

60. 당신에게 달려있습니다.

61. 감사합니다

62. 참고자료
켄트벡의 구현패턴
익스트림 프로그래밍
클린 코드
테스트 주도 개발