CODE KATA #1

CODE KATA란, 홀로 수행하는 세세한 안무 패턴이자, 학습자가 특정한 기법을 반복 학습이 아닌 자연스러운 방식으로 체계적인 접근을 통해 체득하도록 하는 KATA(形)를 코딩에 접목시킨 것이다.

What makes a good practice session? You need time without interruptions, and a simple thing you want to try. You need to try it as many times as it takes, and be comfortable making mistakes. You need to look for feedback each time so you can work to improve. There needs to be no pressure: this is why it is hard to practice in a project environment. it helps to keep it fun: make small steps forward when you can. Finally, you’ll recognize a good practice session because you’ll came out of it knowing more than when you went in.
-codekata.com-

어제 진행했던 코드의 작성 결과 중 버그로 추정되는 결과가 있었다. 이에 대해 잠들기 전 더 좋은 방법이 없을까 생각하던 나는 우연히 읽었던 CODE KATA의 첫번째 동작으로 이 버그를 실수를 감내하고, 시간을 들여서라도 해결해보기로 결정했다.

---

버그 수정

해당 버그는 2개 이상인 정수 n개의 To Do List가 존재하는 경우, 마지막 순서가 아닌 <li>를 삭제하고, 새로운 To Do List를 추가한 경우, id가 n인 To Do List가 중복되고, 둘 중 하나의 delBtn을 click하여 삭제하는 경우 그 둘이 동시에 삭제되는 현상이었다.

새로고침을 하는 경우 다시 정상적으로 id가 정렬되지만, momentum이라는 프로젝트의 특성상 매번 reload를 하지 않고도 정상적으로 id를 정렬하는 방법이 필요하다.

#1. let idNumber

해당 버그를 수정하기 위해 처음으로 사용한 방법은 comment에 있는 방법이다.
해당 방법대로 진행하면, 명백히 id가 중복되는 일은 발생하지 않지만,
이와 같이 새로고침을 하기전까지는 순서와 id가 별개로 계속 커짐을 확인할 수 있다. id가 중복되지 않는다는 점에서 한번에 두가지 <li>가 삭제되는 버그는 수정된 것이 맞지만, 프로젝트에 있어 추가적인 기능이 구현될 경우 (예를 들어, "1,4,5번째 항목이 남았습니다"를 출력하는 기능) 새로고침 없이 id와 순서가 일치하지 않는다는 문제가 있다.

---

순서와 id를 일치시키려면?

순서와 id를 새로고침 없이 일치시키고 싶다는 마음이 생겨 이런 저런 방법을 사용해보았다. 가장 먼저 사용했던 방법은 forEach() 함수를 통한 id 수정이었다.

forEach()

const cleanToDos = toDos.filter(function(toDo){
    return toDo.id !== parseInt(li.id);
})
toDos = cleanToDos;
saveToDos();

다음과 같은 최초의 코드에서, forEach()를 통해 각각의 id를 순서대로 재지정해주면 되지 않을까, 하고 생각했었다. 혹은, paintToDo()를 다시 실행시켜주면 어떨까 생각을 했으나, To Do List가 중복으로 생성되는 결과가 발생했다.

