영화 리스트 1일 차 @로컬 스토리지

오늘부터 다시 팀 프로젝트가 시작되었다. 이번 프로젝트는 이전에 한 개인 과제로 완성한 영화 리스트를 팀 내에서 공유한 뒤, 가장 깔끔한 코드로 페이지를 작성한 팀원의 것을 기준으로 상세페이지 등의 기능을 늘리는 것이었다. 나는 저번에 개인과제 정답지를 보고 코드를 깔끔하게 정리해두어서 이번에는 내 개인과제를 기초로 영화 리스트를 확장하기로 했다.

 

그 과정에서 처음으로 git에서 콜라보레이터를 등록해보았는데, 이제 git에서 어떻게 협업을 주도적으로 시작할 수 있는지 알게 되었으니 지금까지의 경험과 더불어 git을 대강 사용할 수 있게 되었다고 볼 수 있겠다. 

 

그리고 이번에 내가 맡은 역할은 로컬 스토리지를 이용해서 리뷰 저장, 추가, 삭제하기이다. 

 

사용해보니 로컬 스토리지는 map, set과 비슷해서 다루기 어렵지 않았다. 다만 특징 하나는 '내 브라우저 창에만 남는 데이터'라는 것 정도이다. 이번에는 단순히 기능 구현만을 위한 코드작성이라서 이것을 리뷰에 적용했지만, 본래는 웹툰이나 웹소설 같은 것을 보여주는 사이트에서 '내가 어디까지 읽었는지 저장'해두는 정도의 아주 단순한 기능을 위한 API이다. 

 

단순하다보니 오늘 당장 리뷰 작성 부분 틀을 짜고 리뷰 저장, 추가까지 어찌어찌 구현할 수 있었는데, 진짜 문제는 이제부터이다. 로컬 스토리지에 같은 키를 가진 복수의 객체를 저장하고 활용해야 하는데, 아직까지는 내가 하나의 객체만을 로컬스토리지에 저장할 줄 안다는 것이다. 

 

새로고침을 하니 여러 개가 추가되어 있던 리뷰가 더미데이터를 제외하고 하나만 남은 모습이다. 

 

이러한 결과가 나타난 것은 내가 짠 코드로는 로컬 스토리지에 하나의 객체밖에 저장하지 못하기 때문인데, 로컬 스토리지에 여러 개의 객체를 저장할 수 있게 되면 새로고침을 해도 로컬 스토리지의 데이터를 기반으로 여러 개의 리뷰가 남아 있을 것이다. 리뷰 기능 구현을 위해, 내일은 로컬 스토리지에 여러 개의 객체를 저장할 수 있는 방법을 강구해보아야 할 것이다. 

 

위의 결과가 나타난 오늘 작성한 코드를 표기하며, 오늘은 이만 내일을 위한 준비를 하러 가야겠다. 

 

// 리뷰 데이터 저장

const setReviewData = () => {

  let nickname = reviewNicknameInput.value;

  let password = reviewPasswordInput.value;

  let content = reviewContentInput.value;

  localStorage.setItem("nickname", nickname);

  localStorage.setItem("password", password);

  localStorage.setItem("content", content);

  getReviewData();

};

reviewAddBtn.addEventListener("click", setReviewData);

// 리뷰 데이터 불러오기

const getReviewData = () => {

  let nickname = localStorage.getItem("nickname");

  let password = localStorage.getItem("password");

  let content = localStorage.getItem("content");

  reviewOutputBox.innerHTML += `

    <div class="oneReview">

      <div class="outputNickname">${nickname}</div>

      <div class="outputContent">${content}</div>

      <div>

      <button class="deleteBtn">삭제</button>

      </div>

    </div>`;

};

getReviewData();