나는 상태관리를 학습하기 위해
TodoList를 만들었다.
디자인은 트렐로를 모방하여 UI를 구현하였다.
메인 페이지는, 상태관리를 학습하기 위해 만들었기에,
상태관리 라이브러리를 List로 나타내어 Click하면 해당 상태관리를 사용한 TodoList를 볼수있게 작업하였다.
처음에는 데이터를 저장해주기위해 DB를 사용하는 Server까지 구축하고 싶었기에 Server 구축 이전까지 MSW를 사용하여 Front를 작업했는데, 바쁜 일정 탓에 브라우저에 데이터를 저장하려한다.
그에따라, Cookie와 Storage 중 무엇을 사용해야할지 결정해야 했다.
Cookie의 특징
쿠키는 한 사이트당 20개의 쿠키를 저장할 수 있으며, 한 사이트당 최대 4KB로 쿠키의 크기가 제한 되어있다.
뿐만아니라, 쿠키는 만료일이 있기에 영구적인 데이터 저장이 불가능하다.
Storage의 특징
LocalStorage의 크기는 5MB이며
SessionStorage의 크기는 4MB이다.
쿠키보다는 Storage를 사용해야겠다고 생각이 든다.
LocalStorage와 Session Storage의 크기차이는 1MB 차이가 나지만,
각각 5MB와 4MB이기 때문에, 크기적인 문제로 고를 수는 없을 것 같다.
LocalStorage 특징
도메인 Origin(포트번호 포함) 이 같은 경우 데이터는 모든 탭과 창에서 공유된다.
브라우저나 OS가 재시작하더라도 데이터가 유효하다.
SessionStorage 특징
SessionStorage는 현재 떠 있는 탭 내에서만 유지된다.
같은 페이지라도 다른 탭에 있으면 다른 데이터를 나타낸다.
페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않는다. 하지만 탭을 닫고 새로 열 때는 사라진다.
저장 데이터의 최대 크기뿐만아니라, 하나의 탭에 종속적이지 않고 Origin에 따라 Storage를 사용하기 때문에 LocalStorage를 데이터베이스 처럼 사용해야 겠다.
따라서, msw를 지우고 localStorage를 사용하는 것이 아니라,
Server의 DB처럼 LocalStorage를 사용하려한다.
