WEB2 - JavaScript

리팩토링(refactoring)

소스코드

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 김한주
    완료
  2. greedy0111
    완료스
  3. 끝가지간다
    완료~
  4. 이달
    완료
  5. 이대엽
    2019.03.04
    복습2 완료
  6. 완료!
  7. Seohee Kim
    완료!
  8. 2019-02-18 완료
  9. 우도순
    완료
  10. 호두
    고맙습니다
  11. 발헤
    감사합니다. 완료
  12. Juyeon Heo
    완료!
  13. 지미츄
    완료 감사합ㄴㅏ덩!
  14. 꽁꽁
    this랑 target으로 중복된 내용 싹 지우고 대체할때 쾌감이 느껴지네요... 짜릿...
  15. 한태양
    감사합니다
  16. 함가죠
    완료 감사합니다:)
  17. 이수하
    완료
  18. gravity251
    완료
  19. Aimhee
    완료
  20. 2019.01.11
    this 는 자기 자신을 표현하고
    중복되는 코드를 제거하기 위해 긴 코드를 변수하나로 정의하여 변수이름을 대신사용하는 것.
  21. ManualJedi
    https://developer.mozilla.org......yId

    The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.

    If you need to get access to an element which doesn't have an ID, you can use querySelector() to find the element using any selector.

    getElementById는 id에 해당하는 element를 반환하고, querySelector는 id가 없는 element를 반환합니다.
    그러므로 '<body>'를 '<body id="body">'로 수정하면, getElementById와 querySelector 모두 동작합니다.
    대화보기
    • 후추원꼬집
      if(this.value==='button1'){
      document.querySelector('body').style.backgroundColor='black';
      this.value='red'}
      else{document.querySelector('body').style.backgroundColor='red';
      this.value='button1';
      }
      여기서 querySelector를 쓰면 되는데 왜 getElementById 로 쓰면 안되는 건가요??
    • Dustin Yook
      리팩토링 잘 배우고 갑니다.
    • suhwan
      이런거 할때마다 소름돋는다
    • 쿵쾅이팸
      this 로 훈훈한 마무리
      공중제비 3회전 돌고 갑니다
    • 돼지천재
      감사합니다.
    • Pakupaku
      잘 들었습니다! 매번 감사합니다 ^^
    • icdoit
      감사합니다.
    • 키보드치는남자
      잘들었습니다
    • jo_onc
      target은
      var target = document.querySelector('body');
      변수에요~
      대화보기
      • target, this 강좌 뭐 보면 되나요 ㅠㅠ?
      • 에델
        웅 카렌 에델 들음
      • 아미쓔
        중복의 제거는 정말 정말 정말로 중요합니다!!!! 프로젝트 할 때 중복만 제거해도 몇백줄은 그냥 없어진다는. 그리고 유지보수도 훨씬 쉬워지구요.
      • 감사합니다!!
      • 오유상
        감사합니다
      • naninem
        함수로 중복제거를 빨리 하고싶네요... 혼자 해보려니까 안되네요 ㅎㅎ;
      • metallsk
        중복의 제거를 위해 힘써주었을 많을 분들을 생각해 봅니다. 덕분에 이렇게 심플하게 배우네요~
      • 로버트한
        조건문 활용을 잘해야 겠습니다.^^
      • <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억개가 들어있을 수 있는건지..

              질문 이해가 되셨을지 모르겠어요ㅠㅠ
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기