이전 todo들을 불러오기-변수를 바꿔주기

const savedToDos = localStorage.getItem(TODOS_KEY);
if (savedToDos !== null) {
  // null을 쓴 이유 : localStorage에 아무값도 없을 조건
  const parsedToDos = JSON.parse(savedToDos);

  parsedToDos.forEach(paintToDo);
}

prasedToDos 라는 배열 각각에 paintToDo(HTML에 그려내는 함수)를 적용시켜준다.

그러면 새로고침해도 todo들이 안사라진다.

하지만 여전히 새로운값을 입력하면 이전값을 덮어쓴다.

const toDos = [];
---------------------
  function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
  // JSON.stringify 로 array처럼 생긴 string으로 변환해준다.
}
---------------------

function handleToDoSubmit(event) {
  event.preventDefault();
  //   발생한 사건을 함수의 첫번째 인자로 줌.
  const newTodo = toDoInput.value;
  //   input의 value를 비우기전의 값
  toDoInput.value = "";
  //   newTodo라는 변수와 아래의 toDoInput.value는 무관함.
  //   newTodo는 input의 현재 value를 복사한 것이고
  //   그다음 input에 뭘하든 newTodo와는 무관한 것.
  toDos.push(newTodo);
  paintToDo(newTodo);
  //   newTodo에 담은 값을 호출하는 함수
  saveToDos(newTodo);
}

왜냐하면 toDos 라는 배열은 웹이 실행되었을때 항상 빈 배열이기 때문.

그리고 newTodo를 작성하고 submit을 할때마다 newTodo를 빈 toDos에 push하기 때문에. 이전값 위에 덮어씌우는 것.

그리고나서 savedToDos는 오직 toDos를 저장할때 새로운 todo만 있는 포함하는 배열을저장하기 때문

단지 newTodo 들만 local storage에 저장하고 있다.

---

해결하기 위해선,
const toDos = [] 를 let toDos = [] 로 바꾸어준다. 업데이트가 가능하도록.

그리고 localStorage에 todo 가 있을 경우 toDos에 parsedToDos를 넣어서 전에 있던 todo 들을 복원할 것.

const savedToDos = localStorage.getItem(TODOS_KEY);
if (savedToDos !== null) {
  // null을 쓴 이유 : localStorage에 아무값도 없을 조건
  const parsedToDos = JSON.parse(savedToDos);
  toDos = parsedToDos;

  parsedToDos.forEach(paintToDo);
}

너무 어렵다.

---

1. localStorage에는 문자열만 저장이 가능

2. JSON.stringify() 를 통해 배열 자체를 문자열로 바꿔준다.
   ("[a,b,c,d,e]" : String 와 같은 형태)

3. local storage에 저장된 값을 담을 savedToDos라는 변수를 선언한다.

4. local storage에 값이 없을 경우(null) JSON.parse()로 savedToDos를 자바스크립트객체로 바꿔주는 parsedToDos 라는 변수를 선언하는 조건문을 만든다.
   ([a, b, c, d] : Array)

5. forEach()메서드를 통해 인자에 대입하는 function들로 모든 값을 순회해준다.
- forEach() 는 for문 없이도 값들을 하나씩 돌릴 수 있다.

`parsedToDos.forEach(paintToDo);` 
즉, 브라우저에 값을 그려주는 함수 paintToDo를 parsedToDos(이전에 입력했던 todo들)에 forEach 해준다.

6. 이제 새로고침해도 화면에 todo들이 안지워지고 복원이 잘 됐다. 하지만 여전히 local storage에는 값이 덮어씌워지고 있다.

7. 왜냐하면 웹이 시작할때 const toDos=[] 라는 빈 배열을 담은 변수가 있기 때문.

8. 그리고 newToDo(=input.value) 를 submit 할때마다 newToDo 를
   toDos 라는 빈 배열에 계속 push하게 된다.

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value = "";
  toDos.push(newTodo);
  
  ...

9. 그 값들을 저장하는 함수(saveToDos)는 오직 새로운 toDos 만 포함하는 배열을 저장하는 것.

function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
  // JSON.stringify 로 array처럼 생긴 string으로 변환해준다.
}

10. toDos 라는 배열은 이전의 todo들, 즉 새로고침하기 전의 값들을 저장하지 않는다.

11. 이전에 가지고 있던 toDos들의 복사본을 갖고 있지 않는 것이 문제.

12. 해결하기 위해선 const toDos = [] 를 let toDos = [] 로 바꿔준다. 할당된 값이 업데이트가 가능하게 만드는 것이다.

13. 그리고 local storage에 toDo들이 있으면 toDos들에 parsedToDos 를 넣어서 전에 있던 todo들을 복원한다.

const savedToDos = localStorage.getItem(TODOS_KEY);
if (savedToDos !== null) {
  // null을 쓴 이유 : localStorage에 아무값도 없을 조건
  const parsedToDos = JSON.parse(savedToDos);
  toDos = parsedToDos;

  parsedToDos.forEach(paintToDo);
}