18.리팩토링 중복의 제거
리팩토링 : 코드 개선 작업
리팩토링을 해보도록 하자.
😋꿀팁
똑같은 단어 선택해서 다같이 수정하고 싶을 때 그 단어 드래그 후 ctrl+d 하면 밑으로 쭉쭉 선택됨
night, day버튼을 글 단락 밑에도 만들고 싶다...
만듬
🤔 : 이런 버튼을 1억개 씩이나 만들어야 한다면..?
(id를 1억개 씩이나 만들어서 일일이 수정해야 한다...)
😨
.
.
.
.
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';
}
">
<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';
}
">
this
를 사용하면 문제 없다.
document.querySelector('#night_day2')
는 자기 자신을 가리키기 때문에 this
를 사용하면 된다. 태그의 id 또한 지워도 된다.
이렇게 하면 이 코드를 몇번이나 복붙해도 정상 작동함
var
코딩을 잘하는 법은 중복을 없애는 것이다!!!
위 코드에서 document.querySelector('body')
가 중복해서 나타나고 있다.
var를 이용해 간결하게 작성해보자.
<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';
}
">
Author And Source
이 문제에 관하여(18.리팩토링 중복의 제거), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@iamjinseo/18.리팩토링-중복의-제거저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)