WEB2 - JavaScript

리팩토링(refactoring)

소스코드

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. target에 .style까지 포함시키면 (target = document.querySelector('body').style), .style 중복까지도 없앨 수 있네요^^
  2. 소금돌
    this와 변수 사용을 통한 코드의 중복 제거 효과
  3. 스페이스몽키
    이고잉님이 같은 문자열을 한방에 선택하셨는데, Brackets를 사용하시는 분은 찾고자하는 문자열 선택후 Ctrl+B누르면 같은 문자열 찾아집니다.
  4. 라라라
    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 자세히 보기