이진욱의코딩

중복의 제거를 위한 리펙터링 본문

JS

중복의 제거를 위한 리펙터링

Crucifi 2019. 7. 24. 16:41

이번 시간에는 리 펙터 링(refactoring)에 대해 살펴보겠습니다.

리 펙터 링이란 코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업을 뜻합니다.

 

앞서 만든 코드에서 비효율적인 측면들을 제거하는 사례를 보여드릴게요.

 

<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').value = 'day';
  }else{
   document.querySelector('body').style.backgroundColor = 'white';
   document.querySelector('body').style.color = 'black';
   document.querySelector('#night_day').value = 'night';
  }
  ">

앞서 작성한 코드입니다.

만약 night버튼의 기능을 페이지 하단에도 보이게 하고 싶을 수 있습니다. 이를 위해 하단에 불어넣기를 하겠습니다.

 

<!DOCTYPE html>
<html>
<head>
  <title>web1-javascript</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1 ><a href="0717.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').value = 'day';
  }else{
   document.querySelector('body').style.backgroundColor = 'white';
   document.querySelector('body').style.color = 'black';
   document.querySelector('#night_day').value = 'night';
  }
  ">
   
  <ol>
     <li><a href="https://terms.naver.com/entry.nhn?docId=1168097&cid=40942&categoryId=32838">html</a></li>
     <li><a href="https://terms.naver.com/entry.nhn?docId=1179641&cid=40942&categoryId=32854">css</a></li>
     <li><a href="https://terms.naver.com/entry.nhn?docId=848218&ref=y&cid=42346&categoryId=42346">js</a></li>
   </ol>
   <h2>javascript란 무엇인가?</h2>
   <p>
      웹 페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어.
      사용자 경험을 향상시키기 위한 방법으로 주로 사용된다. 일반적으로 HTML 문서에 내재되며, 브라우저에서 실행된다.예를 들면, 마우스를 HTML 문서의 특정 이미지나 
      텍스트 위로 가져갔을 때 이미지 크기가 커지거나 텍스트의 색이 바뀌는 기능이다. 
      또 검색창 입력 박스에 ‘자’를 입력하면 현재 기준으로 사용자 검색이 많은 ‘자’로 시작하는 검색어 목록을 보여주는 기능도 자바스크립트로 구현한 것이다.
      자바스크립트는 1995년 미국의 넷스케이프 커뮤니케이션즈(Netscape Communications)에서 처음 개발되었다. 자바스크립트 표준은 1996년 11월부터 유럽 컴퓨터 제조업자 
      협회(ECMA: European Computer Manufacturers Association) 기술위원회 39(TC-39)에서 에크마스크립트(ECMAScript, ECMA-262)라는 이름으로 개발되었다. 
      최신 표준은 2017년 6월에 제정된 ECMAScript 2017이며, 2015년부터 1년에 한 번씩 새로운 버전의 ECMAScript를 공개하고 있다.
      자바스크립트는 주로 웹 브라우저 내에서 사용되는 언어였으나, 자바스크립트 기반의 런타임 플랫폼(예: Node.js)들이 개발되면서 서버측 프로그램 개발에도 사용이 크게 확대되었다.
      다음은 자바스크립트가 내재된 HTML 문서의 예로, 브라우저에서 ‘자바스크립트 실행’ 버튼을 클릭하면 < script > 태그
    </p>
    
    <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').value = 'day';
    }else{
     document.querySelector('body').style.backgroundColor = 'white';
     document.querySelector('body').style.color = 'black';
     document.querySelector('#night_day').value = 'night';
    }
    ">
    
  </body>
 </html>

 

야간모드와 주간 모드로 바뀌기는 하지만 night 버튼이 day버튼으로 바뀌지는 않습니다. 이것을 해결하기 위해 하단 코드의 버튼 id값을 바꿔주도록 하죠!

 

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

id값의 night_day의 뒤에 2를 추가시킨 모습입니다.

 

