1 리팩토링이란?

코딩을 하다보면 비효율적인것이 생기기 마련인데
동작하는 건 그대로 두고 코드자체를 효율적으로 만들어
코드의 가독성을 높이고 유지보수를 편리하게 만들고
중복된 코드를 낮추는 방향으로 코드를 개선하는 작업이다

예를들어 위에만 있던 버튼을 밑에도 넣고싶어 붙여넣기를 하면
제대로 동작하지 않는다

기능은 작동하지만 위의 버튼만 바뀌고 밑의 것은 바뀌지 않는다
이때 제대로 작동하게 하기 위해서는 복사한 밑의 코드를 하나씩 바꿔
night_day2 이런식으로 구분해줘야 한다

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

tip) night_day라는 글자들을 한번에 선택하려면 ctrl+d 키를 누르면
커서를 움직이지 않고도 한번에 선택이 가능하다

2 this

버튼을 여러개 만들게 된다면 하나씩 바꿔줘야 하는 불편함이 생기기 때문에
onclick과 같은 이벤트 안에서 실행되는 코드들은 태그를 가리키도록 약속되어있는 특수한 키워드 this가 있다

 <input id="night_day2" type="button" value="night"night_day2" 인덱스 태그를 참조하는 것은

this로 하면 되기 때문에 지워주면 된다  

    <input type="button" value="night" onclick="
    if(this.value === 'night' ){
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
      this.value = 'day';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      this.value = 'night';
    }
    ">
이렇게 바꾸고 나니 코드는 간결해졌고 작동은 어디에 넣든 잘하는것을 볼수있다
3 중복제거
또 눈에 거슬리는 것은 document.querySelector('body') 가

계속 반복되고 있다는 것이다

var target = document.querySelector('body'); 을 넣어주고

밑의 반복되는 부분에 target을 넣어주면 잘 작동하는것을 볼수있다

일단 코드의 양이 줄었고

var target = document.querySelector('body');

이 코드만 바꾸면 이름이 target변수를 쓰고있는

밑의 코드가 한번에 바뀌는 폭발적인 효과를 갖게된다 
    <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';
    }
    ">