6일차 : 리팩토링, 반복문 예고

6일차 : 리팩토링, 반복문 예고

 

리팩토링이란?

 

코드를 효율적으로 만들고, 유지보수하기 편리하게 만들고, 중복된 코드를 없애는 등 이렇게 코드를 개선하는 작업을 리팩토링이라고 합니다.

 

지난 시간에 만들었던 나이트모드 버튼 기억나시나요?

그 때는 버튼을 맨 위쪽에 만들어 놨었죠. 만약 글 맨 아래에도 같은 버튼을 만들면 어떻게 될까요?

우선은 지난번에 사용했던 코드를 그대로 복사 붙여넣기 해서 버튼을 하나 더 만들어 보겠습니다.

같은 버튼이 아래에도 하나 생겼는데요.

아래에 있는 버튼을 누르면 화면 전체의 모드는 바뀌는데, 버튼에 표시된 내용이 바뀌질 않습니다. 위에 있는 나이트 버튼은 누르지도 않았는데, 이 버튼이 데이 버튼으로 변경되고 있습니다.

 

그 이유는 바로 두 버튼의 아이디가 auto로 동일하기 때문입니다.

이럴 때는 아이디를 다른 것으로 변경해 주어야 합니다.

위는 auto1 아래는 auto2로 바꿔주면, 아래의 버튼을 눌러도 위의 버튼은 변경되지 않는 것을 확인할 수 있습니다.

그런데 만약 이런 버튼이 한 페이지에 수십개가 있다고 생각해보세요.

수십개의 버튼을 다 다른 이름을 붙여줘야 하고, 수정해야하는 사항이 생기면 하나씩 다 따로 수정해야겠죠?

 

생각해보면, 이 버튼은 다른 버튼이 아니라 자기 자신을 나타내고 있습니다.

이런 경우에는 id를 따로 정해줄 필요 없이, document.querySelector('#auto1') 부분 전체를 this로 변경하면 됩니다.

 

아이디를 적을 필요도, 긴 쿼리셀렉터를 사용할 필요도 없습니다.

이렇게 간단하게 표현할 수 있죠.

그 아래에 있는 document.querySelector('body')도 너무 복잡하게 생겼죠?

이건 var 를 이용해 간편하게 바꿀 수 있습니다.

var target = document.querySelector('body')를 if문 위에 추가해 줍시다.

그러면 모든 body 선택자는 target으로 이름을 바꿀 수 있겠네요.

훨씬 간편해졌죠? 이처럼 중복을 제거하고, 코드를 간단하게 만드는 작업을 모두 리팩토링이라고 합니다.

이렇게 코드를 변경하면, 나중에 코드를 수정할 때에도 모든 부분을 각각 수정할 필요가 없습니다.

 

 

반복문이란?

 

반복문은 말그대로 어떤 내용을 계속해서 반복하는 내용입니다.

 

만약 우리가 수정해야하는 코드가 수십개를 넘어서 수백개 수천개가 생긴다고 하면 너무 절망적이겠죠.

그런 경우에 반복문을 사용하면 컴퓨터에게 사람을 대신해서 일명 노가다를 시킬 수 있습니다.

 

수정해야하는 모든 것들을 불러와서 하나씩 하나씩 반복시키는 것이죠.

다음 시간에는 이를 위해서 배열과 배열을 이용한 반복문을 배울 예정입니다.