const cleanToDos = toDos.filter(function(toDo){
    return toDo.id !== parseInt(li.id);
})
idNum = 1;
cleanToDos.forEach(function(toDo){
    toDo.id = idNum;
    idNum += 1;
}
toDos = cleanToDos;
saveToDos();

다음과 같이 코드를 수정하자, id는 정상적으로 변환이 되었으나, 되려 삭제 기능이 작동되지 않았다. 이유는 해당 toDo의 id는 바뀌었으나, <li>의 id는 바뀌지 않았기 때문에, 서로의 id가 어긋나서 filter()부분이 정상적으로 작동하지 않아 엉뚱한 To Do가 삭제되거나, 아무것도 삭제되지 않는 현상이 발생했다.

각각의 <li>에 대한 접근?

그렇다면 forEach()에서 각각의 toDo.id를 수정해주면서, 해당 <li>의 id도 수정해주면 되겠다. 하지만 어떻게? 각각의 <li>는 paintToDo()에서 createElement를 통해 생성되었고, 해당 기능을 다른 함수로 Divide하여 추가로 모듈화 하거나, <li>를 생성할 때, class를 부여하여 각각의 <li>에 대해 접근하는 방식을 생각했다.

하지만 두 방식 모두, 이론 상으로 실행에 옮기면 가능할 것이라고 결론 내렸지만, 프로그램 자체의 큰 틀의 변화가 필요한 것으로 예상되어 최후의 보루로서 남겨두기로 했다.

removeChild()

기존의 코드에서, toDoList.removeChild(li)를 통해, click이 발생한 target의 <li>를 삭제했다. 여기서, 어차피 toDo는 LS에 저장된 데이터의 array이고, <li>들은 각각의 데이터들을 담는 HTML tag라면, 단지 click된 항목만 삭제하는 것이 아니라 모든 항목들을 삭제한 후, 삭제해야하는 데이터를 filter()로 걸러낸 후, 해당 데이터를 토대로 forEach()의 내부에서 toDo.id와 paintToDo(toDo.text)를 실행하여 새로 출력해주면 새로고침 없이도 순서와 id가 항상 일치할 것이다.
그러기 위해서는 특정 parentNode의 모든 child를 삭제하는 방법을 알아야 한다.
MDN removeChild()에서 아래와 같은 내용을 확인할 수 있다.

To remove all children from an element:

let element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

이를 통해, 다음과 같이 코드를 작성하면, delBtn이 click되면 모든 <li>가 삭제된다.

while(toDoList.firstChild) {
    toDoList.removeChild(toDoList.firstChild);
}

결론

다시 초반의 아이디어로 돌아와서 forEach()를 사용할 수 있는 환경이 갖춰졌다. 기존의 프로그램에서 구조적인 수정을 거치지도 않았고, 단지 click된 <li>만 지워지던 것을 모든 <li>가 삭제되도록 하여, paintToDo()호출시에 발생했던 중복 출력도 해결되었다. 따라서, forEach()에서 toDo.id와 paintToDo(toDo.text)를 사전에 선언했던 idNum을 1로 변경 후 적용시켜주면,

idNum = 1;
cleanToDos.forEach(function(toDo){
    toDo.id = idNum;
    paintToDo(toDo.text); // 내부 id도 idNum으로 지정됨.
    // paintToDo가 실행된 후 idNum += 1;이 실행되기 때문에 추가로 실행하지 않음.
});
toDos = cleanToDos;
saveToDos();

다음과 같은 코드가 완성되고, 정상적으로 작동함을 확인할 수 있다!

최초의 상태, 3개의 <li>의 id가 순서대로 지정됨.

2번째 <li>인 "C"를 삭제한 상황. 새로고침 없이도 "JAVA"의 id가 2로 수정됨.

"C++"을 추가한 상황, 기존 코드라면 id가 중복되거나, 4로 지정되지만, 순서대로 지정.

---

느낀점

언제나 그랬듯이, 배운 내용을 따라하거나, 인터넷에서 코드를 보고 기능을 구현하는 것은 금방이지만, 굳이 굳이 스스로 이건 이러니까, 저건 저러니까 따져가며 펜과 노트로 기록을 하며 상상한대로 코드를 작성하고, 예상한 결과와 비교해보고 이유를 생각하는 것은 정말 오랜 시간이 걸린다.

모든 삽질을 다 기록하기엔 글이 너무 길어질 것 같아 최초의 발상부터 결론까지 나름 유의미한 고민만을 기록했는데, 그래도 글이 꽤 길어진 것 같다.

'구조 수정 없이는 안되는거 아닌가..' 싶은 생각이 몇번 들었지만, 새해니까 속는 셈 치고 계속 붙들던게 좋은 결과로 이어졌고, 이 경험으로 성장한 것 같아 기쁘다.