리팩토링(refactoring)

• 봤어요 (1021명)
• • 이전
  • 다음

댓글

댓글 본문

리체님의 댓글에 대한 답글입니다. 삭제

작성자

비밀번호

댓글 올리기

1. 
   봄숙12시간 전
   리팩토링 : 중복을 모두 제거하고 변수 사용
   이 이벤트 코드 안에서는
   그 코드를 가르키도록 약속된 키워드 "this" - 중복되는 아이디값을 this로 변경가능(이 이벤트 코드의 자기자신)
   중복되는 body값을 var taget이라는 변수 지정 해서 taget은 body태그가 되는것
   body 들어갈부분에 target입력하면 var taget('body') <- 얘만 바꾸면 모두 바꿀수있음
   답글
2. 
   뉴빈2일 전
   중복을 제거하기 위해 생각할 것!
   답글
3. 
   tj3일 전
   엑셀함수랑 정말 비스하네요
   답글 수정 삭제
4. 
   hansy4일 전
   완료!
   답글 수정 삭제
5. 
   Useok4일 전
   완료
   답글
6. 
   moon7일 전
   항상 감사합니다.!!
   답글
7. 
   N0name9일 전
   night day가 모든 버튼에서 같이 바뀌게 하고 싶으면 어떻게 코드를 바꾸면 될까요?
   답글 수정 삭제
8. 
   thsths16일 전
   완료
   답글
9. 
   춤춤18일 전
   완료
   답글
10. 
    Yamto18일 전
    완
    답글 수정 삭제
11. 
    moleskindiary@gmail.com19일 전
    감사합니다!
    답글 수정 삭제
12. 
    스티븐잡숴22일 전
    완료
    답글
13. 
    메메24일 전
    document.querySelector('#night_day')는 자기자신을 가리키고 있음
    →'this'키워드 사용 & id로 지칭해 줄 필요가 사라졌기 때문에 id 삭제
    
    변수를 지정해줌으로써 중복 제거
    var target = document.querySelector('body');
    답글 수정 삭제
14. 
    펜펜26일 전
    감사합니다!
    답글
15. 
    서혜민한 달 전
    완료
    답글 수정 삭제
16. 
    유화한 달 전
    감사합니다!
    답글
17. 
    882한 달 전
    중복된 코드를 낮추고 효율적으로 만드는 작업 : 리팩토링
    유지보수가 쉬워진다.
    <input id="night_day" type="button" value="흑화" onclick="
    var target = document.querySelector('body');
    if(this.value === '흑화'){
    target.style.backgroundColor = 'black';
    target.style.color = 'white';
    this.value = '사람';
    } else {
    target.style.backgroundColor = 'white';
    target.style.color = 'black';
    this.value = '흑화';
    }
    답글
18. 
    Jeremy Jo한 달 전
    봤습니다.
    답글 수정 삭제
19. 
    문병민한 달 전
    리펙토링
    
    중복을 끝까지 추적해서 제거 >> 변수를 사용
    답글 수정 삭제
20. 
    hr1004한 달 전
    완료
    답글 수정 삭제
21. 
    오오우우얍한 달 전
    다음!
    답글
22. 
    샬롬한 달 전
    완료
    답글
23. 
    아이디한 달 전
    id값은 하나에 한개밖에 안된다고 하지않았나요?
    답글 수정 삭제
24. 
    아이원한 달 전
    감사합니다.
    ctr-D도 유용하네요...
    답글 수정 삭제
25. 
    BoBo한 달 전
    this, var 이용하여 간결화
    답글 수정 삭제
26. 
    김태완한 달 전
    감사합니다

    대화보기

    답글
27. 
    리트2개월 전
    CTRL+D 누를 경우 같은단어 선택이 가능하네요
    답글
28. 
    아빠늑대3개월 전
    re는 다시 factory는 공장, 다시 보내서 개선한다는 느낌. 재가공(?)
    코딩을 하고 나면, 코드는 비효율적인 면이 생기기 마련, 동작은 그대로 두면서 효율적으로 만들고, 가독성을 높이고, 유지보수를 쉽게하고, 중복을 줄이는 작업이 바로 리펙토링
    소프트웨어가 커지고 복잡해지는데 있어서 틈틈히 리펙토링 해주는 것이 중요하다.
    (situation) 자 이 나이트 버튼을 페이지 하단에도 만들어 주고싶어서 코드를 복사해서 붙여넣으면 이렇게!
    제대로 동작하지 않는다. (id를 중복으로 사용해서 위쪽 버튼에 우선동작하게 된다.) (규약 위반)
    (그래서 영상에서는 id="night_day2"로 수정하였다.)
    (keyword : this) this라는 키워드는 자신이 포함된 tag를 가리킨다. 훨씬 코드가 간결해짐.
    document.querySelector("#night_day") --> this
    id ="night_day" 삭제
    코딩을 하는 방법을 알려드리지, 잘하는 방법은 알려드리지 않는다. 하지만 하나 알려드린다
    (tip) 중복을 끝까지 쫒아가서 없애버린다. 이는 여러기술들의 출현 동기와 관련이 많다.
    var target = document.querySelector('body') 선언
    document.querySelector('body') --> target 교체
    이제 target의 값만 바꾸어주면 모든 코드가 한번에 바뀌는 폭발적인 효과!
    답글
29. 
    굼벵이3개월 전
    완료
    답글 수정 삭제
30. 
    홍주호3개월 전
    20191109 완료
    답글
31. 
    닞닞비3개월 전
    20191108
    답글
32. 
    육포3개월 전
    20191031
    답글
33. 
    은별3개월 전
    완료
    답글
34. 
    봉가리봉봉3개월 전
    감사합니다
    답글
35. 
    늉4개월 전
    완료
    답글 수정 삭제
36. 
    굼벵이4개월 전
    완료
    답글 수정 삭제
37. 
    박창신4개월 전
    완료
    답글 수정 삭제
38. 
    감자4개월 전
    완료
    답글
39. 
    정일진4개월 전
    나도 10월 1일 완료!
    답글
40. 
    Ted 4개월 전
    20191001 Ted 완료!
    답글 수정 삭제
41. 
    코딩만이 살길이다4개월 전
    완료
    답글
42. 
    ㅇㅇ4개월 전
    코딩잘하는것 중복의제거 유지보수 편리할수록 좋은프로그래밍 췍
    답글 수정 삭제
43. 
    다에4개월 전
    완료
    답글 수정 삭제
44. 
    쑤우5개월 전
    수강완료. 감사합니다.
    답글
45. 
    김철호5개월 전
    감사합니다
    답글 수정 삭제
46. 
    정완료5개월 전
    완료
    답글 수정 삭제
47. 
    현우5개월 전
    완료
    답글 수정 삭제
48. 
    정민5개월 전
    감사합니다! 유용하게 잘보고 있습니다!
    답글 수정 삭제
49. 
    우왑5개월 전
    9.6 끝
    답글 수정 삭제
50. 
    Min Sang Shin5개월 전
    감사합니다.
    답글