Opentutorials.org

리팩토링(refactoring)

2017-11-26 01:32:25

소스코드

변경사항

cg5일 전

2019.01.11
this 는 자기 자신을 표현하고
중복되는 코드를 제거하기 위해 긴 코드를 변수하나로 정의하여 변수이름을 대신사용하는 것.

답글
ManualJedi6일 전

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 모두 동작합니다.
대화보기
답글
후추원꼬집6일 전

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 Yook6일 전

리팩토링 잘 배우고 갑니다.

답글
suhwan8일 전

이런거 할때마다 소름돋는다

답글
쿵쾅이팸한 달 전

this 로 훈훈한 마무리
공중제비 3회전 돌고 갑니다

답글 수정 삭제
돼지천재한 달 전

감사합니다.

답글
Pakupaku한 달 전

잘 들었습니다! 매번 감사합니다 ^^

답글
icdoit2개월 전

감사합니다.

답글 수정 삭제
키보드치는남자2개월 전

잘들었습니다

답글
jo_onc2개월 전

target은
var target = document.querySelector('body');
변수에요~
대화보기
답글 수정 삭제
ohcho3개월 전

target, this 강좌 뭐 보면 되나요 ㅠㅠ?

답글 수정 삭제
에델3개월 전

웅 카렌 에델 들음

답글 수정 삭제
아미쓔4개월 전

중복의 제거는 정말 정말 정말로 중요합니다!!!! 프로젝트 할 때 중복만 제거해도 몇백줄은 그냥 없어진다는. 그리고 유지보수도 훨씬 쉬워지구요.

답글
kim4개월 전

감사합니다!!

답글
오유상4개월 전

감사합니다

답글
naninem4개월 전

함수로 중복제거를 빨리 하고싶네요... 혼자 해보려니까 안되네요 ㅎㅎ;

답글 수정 삭제
metallsk5개월 전

중복의 제거를 위해 힘써주었을 많을 분들을 생각해 봅니다. 덕분에 이렇게 심플하게 배우네요~

답글 수정 삭제
로버트한5개월 전

조건문 활용을 잘해야 겠습니다.^^

답글
yoon5개월 전

<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 태그는 중복되니까 이걸로하시면 아래쪽도 전부 다바뀝니다.
대화보기
답글 수정 삭제
yoon5개월 전

코드는 일단 읽기쉽고 단순하게 만드는게 좋다

답글 수정 삭제
letterb6개월 전

조언 한가지 부탁드립니다.
위쪽의 토글버튼과 페이지 아래쪽의 토글 버튼이 같은 값으로 동시에 작동되게 하고싶습니다. 위에서 night를 누르면 아래쪽의 버튼도 day로 바뀌게끔요. 배운 것 내에서 궁리를 해보았으나, 각각의 input 에 id를 부여하게 되면, 떨어져있는 두 태그에 한가지의 id를 부여할 수 없으므로 id 2개를 사용해야 할 것 같습니다. 그런데 그렇게 되면 1억개의 버튼이 있을 때를 상정하면 매우 안좋은 방법일 것 같습니다. class는 자바스크립트와 함꼐 사용이 불가하다고 하는데.. 다른 좋은 방법이 있을까요?

답글
동글몬6개월 전

감사히 잘 봤습니다. 감사합니다~ ^^

답글
hk7개월 전

target에 .style까지 포함시키면 (target = document.querySelector('body').style), .style 중복까지도 없앨 수 있네요^^

답글 수정 삭제
소금돌7개월 전

this와 변수 사용을 통한 코드의 중복 제거 효과

답글
스페이스몽키7개월 전

이고잉님이 같은 문자열을 한방에 선택하셨는데, Brackets를 사용하시는 분은 찾고자하는 문자열 선택후 Ctrl+B누르면 같은 문자열 찾아집니다.

답글
라라라7개월 전

Ctrl+D 누르시면 하위부분에서 같은 단어를 선택할 수 있습니다. 하위부분에서 끝나면 맨위로 올라가서 선택합니다.
맥os쓰시면 cmd+D 입니다.
대화보기
답글
jayxwoo8개월 전

강의 잘 들었습니다^^
리팩토링은 아래와 같은 사항을 개선하는 작업:
- 코드의 효율성
- 가독성
- 유지보수의 편리성
- 중복된 코드 (제거)

수업문제:
- 자기자신을 가르키는 자바스크립트 코드는 this 로 대체할 수 있다.
- 중복된 코드는 변수(variable)을 만들어 대체할 수 있다.

답글
이유환8개월 전

혹시 선생님처럼 똑같은 글자 선택게속 할려면. 단축키 뭐써야되는지 혹시 아시는분 알려주시면 감사하겠습니다.

답글 수정 삭제
Yesugei8개월 전

이하빛

아마 선생님은 <> 안에 document.querySelector('body') 가 있는 태그면
그게 몇억줄의 <>로 싸여있는 코드더라도
var target = document.querySelector('body') 해놓고
한꺼번에 바꿀 수 있다고 말씀하시는 것 같아요
대화보기
답글
이하빛8개월 전

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억개가 들어있을 수 있는건지..

질문 이해가 되셨을지 모르겠어요ㅠㅠ

답글
이성준8개월 전

니고잉선생님! 감사합니다!

답글 수정 삭제
상상예찬8개월 전

김예찬 배재영

답글
Dani Choi9개월 전

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_Joyy9개월 전

오호!!! 지난번에 작성하면서, 계속 중복이 너무 많다고 생각하면서, 한번에 바뀌는 방법이 없을까? 생각했었는데!!! 변수를 통해서 중복을 제거할 수 있고, this라는 키워드로 묶어서 이 태그 한정으로 만드는 방법도 있군요!!
1) id="night_day"를 지우고, document.querySelector('#night_day') 는 개미논리처럼 같은 내용의 반복이므로 this로 대체!!
2) 반복되는 것을 variable을 이용해서, var target = '중복되는 내용'으로 if절 앞에 작성하고, 이하 중복되는 내용을 target으로 대체!!
코드명! '중복을 끝까지 따라서 제거하자'

답글
라울10개월 전

감사합니다.

답글
Meflow10개월 전

그럼 처음 코드 짤때부터 위와 같이 변수를 활용해서 간결해서 코딩하면 되는건가요??

답글
제갈량10개월 전

잘 봣습니다.

답글
돌침대에서덤블링10개월 전

함수내에서 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)'>
대화보기
답글
jiny887710개월 전

<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 Son11개월 전

180213 중복을 줄이는 것. 강의 감사합니다!

답글
JN8711개월 전

180210 감사합니다!

답글
Hyun Woo Lee11개월 전

중복을 줄이자!

답글
마린보이11개월 전

함수를 이용해서 사용했을때
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>

답글 수정 삭제
slowwoman11개월 전

id="night_day"를 지우지 않으셨네요.

답글
꼬맹파파11개월 전

this의 활용과
중복의 제거!!

중복이 많아지면 버그가 나올 확률이 높아지죠!

답글 수정 삭제
PassionOfStudy11개월 전

<< 2018-01-20 - 2일차 _다섯 번째 강의 >> --> 완료!

항상 강조하시는 중복의 제거~! ^^
최대한 중복되는 코드를 제거해서 모듈화 시키겠습니다.

답글
별밤1년 전

https://www.w3schools.com......SN9
복습차원에서 이미지 넣어서 불 껐다 끄는거 해봤는데 진짜 되네요. 신기해요~

답글
Fiat1년 전

감사합니다~

답글
이유리1년 전

감사합니다.

답글