Javascript Refactoring Workshop

1. Javascript
Refactoring
Workshop
(2019년 4월 13일)
https://avengerschool.com/courses/20190413

2. XPer 스터디 모임 소개
스터디 주제 : Martin Fowler 의 Refactoring 2판
스터디 기간 : 2019.1.8 ~ 2019.4.9
스터디 멤버 : 강현정, 김두진, 김성식, 김형우, 류성진, 박계홍, 박기석, 박해성,
박현철, 신현호, 오재훈, 윤지현, 한경완

3. Refactoring 2nd Edition

4. 워크샵 목표
Refactoring 2판 (Martin Fowler) 1장의 코드를 리팩토링하면서
- 코드 스멜을 찾는 방법
- Characterization Test 를 작성하는 방법
- 레거시 코드를 리팩토링을 하는 방법
- 자동화된 리팩토링 도구를 사용하는 방법
- 클린 코드를 작성하는 방법
을 실습으로 경험한다.

5. 시간표
● Warm Up ( 오재훈 )
● Characterization Test ( 박기석 )
● 리팩토링
○ Decomposing the statement Function ( 김두진 )
○ Splitting the Phase of Calculation and Formatting ( 김성식 )
○ Reorganizing the Calculation by Type ( 강현정 )
● 회고 ( 박계홍 )

6. statement.js 코드를 봅시다.
- 이 코드는 좋은 코드일까요? 나쁜
코드일까요?
- 코드에 개선할 부분이 있나요?
코드 품질

7. 코드스멜 찾기
코드 스멜(Code Smell)
- Kent Beck 이 만든 용어
- 리팩토링이 필요한 코드를
식별하게 도와준다.
- 언제 리팩토링을 해야 하는지를
알려준다.

8. 코드 스멜 목록
Smell Name 설명
1
Alternative Classes with Different
Interfaces 동일한 일을 하는데 인터페이스가 다른 클래스들이 있다.
2 Comments 코드 이해를 방해하는 코멘트
3 Data Class VO 도 아닌 것이, 메소드가 하나도 없다.
4 Data Clumps 같이 몰려 다니는 데이터 덩어리가 있다.
5 Dead Code 어디에도 사용되지 않는 코드
6 Divergent Change 클래스나 메소드를 변경하는 이유가 여러가지다.
7 Duplicated Code 코드가 중복되어 있다.
8 Feature Envy 메소드가 다른 클래스의 다양한 메소드들을 사용한다.
9 Global Data 글로벌 변수, 클래스 변수, 싱글톤 같은 글로벌 데이터들
10 Insider Trading 데이터 트레이딩은 결합도를 너무 증가시킨다.
11 Large Class 클래스가 길다. ( 200라인 이상 )
12 Lazy Element function 이나 class 가 하는 일이 별로 없고, 존재할 가치가 없다.

9. 코드 스멜 목록
Smell Name 설명
13 Long Function 메소드가 길다 ( 10~20 라인 이상 )
14 Long Parameter List 패러미터 리스트가 길다(3개 이상)
15 Loops function pipeline 으로 작성가능한데 루프를 사용했다.
16 Middle Man 별로 하는 일이 없는 중간 클래스
17 Mutable Data 변경할 수 있는 데이터
18 Mysterious Name 동일한 기능이 여러가지 방식으로 구현되어 있다.
19 Primitive Obsession 프리미티브 타입에 데이터를 저장하고, 연산하는 경우 ( 추상화 부족 )
20 Refused Bequest 슈퍼 클래스의 메소드를 서브클래스가 구현하지 않는다.
21 Repeated Switches 동일한 조건들이 반복되는 스위치 문
22 Shotgun Surgery 하나를 변경하기 위해서 여러 군데를 수정해야 한다.
23 Speculative Generality
클래스, 메소드가 필요해서 만들어진 것이 아니라, 필요할 것으로
예상해서 만든다.

10. 코드스멜 찾기
발견된 코드 스멜들

11. 리팩토링을 시작해 볼까요?

12. 잠깐!! 리팩토링이란?
1.명사형
- 소프트웨어를 더 쉽게 이해할 수 있고,
- 적은 비용으로 수정할 수 있도록
- 겉으로 보이는 동작의 변화 없이 내부 구조를 변경하는
것
2.동사형(Refactor)
- 일련의 리팩토링을 적용하여 겉으로 보이는 동작의
변화없이
- 소프트웨어의 구조를 바꾸다.

