[toolcon2014] webstorm에서 자바스크립트 리팩토링하기

WebStorm에서 자바스크립트

리팩토링하기

한글폰트�� :�� 아리따�� |�� 영문폰트�� :�� OpenSans�� Background�� :�� http://goo.gl/KEMB23��

NHN Technology services Front-End Development Team

이름

이메일

www.facebook.com/coderifleman

주우영(코드소총수)

[email protected]

페이스북

트위터 www.twitter.com/coderifleman

Web WebStorm은 IntelliJ로 유명한 JetBrains사 에서 개발한 크로스 플랫폼 프런트엔드 전용 IDE다. 2009년 부터 개발하여 2010년에 1.0 베타를 발표했으며 지금은 버전 8이다. Storm

01 Rename

02 Change Signature

03 Safe Delete

04 Inline Local Variable

05 Inline Function

06 Extract Variable

07 Extract Parameter

08 Extract Method

01

Rename

Refactor of WebStorm

메서드의 이름이 그 목적을 드러내지 못하고 있다면 메서드의 이름을 바꿔라.

리팩토링 : Rename Method, 마틴 파울러

DEMO1

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

1/4

DEMO1

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

2/4

DEMO1

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

3/4

DEMO1

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

4/4

DEMO2 1/6

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

DEMO2

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

2/6

DEMO2 3/6

DEMO2

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

4/6

DEMO2

Greeter 객체의 sayHello 프로퍼티가 Greet로 이름이 변경됐다.

5/6

DEMO2

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

6/6

02

Change Signature

함수나 메서드의 파라메터를 안전하게 추가하거나 삭제한다.


DEMO 1/6

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

DEMO 2/6

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

DEMO 3/6

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

DEMO 5/6

storeType 매개변수가 추가되고 기본값을 셋팅하는 코드도 자동으로 생성된다.

이 코드는 직접 작성했다.

DEMO 6/6

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

03

Safe Delete

삭제하려는 변수나 객체의 의존 관계를 파악하여 안전성을 검사한다.


DEMO 1/7

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

DEMO

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

2/7

DEMO 3/7

DEMO 4/7

DEMO

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

5/7

DEMO

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

6/7

DEMO

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

7/7

Inline Local Variable

간단한 수식의 결과값을 가지는 임시변수가 있고, 그 임시변수가 다른 리팩토링을 하는데 방해가 된다면 이 임시변수를 참조하는 부분을 모두 원래의 수식으로 바꾸라.

리팩토링 : Inline Temp, 마틴 파울러

04 Refactor of WebStorm

DEMO 1/4

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

DEMO 2/4

DEMO 3/4

DEMO

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

4/4

Inline Function

메소드의 몸체가 메소드의 이름 만큼이나 명확할 때는, 호출하는 곳에 메소드의 몸체를 넣고, 메소드를 삭제하라.

리팩토링 : Inline Method, 마틴 파울러


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

DEMO 2/5

DEMO

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

3/5

DEMO

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

4/5

DEMO 5/5

Extract Variable

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


DEMO 1/5

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

DEMO 2/5

변수로 뽑아낼 코드를 드래그한다.

DEMO 3/5

DEMO 4/5

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

DEMO 5/5

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

Extract Parameter

함수나 메서드 내부에 작성한 고정 값을 파라메터로 안전하게 변경한다.


DEMO 5/5

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

DEMO 5/5

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

DEMO 5/5

DEMO 5/5

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

DEMO 5/5

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

Extract Method

그룹으로 함께 묶을 수 있는 코드 조각이 있으면, 코드의 목적이 잘 드러나도록 메소드의 이름을 지어 별도의 메소드로 뽑아낸다.

리팩토링 : Inline Method, 마틴 파울러


DEMO 1/11

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

DEMO 자세히 읽어보면 이 함수는 크게 3가지의 읽을 처리하고 있음을 알 수 있다.

Ajax로 조직 리스트 데이터를 요청한다.

반환된 데이터를 순회하여 객체화 한다.

객체화된 조직을 순회하여 조직의 관계를 조합한다.

2/11

DEMO

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

3/11

DEMO 4/11

DEMO 그럼 자바스크립트 친화적으로 어느 범위에 코드를 뽑아낼 것인지 물어본다.

글로벌 구역에 뽑아낸다.

객체의 프로퍼티에 뽑아 낸다.

Init 함수의 내부 함수로 뽑아낸다.

익명함수의 내부 함수로 뽑아낸다.

5/11

DEMO

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

6/11

DEMO

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

7/11

DEMO

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

8/11

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

9/11

DEMO

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

10/11

DEMO

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

11/11

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

감사합니다.