18. 중복의 제거를 위한 리팩터링

Itchild 2024. 4. 25. 13:22

728x90

리팩터링이란 단어에서 팩토리(factory)는 '공장'이며 , 리(re)는 '다시' 라는 뜻으로 리팩터링이란 공장으로 다시 보내 개선한다는 느낌으로 생각 하면 됩니다. 코딩을 하고 나면 코드에 비효율적인 면이 생기기 마련인데 코드 자체를 효육적으로 만들어서 그 코드의 가독성을 높이고 , 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업을 리팩터링 이라고 합니다.

.. 생략 ..
<body>
	<h1><a href="index.html">WEB</a></h1>
	<input id="night_day" type="button" value="night" onclick="
	if(document.querySelector('#night_day').value === 'night'){
		document.querySelector('body').style.backgroundColor = 'black';
		document.querySelector('body').style.color = 'white';
		document.querySelector('#night_day').style.color = 'day';
	}else{
		document.querySelector('body').style.backgroundColor = 'white';
		document.querySelector('body').style.color = 'black';
		document.querySelector('#night_day').style.color = 'night';
	}
	">
</body>
.. 생략 ..
<h2>JavaScript란 무엇인가?</h2>
	<input id="night_day2" type="button" value="night" onclick="
	if(document.querySelector('#night_day').value === 'night'){
		document.querySelector('body').style.backgroundColor = 'black';
		document.querySelector('body').style.color = 'white';
		document.querySelector('#night_day').style.color = 'day';
	}else{
		document.querySelector('body').style.backgroundColor = 'white';
		document.querySelector('body').style.color = 'black';
		document.querySelector('#night_day').style.color = 'night';
	}
	">
.. 생략 ..

이런 코드를 같은 원리로 1억개의 버튼을 1억개 모두 바꿔야 하는 불편함을 겪게 될 수 있습니다.

그러한 불편함이 있기 때문에 onclick과 같은 이벤트 안에서 실행되는 코드에서는 현재 코드가 속해 있는 태그를 가리키도록 약속돼 있는 특수한 키워드를 사용합니다. 바로 this 키워드 입니다.

.. 생략 ..
<body>
	<h1><a href="index.html">WEB</a></h1>
	<input type="button" value="night" onclick="
	if(this.value === 'night'){
		document.querySelector('body').style.backgroundColor = 'black';
		document.querySelector('body').style.color = 'white';
		document.querySelector('#night_day').style.color = 'day';
	}else{
		document.querySelector('body').style.backgroundColor = 'white';
		document.querySelector('body').style.color = 'black';
		document.querySelector('#night_day').style.color = 'night';
	}
	">
</body>
.. 생략 ..
<h2>JavaScript란 무엇인가?</h2>
	<input type="button" value="night" onclick="
	if(this.value === 'night'){
		document.querySelector('body').style.backgroundColor = 'black';
		document.querySelector('body').style.color = 'white';
		this.style.color = 'day';
	}else{
		document.querySelector('body').style.backgroundColor = 'white';
		document.querySelector('body').style.color = 'black';
		this.style.color = 'night';
	}
	">
.. 생략 ..

바로 this 라는 키워드를 쓰면 유지보수하기 편리해집니다.

코딩을 잘하는 방법은 중복을 끝까지 쫓아가 다 없애버리라는 것입니다. 이번에는 'body' 중복을 없애보겠습니다.

var target = document.querySelector('body');
<body> 태그를 target 변수에 할당한다. 

document.querySelector('body')
그리고 나서 코드 상에서 위의 코드를 모두 target으로 바꿉니다. 

.. 생략 ..
<h2>JavaScript란 무엇인가?</h2>
	<input type="button" value="night" onclick="
      var target = document.querySelector('body');
	if(this.value === 'night'){
		target.style.backgroundColor = 'black';
		target.style.color = 'white';
		this.style.color = 'day';
	}else{
		target.style.backgroundColor = 'white';
		target.style.color = 'black';
		this.style.color = 'night';
	}
	">
.. 생략 ..

target 변수를 쓰는 부분들은 상단에 작성한 var target = document.querySelector('body'); 만 바꾸면 target 변수를 쓰는 모든 코드가 한번에 바뀌는 폭발적인 효과를 갖게 됩니다.

728x90