[4일차] #18. 리팩토링 (refactoring) - 코드 가독성 높이기 'this', 'var target'

---

4일차

---

수업의 목적

HTML과 JavaScript의 만남 1 (script 태그)

HTML과 JavaScript의 만남 2 (이벤트)

HTML과 JavaScript의 만남 3 (콘솔)

데이터타입 - 문자열과 숫자

변수와 대입 연산자

웹브라우저 제어

CSS 기초

제어할 태그 선택하기

프로그램, 프로그래밍, 프로그래머

조건문 예고

비교 연산자와 Boolean 데이터 타입

조건문

조건문의 활용

리팩토링(refactoring)

반복문 예고

배열

반복문

배열과 반복문

배열과 반복문의 활용

함수예고

함수

함수의 활용

객체예고

객체

객체 활용

파일로 쪼개서 정리 정돈하기

라이브러리와 프래임워크

UI vs API

수업을 마치며

---

#18. 리팩토링 (refactoring)

---

▲ 바디 아래쪽에 '버튼' 태그 삽입

---

[문제점] 같은 학번인 id="night_day"를 사용하고 있기에, 'night'를 눌러도 버튼은 day로 바뀌지 않는다.

---

▲ id 변경 (#night_day ⇒ #night_day_2

---

[해결] 식별번호 ('id')를 다르게 하였기에, night-day 버튼 전환이 원활히 이루어진다

---

▲ 코드 간결화 하기

리팩토링 (refactoring)

---

코드의 가독성을 높이는 행위 (유지·보수·중복제거)

(예시) onclick 내에서 실행되는 이벤트를 간결하게 가르키도록 하는 태그 'this' 

① <input id="night_day2"> ⇒ <input> 

② document.querySelector('#night_day2').value ⇒ this.value

---

 

▲ this.value를 이용해 똑같이 '버튼'을 삽입하여도 잘 동작한다.

▲ 바디 제일 위쪽 버튼도 바꿔주기

▲ '중복제거' 기능의 var.target 태그 설정하기

리팩토링 (refactoring)

---

코드의 가독성을 높이는 행위 (유지·보수·중복제거)

(예시) 명령값을 간결하게 중복제거 해주는 'vartarget'

① onclick과 if 사이에 다음과 같은 코드 입력하기 ⇒ var target = document.querySelector('body')'

② 본문상의 document.querySelector('body')'를 target으로 바꾸기 

---

---