[TIL] JS BOM, 로컬/세션 스토리지, 직렬화, ??

in TIL on Til, Javascript Last modified at:

2025-02-04 TIL

📝 TIL (Today I Learned)
🔗 원본 이슈: #10
📅 작성일: 2025-02-04
🔄 최종 수정: 2025년 03월 05일

🍀 새롭게 배운 것

  • JavaScript DOM, BOM
  • 로컬 스토리지, 세션 스토리지
  • 직렬화, 역직렬화
  • null 관련 연산자 (??, .? 등)

🍎 오늘의 문제 상황

  • 배운 내용을 토대로 간단한 예제 구현 중, 입력한 데이터가 새로 고침 후 사라지는 문제 해결위해 노력
  • 로컬 스토리지와 세션 스토리지 예제 구현 시, 객체 데이터를 저장할 때 [object Object]로 출력되는 문제 발생
  • null 값을 포함하는 데이터에서 undefined 에러가 발생

해결 과정

  • 로컬 스토리지와 세션 스토리지의 차이를 비교하고, JSON.stringfy()와 JSON.parse()를 활용해 객체 데이터를 올바르게 저장 및 불러오기 구현
  • BOM의 window.onbeforeunload 이벤트를 사용해 페이지 새로고침 시 데이터 저장
  • ?.과 ??를 사용해 null값이 포함된 데이터 안전하게 처리

🦄 느낀 점

  • 로컬 스토리지에 객체 데이터를 저장하려면 직렬화가 필수
    • JSON을 다루는 구현은 여러 번 했지만, 직렬화 단어는 익숙하지 않아서 이론 공부의 중요성을 다시금 깨달았다..
  • 단순한 예제라도 데이터 저장과 상태 관리를 생각하며 구현하는 연습을 해야겠다.

🐬 깃블로그 정리

  • [Gemini를 이용한 메모 태그 추천 서비스] (https://nan0silver.github.io/memoGemini/)
  • [Local, Session storage] (https://nan0silver.github.io/javascript/2025-02-04-storage/)
  • [직렬화, 역직렬화] (https://nan0silver.github.io/miscellaneous/2025-02-04-serialization/)