todolist 모두 정리

이번에 만든 todolist는 데이터베이스를 사용하지 않고 localStorage를 사용해서 작업했다.

로컬스토리지도 JSON으로 데이터를 주고 받는 것은 동일하다

혼자 처음부터 끝까지 만들어보고 총정리 하는 내용

단순한 submit 이벤트 등록. 봐야할 점은 input value를 todovalue로 저장하고 Object를 만들었다. 나중에 삭제하거나 수정할때를 생각해보면 각 데이터에 id가 있어야 구분할수 있으므로 객체형태로 만들고 id를 부여했다. toDos는  let으로 선언한 빈 array이다. 

let toDos = [];

toDos가 계속해서 update되므로 let으로 선언했다. submit이 발생될때마다 그 object가 toDos배열에 push될것이고, 그 후 saveTodo가 실행되면 그 toDos array가 로컬스토리지에 저장될 것이다.

로컬스토리지도 데이터베이스처럼 JSON으로 데이터를 주고받는다.

object를 그냥 보내버리면 [object Object]로 보내진다. 이것은 object가 string으로 변환될때 발생되는 현상이라고 한다.

그래서 object를 데이터베이스나 로컬스토리지로 보낼때는 JSON형식을 이용한다. 

자세한 내용은 https://pungwa.tistory.com/60 

JSON이란? 두번째 글(서버와 클라이언트의 데이터 교환)

우리가 submit이 될때마다 오브젝트를 만들어서 toDos array에 업데이트 시키면서 계속 push해놨기 때문에 saveTodo 함수를 실행할때는 인자가 필요 없다.  어차피 Let으로 선언된 toDos를 밖에서 가져와서 저장하니깐.

입력한 input value를 출력하는 함수. html에 만들어 놓은 ul태그에 들어갈 li를 만드는 함수이다.

li안에는 택스트를 가진 span과 x표시가 들어간 button이 들어간다.

li에 id를 부여한 이유는 나중에 삭제하기 위해서이다. button에 클릭이벤트를 등록했다. 클릭하면 그 클릭한 li를 지워주는 함수를 만들자.

근데 만약 방금까지 빈 페이지가 아니라 로컬스토리지에 뭔가 데이터가 이미 저장되어 있는 상태라면? 브라우저 껏다가 다시 접속하거나 새로고침할때마다 빈페이지를 보고싶지 않을테니 로컬스토리지에 값이 있는지 확인 먼저 해보자. 이래서 로컬스토리지에 데이터를 저장했던거니까? 만약에 로컬스토리지에 toDos라는게 있으면, JSON.parse로 데이터베이스에서 String을 가져와서 실제 array를 만들듯이 똑같이 해준다. 그럼 savedTodos는 그전에 로컬스토리지에 저장해놨던 toDos array와 동일해진다. JSON으로 왔다갔다만 한거니까.

그 toDos안에 있는 object 모두 print해줘서 전에 입력했던 값을 볼 수 있게 한다. 그리고 우리 자바스크립트 toDos를 업데이트 해줘야 한다. 이 부분이 없으면 새로고침할때마다 빈배열에 추가되어서 계속 초기화가 될것이다. 우리의 toDos array가 빈배열로 초기화되지 않도록 주의하자.

삭제버튼을 클릭하면 두가지 일을 한다. 하나는 브라우저에 보이는 li태그를 삭제하는 것이고 하나는 로컬스토리지에서 삭제하는 것.

클릭 이벤트를 event로 받아서 event.target.parentNode 혹은 event.target.parentElement를 하면 클릭한 타겟의 부모 엘리먼트를 가져올 수 있다. 그것은 바로 내가 삭제하고자 하는 li이다. 

두번째 로컬스토리지에서 삭제하기 위해 filter를 사용했다.

filter는 toDos array의 각 요소에 대해 모두 실행한다. 마치 foreach() 처럼.  그리고 콜백함수가 true가 되는 조건만 반환하는 함수이다. 

toDos의 모든 요소(오브젝트겠지)를 item으로 받아서 그 오브젝트의 id가 타켓의 id와 같지 않은 것들만 모아서 새로운 array로 반환한다.

그리고 그걸 toDos로 다시 받는다. 

그럼 toDos가 내가 삭제했던 오브젝트만 제외한 array로 업데이트 되었다. 그 후에 다시 save를 해주면 로컬스토리지에 방금 바뀐 toDos array가 저장된다. 

 

여기까지 하면 모든 데이터의 변화가 html과 로컬스토리지에 동시에 이루어지면서 완벽한 todolist가 된다!