영화 리뷰 작성하기 (localStorage)

어제까지 영화 리뷰 작성 폼 ui 작업을 하고, 오늘은 데이터 저장하는 작업을 했다.

리뷰 데이터는 localStorage에 저장하는 요구사항이 있었는데, 정말.. 너무 힘들었다.

 

오늘이 제일 힘들었던 것 같다..

 

데이터 구조

일단 데이터를 어떻게 쌓을지부터도 굉장히 고민스러웠다.

처음에 생각했던 구조는 아래 코드처럼 배열에 객체를 담아서 movieId로 해당 리뷰를 가져오는 식으로 하려고 했었다.

let data = [
    {name:'홍길동', password:'123', contents:'재밌어요', id:1, movieId:253},
    {name:'아무개', password:'123', contents:'재밌어요!!!', id:2, movieId:253},
    {name:'루피', password:'123', contents:'진짜 재밌어요', id:1, movieId:777},
]

 

이렇게 해서 로컬스토리지 reivew라는 키 하나에 다 담으려고 했는데, 작업을 하면서 이 구조에 점점 확신이 없어졌다.

그래서 고민하다가 결국 도움을 요청했다.

 

튜터님께서는 위 구조보다는 객체로 만들어서 movieId에 배열을 넣는 방식으로 하는 게 더 좋을 것 같다는 말씀을 해주셨다.

그래서 아래와 같은 구조로 변경했다.

let data = {
  '253' : [{name:'홍길동', password:'123', contents:'재밌어요', id:1}, {name:'루피', password:'123', contents:'재밌어요', id:2}],
  '77' : [{name:'뽀로로', password:'123', contents:'재밌어요', id:1}]
}

 

확실히 위 구조로 변경하니까 같은 movieId 끼리 데이터가 묶여있다 보니 데이터 추가도 이전 구조보다 편하게 할 수 있었다.

하지만... 객체 안에 배열 안에 객체가 또 있어서인지... = 과 push의 지옥이었다.

 

헷갈려서 연습도 하고...

let objsss = {
  '22' : [{name:333, age:45}, {name:444, age:345}, {name:666, age:345}],
  '555' : [{name:333, age:345}, {name:444, age:345}, {name:666, age:3452345}]
}
objsss[22].push({name:999, age:45}); //기존 데이터에 등록
objsss[98] = [{name:32343423432}]; //처음등록

이런 식으로 처음 등록할 때와 기존에 있는 데이터에 추가할 때를 연습하면서... 넣었다....

 

 

기존 데이터 유지하면서 추가하기

이전 데이터 체크를 하지 않고 한 번에 setItem으로 추가하면 기존 데이터가 지워지면서 새로 추가되다 보니 이전 데이터 가져와서 추가하는 부분도 정말 힘들었다.

//리뷰 불러오기
const loadData = () => {
  let data = localStorage.getItem(REVIEW_KEY);
  return data;
}

 

리뷰를 한 번 불러오고 불러온 데이터를 prevData에 넣어서 리뷰 추가할 때 '이전 데이터 + 추가할 데이터' 이런 형식으로 리뷰 데이터를 추가하도록 구현했다.

 

[오늘의 많은 시간을 투자한... 코드....]

//리뷰 데이터 추가
const saveReview = (name, password, contents) => {
  let prevData = JSON.parse(loadData());
  let sendData = {};
  let reviewPushData = [];

  //이전에 등록한 리뷰 있으면 불러와서 데이터 넣기
  if(prevData){
    sendData = prevData;
    if(prevData[movieId]){
      //해당 영화에 리뷰가 여러개 일 경우 리뷰 배열에서 마지막 리뷰의 id 값 + 1
      let idx = prevData[movieId].at(-1).id;
      id = idx + 1;
      reviewPushData = prevData[movieId];
    }
  }
  
  const dataObj = {
    'writer' : name,
    'password' : password,
    'contents' : contents,
    'id' : id,
  }

  reviewPushData.push(dataObj);
  sendData[movieId] = reviewPushData;
  console.log(sendData);

  localStorage.setItem(REVIEW_KEY, JSON.stringify(sendData));
  
  id += 1;
}

 

배열에. at(-1)을 하면 마지막 배열의 값을 쉽게 가져올 수 있다.

그래서 마지막 배열에서 id(리뷰의 id - 리뷰 리스트 뿌릴 때 사용할 값) 값을 가져와서 id + 1을 해서 식별할 수 있게 id를 만들었는데, 아직 id 부분은 고민 중이다.

뭔가 유일한 값이어야 할 것 같아서 날짜 일부분을 같이 조합해서 만들어야 할지... 등등... 고민스러운 부분이다.

일단은 이렇게 +1을 해서 구현했다.

 

 

데이터 넣을 때 JSON.stringify()를 안 하면 Object로 들어가 버린다.

 

음 뭔가 작성하려니... 어떻게 설명해야 할지 모르겠다..... ㅋㅋㅋㅋ 멘붕인가...

 

숫자 부분은 영화 ID

오늘 하루종일 봤던 에러...

 

그래도 완성해서 너무 기쁘다.

행복^^