TIL 23-06-06

리뷰를 영화id 식별하여 붙이는 기능을 구현했다

새로고침하면 리뷰카드가 사라지는 문제를 어떻게 해결해야할지 도저히 모르겠었다. 몇 시간을 붙잡고 있는데, 갑자기 얘가 뭘 불러와야 되는지 몰라서 이러나 라는 생각이 들었다. 그래서 그냥 id가 일치하는 리뷰만 불러오는 코드부터 작성했다.

// 새로운 리뷰 객체 생성
  const newReview = {
    user: userIpt,
    psWordIpt: psWordIpt,
    comment: commentIpt,
    id: movieId,
  };

먼저 posting함수 안에서 새 리뷰를 입력했을 때 생성되는 배열 안에 id 값을 추가했다 id 라는 key의 요소는 sub페이지 맨 상단에 선언하여 해당 영화 페이지를 띄울 때 쓰도록 해 놓은 movieId값을 재사용했다.

그리고 나서 배열을 불러와 붙여주는 부분을 수정했다

이전 코드

// JK 이전에 저장된 리뷰들을 가져옴 (가져와서 붙일때 쓰는 용도)
    let reviews = localStorage.getItem("reviews")
      ? JSON.parse(localStorage.getItem("reviews"))
      : [];

    const reviewListContainer = document.getElementById("review-list");

    // JK 이전에 저장된 리뷰들을 HTML로 추가
    reviews.forEach((review) => {
      const { user, comment } = review;

수정 후

// JK 이전에 저장된 리뷰들을 가져옴 (가져와서 붙일때 쓰는 용도)
let reviews = localStorage.getItem("reviews")
  ? JSON.parse(localStorage.getItem("reviews")) // 문자열->배열 변환
  : [];

// JK 현재 페이지의 movieId 값
const currentMovieId = movieId;

// JK 현재 페이지의 movieId와 일치하는 리뷰들만 필터링
const filteredReviews = reviews.filter(
  (review) => review.id === currentMovieId
);

필터된리뷰들 이라는 변수를 새로 선언해주고 필터 메서드를 사용해서 리뷰의 id가 현재 페이지의 id와 같은걸 찾아줬다. 처음에는 그냥 movieId와 같다고 설정해줬더니 무비 디테일 박스가 다 날아갔다...... 그래서 현재영화id 라는 변수에 새로 할당해줬더니 정상 작동 됐다.

           </div>
                    `;
    movieDetailsContainer.innerHTML = temp_html;

    const reviewList = document.getElementById("review-list");

    // JK 필터링된 리뷰들을 HTML로 추가
    filteredReviews.forEach((review) => {
      const { user, comment } = review;

      // JK 리뷰 HTML 생성
      const reviewHTML = `<div class="review-card">
                      <div class="review-card-body">
                        <header class="name-header">${user}</header>
                        <hr class="bar">
                        <p>${comment}</p>
                      </div>
                    </div>`;

      // JK 리뷰를 리뷰리스트에 추가
      reviewList.insertAdjacentHTML("beforeend", reviewHTML);
    });
  });

그리고 상세정보를 뿌려주는 부분 밑에 reviewlist를 찾아온 다음 그 아래에 필터링된 리뷰스를 붙여줬다.
라이브 서버로 켜서 정상 작동을 확인했다.

만약 리뷰리스트에서 수정/삭제를 구현한다면 비밀번호나 유저이름으로 구별해야할 텐데, 그렇게 되면 리뷰를 등록할 때 사용자가 비밀번호를 입력했을 때 기존 배열을 돌려서 같은게 있는지 확인하고 있으면 if문을 사용해서 이미 같은 비밀번호가 있으니 새로 입력해달라는 창을 띄워줘야 할 것 같다. 하나를 해결하면 또 할게 생기는 것 같다.

그리고 내가 구현하지 않은 카테고리나 페이지 이동 같은 부분들은 잘 이해가 가지 않아서 내일 팀 코드 리뷰 시간에 설명을 듣고 잘 이해하고 싶다.