Toolcon2014(http://toolcon.frends.kr/)에서 발표할때 사용한 발표 자료입니다.

1. WWeebbSSttoorrmm에에서서 자자바바스스크크립립트트
리팩토링하기
���������������������������������������������������������������

2. NHN Technology services
FFrroonntt--EEnndd DDeevveellooppmmeenntt TTeeaamm
이이름름
이이메메일일
www.facebook.com/coderifleman
주우영(코드소총수)
uyeong21c@gmail.com
페페이이스스북북
트트위위터터 www.twitter.com/coderifleman

3. Web WebStorm은은 IntelliJ로로 유유명명한한 JetBrains사사 에에서서
개개발발한한 크크로로스스 플플랫랫폼폼 프프런런트트엔엔드드 전전용용 IIDDEE다다.. 22000099년년
부부터터 개개발발하하여여 22001100년년에에 11..00 베베타타를를 발발표표했했으으며며
지지금금은은 버버전전 88이이다다..Storm

4. Web WebStorm은은 IntelliJ로로 유유명명한한 JetBrains사사 에에서서
개개발발한한 크크로로스스 플플랫랫폼폼 프프런런트트엔엔드드 전전용용 IIDDEE다다.. 22000099년년
부부터터 개개발발하하여여 22001100년년에에 11..00 베베타타를를 발발표표했했으으며며
지지금금은은 버버전전 88이이다다..Storm
0011
RReennaammee
0022
CChhaannggee
SSiiggnnaattuurree
0033
SSaaffee DDeelleettee
0044
IInnlliinnee LLooccaall
VVaarriiaabbllee
0055
IInnlliinnee
FFuunnccttiioonn
0066
EExxttrraacctt
VVaarriiaabbllee
0077
EExxttrraacctt
PPaarraammeetteerr
0088
EExxttrraacctt
MMeetthhoodd

5. 01
Rename
Refactor
ooff WWeebbSSttoorrmm!
메메서서드드의의 이이름름이이 그그 목목적적을을 드드러러내내지지 못못하하고고 있있다다면면 메메서서드드의의 이이름름을을 바바꿔꿔라라..
리리팩팩토토링링 :: Rename Method,, 마마틴틴 파파울울러러

6. DEMO1
velocity라는 매개변수와 지역변수의 이름이
마음에 안들어 speed라는 이름으로 변경하고
싶다. 하나하나 수정하기에는 귀찮고, 오타가
발생할 확률도 크다.
WebStorm의 Rename Refactor를 이용해서
이름을 변경해보자.
1/4

7. DEMO1
velocity 변수에서 마우스 오른쪽 버튼을
클릭하고 Refactor -> Rename 순으로
메뉴를 선택한다.
2/4

8. DEMO1
그럼 관련된 변수를 찾아 하일라이팅 하고
선택한 변수는 입력 가능한 상태로 변한다.
3/4

9. DEMO1
변수의 이름을 입력하면 관련된 변수도
한꺼번에 반영된다.
Rename Refactor를 이용하면 빠르고
정확하게 변수 이름을 변경 가능하다.
4/4

10. DEMO2 1/6
이번엔 지역변수가 아니라 객체의 프로퍼티의
이름을 변경해보자.
Greeter 객체의 sayHello 프로퍼티를 greet로
바꾸고 싶다.

11. DEMO2
객체의 프로퍼티는 지역변수와 다르게 다른
파일이나 객체에서 사용하고 있을 확률이 크기
때문에 이름을 변경하는 것이 위험할 수 있고
다른 객체의 프로퍼티지만 이름이 동일해서 혹시
같이 바뀌진 않을까 우려되기도 한다.
그럼 WebStorm의 Rename Refactor를 이용해서
Greeter 객체의 sayHello 프로퍼티의 이름을 변
경해보자.
2/6

12. DEMO2 3/6

13. DEMO2
rename 팝업창이 열리면 변경하고싶은
프로퍼티명을 입력한 후 Refactor 버튼을
클릭한다.
4/6

14. DEMO2
Greeter 객체의 sayHello 프로퍼티가
Greet로 이름이 변경됐다.
5/6

15. DEMO2
또한 의존관계를 분석하여 동일한 객체의
프로퍼티 역시 같이 변경됐다.
World 객체의 sayHello 프로퍼티는 이름이
같았음에도 다른 프로퍼티임을 인식하고
변경되지 않았음을 주목하자.
6/6

16. 02
Change Signature
함함수수나나 메메서서드드의의 파파라라메메터터를를 안안전전하하게게 추추가가하하거거나나 삭삭제제한한다다..
Refactor
ooff WWeebbSSttoorrmm!

17. DEMO 1/6
Stores 객체의 findBy 함수는 id를 전달받아
Id에 해당하는 상점 데이터를 반환한다.
어느날 정책이 변경되어 storeType도 전달
받아서 처리해야 한다고 하자.

18. DEMO 2/6
문제는 이 함수가 다른 곳에서 사용하고
있다는 것이다. 이 상황에서 무턱대고
함수의 시그니처를 변경하면 문제가 될 수
있다.
WebStorm의 ChangeSignature를 이용하여
리팩토링 해보자.

19. DEMO 3/6

20. DEMO 4/6
그럼 Change Signature 팝업창이 열린다.
추가 버튼(+)을 클릭하여 storeType 매개
변수를 추가한다.
Value는 기본값을 입력하는 란이다. 기본값이
있다면 입력하고 Refactor 버튼을 클릭한
다.

21. DEMO 5/6
storeType 매개변수가 추가되고
기본값을 셋팅하는 코드도 자동으로
생성된다.
이 코드는 직접 작성했다.

22. DEMO 6/6
이미 findBy함수를 사용하고 있던
코드에는 지정한 기본값이 자동으로
입력됐다.
WebStorm의 ChangeSignature
Refactor를 이용하면 함수의 시그니처
변경에서 올 수 있는 에러를 미연에
방지할 수 있다.

23. 03
Safe Delete
삭삭제제하하려려는는 변변수수나나 객객체체의의 의의존존 관관계계를를 파파악악하하여여 안안전전성성을을 검검사사한한다다..
Refactor
ooff WWeebbSSttoorrmm!

24. DEMO 1/7
rename때 사용했던 예제를 재활용 하여
설명하겠다.
Greeter의 greet 프로퍼티는 더이상 쓸모가
없다고 판단되어 삭제하고 싶다.

25. DEMO
하지만 greet 프로퍼티는 app.js에서 사용하고 있
다. 만약 개발자가 이 사실을 모르고
Greet 함수를 삭제하면 오류가 발생할 것이다.
자바스크립트 파일이 몇십개가 되는 상황이라면
일일이 파일을 확인하여 의존 코드를 찾는 것은
불가능할 것이다.
그럼 WebStorm의 SafeDelete Refactor를
사용하여 삭제를 시도해보자.
2/7

26. DEMO 3/7

27. DEMO 4/7

28. DEMO
삭제를 시도하면 프로퍼티를 다른곳에서
사용하고 있어 안전하지 않다고 경고한다.
View usages 버튼을 클릭해보자.
5/7

29. DEMO
그러면 어떤 파일의 몇행에서 사용하고
있는지 친절하게 알려준다. 이 코드를
더블 클릭해보자.
6/7

30. DEMO
그러면 해당하는 파일이 열리고 의존
코드를 보여준다.
여기서부터 개발자는 안전하게 삭제를
진행할 수 있다.
7/7

31. Inline Local Variable
간간단단한한 수수식식의의 결결과과값값을을 가가지지는는 임임시시변변수수가가 있있고고,, 그그 임임시시변변수수가가 다다른른 리리팩팩토토링링을을
하하는는데데 방방해해가가 된된다다면면 이이 임임시시변변수수를를 참참조조하하는는 부부분분을을 모모두두 원원래래의의 수수식식으으로로 바바꾸꾸라라..
리리팩팩토토링링 :: Inline Temp,, 마마틴틴 파파울울러러
04 Refactor
ooff WWeebbSSttoorrmm!

32. DEMO 1/4
디렉터리 목록을 directories라는 변수에 대입하고 그 변수를
사용하여 forEach 문을 작성했다.
사실 배열 코드만 읽어도 디렉터리 목록임을 분명히 알 수 있다.
그럼에도 불구하고 임시 변수로 또 설명하는 것은 자칫 코드가
장황하게 느껴질 수 있다.
이 변수를 WebStorm의 inline Refactor를 사용하여 리팩토링해
보자.

33. DEMO 2/4

34. DEMO 3/4

35. DEMO
임시변수가 삭제되고 배열 코드가 호출하는 곳
으로 옮겨졌다.
4/4

36. Inline Function
메메소소드드의의 몸몸체체가가 메메소소드드의의 이이름름 만만큼큼이이나나 명명확확할할 때때는는,, 호호출출하하는는 곳곳에에 메메소소드드의의
몸몸체체를를 넣넣고고,, 메메소소드드를를 삭삭제제하하라라..
리리팩팩토토링링 :: Inline Method,, 마마틴틴 파파울울러러
05 Refactor
ooff WWeebbSSttoorrmm!

37. DEMO 1/5
isOverValue와 isUnderValue 를 주목하자.
사실 이 함수의 몸체는 그 용도를 너무 잘
설명해주고 있다.
오히려 별도의 함수로 호출하는것이 복잡하게
느껴진다면 함수의 몸체를 호출하는 곳으로
옮기고 기존 함수는 삭제하는 것이 좋다.
WebStorm의 inline Refactor를 이용해서
리팩토링 해보자.

38. DEMO 2/5

39. DEMO
기존 함수는 삭제할 것이기 때문에 첫 번째
라디오 버튼을 선택하고 Refactor 버튼을
클릭한다.
3/5

40. DEMO
isOverValue 함수는 삭제되고 몸체는 호출
하는 곳으로 옮겨졌다.
isUnderValue 함수도 동일하게 리팩토링
해보자.
4/5

41. DEMO 5/5

42. Extract Variable
Inline Local Variable과과 반반대대되되는는 개개념념,, 함함수수나나 메메서서드드내내 여여러러번번 사사용용되되는는 수수식식을을
임임시시 변변수수로로 뽑뽑아아낸낸다다..
06 Refactor
ooff WWeebbSSttoorrmm!

43. DEMO 1/5
template URL을 셋하는 코드와 images URL 목록을
셋하는 코드가 너무 복잡하게 한곳에 밀집되어 있다.
이런 경우 코드를 읽기 힘들어 지기 때문에 변수를 이용해
뽑아내는게 좋다.

44. DEMO 2/5
변수로 뽑아낼 코드를 드래그한다.

45. DEMO 3/5

46. DEMO 4/5
코드가 임시변수로 뽑아지고, 임시변수명을
입력할 수 있는 상태가 된다. 여기에서는
template라고 명명했다.
하단의 images URL 목록을 초기화하는 코드도
뽑아낸다.

47. DEMO 5/5
코드를 훨씬 읽기 쉬워졌다. 직접 코드를 리팩토링 하는
것보다 WebStorm의 Refactor를 사용하면 코드를 수정
하는 시간이 줄일 수있다. 이 시간이 누적된다면 생산성
에 큰 영향을 미칠 것이다.

48. Extract Parameter
함함수수나나 메메서서드드 내내부부에에 작작성성한한 고고정정 값값을을 파파라라메메터터로로 안안전전하하게게 변변경경한한다다..
07 Refactor
ooff WWeebbSSttoorrmm!

49. DEMO 5/5
개발을 하다보면 종종 함수 몸체에 하드 코딩되는 값이
생긴다. 처음에는 고정 값이기 때문에 문제가 없었지만
정책의 변경으로 이 값이 동적으로 바뀌어야 한다고 할
때 WebStorm의 Extract Parameter를 이용하면 편하다.

50. DEMO 5/5
매개변수로 뽑아내야 하는 하드 코딩된 값을 드래그한다.

51. DEMO 5/5

52. DEMO 5/5
매개변수와 기본값을 초기화하는 코드를 자동 생성한다.
기본값은 하드 코딩 되어있던 값이다.
아래 msg-danger 역시 매개변수로 동일하게 뽑아내보자.

53. DEMO 5/5
파라메터로 뽑아냈다. 기존에 하드 코딩 되어있던 값은 기본
값으로 동작한다. 이로써 이 함수를 사용하고 있던 코드에도
문제가 없고 또 동적으로 값을 변경할 수 있도록 리팩토링 됐
다.

54. Extract Method
그그룹룹으으로로 함함께께 묶묶을을 수수 있있는는 코코드드 조조각각이이 있있으으면면,, 코코드드의의 목목적적이이 잘잘 드드러러나나도도록록
메메소소드드의의 이이름름을을 지지어어 별별도도의의 메메소소드드로로 뽑뽑아아낸낸다다..
리리팩팩토토링링 :: Inline Method,, 마마틴틴 파파울울러러
08Refactor
ooff WWeebbSSttoorrmm!

55. DEMO 1/11
Init 함수의 몸체를 보자, 굉장히 장황하여
코드를 읽기 힘들다.

56. DEMO
자세히 읽어보면 이 함수는 크게 3가지의
읽을 처리하고 있음을 알 수 있다.
Ajax로 조직 리스트
데이터를 요청한다.
반환된 데이터를
순회하여 객체화
한다.
객체화된 조직을 순
회하여 조직의 관계
를 조합한다.
2/11

57. DEMO
먼저 객체화 하는 코드를 함수로 뽑아
내보자. 해당하는 코드를 드래그한다.
3/11

58. DEMO 4/11

59. DEMO
그럼 자바스크립트 친화적으로 어느 범위에
코드를 뽑아낼 것인지 물어본다.
글로벌 구역에 뽑아낸다.
객체의 프로퍼티에 뽑아
낸다.
Init 함수의 내부 함수로
뽑아낸다.
익명함수의 내부 함수로
뽑아낸다.
5/11

60. DEMO
object assigned to 를 선택하여 객체의
프로퍼티로 뽑아낸다.
6/11

61. DEMO
Extract Function 팝업창이 열리면 원하는
함수명을 입력하고 OK 버튼을 클릭한다.
7/11

62. DEMO
해당하는 코드를 함수로 뽑아냈다. 전달인
자를 전달해야하는지, 반환 값을 만들어야
하는기 검사하여 코드를 자동으로 만들어 준
다. 이어서 객체화된 조직 리스트를 조합하
는 코드도 함수로 뽑아내보자.
8/11

63. DEMO
동일한 절차로 객체화된 조직 리스트를 조합
하는 코드를 함수로 뽑아냈다. 이 코드를 좀
더 Promise 스럽게 직접 정리해보자.
9/11

64. DEMO
코드를 읽기가 한결 쉬워졌다. 마지막으로
데이터를 요청하는 코드 역시 함수로 뽑아내
보자.
10/11

65. DEMO
처음에 장황하고 혼란
스럽던 코드가 깔끔하게
정리됐다. WebStorm의
Extract Refactor를
사용하면 빠르게
리팩토링하는 것이
가능하다.
11/11

66. WebStorm의의 Refactor를를 활활용용하하여여 효효율율적적이이고고 신신속속하하게게
읽읽기기 좋좋은은 코코드드로로 리리팩팩토토링링하하길길 바바랍랍니니다다..
감사합니다.