13. 리팩토링
그림 출처 : http://vitalflux.com/top-6-refactoring-patterns-to-help-you-score-80-in-code-quality/

14. 리팩토링의 전제조건
리팩토링=외부 동작을 바꾸지 않으면서 내부
구조를 개선하는 것
코드를 변경했을 때, 외부 동작이 바뀌지
않았다는 것을 증명해야 한다.

15. 코드스멜 - 관련 리팩토링
Smell Name 적용할 리팩토링
1
Alternative Classes with Different
Interfaces Change Function Declaration, Move Function, Extract Superclass
2 Comments Extract Function, Change Function Declaration, Introduce Assertion
3 Data Class
Encapsulate Record, Remove Setting Method, Move Function, Extracr
Function, Split Phase
4 Data Clumps Extract Class, Introduce Parameter Objects, Preserve Whole Object
5 Divergent Change Split Phase, Move Function, Extract Function, Extract Class
6 Duplicated Code Extract Fundtion, Slide Statements, Pull Up Method
7 Feature Envy Move Function, Extract Function
8 Global Data Encapsulate Variable
9 Insider Trading
Move Function, Move Field, Hide Delegate, Replace Subclass with Delegate,
Replace Superclass with Delegate
10 Large Class Extract Class, Extract Superclass, Replace Type Code with Delegate
11 Lazy Element Inline Function, Inline Class, Collapse Hierarchy

16. 코드스멜 - 관련 리팩토링
Smell Name 적용할 리팩토링
13 Long Parameter List
Replace Parameter with Query, Preserver Whole Object, Introduce
Parameter Object,
Remove Flag Argument, Combine Functions into Class
14 Loops Replace Loop with Pipeline
15 Message Chain Hide Delegate, Extract Function, Move Function
16 Middle Man
Remove Middle Man, Inline Function, Replace Superclass with Delegate,
Replace Subclass with Delegate
17 Mutable Data
Encapsulate Variable, Split Variable, Slide Statements, Extract Function,
Separate Query From Modifier, Remove Setting Method, Replace Derived
Variable with Query,
Combine Functions into Class, Combine Functions into Transform, Change
Reference to Value
18 Mysterious Name Change Function Declaration, Rename Variable, Rename Field
19 Primitive Obsession
Replace Primitive with Object, Replace Type Code with Subclasses,
Replace Conditional with Polymorphism, Extract Class, Introduce Parameter
Object

17. 코드스멜 - 관련 리팩토링
Smell Name 적용할 리팩토링
20 Refused Bequest
Push Down Method, Push Down Field, Replace Subclass with Delegate,
Replace Superclass wirh Delegate
21 Repeated Switches Replace Conditional with Polymorphism
22 Shotgun Surgery
Move Function, Move Field, Combine Functions into Class, Combine
Functions into Transform,
Split Phase, Inline Function, Inline Class
23 Speculative Generality
Collapse Hierarchy, Inline Function, Inline Class, CHange Function
Declaration,
Remove Dead Code
24 Temporary Field Extract Class, Move Function, Introduce Special Case

18. 레거시 코드 리팩토링

19. Legacy Code 정의하기
Legacy Code 란?

20. Legacy Code 정의하기
“Code Without Test”
( Michael Feathers )
People are writing legacy code right now, maybe on your project.
( http://www.objectmentor.com/resources/articles/WorkingEffectivelyWithLegacyCode.pdf )

21. Legacy Code Refactoring - One Big Step
One Big Step

22. Legacy Code Refactoring
Extract Method
Test
Move Method
Test
Extract Subclass + Push Down
Test
Extract Subclass + Push Down
Test
Small Baby Steps

23. 레거시 코드 리팩토링
Baby Step ( One small step at a time ) 으로 리팩토링할 수 있는가?
1분마다 테스트 코드를 돌려서 동작이 바뀌었는지 확인할 수 있는가?

24. Characterization Test 작성 방법
1. 첫번째 테스트 작성하기
2. 테스트 커버리지를 측정한다.
3. 테스트 되지 않은 코드를 커버할 수 있는 새로운
테스트를 작성한다. ( Characterization Test - 커버리지
도구 사용 )
4. 테스트 커버리지가 100%에 가까워질 때까지 테스트
코드를 작성한다.