[생활코딩] 코드 리팩토링

 

 

리팩토링 Refactoring

 

공장으로 다시 보내서 좀 더 개선한다 라는 의미로 볼 수 있다.
코드가 비효율적인 면들이 생기기도 하는데, 코드 리팩토링은 코드 자체를 효율적으로 만드는 작업이다.

 

리팩토링은 아래와 같은 사항을 개선하는 작업이다.
- 코드의 효율성
- 가독성
- 유지보수의 편리성
- 중복된 코드 (제거)

소프트웨어가 커지고 복잡해지는 경우 틈틈히 리팩토링을 해야 좋은 프로그램이 나온다.

 

<input id="night_day" type="button" value="night" onclick="
          if(document.querySelector('#night_day').value === 'night'){
            document.querySelector('body').style.backgroundColor = 'black';
            document.querySelector('body').style.color = 'white';
            document.querySelector('#night_day').value = 'day';
          } else {
            document.querySelector('body').style.backgroundColor = 'white';
            document.querySelector('body').style.color = 'black';
            document.querySelector('#night_day').value = 'night';
          } ">

 

위 코드를 리팩토링 해보자.

★태그 자기자신을 가르키는 자바스크립트 코드는 this 로 대체할 수 있다.
onclick과 같이 이벤트로 실행되는 코드들은 그 코드가 속해있는 태그의 인덱스 태그를 this로 대신할 수 있다.

 

document.querySelector('#night_day') 는 onclick 이벤트가 속해있는 input 태그 자기자신이다.
그래서 이것을 this로 바꾸자. 
그리고 id 인덱스 태그를 참조하는 것은 this가 하면 되기 때문에 id값을 지워도 된다.

※인덱스 태그는 해당 태그의 선택자(ex: id , class 등등) 를 의미한다. 

 

 <input type="button" value="night" onclick="
   if(this.value === 'night')

그러면 이렇게 간편한 코드가 되었다.

 

 

 

코딩 잘하는 방법 중 하나는 중복을 다 없애버리는 것이다.
여러가지 기술들이 출현한 계기는 중복 제거에서 나왔을 가능성이 높다.
'중복을 끝까지 쫓아가서 없애라!' 

★중복된 코드는 변수(variable)을 만들어 대체할 수 있다.
중복되는 코드를 제거하기 위해 긴 코드를 변수 하나로 정의하여 변수이름을 대신 사용하는 것이다.

var target = '중복되는 내용' 으로 if절 앞에 작성하고, 이하 중복되는 내용을 target으로 대체하면 된다.

document.querySelector('body') 라는 문구가 계속 등장하기 때문에
var target = document.querySelector('body'); 을 적어주고 저 문구가 있던 곳에 모두
target이라는 이름의 변수를 넣어주면 한 번에 적용되고,
target 변수 값에 해당하는 document.querySelector('body')를 다른 것으로 대체하는 경우
이름이 target 변수를 쓰고있는 모든 코드가 한번에 바뀌는 효과를 가진다.
1억 개의 변수가 있는 경우 굉장한 효과를 볼 수 있다.

 

<input type="button" value="night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'night'){
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      this.value = 'day';
    } else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      this.value = 'night';
    }
  ">

 

위 사항들을 모두 적용한 결과 이와 같이 깔끔한 코드로 바뀌었다.