[TIL-48] 노마드코더 크롬앱(JS) 클론코딩 #7.3~#7.5

[TIL-48] 노마드코더 크롬앱(JS) 클론코딩 #7.3~#7.5

#7 To-do 리스트

ToDo 저장하기

배열 필요함. newTodo를 만들 때마다 toDos 배열 안에 push해서 저장함. toDos.push(newTodo);

로컬스토리지에 저장. 함수를 통해 배열의 정보를 로컬스토리지에 넣음. localStorage.setItem("todos", toDos); 그런데 배열의 형태로 저장되지 않음. 겉보기엔 배열처럼 만들어도 사실 그냥 텍스트. JSON.stringify (객체나 배열 등 js 코드) : ( ) 안을 string으로 만들어줌. toDos 배열을 JSON.stringify(toDos)로 쓰면 배열의 모양으로 저장됨. 중복된 문자 입력도 가능. 로컬스토리지에 이렇게 저장된 걸 이제 가져올 수 있으면 됨. 또 다른 문제, 페이지 새로고침하면 todo 리스트 사라짐. 새로 입력하면 로컬스토리지도 덮어쓰기 됨.

ToDo 로딩하기

새로고침 시, 로컬스토리지에 저장돼있는 배열 모양의 텍스트에서 정보를 가져와야 함. JSON.parse() : 배열 모양의 텍스트를 반대로 객체(배열)로 만들어줌. savedToDos가 존재한다면! if(savedToDos) 혹은 if(savedToDos !== null) 배열명. forEach (함수) : 배열의 각 아이템들을 가져와서 함수 실행하기 addEventListener의 함수가 이벤트 발생 시 자바스크립트가 주는 event를 인자로 자동으로 받듯, forEach의 함수도 배열의 item을 자동으로 받음. ( ) 안에 따로 만든 함수 쓰는 대신 (item) => console.log("this is the turn of ", item )이라고 쓸 수도 있음. => : 화살표 함수 배열의 아이템을 가지고 paintToDo(newTodo) 하면 됨.

newTodo만 구하면 됨. savedToDos.forEach((item) => paintToDo(item)); 로컬스토리지에 저장된 정보를 이용해서 새로고침해도 todo가 뜸. 하지만 a pplication이 새로 시작하면서 toDos 배열이 빈 상태 가 되므로, 그 상태에서 새로 todo를 입력하면 클릭 이벤트에 따른 함수가 실행되면서 새로운 todo들만 저장된 배열 탄생. 이전의 todo 값들은 toDos 배열에서 사라진채 로컬스토리지에 저장되기 때문에 이 다음에 새로고침하면 직전에 입력한 todo들만 남음. 어플리케이션이 시작될 때 toDos에 이전 todo들 복원.

toDos 배열을 정의할 때 const가 아니라 let 으로 해서 뒤에서 업데이트 가능하게 바꿈. if(savedToDo) {

toDos = savedToDos;

} [다른 방법] 나는 그냥 toDos 배열은 const로 두고, if문 안에서 savedToDo의 아이템들을 toDos에 넣은 뒤 toDos의 아이템들에 대해 paintToDo를 실행함. if (savedToDos !== null) {

savedToDos.forEach((item) => toDos.push(item));

toDos.forEach(paintToDo);

}

남은 문제, todo가 삭제된 경우 배열(및 로컬스토리지)에서도 삭제해야 함.

from http://good-developer.tistory.com/53 by ccl(A) rewrite - 2021-10-29 04:01:50