리팩토링(Refactoring) 이란 비효율적으로 코딩된 코드에 대하여 동작하는 것은 그대로 유지하되 코드자체를 효율적으로 만들어서 그 코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업을 의미하며, 소프트웨어의 규모가 커지고 복잡해질수록 리팩토링의 역할을 매우 중요합니다.
https://nossodia.tistory.com/119?category=921581
조건문 (feat. 조건문을 이용한 주간모드,야간모드 전환 버튼 생성)
조건문이란, 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는것이다. 조건문은 if로 시작하며, if 뒤의 괄호 안에 조건을 기입한다. (조건이 될 수 있는 값은 Boolean이다.) IF 뒤의 괄
nossodia.tistory.com
이전 학습내용이었던 주간/야간모드를 전환하는 코딩을 리팩토링해봅시다.
위 예제 코드를 복사하여 두개의 버튼을 생성한다고 가정해봅시다.
두개의 버튼이 모두 주간모드와 야간모드를 전환시키는 기능을 수행하기는 하지만,
오른쪽의 버튼을 클릭해도 왼쪽버튼의 value 값만 수정되고(night<->day)
실제 클릭한 오른쪽버튼의 값은 수정되지않습니다.
이는 코드를 작성할때 #id 값을 지정하여 왼쪽 버튼에 적용이 되는것인데요
이를 예방하기위해서는 새로운 버튼에도 새로운 id값을 지정해주어야합니다.
위와 같이 버튼별로 id를 생성하여 각각 코딩해주면 입력한 버튼의 value값이 정상적으로 수정될것입니다.
하지만 이런 버튼을 수십, 수백개를 만들어야한다고 생각해봅시다.
수십,수백개의 id를 생성하여 적용하는것은 매우 어려운일입니다.
이럴때 응용할 수 있는 방법이 바로 .this 선택자입니다.
위 코드에서 document.querySelector('#night_day')는 사실 자기자신을 가리키고 있습니다.
따라서 이 코드 대신 this를 적용할수 있으며 this를 적용하면 id의 값이 필요하지 않아 삭제가 가능합니다.
위 코드는 1) id 선택자 이용방법과 동일하게 작동되지만 훨씬 더 간결하고 가독성이 높습니다.
또한 this선택자를 활용하면 해당 코드를 복사하여 여러개의 버튼을 새로 만들어도 잘 동작합니다.
이러한 이유로 this선택자를 활용하면 유지보수하기도 더욱 편리하다는 것을 확인할 수 있습니다.
그런데 위 코드(this선택자) 예제를 보면 document.querySelector('body')라는 부분이 다수 중복하여 등장하고 있습니다.
코딩에 있어 많은 기술이 필요하지만 그중에서 중복을 없애는 것은 매우 중요한 기술입니다.
그렇다면 위의 중복된 코드는 어떻게 개선할 수 있을까요?
이번 강의에서는 변수를 활용하는 방법을 이용해보겠습니다.
<body> 태그를 target이라는 변수를 할당하고 위 코드 상에서 'body' 태그를 지칭하는 부분을 모두 target으로 바꿉니다.
이렇게하면 중복된 코드가 줄고 target 변수를 쓰는 부분들은 상단에 작성한 var target=document.querySelector('body') 부분만 수정하면 target 변수를 쓰는 모든 코드를 한번에 수정할 수 있는 장점이있습니다.
'Spec UP - Frontend > 생활코딩_JavaScript' 카테고리의 다른 글
| 배열과 반복문_2 (0) | 2021.09.15 |
|---|---|
| 배열과 반복문 (0) | 2021.09.09 |
| 조건문 (feat. 조건문을 이용한 주간모드,야간모드 전환 버튼 생성) (0) | 2021.09.08 |
| 비교연산자와 블리언 (0) | 2021.09.08 |
| 제어할 태그 선택하기 (야간모드,주간모드 버튼 생성) (0) | 2021.09.08 |
댓글