생활코딩 11일차 [21.01.26]

<리팩토링>

리팩토링이란? '다시 공장을 가동하는 것', 즉 다시 가공한다는 뜻인데, 코드가 늘어날 수록 비효율적인 코드나 반복되는 코드가 많아진다. 이를 재가공 과정을 통해 효율적으로 정리해나가는 것을 리팩토링이라고 한다.

 

기존의 night 버튼을 웹 페이지 하단에서도 볼 수 있게 코드를 복사 붙여넣어보자. 그러고 잘 가동되는지 확인해보자.

버튼이 생겨서 배경화면과 글자색은 잘 바뀌지만 하단의 버튼 value값이 day로 바뀌지 않고 그대로 night값을 유지한다.

왜 이럴까? 이유는 상단과 하단의 버튼의 id가 둘 다 "night_day"이기 때문이다. id가 중복되면 안된다. 그러므로 하단 버튼의 id값을 "night_day2"로 수정해준다. (id값은 고유한 값을 부여하는 건데, 중복되면 그 차별성을 잃기 때문에 번호를 부여해준다)

 

이렇게 id값을 수정해주면 하단의 버튼 value 값이 올바르게 바뀐다.

 

만약에, 1억 개가 넘는 버튼들이 있다고 가정해보자. 그러면 우리는 일일이 id값 뒤에 번호를 부여해가며 수정해야할까? 이렇게 비효율적인 일이 어디 있을까? 리팩토링을 통해 이러한 수고로운 일에서 벗어날 수 있다.

 

 

• 자기 자신을 가리키는 코드 

이 코드에서 빨간 밑줄은 전부 중복되는 값이고, 무엇보다도 자기 자신을 가리키는 값들이다. 이 값에 id 값을 부여하면 물론 좋지만, 결국 개수가 늘어남에 따라 우리는 id값 하나 하나에 고유한 값을 부여해주어야 한다. 이럴 때는 'this'라는 코드를 쓰면 된다.

document.querySelector('#night_day') 가 자기 자신에게 id을 부여하고 이를 가리키는 코드이기 때문에 이것을 지우고 

this 로 대체한다. 그리고 id값도 지워준다.

 

• var target = document.querySelector('body') ; 

생활코딩의 강의는 코딩을 '잘'하는 것보다는, '어떻게' 하는 지에 초점을 맞춘 강의이다. 그러나 지금 배우는 한 가지는 '잘'하는 것에 대한 방법이다. 코딩을 잘하려면 어떻게 해야할까? 중복을 끝까지 쫓아가서 없애는 것이다. 코딩 기술의 진화는 중복을 없애려는 노력에서부터 시작한다.

여기서 document.querySelector('body') 코드가 4번이나 중복된다. 이를 없애기 위해 '대입 연산자'를 통해 효율성을 올려보자.

조건문 시작 전에 document.querySelector('body')를 target으로 대체한다는 코드를 심어주고 대체하자.

훨씬 깔끔해진 코드창

 

<반복문 예고>

웹 페이지의 night 모드에서 링크가 걸려있는 글자들은 어두운 배경속에서 잘 보이지 않는다. night 모드에서 링크가 걸려있는 글자들이 밝은 색으로 수정되었으면 좋겠는데 어떻게 할까? 1억 개가 넘는 링크들을 일일이 수정해야 할까?

JS의 반복문과 배열을 통해 할 수 있다. 

 

<배열>

배열(Array)이란? 여러가지 항목들을 바구니 안에 넣어서 정리하는 것과 같다. 배열 안에 항목들이 있고 이 항목들의 순서가 존재한다.

 

①배열의 문법 (배열 설정하는 법)

 

egoing과 leezche라는 항목들이 coworker라고 이름을 붙인 바구니에 들어가있다. 

["egoing", "leezche"] 자체가 배열이고 coworkers라는 이름을 붙였다.

 

②배열 속에서 꺼내기 (get)

 

coworkers의 배열에서 0번째를 출력한다. → egoing이 출력된다. (0번 째부터 카운트함)

coworkers의 배열에서 1번째를 출력한다. → leezche가 출력된다. 

 

③배열 항목 개수 카운트하기 (length)

 

coworkers의 개수를 카운트하기 위해 length를 쓴다. → 2가 출력된다.

 

④배열 맨 뒤에 항목 추가하기 (push)

 

.push 를 써서 coworkers의 배열 맨 뒤에 dylan, park의 항목들을 추가한다.

그리고 배열의 개수(coworkers.length)를 출력한다. → 4가 출력된다.

 

전체 코드와 출력된 모습

다양한 Array의 특성들은 당연히 외울 필요 없다. javascript array 로 구글링하면 된다.

 

<반복문>

이러한 코드가 있고, 중간의 2와 3을 반복하고 싶다. 어떻게 하면 될까?

기본적으로 코드를 반복하고 싶은 횟수만큼 복사해서 붙여넣으면 된다. 하지만 1억 번을 반복한다고 하면 우리는 하나씩 붙여넣어야 할까?

 

이럴 때에 반복문을 사용한다.

 

• 반복문 문법 : while 문 이용

기본적인 문법

틀은 IF문과 비슷하다. while을 쓰고 소괄호 안이 true이면 밑의 코드들을 반복한다. 여기서 얼마나 반복할 지는 우리가 i 를 이용하여 설정해야 한다.

2와 3을 세 번 반복해보자.

var i = 0; : 초기의 i 를 0으로 설정한다.

while ( i < 3 ) : i 가 3보다 작으면 밑의 코드를 출력한다. 

i = i + 1 ; : i 에 1을 더해주고 다시 while 문으로 돌아간다. 

i가 0, 1, 2 일 때 출력하므로 총 3번 반복된다.