🔑 코인 투자 추천 링크 🔑
자바스크립트 강의 목차
3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기
18. 객체란 무엇인가?(객체 생성, 추가, 추출방법)
이번시간에는 리팩토링(refactoring)에 대해서 알아보겠습니다.
우리가 작성한 코드를 보니 조금 복잡하고, 중복으로 사용된 코드가 많이 있습니다.
이러한 중복을 제거하고 코드의 가독성(읽기 좋게)을 좋게 하는게 리팩토링이라고 합니다.
우리가 작성한 코드를 리팩토링 해보면서 어떻게 실제코딩에 적용할 수 있는지 살펴보겠습니다.
먼저 위에 만든 day, night 버튼을 아래에도 만들려고 합니다.
그래서 코드를 복사해서 아래에 붙여넣기 합니다.
그런데, 결과를 보니 위 버튼과 동일하게 작동하지 않습니다.
night 버튼의 이름이 계속 night으로 남아있고 위에 있는 버튼이 계속 바뀌네요!
아래와 같이 id값을 night_day2로 바꾸어 주면 정상적으로 동작합니다.
그런데, 바꾸어야 할 버튼이 100개 이상이라면? 끔찍합니다.
그래서 이건 좋은 방법이 아니라는걸 알 수 있습니다.
1. this 키워드태그로 묶여진 코드 안에 있는걸 가르키는 걸 알려주는 키워드가 있는데요, this라고 합니다.
그래서 이 this를 활용해서 아래와 같이 바꿔볼께요!
id 값은 더 이상 필요없으므로 지우고,
document.query document.querySelector('#night_day2').value 이부분을 this.value로 바꿉니다.
결과를 보면 정상적으로 잘 동작하는 걸 확인할 수 있습니다.
이걸 똑같이 복사해서 사용해도 동일하게 작용합니다.
2. 변수 활용하기
원래 작성된 코드를 보니 document.querySelector('body')가 중복되어 사용되어 있습니다.
이를 target라는 변수로 지정하고 아래 문서에 4번 반복되는 문서를 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';
}
">
두 문서는 동일한 결과를 보여주지만, 코드상 가독성과 향후 유지보수(코드변경)에는 왼쪽 문서가 훨씬 좋다는걸 알 수 있습니다.
자, 이렇게 코드를 간결하게 사용하고 재사용성을 좋게 하는 리팩토링에 대해서 살펴봤습니다.
본 강의는 아래 생활코딩 강의안을 바탕으로 재작성된 강의안입니다.
opentutorials.org/course/3085/18801
댓글