리펙토링 중복의 제거
리펙토링 이란?
코딩을 하다보면 비 효율적인 코드가 작성되기도 한다. 이럴때
동작 자체는 그대로 두되 코드 자체를 효율적으로 만들어서 가독성을 높이고, 유지보수를 하기 편리하게 만들고, 중복된 코드를 제거하는 방향으로 개선하는 것! 을 리펙토링 이라고 한다.
리펙토링 실습
준비단계
글 아래에도 toggle button을 만들고자 코드를 그대로 복,붙 했을 경우
- toggle button은 생겼지만 night로 전환됐을때 아래쪽 button의 value값이 day로 변하지 않았다. (위쪽 toggle button의 value값은 변했다.)
- 그래도 다시 아래쪽의 button을 누르면 day mode로 전환되긴 한다. (동작은 제대로 됨)
-> 아래쪽 코드이 id 값을 "night_day2"라고 다르게 설정해 주어야 한다!
글 아래의 value값을 "night_day2"로 지정했을 때
아래쪽의 버튼을 누르면 아래쪽 버튼의 value값만 변화한다.
1단계 (this)
if(document.querySelector('#night_day2')는 사실상 자기 자신 (onclick 이벤트가 속해있는 tag 자신)을 가리키는 코드이다. 때문에 이를 간단한 this로 바꿔준다. 또한 this로 바꾸면서 더이상 index tag를 참조하지 않아도 되기 때문에 id="night_day2"를 지워준다.
<input id="night_day2" type="button" value="night" onclick="
if(document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.backgroundColor='gray';
document.querySelector('body').style.color='lightpink';
document.querySelector('#night_day2').value = 'day';
} else {
document.querySelector('body').style.backgroundColor='lightpink';
document.querySelector('body').style.color='gray';
document.querySelector('#night_day2').value = 'night';
}
">위 코드에서 아래코드로 최종 수정!
<input type="button" value="night"2단계--완벽한-중복의-제거">2단계 : 완벽한 중복의 제거
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor='gray';
target.style.color='lightpink';
this.value = 'day';
} else {
target.style.backgroundColor='lightpink';
target.style.color='gray';
this.value = 'night';
}
">
if와 else에 "document.querySelector('body')부분이 반복됨
->배열과-반복문">배열과 반복문
반복문 맛보기
??? : "night mode일때 링크도 같이 맞춰서 변화했음 좋겠어!!!!"
만약... 링크가 1억개라면? 1억번의 반복 작업.... 못해!
->
전체 코드 살펴보기
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor='gray';
target.style.color='lightpink';
this.value = 'day';
var links = document.querySelectorAll('a');
var i = 0;
while(i<links.length){
links[i].style.color='powderblue';
i=i+1;
}
} else {
target.style.backgroundColor='lightpink';
target.style.color='gray';
this.value = 'night';
var links = document.querySelectorAll('a');
var i = 0;
while(i<links.length){
links[i].style.color='blue';
i=i+1;
}
}
">
핵심 코드
var links = document.querySelectorAll('a');
var i = 0;
while(i<links.length){
links[i].style.color='powderblue';
i=i+1;
이 웹페이제 있는 모든 a tag들을 갖고 온 후 a tag 하나하나에 대해서 반복적으로 powderblue 색을 지정한다 라는 의미.
배열
배열이 왜 필요한가! 에 대한것은 반복문에서 진가를 발휘한다.
[ ]
문자열이 "로 시작해 "로 끝나듯이 배열은 대괄호를 사용한다! 값은 여러개를 작성할 수 있다.
ex) ["jello", "DOT"]
실습 예제 #1
배열하고 출력하기
+) var coworkers = ["jello", "DOT"]; 의 구조 파악해보기
- coworkers라는 변수에 배열이라고 하는 새로운 데이터 타입이담겨있다.
- 데이터 타입에 cowerkers라는 이름을 붙인 것이다.
-> 새로운 수납상자를 장만하면서 그 속에 물건을 두는 모양새!
corworkers에 jello와 DOT을 배열해두었다.
-> 꺼내기! (h2 : get 부분)
document.write(coworkers[0]);
coworkers에서 index 0번인 jello가 출력되게 하기.
배열 추가하기 (push)
coworkers.push("");
추가하고 나서 출력값으로 index 2번과 3번이 출력되는 것, count 값이 4로 변하는 것을 확인 할 수 있다.
+) push로 배열에 추가하기 전 윗줄에서 index 2번과 3번을 출력하려 하면 출력되지 않는다.(undefined라고 뜸)
검색으로 Javascript array 검색하면 이와 관련된 많은 명령어들을 확인 할 수 있다!
push는 배열의 뒤에 추가
배열의 앞에 추가하는 명령어도 있다!
->외울필욘 없지만.. 눈에는 충분히 익혀두고! 검색활용 잘 해야한다!
반복문
반복문 없이 4번 반복하기
1 2 3 4가 차례대로 동작되는 기능이라고 가정했을때, 2와 3의 기능이 3번씩 반복해서 실행되게 하고 싶을때 기본적으로 코드를 반복적으로 짜면 되기도 한다.
-> 1억번.. 반복한다면...? OTL
반복문 활용해서 4번 반복하기
while(){ ;}
조건문의 if() 안에 true/false 가 들어갔듯이 while()안의 true/false 상태에 따라 반복이 결정된다. -> true인 상태가 false가 될때까지 반복한다.
"몇 번 반복되었는가" 를 나타내기 위해 사용하는 변수
var i =
i를 사용하는것은 관습적인 사용 때문이다. (다들 i 쓰니까 굳어진 것)
- i 값이 0부터 시작해 0, 1, 2, 3인 동안 반복되므로 총 4번 반복됨
배열과 반복문의 조합 (시너지 효과🔥🔥)
이 상태에서 글 목록이 1억개고, li가 아닌 아주 복잡한 tag이며 수정이 빈번하게 일어나는 상황이라면 글 목록 작성이 매우 어렵다.
서로 연관된 data들을 Javascript에서 담는 방법 = 배열(Array)
배열에 담겨있는 data들을 순차적으로 꺼내서 li라는 tag로 만들어 주는 것 = 반복(Loop)
실습예제
1단계
<li></li>
반복문을 활용해 i가 4보다 작을때까지 위 코드가 출력되게 하기 (점 네개 출력된 것 확인함
2단계 : 항목에 배열의 요소가 나타내게 하기
'<li>+corkworkers[i]+'</li>'
+corworkers[i]+ 를 넣어준다.
대괄호 사이의 i는 변수 i임과 동시에 corworkers 배열의 index값임을 의미한다.!!!!
3단계 : Data가 바뀜에 따라 로직도 적용되게 하기
while(i < 4)
에서 숫자 4를 바꿔도 되지만,, 이런 번거로운 작업은 지양 해야 한다.
-> i의 값이 corworkers 배열의 길이 만큼! (count가 0부터 시작하므로 총 배열 갯수-1 만큼) 반복되게 하기
while (i < corworker.length)
추가 단계 하이퍼링크 연결하기
코드 살펴보기
document.write('<li><a href="http://a.com'+coworkers[i]+'">'+coworkers[i]+'</a></li>);
각각 항목에 대해서 a.comegoing 혹은 a.comleezche라는 주소로 이동하게 해주는 링크 연결! (주소쓸때 a.com/ 라고 하면 a.com/egoging으로 연결)
배열과 반복문의 활용 - 웹 페이지🖥
toggle button과 배열, 반복문을 혼합 활용하여 웹페이지에서 구현하기
- night mode에서 배경 = black, 글 = white, 하이퍼링크 = powder blue.
- day mode에서 배경 = white, 글 = black, 하이퍼링크 = blue.
코드 구성
- if문으로 value값이 night면 night mode를, day면 day mode가 실행되도록 설정
- 모든 a 배열에 대해서 반복문 설정
- 반복문 : 모든 a tag들을 alist라는 배열에 담는다.
- alist의 length값보다 i 값이 작을 동안 night mode에선 하이퍼링크 색을 powderblue로, day mode에선 blue로 설정되게 한다. (모든 a 링크들이 계속해서 실행 됨 - alist.length 길이로 설정하였으므로 추후 a tag 가 추가된다 하여도 같이 적용됨! data가 바뀌어도 로직을 또 수정하지 않아도 됨)
출력 화면
- 새로고침 화면
- night mode
- day mode
코드 구조 잘 숙지해두기!!
button 설정 (Javascript) - 조건문으로 상태 설정 - 조건문 속 배열을 사용해 반복문 설정
함수(function = method)
수납상자 개념! : 많아진 코드들을 정리해주는 간단하면서도 강력한 도구
함수 맛보기
여기에서 input tag가 1억개고 powderblue를 다른 색으로 고치려 한다면...?1억개의 powderblue를 수정해야 하고, 기계를 이용한다 해도 바꾸지 않으려 했던 powderblue까지 바꿔질 수 있다. 매우 힘듦!!!!!!!!😭😩
-> 함수 활용 👼
1단계 : 위 input tag가 중복된것이 2개 있는 상황
2단계 : 중복되는 내용들은 input tag에서 내용 잘라낸 후
head에 script tag 추가하여 써주기 
3단계
- script tag의 것을 function tag로 nightDayHandler라고 이름 지어주기
- function()는 self라고 입력하고, 기존에 this로 입력되어 있던 부분도 모두 self로 바꿔주기
- input tag에서 onclick" nightDayHandle(this);라고 입력하기
결과 : 코드는 짧아지고, script tag에서의 변화로 모든 nightDayHandle이 입력되어있는 모든 input tag에 들어있는 powederblue를 pink로 바꿀 수 있게 되었다.
함수의 기본 문법
function.#name(){ }
실습예제
비 연속적인 반복문 출력할때 활용하기
<script>
function two(){
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
}
document.write('<li>1</li>');
two();
document.write('<li>3</li>');
two();
</script>
- function 이름을 two 라고 짓고 출력할 내용 입력
- two();가 나올때마다 function에 담긴 내용 출력됨.
- 반복되게 출력하고 싶을 때마다 two(); 입력.
함수 - 입력 : 매개변수 & 인자 (Parameter & Argument)
함수 : 입력과 출력
실습 예제
준비 단계 : 함수를 이용해 계산식 출력하기
결과 : sum이라는 function 입력 
<script>
function sum(left, right){
document.write(left+right+'<br>');
}
sum(2,3); // 5
sum(3,4); // 7
</script>
- left와 right는 각각 매개변수이다.
- write로 left 와 right 값의 합을 출력되게 한다.
함수 - 출력 : Return
어려운걸....😭
표현식 (Expression)
- 1 + 1은 숫자 2에 대한 표현식 이다.
- 1===1은 true라는 값에 대한 표현식이다.
- 위에서 sum(2,3);에 대한 출력값으로 5가 나온것에 대해 표현식을 다시 출력하고 싶을 때 = Return 사용!
실습 예제
sum2의 결과 값을 return 해주기
function sum2에서 left, right라고 들어간 매개 변수에 대해서 대해서 return으로 둘을 합한 값을 출력함으로써 글씨 크기, 색 등 다양한 용도로 함수를 활용할 수 있다!
함수의 활용 - web page
리펙토링 중 중요한 수단 중 하나 : 함수 활용!
실습 예제
조건문 반복 내용에 대해 nightDayHandler라는 function으로 이름지어 주고, onclick으로 이를 출력하고자 nightHandler();라고 입력한 뒤 출력했을때
-> night버튼을 한번 누르면 day mode가 실행되지만 value값은 그대로 night로 되어있다.
<head>
<title>WEB1 - HTML</title>
<meta charset="utf-8">
<script>
function nightDayHandler(){
var target = document.querySelector('body');
if(this.value === 'night'){
에서 if문의 this는 원래
<input id="night_day" type="button" value="night"language-null"><input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
로 nightDayHandler(this); 라고 입력해준다. 그럼 이 this값은 nightDayHandler가 실행될 때
function nightDayHandler(){
에 들어올 매개 변수 (self 라고 이름짓기로 결정)
function nightDayHandler(self){
가 작동하게 한다.
이에 따라 function 아래 조건문에 있는 this를 self로 바꿔줘야 한다.
<script>
function nightDayHandler(self){
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'pink';
i = i + 1;
}
}
else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this. value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>
쨔잔-!!!!!
이렇게 되면,,, input tag가 1억개 라고 해도, 중복되는 코드 없이 각각은 제대로 동작되고, 보기에도 간결해지게 된다. 또한 function의 nightDayHandler라고 하는 함수도 이 하나만 바꾸면 이를 사용하는 1억개의 사용처의 내용도 같이 바뀌게 된다!
소감
어려워,, 살려줘,,,
