[WEB2 - JavaScript] Lecture 18. 리팩토링 중복의 제거

 

 

인프런 18강 "리팩토링 중복의 제거"

 

 

리팩토링 = re + factoring

: 코딩 완료 후 코드의 비효율적인 부분 수정을 통해 코드를 좀 더 효율적으로, 가독성이 좋게, 유지보수가 쉽도록 재정비하는 과정

 

 

기존 코드가 다음과 같이 주어졌을 때에, id가 night_day인 버튼을 내용 밑에 추가하려고 함. 

 

그렇게 하면, 버튼은 정상적으로 생성되지만, 아래 버튼 클릭 시 버튼 text가 day로 변경되지 않는 것 확인 가능

그리고 위에 있는 버튼의 text가 day로 바뀌는 것 확인 가능

 

아래 버튼도 동일하게 동작하도록 하기 위해서는 아래 버튼의 id를 달리 해주어야 함

 

지금은 하나의 버튼을 더 추가한 것이기 때문에 상관없지만, 정말 많은 양의 동일한 버튼을 생성하는 경우 번거로움 발생

이를 해결하기 위해 this 키워드 사용

 

this 키워드를 사용하며 id가 필요없기 때문에 id 제거

 

--> 코드가 간결해지며 정상적으로 작동되는 것 확인 가능 / 효율적

 

++ document.querySelector('body') 반복되는 것 확인

target이라는 변수 생성하여 중복되는 내용 넣어주어 간결하게 코드 정리

 

 

 

** 코딩을 잘 하기 위해서는 중복을 끝까지 찾아내어 제거하는 것 중요 **