[TIL] Momentum-dash 이슈

Issue

 

1. 새로고침 시 todo list의 기존 데이터가 신규 데이터에 덮어씌워지는 문제가 발생했다.

 

...
const arr = [];
...

전역변수인 이 코드때문에 새로고침하면 기존 배열 안의 데이터가 초기화가 된다..

---

나의 시도

 

  시도1)
새로운 배열을 만들어 arr 변수의 데이터를 복사하여
todo 리스트를 저장하는 함수(saveTodo)의 인자값으로 넘겨준다.

(((실패)))

arr 초기화되면 newArr도 초기화됌.(이게 이전의 복사본을 잃어버리는 얕은 복사인가..!)

얕은 복사, 깊은 복사에 대해 한번 정리해야겠다.

  const newArr = arr;
    saveTodo(newArr);

  시도2) application 이 실행될 때 const arr =[] 덕분에 다시 빈 배열에 값을 담게된다,

(((성공)))
먼저 업데이트가 가능하도록 cont를  let 으로 변경.

localstorage에 데이터가 있는지 확인(if)하여 있다면 strinf -> parse 형식변환을 통해 꺼내옴.

이 데이터를 비어있는 배열에 할당해주면 새로고침을 해도 기존 데이터를 덮어씌우지 않는다.

 

 

부족한 점

 

1.  css, js 를 연결하는 코드가 너무 많아서 보기에 좋지 않다.

2. Responsive하게 만들기(하드코딩 한게 너무 많음)

3. fetch의 실행구조