생활코딩 WEB2 JavaScript - 7. 리팩토링 중복의 제거

채개바라 2023. 12. 21. 17:03

2023. 12. 21. 17:03

1. 리팩토링(Refactoring)

소프트웨어 공학에서 '결과의 변경 없이 코드의 구조를 재조정함'을 뜻한다.

- 주로 가독성을 높이고 유지보수를 편하게 한다.- 버그를 없애거나 새로운 기능을 추가하는 행위는 아니다.
- 사용자가 보는 외부 화면은 그대로 두면서 내부 논리나 구조를 개선하는 유지보수 행위이다.

2. this

인스턴스 자신(self)을 가리키는 참조변수

this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다.

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

id가 button2로 정해진 태그에서 onclick 이벤트 내 if 다음에 오는 조건에서 자기 자신을 가리키고 있을 때,

document.querySelector(#'button2')라는 긴 값을 this로 대체할 수 있다. 따라서 id도 굳이 필요 없어진다.

<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';
}