Momentum todo list 만들기(로컬스토리지와 JSON)

todo 목록을 입력하고 리스트로 출력하는 코드

toDoForm에 submit 이벤트리스너를 만든다. 기본동작(새로고침)을 막아주고 사용자가 입력한 toDoInput.value를 새로운 변수로 받아서 저장하고 빈칸으로 만든다. 빈칸이 되었어도 newToDo라는 변수로 저장했기 때문에 상관없다. 그리고 paintToDo함수를 실행해서 사용자가 입력한 리스트를 그려주는 함수를 실행한다. ul태그 안에 li를 만들고 그 안에 문구와 버튼을 넣을것이므로 문구는 span태그 안에 넣는다. span을 li에 붙여주고 span의 innerText는 사용자가 입력한 바로 그 변수 newToDo이다. 그리고 li를 toDoList(ul태그)에 붙여준다.

여기까지 하면 todo항목을 입력하고 출력할 수 있지만 지우는 버튼이 없다. 그리고 새로고침 했을때 전부 없어진다. 두개의 과제가 생긴다.

1. 지우는 버튼 만들기

2. 로컬스토리지에 저장하기

지우는 버튼을 만들기 위해 button을 만들고 innerText를 넣어주고 li에 붙여준다. 그리고 클릭했을때 해당 li가 지워져야 하므로 클릭 이벤트리스너를 만들어 준다. 다행히 웹브라우저는 뭔가 클릭했을때 무엇을 클릭했는지 알고있다. 그 모든 정보를 담아 첫번째 인자로 담아서 슬그머니 넘겨준다. 우리는 그 정보를 event라는 변수로 받아준다. 그리고 event에 담긴 정보 중 target을 찾아서 parentElement를 찾아보면 클릭한 버튼의 li태그를 찾아가는 것을 볼수있다. deleteToDo함수는 클릭한 버튼의 li태그를 찾아 삭제해준다. 

2. 로컬스토리지에 저장하기 위해 toDos라는 빈 배열을 하나 만들어준다. 이 배열에 사용자가 입력한 newToDo를 차곡차곡 넣은 후, 이 배열을 통째로 로컬스토리지에 저장할 계획이다. 여기서 JSON이라는게 나오는데 이것에 대해 정리할 필요가 있으므로 다음글에서 마저 정리한다.