somn45 / mucketlist

React, Typescript, Spotify API를 이용해 좋아하는 장르의 곡을 지속적으로 추적, 몰랐던 명곡을 저장할 수 있는 APP
0 stars 0 forks source link

트랙 리스트를 localstorage에 저장하는게 맞을까요? #3

Closed somn45 closed 2 years ago

somn45 commented 2 years ago

현재 사용자가 원하는 옵션에 맞게 트랙을 구성하러면 어딘가에 저장하는 것은 맞다고 생각합니다. 일단 track을 localstorage에 저장하긴 했습니다만 이러면 사용 중인 기기가 같다면 아이디가 달라도 같은 트랙이 불러오기가 되는 문제가 발생합니다. 따라서 track을 다른 곳에 저장하는 것이 맞다고 생각하는데 2가지의 대안을 생각중입니다.

  1. 데이터베이스
  2. 쿠키 및 세션 어느 곳에 저장하는게 더 옳은지 생각좀 해보겠습니다.
somn45 commented 2 years ago

해결 방법은 아주 간단했습니다. 사용자가 로그인 하는 중에만 검색된 트랙을 localstorage에 넣고 유저가 로그아웃 하는 때에는 localstorage의 내용을 삭제합니다. 그러면 나중에 같은 기기에서 다른 사용자가 로그인할 때 똑같은 트랙 리스트를 보지 않고 재탐색하게 하도록 유도됩니다.

다만 위와 같은 방식으로는 사용자가 원하는 트랙 리스트만 따로 가져오지 못하는 문제점이 발생합니다. 그래서 저는 트랙 찜하기 기능을 만들어 위의 문제점을 해결했습니다. 트랙을 찜하게 되면 그 트랙은 firestore 데이터베이스에 저장되고 유저가 찜한 플레이리스트만 보고 싶을 때 다시 데이터베이스에서 가져오는 구조를 만들었습니다. 그럼으로써 사용자가 원하는 트랙 리스트만 다시 불러올 수 있게 됩니다.

혹시라도 위의 방법보다 더 나은 대안이 있으시다면 comment를 작성해주시면 감사드리겠습니다.

somn45 commented 2 years ago

redux-persist를 이용하면 redux에 저장되어 있는 특정 상태를 새로고침 시에도 유지할 수 있습니다. 따라서 찜하기 기능은 그대로 유지하면서 tracks state는 redux-persist를 적용 시켜 두도록 하였습니다. 오래 전에 이슈를 해결했는데 이제서야 comment를 작성하여 죄송합니다.