[생활코딩|WEB_JavaScript#6] 리팩토링(refactoring) 2020.02.01

본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

~~생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.~~

생활코딩 유튜브

생활코딩

일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.

www.youtube.com

생활코딩 사이트

생활코딩

hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠. 온라인 강의 소개 입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은

opentutorials.org

"어떤 문제가 우리 삶에서 중요하고 심각할 수록

그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."

(생활코딩 : Web1 -1 수업소개. 중)

#0.

오늘 우리가 배워볼 것은 '리펙토링(refactoring)입니다.

'팩토리(factory)'는 공장을 의미하죠? '리(re)'는 다시를 의미합니다.

"공장으로 다시 보내서 조금 더 개선한다." 정도의 의미라고 생각해주시면 될 것 같습니다.

#1.

리팩토링이 무엇인지 조금 더 자세히 설명해 보겠습니다.

코딩을 하고 나면 코드가 조금 비효율적인 것이 생기기 마련입니다.

동작하는 것은 내버려두고, 코드의 효율을 높여서 가독성을 높이고

유지보수를 원활하게 하고, 중복된 코드를 낮추고...

이러한 방향으로 코드를 개선하는 작업을 리펙토링이라고 합니다.

소프트웨어가 커지고 복잡해지는 단계에서 틈틈이 리페토링을 수행해야 좋은 코드가 됩니다.

이번 시간에는 우리가 만든 코드에서 비효율적인 것들을 조금 제거하는 방법을 알아보도록 하겠습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<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').value = 'day';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      document.querySelector('#night_day').value = 'night';
    }
  ">

  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li><b>JavaScript</b></li>
  </ol>
  
</body>
</html>

지금 위 코드는 비교적 짧은 코드이지만, 만약 body의 길이가 매우 길어진다면,

우리는 사용자의 편의를 위하여 우리가 만든 버튼을 페이지 하단에도 넣고 싶을 겁니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<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').value = 'day';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      document.querySelector('#night_day').value = 'night';
    }
  ">

  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li><b>JavaScript</b></li>
  </ol>
  
  <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>

이렇게요.

하지만 위 코드를 실행해보면 아시겠지만, 밑의 버튼은 제대로 동작하지 않습니다.

밑의 버튼과 위의 버튼의 id값이 중복되었기 때문입니다.

실제로 저번 시간에 저는 id값을 변경해주는 방법으로 이러한 문제를 극복하였습니다.

하지만 만약 추가해야 하는 버튼이 1억개라면, 1억개 버튼의 id를 모두 바꾸어 주어야 할 것입니다.

코딩 공부는 항상 극단적인 영역에서 생각해야 합니다.

#2.

'if(document.querySelector('#night_day').value === 'night')' 이 코드에서

document.querySelector('#night_day')는 사실상 자기 자신을 가리키는 코드입니다.

조금 더 자세히 설명하자면 onclick event가 속해있는 태그를 가리키는 코드입니다.

바로 이렇게 자기 자신을 지칭할 때 사용하는 도구가 있습니다.

바로 'this'입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<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';
      this.value = 'day';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      this.value = 'night';
    }
  ">

  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li><b>JavaScript</b></li>
  </ol>
  
    <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>

(L9의 코드를 확인하시면 됩니다.)

이렇게 this를 활용하여 코드를 조금 더 쉽고 간결하게 바꿀 수 있습니다.

또한 this를 통해 버튼을 가리키고 있으므로,

L8에 존재하던 id값을 제거하여도 정상적으로 코드가 동작함을 확인할 수 있습니다.

this에 관한 조금 더 자세한 사용법은 검색을 통해 확인할 수 있겠죠?

검색 : JavaScript this (1) (2)

JavaScript this

The JavaScript this Keyword Example var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; Try it Yourself » What is this? The JavaScript this keyword ref

www.w3schools.com

this

JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다.

developer.mozilla.org

사실 JavaScript에서 동작하는 this를 제대로 이해하기 위해서는 먼저 객체에 대한 이해가 필요합니다.

이는 수업을 진행하면서 학습하게 될테니, 지금은 참고정도로만 읽어보시면 좋을 것 같습니다.

#3.

저희는 코딩을 하는 방법을 배우고 있습니다.

코딩을 '잘' 하는 방법과는 조금 거리가 있을 수 있습니다.

하지만, 코딩을 잘 하는 방법 중 하나는 '중복'을 끝까지 찾아가 제거해주는 것입니다.

우리가 사용하고 있는 우수한 기능들은 대부분 중복을 제거하는 과정에서 등장하였을 가능성이 큽니다.

코딩의 기술적 구현은 중복의 제거와 함께 성장해 왔습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<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';
      this.value = 'day';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      this.value = 'night';
    }
  ">

  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li><b>JavaScript</b></li>
  </ol>
  
</body>
</html>

제 코드를 확인해보면 L10부터 L15까지 document.querySelector('body')이 중복해서 등장하고 있습니다.

이 중복을 변수를 활용하여 제거해주도록 하겠습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
  <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';
    }
  ">

  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li><b>JavaScript</b></li>
  </ol>
  
</body>
</html>

변수를 선언하는 var을 이용하여 target이라는 변수에 document.querySelector('body')를 선언하였습니다.

그리고 이후 등장하는 document.querySelector('body')를 target로 변경해 주었습니다.

이를 통해 코드의 양이 줄었고,

변수를 정의하는 부분만 수정해준다면,

변수가 적용된 모든 코드가 한 번에 바뀌는 폭발적인 효과를 누릴 수 있게 되었습니다.

이렇게 변수를 활용하면 코딩에 큰 도움을 받을 수 있습니다.

See the Pen JavaScript#7 by nani6765 (@nani6765) on CodePen.

이렇게 리펙토링을 통해 코딩을 좀 더 간결하고 효율적으로 변경해 보았습니다.

(다음에 효율적인 실습을 위하여 example link를 추가하였으며, 아무런 기능도 없습니다.)

저작자표시

'오픈튜토리얼스 > 생활코딩 : Web1' 카테고리의 다른 글

[생활코딩\|WEB_JavaScript#7] 반복문 下 : 배열과 반복문, 배열과 반복문의 활용 2020.02.06 (0)	2020.02.06
[생활코딩\|WEB_JavaScript#7] 반복문 上 : 배열, 반복문 2020.02.03 (0)	2020.02.03
[생활코딩\|WEB_JavaScript#5] 조건문下 : 조건문, 조건문의 활용 2020.01.31 (0)	2020.01.31
[생활코딩\|WEB_JavaScript#5] 조건문 上 : 조건문 예고, 비교 연산자와 Boolean 타입 2020.01.30 (0)	2020.01.30
[생활코딩\|WEB_JavaScript#4] 프로그램, 프로그래밍, 프로그래머 2020.01.29 (0)	2020.01.29

[생활코딩|WEB_JavaScript#6] 리팩토링(refactoring) 2020.02.01

'오픈튜토리얼스 > 생활코딩 : Web1' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

'오픈튜토리얼스 > 생활코딩 : Web1' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바