[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가 뜸.
      • 하지만 application이 새로 시작하면서 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가 삭제된 경우 배열(및 로컬스토리지)에서도 삭제해야 함.