WEB2 - JavaScript

리팩토링(refactoring)

소스코드

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 소금돌
    this와 변수 사용을 통한 코드의 중복 제거 효과
  2. 스페이스몽키
    이고잉님이 같은 문자열을 한방에 선택하셨는데, Brackets를 사용하시는 분은 찾고자하는 문자열 선택후 Ctrl+B누르면 같은 문자열 찾아집니다.
  3. 라라라
    Ctrl+D 누르시면 하위부분에서 같은 단어를 선택할 수 있습니다. 하위부분에서 끝나면 맨위로 올라가서 선택합니다.
    맥os쓰시면 cmd+D 입니다.
    대화보기
    • jayxwoo
      강의 잘 들었습니다^^
      리팩토링은 아래와 같은 사항을 개선하는 작업:
      - 코드의 효율성
      - 가독성
      - 유지보수의 편리성
      - 중복된 코드 (제거)

      수업문제:
      - 자기자신을 가르키는 자바스크립트 코드는 this 로 대체할 수 있다.
      - 중복된 코드는 변수(variable)을 만들어 대체할 수 있다.
    • 이유환
      혹시 선생님처럼 똑같은 글자 선택게속 할려면. 단축키 뭐써야되는지 혹시 아시는분 알려주시면 감사하겠습니다.
    • Yesugei
      이하빛

      아마 선생님은 <> 안에 document.querySelector('body') 가 있는 태그면
      그게 몇억줄의 <>로 싸여있는 코드더라도
      var target = document.querySelector('body') 해놓고
      한꺼번에 바꿀 수 있다고 말씀하시는 것 같아요
      대화보기
      • 이하빛
        target으로 바꾸는 내용에서 바꿔야할 태그가 1억개일 때
        var target = document.querySelector('body')
        이 (바디)부분만 바꾸면 된다고 하셨는데,

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

        이 코드가 반복

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



        이렇게 나열되어있을 때 맨 위에 써진 코드
        var target = document.querySelector('body') 한 줄만 바꾸면

        < " " > 안에 있는 모든 버튼 코드에 적용된다는 말인가요?

        < > 이거 안에 들어있는 한에서만 적용되는거 아닌가요?

        1억개가 적용된다면

        다음 태그에서는

        <input type="button" value="night" onclick="
        타겟 부분이 빠진 상태로 코드를 넣을 수 있는건가요?
        if(this.value === 'night'){
        target.style.background='black';
        target.style.color='white';
        this.value='day'
        } else {
        target.style.background='white';
        target.style.color='black';
        this.value='night'
        }
        ">

        아니면-------------------------------------------------------------
        < > 이거 안에 중복되는 코드가 어떻게 1억개가 들어있을 수 있는건지..

        질문 이해가 되셨을지 모르겠어요ㅠㅠ
      • 이성준
        니고잉선생님! 감사합니다!
      • 상상예찬
        김예찬 배재영
      • Dani Choi
        1) Remove id = "night_day"
        document.querySelector('#night_day').value -> this.value
        2) change repeated statments into variables
        if(){
        var target = document.querySelector('body')
        target.style.backgroundColor(color)
      • Dreaming_Joyy
        오호!!! 지난번에 작성하면서, 계속 중복이 너무 많다고 생각하면서, 한번에 바뀌는 방법이 없을까? 생각했었는데!!! 변수를 통해서 중복을 제거할 수 있고, this라는 키워드로 묶어서 이 태그 한정으로 만드는 방법도 있군요!!
        1) id="night_day"를 지우고, document.querySelector('#night_day') 는 개미논리처럼 같은 내용의 반복이므로 this로 대체!!
        2) 반복되는 것을 variable을 이용해서, var target = '중복되는 내용'으로 if절 앞에 작성하고, 이하 중복되는 내용을 target으로 대체!!
        코드명! '중복을 끝까지 따라서 제거하자'
      • 라울
        감사합니다.
      • Meflow
        그럼 처음 코드 짤때부터 위와 같이 변수를 활용해서 간결해서 코딩하면 되는건가요??
      • 제갈량
        잘 봣습니다.
      • 돌침대에서덤블링
        함수내에서 this 는 undefined 라서 인자값으로 this 에 해당되는 컨트롤을 넘겨주니 되네요.
        <input ... onclick=''> 태그의 이벤트에 직접 이벤트의 내용을 구현한 경우 this 가 해당 태그의 컨트롤임을 알 수 있으나 함수로 정의하여 사용하는 경우 함수는 다른 컨트롤에서도 사용 가능하기 때문에 this 를 직접 넘겨줘야 되는게 아닌가 합니다.
        function test1(button){
        var target = document.querySelector('body');
        if(button.value === 'night'){
        target.style.backgroundColor = 'black';
        target.style.color = 'white';
        button.value = 'day';
        } else {
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
        button.value = 'night';
        }
        }
        </script>
        <input id='night_day' type='button' value='night' onclick='test1(this)'>
        대화보기
        • jiny8877
          <body id="bodi">로 아이디 값을 주고 var target = document.getElementById('bodi'); 로 값을 주고 하니 안되서 한참 고생했는데 id 값을 지우고 var target = document.querySelector('body'); 로 바디를 직접 선택하니까 되네요. 왜 그런지 너무 궁금합니다...

          var target 값을 지정하지 않고 이렇게 했을땐 또 되더군요:
          <input type="button" value="night" onclick="
          if(this.value === 'night'){
          document.getElementById('bodi').className ='black';
          this.value = 'day';
          } else {
          document.getElementById('bodi').className ='white';
          this.value = 'night';
          }
          ">

          감사합니다.
        • Mingi Son
          180213 중복을 줄이는 것. 강의 감사합니다!
        • 180210 감사합니다!
        • Hyun Woo Lee
          중복을 줄이자!
        • 마린보이
          함수를 이용해서 사용했을때
          day 와 night value가 변경이 안되는데 뭐가 잘못 된것일까요.?

          <!DOCTYPE html>
          <html>
          <head>
          <title> </title>
          </head>
          <body>
          <script>

          function test1(){
          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';
          }
          }
          </script>
          <input id='night_day' type='button' value='night' onclick='test1()'>
          </body>
          </html>
        • slowwoman
          id="night_day"를 지우지 않으셨네요.
        • 꼬맹파파
          this의 활용과
          중복의 제거!!

          중복이 많아지면 버그가 나올 확률이 높아지죠!
        • PassionOfStudy
          << 2018-01-20 - 2일차 _다섯 번째 강의 >> --> 완료!


          항상 강조하시는 중복의 제거~! ^^
          최대한 중복되는 코드를 제거해서 모듈화 시키겠습니다.
        • 별밤
          https://www.w3schools.com......SN9
          복습차원에서 이미지 넣어서 불 껐다 끄는거 해봤는데 진짜 되네요. 신기해요~
        • 감사합니다~
        • 이유리
          감사합니다.
        • 리팩토링 : 유지 보수를 하기 간편하게 코드를 효율적으로 만드는 작업.

          핵심 한마디: 중복이 있다면 끝까지 따라가서 제거하세요 !

          var = variable 변수 ! 저번시간에 변수를 사용할때는 앞에 꼭 이 var를 붙이라고 이고잉님이 알려주었죠 !

          정리

          리팩토링

          유지 보수를 하기 간편하게 코드를 효율적으로 만드는 작업.


          이러한 코드가 있다면
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset='utf-8">
          <title>자바 스크립트를 만들고 작동해보자</title>
          </head>
          <body>
          <h1>즐겁게 코딩을 해봅시다.</h1>

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

          }else{
          document.queruySelector(body).style.backgroundColor = 'white';
          document.queruySelector(body).style.color = 'black';
          document.queruySelector('#night_day').value = night
          }

          1.

          document.queruySelector(#night_day) 라는 태그는 id="night_day" 와 의미가 같다.
          의미가 같은 코드가 중복이 되므로 이것은 매우 비효율적인!(코딩에서 있어서는 안되는!) 일이므로
          해당 코드를 = this로 바꾸게되면 더 효율적인 코딩이 가능하다

          <input id="night_day" type="button" value="night" onclick="

          이 코드안에 있는 onclick 과 같이 이벤트!로 실행되는 이 코드들은
          이 코드가 속해 있는 태그(ex: input) 의 인덱스 태그
          ( 인덱스 태그는 해당 태그의 선택자(ex: id , class 등등) 를 의미한다.)
          를 대신할수 있는 태그는
          this 이다.

          그러므로

          <input type="butten" value="night" onclick"
          if(this.value === "night"){
          document.querySelector('body').style.color = 'white'';

          이렇게 인덱스 코드를 생략 가능하다.

          2.

          document.queruySelector(body) 라는 코드 또한 중복이 많은데
          이것은 저번시간에 배운 변수를 이용하여 효률적으로 변경 가능하다.

          변수는 var = variable

          변수를 사용할때는 꼭 var를 앞에 넣어주며
          var target = document.querySelector('body'); 라는 것을
          onclick 태그 안에 넣어주게 되면

          =

          <input type="butten" value="night" onclick"
          var target = document.querySelector('body');
          if(this.value === "night"){
          target.style.color = 'white'';
          target.style.backgroundColor = 'white'';

          이렇게 변신 가능하다.

          이렇게 두가지의 리팩토링 방법을 알게되면

          1억개의 박스 에 있는 해당 선택자 혹은 대입 연산자의 속성을 동시에 바꿀수 있다.

          최종 리팩토링 된 코드의 모습.

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset='utf-8">
          <title>자바 스크립트를 만들고 작동해보자</title>
          </head>
          <body>
          <h1>즐겁게 코딩을 해봅시다.</h1>

          <input type="button" value="night" onclick="
          var target = document.queruySelector(body);
          if(this.value === "night")
          {
          target.style.backgroundColor = 'black';
          target.style.color = 'white';
          target(''#night_day").value = 'day';

          }else{
          target.style.backgroundColor = 'white';
          target.style.color = 'black';
          this.value = night
          }
        • HyeonBeom Bak
          예제와 함께 하니 너무 와닿네요..!!
        • Wallace Lee
          wow var의 의미가 저런것이었군요.
        • 이고잉님이 하신 것 처럼,
          atom 에서 Multiple Selections(다중 선택) 하시려면,
          맥에서 cmd+d , 윈도우서 ctrl +d 쓰시면 될거에요~

          # 리펙토링의 방법의 하나가 중복의 제거라는 말씀이신지, 리펙토링 자체가 중복의제거 그 자체인지 궁금하네요..
        • 안승
          정말 너무나 좋은 강의입니다 ㅠㅠ
          '중복을 끝까지 쫓아가서 없애라!' 너무 공감됨다!
        • egoing
          아하 그렇죠! id값은 이제 필요 없어지죠!
          대화보기
          • 이화진
            저렇게 수정되면 <input id="night_day" type="button" 가 <input type="button" 이렇게 되도 상관 없는것이지요?
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기