ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 리팩토링(Refactoring)
    2020. 2. 17. 21:11

    리랙토링(Refactoring)이란?

    리랙토링(Refactoring)의 소프트웨어 공학적 정의는 '결과의 변경 없이 코드의 구조를 재조정함'을 뜻한다. 간단하게 설명하자면 

    코드의 가독성을 높이중복을 제거하며 프로그램의 효율성을 높이는 작업이다. 그러나 리팩토링을 아무때나 할 수 있는 것은 아니다. 리팩토링은 소프트웨어를 이해하기 쉽고 수정하기 쉽게 만드는 것이 목표이지만 소프트 웨어의 기능에 영향을 주어서는 안된다. 

     

    그렇다면 리팩토링은 언제 하는것이 좋을까?

     

    리팩토링의 실시 시기

     

    같은 작업(코드)이 3번 이상 반복 될 때

     

         1번 ~ 2번 까지는 중복 작업이 실행되어도 괜찮지만 3번이상 중복 작업이 발생한다면 리팩토링이 필요하다.

     

    기능을 추가할 때

     

    1.  소프트웨어에 새로운 기능을 추가할 때 새로운 기능을 추가하기전에 기존 코드를 분석하여 코드의 기능을 파악하고 리팩토링이 필요한지 고민하고 리팩토링 작업을 진행한다.
    2. 기존의 구조로는 어떤 기능을 추가하기 힘들 때다. 특정 기능을 추가하려고 보니 기존에 설계된 구조에서는 어렵다고 판단되면 리팩토링을 진행한다. 

     

     버그를 수정할 때

     

    버그가 발생한 기능에 해당하는 코드를 쉽게 파악하기 위해서 리팩토링을 작업을 한다.

     

    코드 리뷰를 할 때

     

    코드 리뷰는 개발 팀원 모두가 전체 코드를 파악하게 된다. 이 과정에서 팀원들의 지식을 공유할 수 있고 코드를 다양한 관점으로 볼 수 있기 때문에 더 좋은 코드가 될 수 있다.

     

     

    끝으로 유튜브 생활코딩 이고잉님의 CSS와 JavaScript를 이용한 리팩토링한 코드이다.

    리팩토링을 하기 전 코드

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

     

    리팩토링을 하고난 후 코드

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

     

    리팩토링을 하고난 후 코드이다 

    위와 아래의 코드 모두 버튼을 클릭하면 화면의 색상과 글자색이 바뀌고 버튼의 글자가 변경되는 코드이다.

    같은 기능을 하는 코드이지만 훨씬 간결한 코드로 바뀌었다. 

     

     

     

     

     

     

     

     

     

    '' 카테고리의 다른 글

    node.js 설치  (0) 2020.03.03
    HTML 목록 태그들  (0) 2020.03.01
    맥 장고(django) 설치 및 환경설정  (1) 2020.02.13
    파이썬 가상환경 설정  (0) 2020.02.13
    정적 페이지와 동적 페이지  (0) 2020.02.11

    댓글

Designed by Tistory.