[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기
•
50 j'aime•7,502 vues
Toolcon2014(http://toolcon.frends.kr/)에서 발표할때 사용한 발표 자료입니다.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à [Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기
Similaire à [Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기 (20)
Plus de 우영 주
Plus de 우영 주 (15)
Dernier
Dernier (6)
[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기
- 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를를 활활용용하하여여 효효율율적적이이고고 신신속속하하게게 읽읽기기 좋좋은은 코코드드로로 리리팩팩토토링링하하길길 바바랍랍니니다다.. 감사합니다.