이런원리로 하면 1억 개면 1억 개 모두를 해야 합니다. 그렇기에 onclick과 같은 이벤트 안에서 실행되는 코드에서는 현재 코드가 속해 있는 태그를 가리키도록 약속돼 있는 특수한 키워드를 사용합니다. 바로 this키워드입니다.

 

<!DOCTYPE html>
<html>
<head>
  <title>web1-javascript</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1 ><a href="0717.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';
   this.value = 'day';
  }else{
   document.querySelector('body').style.backgroundColor = 'white';
   document.querySelector('body').style.color = 'black';
   this.value = 'night';
  }
  ">
   
  <ol>
     <li><a href="https://terms.naver.com/entry.nhn?docId=1168097&cid=40942&categoryId=32838">html</a></li>
     <li><a href="https://terms.naver.com/entry.nhn?docId=1179641&cid=40942&categoryId=32854">css</a></li>
     <li><a href="https://terms.naver.com/entry.nhn?docId=848218&ref=y&cid=42346&categoryId=42346">js</a></li>
   </ol>
   <h2>javascript란 무엇인가?</h2>
   <p>
      웹 페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어.
      사용자 경험을 향상시키기 위한 방법으로 주로 사용된다. 일반적으로 HTML 문서에 내재되며, 브라우저에서 실행된다.예를 들면, 마우스를 HTML 문서의 특정 이미지나 
      텍스트 위로 가져갔을 때 이미지 크기가 커지거나 텍스트의 색이 바뀌는 기능이다. 
      또 검색창 입력 박스에 ‘자’를 입력하면 현재 기준으로 사용자 검색이 많은 ‘자’로 시작하는 검색어 목록을 보여주는 기능도 자바스크립트로 구현한 것이다.
      자바스크립트는 1995년 미국의 넷스케이프 커뮤니케이션즈(Netscape Communications)에서 처음 개발되었다. 자바스크립트 표준은 1996년 11월부터 유럽 컴퓨터 제조업자 
      협회(ECMA: European Computer Manufacturers Association) 기술위원회 39(TC-39)에서 에크마스크립트(ECMAScript, ECMA-262)라는 이름으로 개발되었다. 
      최신 표준은 2017년 6월에 제정된 ECMAScript 2017이며, 2015년부터 1년에 한 번씩 새로운 버전의 ECMAScript를 공개하고 있다.
      자바스크립트는 주로 웹 브라우저 내에서 사용되는 언어였으나, 자바스크립트 기반의 런타임 플랫폼(예: Node.js)들이 개발되면서 서버측 프로그램 개발에도 사용이 크게 확대되었다.
      다음은 자바스크립트가 내재된 HTML 문서의 예로, 브라우저에서 ‘자바스크립트 실행’ 버튼을 클릭하면 < script > 태그
    </p>
    
    <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';
    }
    ">
    
  </body>
 </html>

위 코드는 잘 동작하며 훨씬 더 간결합니다. 이러면 유지 보수하기 편해집니다.

 

그리고 코드를 다시 한번 살펴보면 document.querySelector('body');라는 부분이 중복으로 나오는데 중복을 쫓아가 전부 없애 버리도록 하겠습니다.

 

<body> 태그를 target변수에 할당합니다.

var target = document.querySelector('body');

 

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

그림 코드가 훨씬 더 간결해집니다. target변수를 쓰는 부분들은 상단에 작성한 document.querySelector('body');만 바꾸면 target변수를 쓰는 모든 코드가 한 번에 바뀌는 폭발적인 효과를 갖게 됩니다. 이처럼 변수라는 것을 활용하면 코드를 작성할 때 큰 도움을 받을 수 있다는 것을 기억하시면 됩니다.

'JS' 카테고리의 다른 글

배열과 반복문  (0) 2019.07.27
배열과 반복문의 기초  (0) 2019.07.26
조건문의 활용  (0) 2019.07.24
조건문  (0) 2019.07.24
비교연산자와 블리언  (0) 2019.07.24
'JS' Related Articles more