JavaScript 로컬스토리지 코드 분석 + 맞닥뜨린 오류(브라우저 캐시)

//비전공자가 혼자 공부하는 공간입니다 

//잘못된 정보가 있을 수 있어요

 

1번의 메모를 삭제 했을 때 뒤에 있던 메모가 1번으로 올라오지 않고 2번으로 그대로 있는 이유가 무엇일까 

(일단 보류)

 

allMemo = allMemo ?? [];

입력창에 아무것도 없을 때 궁금해서 console.log 해보았다

입력창에 무언가를 입력했을 때는 배열이 이렇게 뜬다 

 

allMemo.push({ title, content, len: allMemo.length });

그런데 배열에 index가 어차피 나오는데 왜 len: allMemo.length 프로퍼티를 지정해줬을까 궁금해서 len 프로퍼티를 없애보았다 

 

allMemo.push({ title, content });

 

아하 브라우저에 index를 보여주기 위해 지정했구나~ 알 수 있었다 

 

큰 일이다 여러가지 시도해보다가 갑자기 오류가 난 것 같다 여기서 더 추가로 메모가 가능하고 새로 추가한 메모는 삭제가 가능하지만 

저 두 NaN 는 그대로 박제가 되어버렸다...삭제가 되지도 않는다ㅠㅠ 아 오류의 향연이구나... 

3번 4번 메모들은 삭제해도 로컬 스토리지에서 잘 사라지는데 저 둘은 삭제 버튼부터 말이 안 듣는다 

 

일단은 챗지피티의 조언을 받아 브라우저 캐시를 삭제 했더니 원상태로 돌아가긴 했다 

브라우저는 웹페이지 로딩 속도를 높이고자 캐시에 데이터를 저장하고는 한다는데 내 경우엔 len: allMemo.length 속성을 제거한 상태로 캐시에 저장이 되고 그 후 업데이트 한 코드는 저장이 되지 않아서 이런 일이 생겼다고 한다. 

디테일한 설명은 알아서 해석해주세요 

 

캐시의 개념도 솔직히 확 와닿지 않는다... 배움이 꼬리의 꼬리를 문다 (궁금한 건 못 참으니 아주 짧은 유튜브 영상 하나 보고 깊게 파는 건 나중에 하자) 

 

https://youtu.be/OpoVuwxGRDI

출처: 얄팍한 코딩 사전

이거 보니까 어느 정도 이해감  !

 

그런데 또 하나의 의문,, 지금은 코드가 짧고 중요하지 않으니 캐시 삭제하고 다시 하면 되지만 

만약 코드가 훨씬 더 복잡해진다면....? 

음.. 그 밑에 어떻게 하면 될 지 예시를 주었지만 지금 내가 거기까지 할 단계가 아니다 싶어서 나중에 보기 위해 기록만 남겨둬야겠다! 

일단은 해결 했으니까 궁금증은 넣어두자 (제발 넣어둬....)

지금 나의 우선순위는 로컬스토리지 활용하여 메모장 완성시키기 이다. 잊지 말자 

 

 

//비전공자가 혼자 공부하는 공간입니다 

//잘못된 정보가 있을 수 있어요