추가해야 할 사항
1) 영화 overview 일정 글자 넘길 시 ...(더보기)로구현
2) localStorage 활용하여 작성자, 리뷰, 확인비밀번호 저장하기
3) 리뷰 작성 후 수정 / 삭제 기능 구현
구현해야할 기능들을 이렇게 적어놓고 보니 막막하다.. 그래도 해야지!
2) localStorage 활용하여 작성자, 리뷰, 확인비밀번호 저장하기
상세페이지 내 리뷰 작성 시, localStorage안으로 저장이 되게끔 코드를 만들어 보려고 한다.
저장하고 싶은거는 작성자, 비밀번호, 리뷰 내용, 날짜를 담고 싶었고, 코드는 아래와 같이 적어봤다.
일단 아래와 같이 변수를 선언해주고
<script>
const reviewData = {
author,
review,
password,
};
</script>리뷰 작성 시 보여지는 값
<script>
function updateReviewList() {
const movieTitle = document.querySelector(".moduleTitle").textContent;
const reviews = localStorage.getItem(movieTitle);
if (reviews) {
const reviewData = JSON.parse(reviews);
const reviewBox = document.querySelector(".review-box");
reviewBox.innerHTML = "";
reviewData.forEach((data, index) => {
const comment = document.createElement("div");
comment.classList.add("comment");
const userinfo = document.createElement("div");
userinfo.classList.add("userinfo");
userinfo.innerHTML = `<div class="name">${data.author}</div>`;
comment.appendChild(userinfo);
comment.innerHTML += `<div class="review">${data.review}</div>`;
const datebox = document.createElement("div");
datebox.classList.add("datebox");
datebox.innerHTML = `<div class="date">${new Date().toLocaleString()}</div>`;
comment.appendChild(datebox);
</script>이런식으로 코드를 만들어봤다.
검색만 100번 200번 한 코드로 한번 실행해 보니 기능은 일단 구현이 잘 되는 듯 하다.
그러나 여기서 문제점이 하나 발견되는데, 내가 원래 생각했던 기능 중 하나는 리뷰 작성 시 옆에 노출되는 시간은 '리뷰 작성이 완료된 시간' 즉 리뷰가 써진 시간을 노출하고 싶었는데, 리뷰를 쓰고 확인해보니 현재 돌아가는 시간하고 같이 돌아가고있었다........😱
분명 나는 리뷰가 작성된 시간을 보고 싶었는데.. 이 친구는 그게 싫은지.. 현재 시간을 계속 보여주고있었다 ㅜㅜㅜㅜㅜㅜㅜ
여기서 내 코드를 살펴보면 나는 작성자, 비밀번호, 리뷰 내용, 날짜를 변수를 선언하고 값을 줬다 생각했었는데, 날짜를 제외한 나머지 3개에만 변수를 할당하였다..!
그리고 리뷰가 업데이트 되는 코드 안에서는 new Date()값만 있으니, 리뷰가 작성된 시간을 안보여주고 현재 시간을 보여주는 것이다....😭
문제점을 찾았으니 다시 한번 수정해보자.
변수값에는 createdAt: new Date()값이 새로 들어가게되고,
new Date()안에다가 변수에 추가한, 그리고 data가 필요하니
<script>
`<div class="date">${new Date(
data.createdAt
).toLocaleString()}</div>`;
</script>를 추가로 넣어주며 수정을 하였다.
localStorage로 내가 작성한 리뷰를 한번 살펴보면 내가 생각한대로
작성자, 리뷰, 비밀번호, 그리고 날짜까지 노출이 되는걸 확인할 수 있다..!
사실 이번 팀 과제를 진행하면서 사용자가 작성한 리뷰를 저장하라고 하니 구글에서 지원해주는 Firebase를 이용하여 저장하려고 하였는데, 과제를 자세히 보니 localStorage로 데이터 값을 저장하라고 적혀있어 벼락치기하는거마냥 구글링을 통해 공부를 해봤다 ㅠㅠㅠㅠㅠ
이번 팀과제를 하면서 제일 어려운게 뭐냐고 뽑으면 localStorage라고 당당하게 말할정도로 난 이게 제일 어려웠다....
그래도 내 생각처럼 기능이 잘 구현되어 다행이다..
