● 리팩터링 ( refactoring )
리팩터링 이란, 코드를 작성하고 나서 생기는 비효율적인 부분을 잠시 멈추고 효율적으로 만들내는 것. 코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업.
우리가 작성한 코드를 리팩터링 해보자.
만약에 이 버튼을 본문 아래쪽에 하나 더 추가하고 싶다고 해보자. 그렇다면 input 태그 전체를 복사하여 아래쪽에 만들고 실행하면 잘 될까?
물론, 배경과 색깔이 바뀌는 것은 적용된다 하지만, 아래쪽 버튼을 보면 야간모드임에도 여전히 night value 를 가지고 있는 것을 확인할 수 있다. 왜그럴까?
아래 버튼을 누르면 위쪽 버튼의 value 값이 변하는 것을 볼 수 있다. 이것의 문제는 id 값이 같은 태그가 2개가 있기 때문이다. (id 값은 파일 내 하나만 존재해야 한다.)
따라서, 아래버튼의 id 값을 night_day2로 바꿔주고 실행하면 정상작동 하는 것을 알 수 있다.
극단적인 상황을 상상해보자. 만약에 이러한 버튼이 1억 개가 있다면 이것을 일일히 바꿔줘야 한다. 매우 불편한 상황인 것이다. 이것을 해소하기 위해서 onclick과 같은 이벤트 안에서 실행되는 코드에서는 현재 코드가 속해 있는 태그를 가리키도록 약속돼 있는 특수한 키워드를 사용한다. 바로 this 키워드 이다.
onclick 이벤트 안에 있는 코드 중 document.querySelector('#night_day2') 는 사실 자기 자신을 가리키고 있다. onclick 이벤트가 속해 있는 자기 자신을 가리키고 있는 것이다.
따라서, 저 코드들을 this 로 바꿔주면 된다. 그리고 this 로 바꾸면 더 이상 input 태그를 참조하는 것은 this 로 하면 되기 때문에 id="#night_day2" 는 필요가 없어지고 삭제해도 된다.
위 코드가 전의 코드보다 훨씬 간결한 것을 알 수 있다. 이것이 this 키워드의 효과이다.
위 코드를 자세히보면 중복되는 것이 또 있다. 바로 document.querySeletor('body') 이다.
코딩을 잘하는 법 중 하나는 중복을 없애는 것이다. 이 중복을 없애기 위해서 이번에는 변수를 사용할 것이다.
바로 <body> 태그에 target 변수를 할당하는 것이다.
if 문 위에 var target = document.querySeletor('body'); 를 주는 것이다. 이렇게 되면 target 은 body 태그가 되는 것이다. 그리고 document.querySeletor('body') 를 target 으로 바꿔서 작성해주면 훨씬 간결한 코드가 완성된다.
그리고 target 변수를 쓰는 부분들은 document.querySeletor('body') 부분만 바꾸면 target 변수를 쓰고 있는 모든 코드가 한 번에 바뀌는 효과를 나타낼 수 있다.
이러한 엄청난 효과때문에 변수를 활용하는 것이 중요하다.
참조 : 생활코딩 유튜브 (www.youtube.com/channel/UCvc8kv-i5fvFTJBFAk6n1SA)
'생활코딩 front-end > Javascript' 카테고리의 다른 글
| {SFB} Javascript day 9 - 반복문과 배열3 (0) | 2021.04.27 |
|---|---|
| {SFB} Javascript day 8 - 반복문과 배열2 (0) | 2021.04.27 |
| {SFB} Javascript day 7 - 반복문과 배열 (0) | 2021.04.26 |
| {SFB} Javascript day 5 - 조건문 (0) | 2021.04.24 |
| {SFB} Javascript day 4 (0) | 2021.04.24 |
