2023_10_26 TIL

Team Project 3일차

 

오늘은 기존 firebase로 작업되어 있던 댓글 기능을 전부 local storage로 바꾸는 작업을 했다.

 

처음에 firebase와 local stroage를 섞어서 진행했던 이유는 이 프로젝트에서 요구하는 바가 "댓글 기능"이었기 때문이었다.

"댓글 기능"은 온전히 사용자들 간의 소통을 위한 것이라고 생각했기 때문에 다른 사용자들끼리 서로의 댓글을 읽으려면 자신의 브라우저에만 저장되는 local storage가 아닌 firebase에 데이터를 저장해야 한다고 생각하고 프로젝트를 진행하는 중이었다. (local storage는 부가적으로 id값 비교나 pw 비교에서 쓰려고 했다)

 

하지만 아침 시간 튜터님과 대화 중 오로지 local storage만 이용해야 한다는 내용을 듣게 되었고 firebase에서 local storage로의 전면적인 수정을 진행했다. 

 

 

문제

 

우선 local storage에 데이터를 저장하고 꺼내오기 위해 다음의 조건들을 생각해보아야 했다.

 

① 영화 별로 다른 댓글이 들어가야 한다

② value값 안에는 내용, 날짜, id, pw 값을 모두 넣어주어야 한다.

③ 댓글 작성시 최근 글이 제일 위에 올라오도록 해야한다.

④ 기타 등등..

 

처음에는 이러한 조건들을 만족시키는 방법을 구상하는데 많은 시간을 투자했던 것 같다. 

local storage라는 정보 저장 특성 상 key값과 value값으로 구성된 한정적인 공간 안에서 여러 영화정보의 댓글을 모두 넣어야 한다는 것이 부담이었다. 

 

그러다가 처음 시도해 본 것이 key값에는 영화의 id(영화별로 분류하기 위함)를 넣어주었고 value 값에는 여러 데이터가 들어갈 수 있도록 id, pw, 내용, 날짜가 포함된 객체를 만들어서 value 값으로 넣어주었다.

 

 

또 다른 문제

 

앞서 시도한 결과는 나름(?) 좋게 나왔다. local storage에 데이터가 잘 들어갔고 꺼낼 때도 문제 없이 잘 나왔다.

하지만 또 다른 문제가 발생했다. local storage의 key값을 영화의 id값으로 설정해줬기 때문에 영화마다 다른 댓글이 달리기는 하지만 한 영화당 한 개의 댓글만 달 수 있다는 문제가 생겼다. 새로운 댓글을 입력하게 되면 기존의 key값은 고정된 채로 value값만 바뀌어 댓글의 내용만 바뀌었다.

 

이를 해결하기 위해서는 value 한 개 당 하나의 댓글 정보만을 포함할 수 있었기 때문에 여러 개의 key값을 통한 여러개의 value값 조정이 필요했다. 

여러개의 key를 갖지만 데이터를 꺼내올 때 key값으로 꺼내오기 때문에 나중에도 식별할 수 있는 key값이 필요했다. 따라서 영화 id + 글자를 작성한 시간을 key값에 넣어주었다.
(여러명이 보는 댓글이라면 동일한 시간에 여러명이 댓글을 올리게 되면 문제가 생기겠지만 한 명의 참여자만이 댓글을 작성하고 그 댓글이 초 단위로 영향을 받기 때문에 key가 고유값을 유지할 수 있다고 판단되었기 때문이다)

 

결국 이와 같은 방법을 통해 local storage에 데이터를 저장하고 가져다 쓸 수 있었다.

 

 

 

주의 사항

 

local storage에 객체인 데이터를 저장하거나 local storage에서 데이터를 가져올 때에는 JSON변환을 해주어야 한다.

local storage에 객체인 데이터를 넣을 때는 JSON.stringify(데이터)를 통해 데이터를 넣어주어야 하고, 데이터를 가져올 때는 JSON.parse(데이터)를 통해 데이터를 가져와야 한다. 이 작업을 해주지 않으면 데이터가 제대로 저장되지 않는다거나 데이터를 꺼내올 때 [object][object]의 형태로 나오게 된다.