[Week 4] To-do-list 버그 수정

To-do-list 끝난줄 알았는데 끝난게 아니였다...

팀원 상호님의 얘기대로 To-do-list에 2가지 Bug가 있었다.

1. Task를 제일 아래꺼부터 Delete하면 지워지는데 첫번째부터 Delete하면 마지막께 지워지지 않음.

2. 페이지를 Refresh하면 Delete했던 task들이 다시 보임.

팀원들에게 BUG 수정한 부분을 전/후 Code를 보여주면서 설명하려고했으나...
어제 GitHub 공부하면서 push가 제대로 안되길래 push -f 기능을 이용했더니 push는 됐는데...
이전 history가 다 날라갔다....ㅠㅠ

Delete 기능 Bug

기존에 각 row (행)에 id를 부여하지 않았다.
그래서 한 row를 최근 추가한 task (아래)부터 순서대로 delete하면 문제가 안됐지만 마지막에 추가한 task(위)부터 delete하면 가장 최근에 추가한 task를 delete하려고해도 delete button이 작동되지 않았다. 이유는 delete button function이 delete하려는 row와 matching이 안됬기 때문이다. 이를 해결하기 위해서 id 값을 부여했다.

먼저 rowID variable을 생각하기 쉽게 1이라고 지정했다.

첫번째로 생선된 Row (Task, Priority, Deadline값)이 1이면 그 다음 생성되는 Row는 +1을하여 2라는 ID 값을 줬다.

이처럼 Do Velog Task는 rowID=1, Study Java는 rowID=2, Play Soccer는 rowID=3 값을 지정 받았다.

여기까지는 지난번 Code와 똑같으나 한번 지정한 rowID 값은 변하지 않지만 Array를 사용한 기존 code는 변경시 [] 숫자 값이 바뀌어 Delete button function이 제 기능을 할 수 없었다.

첫번째 Do Velog rowID=1을 삭제했다.

두번째 Study Java rowID=2을 삭제했다.

세번째 Play Soccer rowID=3을 삭제했다.

이런식으로 변하지 않는 ID를 생성되는 row에 부여하니 나중에 delete할 때 정확히 그 row 를 삭제할 수 있었다.

Refresh하면 Data가 다시 복구되는 Bug

브라우저에 출력되는 task 목록이랑 localStorage에 저장되는 task 목록 data를 따로 구분하고 거기에 각각 id 값을 부여해서 delete를 눌렀을 때의 두 데이터 간 id 값을 비교해서 화면에 출력되는 방식을 상호님이 추천했는데 이 방법보다 조금 더 간단한 방법이 있다고해서 시도했다.

Delete Button을 누르고 해당 row를 삭제 후 남아있는 row data 값을 저장 후 local storage에 저장하는 방식이다.

기존 removeSelectedRow 함수에서는 localStorage.removeItem (line 137)에서 끝났었다. rowTask, rowPriority, rowDeadline을 localSotrage 저장하는 기능을 removeSelectedRow 함수에 포함했다.

initilize 함수에서 브라우저에서 Refresh button (F5)를 눌렀을 때 localStorage에서 저장된 값을 불러오게했다. 이런식으로 기존에 delete를 눌러도 refresh하면 복구가됬던 bug를 수정했다.