1. JS에서 html 내부에 button 태그 만들기
1. const button = document.createElement("button");html에 button 태그를 생성 할수 있도록 button이라는 객체 정의
2. button.innerText = "❌";사용자가 버튼을 누르면 text가 삭제 되는 기능이 있다는 것을 인식시키기 위해
button 내부 text를 "❌"로 정의
3. button.addEventListener("click", deleteToDo);button에서 event가 발생했을 쌔 삭제 기능을 담당하는 함수가 실행되도록 한다.
여기에서 "click"이 발생시, deleteToDo 함수가 실행 되도록 한다.
2. 삭제 기능을 담당하는 함수 생성
1)const li = event.target.parentElement;event가 발생 했을 때 해당 객체를 지정하여, 그것의 부모 태그를 지정한다.
2) li.remove(); 위에서 지정된 것을 삭제한다.3 . 정리
1.button.addEventListener("click", deleteToDo); 에서 click이 발생하면deleteToDo 함수가 실행된다.2. function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
}방금 위 코드 작성으로 추가와 삭제 기능을 구현 하였다.
하지만 새로고침을 하거나 이용자가 누구인가와 관계 없이 똑같은 todo-list가 나온다.
그렇게 되면 todo-list를 그 때 마다 계속해서 작성해야 할 것이다.
만약에 todo-list를 1,000개 작성했는데 단숨에 데이터가 날아 간다면??
그건 부족한 todo-list 일것 이다.
그래서 todo-list에 나타낸 text를 저장하는 기능이 필요하다.
1. todo-list의 배열 생성
1. const toDos = [ ] ;toDo에 들어 오는 text를 배열로 묶어 보관하기 위해 빈 array를 생성해 준다.
2. 저장 기능을 함수로 정의 한다.
- 아직 기능을 하진 않지만 화면에 나타낸 텍스트를 저장할 것이기 때문에
대충 그러한 기능을 하는 함수가 있다고 상상하고 빈 함수
function saveToDos() { }; 를 생성 한다.- 앞에서 만들었던 함수 handleToDoSubmit(); 의 맨 마지막에
저장 기능을 실행 할 saveToDos(); 넣어 두고 다음에서 기능을 구현한다.
3. todo-list 를 저장하는 기능을 수행하는 함수 설정
1. function saveToDos() { localStorage.setItem("todos", toDos); } 에
"todos"라는 이름의 카테고리로 저장한다.2.하지만 이렇게 저장하게 되면 직접 localStorage에서 확인 해봤을때 값들이
array 안 에서 string 의 형태가 아닌 상태로 저장된다.
ex:) key:todos value: a,b,c- 값들을 string 의 형태로 toDos라는 array에 집어 넣고 싶기에
JSON.stringify()라는 객체를 사용한다.이 도구는 대입한 값을 알아서 string의 형태로 바꿔 준다.
ex:) key : todos value : [ "a", "b" , "c"]Loading To Dos part one
- ToDo-list 작성시 localStorage 에 저장이 된다.
- 저장이 될 때 string data type 으로 저장이 된다.
ex:) "[a,b,c,d,e]"3. JSON.parse()를 통해 string data type을 object로 바꾼다.
이 object는 array로 같이 바뀐다.
index를 통해 value를 access 할수 있다.
ex:) "[a,b,c,d]" (string) => [a,b,c,d] (array);
array[0] = a;
array[1] = b;
array[2] = c;
array[3] = d;4. array 형태가 된 값을 parsedToDos 라는 const variable에다가 넣어준다.
5. 이상태에서 parsedToDos는 array 형태라고 가정했을때
.foreach()라는 function을 사용 할수 있는데 이건 mdn 웹사이트 가면 나오지만
그냥 단순히 array에 들어 있는 모든 값을 iterate(순찰) 할수 있는 function이다.
6. index 0 부터 마지막 index 까지 한 바퀴 돌면서 그 값들을 item 이라는 곳 또는
element에 저장이 된다.
ex:) array = [ a, b, c, d ]
array.foreack ( ( item) => console.log(item)) output: a b c d다시 간단하게 정리 하자면
localStorage에 array로 저장이 안되기 때문에 JSON.stringify로 array 처럼
생긴 string으로 저장한 후 다시 JSON.parse 이용해 array로 꺼내는 방법이다.
array.foreach는 받아온 array 를 for 반복문 없이 item 하나 씩 function에 넣을수 있다.
