/JavaScript/리팩토링

/JavaScript/리팩토링

Refactoring

코딩하고 나면 코드가 비효율적인 면이 있다.

동작하는 것은 그대로 두고 코드 자체만 효율적으로 만들어서

가독성을 높이고 유지 보수하기 편하게 만들어 중복된 코드를 낮추는 것으로

코드를 다시 개선하는 작업을 리팩터링이라 한다.

활용

저번에 만들었던 버튼을 가지고 예시를 들어보자.

똑같은 코드를 사용하여 같은 버튼을 하나 더 만들어보면

작동은 하지만 처음에 만든 버튼만 value가 변하는 것을 볼 수 있다.

이런 식으로 변하는 걸 확인할 수 있다.

두 번째 버튼도 첫 번째 버튼처럼 사용하려면 다음과 같이 하면 된다.

이와 같이 id값을 구분해줘야 정상적으로 사용이 가능하다.

아주 사소한 예를 들어 보았지만 이러한 코드를 사용한 버튼이 여러 개일 경우

모두 다 바꿔줘야 하는 불편함이 있다.

이것을 보안해줄 만한 특수한 키워드가 있다. 이 키워드는 onclick과 같은

이벤트 안에서 코드가 속해있는 태그를 가리키는 this라는 키워드이다.

this

this라는 키워드를 사용해보자

버튼의 코드를 잘 살펴보면 중복되는 코드가 몇 개 보일 것이다.

document.querySelector(#'toggle') 코드, 이 코드는 사실상 자기 자신을 가리키고 있는 것이라고 봐도

무방하다.

이제 document.querySelector(#'toggle') 코드를 this로 변경해보자

이처럼 this를 사용하게 되면 태그의 id도 필요 없게 된다.

this를 사용하게 되면 예시처럼 같은 코드가 사용된 버튼을 여러 개 만든 다했을 때

일일이 구분 지어 변경할 필요 없이 사용 가능하다.

이처럼 중복된 코드를 최대한 제거하여 유지보수가 편리하도록 하는 게 가장 좋은 프로그램이다.

변수사용(var)

코드를 살펴보면 또 중복되는 게 있을 것이다.

바로 document.querySelector('body') 이 코드이다.

이 코드도 다음과 같이 제거해 주자.

이렇게 target이라는 변수를 사용하여 변수 안에 document.querySelector('body')를 넣어주고

코드 안에 중복되는 document.querySelector('body')를 변수명 target으로 변경해 주면

같은 동작을 하지만 중복되는 코드를 제거함으로 가독성이 좋아지고

또 target의 값을 변경해주면 target을 사용하는 코드가 한 번에 바뀌는 효과를 준다.

이로써 코딩을 할 때에 최대한의 중복을 찾아내 제거해주면 유지보수 즉 수정할 때에 편리하고

가독성이 높아지면서 우수한 프로그램이 된다.

from http://code-recipe.tistory.com/13 by ccl(A) rewrite - 2021-12-25 12:28:06