Opentutorials.org

리팩토링(refactoring)

2017-11-26 01:32:25

소스코드

letterb15일 전

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

답글
동글몬17일 전

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

답글
hk한 달 전

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

답글 수정 삭제
소금돌한 달 전

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

답글
스페이스몽키한 달 전

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

답글
라라라한 달 전

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

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

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

답글
이유환2개월 전

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

답글 수정 삭제
Yesugei2개월 전

이하빛

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

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

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

답글
이성준2개월 전

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

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

김예찬 배재영

답글
Dani Choi3개월 전

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

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

답글
라울4개월 전

감사합니다.

답글
Meflow4개월 전

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

답글
제갈량4개월 전

잘 봣습니다.

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

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

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

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

답글
JN875개월 전

180210 감사합니다!

답글
Hyun Woo Lee5개월 전

중복을 줄이자!

답글
마린보이5개월 전

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

답글 수정 삭제
slowwoman5개월 전

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

답글
꼬맹파파5개월 전

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

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

답글 수정 삭제
PassionOfStudy6개월 전

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

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

답글
별밤6개월 전

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

답글
Fiat6개월 전

감사합니다~

답글
이유리6개월 전

감사합니다.

답글
엥6개월 전

리팩토링 : 유지 보수를 하기 간편하게 코드를 효율적으로 만드는 작업.

핵심 한마디: 중복이 있다면 끝까지 따라가서 제거하세요 !

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

예제와 함께 하니 너무 와닿네요..!!

답글
Wallace Lee7개월 전

wow var의 의미가 저런것이었군요.

답글
Jupi7개월 전

이고잉님이 하신 것 처럼,
atom 에서 Multiple Selections(다중 선택) 하시려면,
맥에서 cmd+d , 윈도우서 ctrl +d 쓰시면 될거에요~

# 리펙토링의 방법의 하나가 중복의 제거라는 말씀이신지, 리펙토링 자체가 중복의제거 그 자체인지 궁금하네요..

답글
안승7개월 전

정말 너무나 좋은 강의입니다 ㅠㅠ
'중복을 끝까지 쫓아가서 없애라!' 너무 공감됨다!

답글
egoing7개월 전

아하 그렇죠! id값은 이제 필요 없어지죠!
대화보기
답글
이화진7개월 전

저렇게 수정되면 <input id="night_day" type="button" 가 <input type="button" 이렇게 되도 상관 없는것이지요?

답글