Java Script (JS) - ToDoList

index.html

이전에 했던 UserName에 이어서 작성했다.

 

 

todo.js

 

새 js 파일을 만들고 toDos 조건은 아직 놔둔채로 입력했을 때 로그가 찍히는지 먼저 확인

 

 

작동되지만 문제가 있다.

무리없이 작동하지만 내가 원하는 것은 엔터를 입력하면 input 박스 안의 내용이 사라지는 것이다.
그래서 아래와 같이 초기화를 해주도록 하자

 

초기화

 

---

이제 JS에서 직접 태그를 생성해보자

 

index.html

 

우선 html 파일에서 li를 하나 만들어 둔다

그 다음 JS에서 직접 child 태그를 생성하고
html의 Li 태그의 자식으로 묶어주자.

 

createElement로 li와 버튼, span을 생성하고
버튼과 span을 li의 자식 태그 지정한 후
js의 li를 html의 li의 자식으로 넣는다.

todo 이벤트 발생 전

 

이벤트 발생 후

 

문제점을 발견했는데
난 버튼을 특수문자로 지정해놨는데 보이지 않는 현상이 생겼다.

이럴 때 charset을 해주자.

meta charset

잘 나온다.

 

---

이제 본격적으로 ToDo 리스트를 만들어보자

 

빈 리스트

비어있는 리스트를 생성한 후 

 

toDoObj라는 오브젝트를 Dict 형태로 생성하고
빈 리스트인 toDos에 넣어준다 (push)

초기 상태

"공부" 입력 후

위 그림에서 나와있듯이 아무 것도 입력하지 않을 때는 빈 리스트이다.
그런데 공부를 입력하고 나서 toDos를 보면 만들어둔 Dict형태로 들어가있다.

누적되어 쌓인다

 

---

이제 li 태그에 id를 부여하자

id를 부여하는 이유는 li를 삭제할 때 어느 li를 지워야하는지 알아야하기 때문

 

id부여

li.id를 통해 id를 부여한다.

---

이제 local storage에 저장하자

 

이건 내가 원한 모습이 아니다.

이러한 현상이 나타나는 이유가 있는데.
local storage에는 Java Script의 데이터를 저장할 수 없기 때문이다.
local storage에는 오직 string만 저장할 수 있다.

 

임의로 hello라는 이름으로 true값을 넣어보았다.

그리고 콘솔에서 local storage의 hello를 쳐보면
true가 ""안에 감싸져서 텍스트 형태로 있는 것을 볼 수 있다.

텍스트 형태이다.

 

 

JSON.stringify()

JSON.stringify를 사용하면 자바스크립트의 데이터를 string으로 변환시켜준다.

잘 들어갔다.

---

 

데이터를 불러오자 

 

 

콘솔에서 확인해보면

 

로컬 스토리지에 있는 toDos 데이터를 잘 가지고 왔다.

 

그러나 가져온 데이터가 string이라는 문제가 있기 때문에 JSON을 사용하자.

JSON.parse()

JSON의 parse를 사용하여 변경하였다.

 

 

forEach

string을 오브젝트로 변환한 parsedToDos에 forEach를 적용한다.

 

---

자 이제 forEach를 이용하여 각각 요소에 paintToDo를 적용시켜보자

 

forEach()

 

자동으로 화면에 뿌려준다.

 

 

다음엔 Delete를 진행해보자