WEB2 - JavaScript

리팩토링(refactoring)

소스코드

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. ohcho
    target, this 강좌 뭐 보면 되나요 ㅠㅠ?
  2. 에델
    웅 카렌 에델 들음
  3. 아미쓔
    중복의 제거는 정말 정말 정말로 중요합니다!!!! 프로젝트 할 때 중복만 제거해도 몇백줄은 그냥 없어진다는. 그리고 유지보수도 훨씬 쉬워지구요.
  4. 감사합니다!!
  5. 오유상
    감사합니다
  6. naninem
    함수로 중복제거를 빨리 하고싶네요... 혼자 해보려니까 안되네요 ㅎㅎ;
  7. metallsk
    중복의 제거를 위해 힘써주었을 많을 분들을 생각해 봅니다. 덕분에 이렇게 심플하게 배우네요~
  8. 로버트한
    조건문 활용을 잘해야 겠습니다.^^
  9. <input name="night_day" type="button" value="night" onclick="
    var target = document.querySelector('body');
    var array_fruits = document.getElementsByName('night_day');
    if(this.value === 'night'){
    target.style.backgroundColor = 'black';
    target.style.color = 'white';
    for (var i = 0; i < array_fruits.length; i++) {
    array_fruits[i].value='day';
    }
    } else {
    target.style.backgroundColor = 'white';
    target.style.color = 'black';
    for (var i = 0; i < array_fruits.length; i++) {
    array_fruits[i].value='night';
    }
    }
    ">
    name 태그는 중복되니까 이걸로하시면 아래쪽도 전부 다바뀝니다.
    대화보기
    • 코드는 일단 읽기쉽고 단순하게 만드는게 좋다
    • letterb
      조언 한가지 부탁드립니다.
      위쪽의 토글버튼과 페이지 아래쪽의 토글 버튼이 같은 값으로 동시에 작동되게 하고싶습니다. 위에서 night를 누르면 아래쪽의 버튼도 day로 바뀌게끔요. 배운 것 내에서 궁리를 해보았으나, 각각의 input 에 id를 부여하게 되면, 떨어져있는 두 태그에 한가지의 id를 부여할 수 없으므로 id 2개를 사용해야 할 것 같습니다. 그런데 그렇게 되면 1억개의 버튼이 있을 때를 상정하면 매우 안좋은 방법일 것 같습니다. class는 자바스크립트와 함꼐 사용이 불가하다고 하는데.. 다른 좋은 방법이 있을까요?
    • 동글몬
      감사히 잘 봤습니다. 감사합니다~ ^^
    • target에 .style까지 포함시키면 (target = document.querySelector('body').style), .style 중복까지도 없앨 수 있네요^^
    • 소금돌
      this와 변수 사용을 통한 코드의 중복 제거 효과
    • 스페이스몽키
      이고잉님이 같은 문자열을 한방에 선택하셨는데, Brackets를 사용하시는 분은 찾고자하는 문자열 선택후 Ctrl+B누르면 같은 문자열 찾아집니다.
    • 라라라
      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 자세히 보기