본문 바로가기
블록체인 및 경제/웹프로그래밍

[JS] 9. 리팩토링(refactoring)

by Danny_Kim 2020. 10. 8.

자바스크립트 강의 목차

0. 자바스크립트란 무엇인가?

1. Script 태그 (document.write)

2. 자바스크립트 이벤트란 무엇인가?

3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기

4. 데이터 타입 문자열과 숫자

5. 변수와 대입연산자

6. 자바스크립트로 웹브라우저 제어하기

7. 비교연산자, Boolean 데이터타입

8. 자바스크립트 조건문 및 활용법

9. 리팩토링(refactoring)

10. 배열에 대한 이해

11. 반복문에 대하여

12. 배열과 반복문

13. 배열과 반복문의 활용

14. 함수란 무엇이고 왜 필요한가?

15. 함수의 기본사용법, 매개변수, 인자, 리턴

16. 함수의 활용

17. 객체는 왜 필요한가?

18. 객체란 무엇인가?(객체 생성, 추가, 추출방법)

19. 객체의 활용

20. 파일로 쪼개어 관리하기

21. 라이브러리와 프레임워크

22. API & UI 그리고 프로젝트 활용도구

 


 

이번시간에는 리팩토링(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



반응형

댓글0