[🎬 영화 검색 사이트 만들기][팀] 영화 검색 사이트 만들기 개발 기록

영화 검색 사이트를 개발하면서 발생했던 소소한 이슈와 해결방법들을 정리해보려한다. 

 

리뷰 기능

새로고침 

등록, 삭제, 수정을 할 때 변경 사항을 반영하기 위해서 화면을 새로고침하도록 했다. 

 

아래는 수정 버튼 클릭스 발생하는 이벤트이다. 수정이 완료된 후 새로고침을 하여 변경된 데이터를 보이도록 했다. 그러나 너무 대놓고 깜빡이는 현상이 보기 불편해서 다른 방법이 있나 고민하던 중, DOM 을 직접 수정하여 변경 사항을 저장하는 방법이 있는 것을 알았다.

saveUpdateButton.addEventListener('click', async () => {
  if (window.confirm('정말로 이 리뷰를 수정하시겠습니까?')) {
    const updatedContent = reviewItem.querySelector('#review-content').value;
    const reviewId = reviewItem.getAttribute('data-id');

    await updateReviewData(reviewId, updatedContent);

    window.location.reload();
    window.alert('수정이 완료되었습니다.');
  }
});

 

DOM 을 조작하여 변경 사항을 바로 반영하는 방법으로 변경하여 깜빡이는 문제를 해결하였다. 

saveUpdateButton.addEventListener('click', async () => {
  if (window.confirm('정말로 이 리뷰를 수정하시겠습니까?')) {
    const updatedContent = reviewItem.querySelector('#review-content').value;
    const reviewId = reviewItem.getAttribute('data-id');

    await updateReviewData(reviewId, updatedContent);
    // DOM을 직접 수정하여 변경 사항 반영
    reviewItem.innerHTML = `
    <div class="review-header">
      <span id="user-name">${userName}</span>
      <div>
        <button class="update-button">수정</button>
        <button class="delete-button">삭제</button>
      </div>
    </div>
    <span id="review-content">${updatedContent}</span>
`;

    // 수정, 삭제 이벤트 리스너 다시 설정
    setupDeleteReviewEventListener(reviewItem);
    setupUpdateReviewButtonEventListener(reviewItem);
    window.alert('수정이 완료되었습니다.');
  }
});

 

파이어베이스 

불필요한 작업

나는 파이어베이스에 리뷰를 등록할 때, DB 구조에 해당 글의 고유한 ID 가 없어서 리뷰 등록할 때 UUID 를 넣었다.

 

그러나..? 나중에 알고 보니까 파이어베이스에서 제공하는 addDoc() 메서드로 등록을 하면 return 값으로 고유 ID 를 준다는 것을 나중에 알게 되었다. 

 

무작정 id 를 저장 안 하네? 하지 말고 관련 문서를 좀 더 찾아보는 습관을 가져야겠다고 생각했다.

 

복합 색인

상세 페이지에서 클릭한 영화에 대한 파이어베이스에 저장된 리뷰 목록을 조회하는 작업을 하였다. 필요한 검색 조건은 영화 ID 와 정렬이다. 아래 코드의 조회 하는 로직을 보면  where 조건으로 movieId 를 주고, orderBy 로 최신순으로 정렬해 주는 것이다. 

export const getReviewData = async (movieId) => {
  const getReviewsByMovieId = query(
    collection(db, 'reviews'),
    where('movieId', '==', movieId),
    orderBy('date', 'desc')
  );
  return await getDocs(getReviewsByMovieId);
};

 

그러나.. 인터넷에 나와있는 예시들과 똑같이 했는데 나만 오류가 뜨는것이다. 🤯 처음엔 로직을 살짝 잘못 적었나 싶어서 다른 사람들이 한 예시를 계속 찾아보고 변경해보고 해도 안됐다. 그래서 오류 메세지를 봐보았는데.. 

 

아래 오류 메세지가 굉장히 친절하게 무슨 오류인지 알려주고있었다. 🤦🏻‍♀️ 

Uncaught (in promise) FirebaseError: The query requires an index. You can create it here: https://console.firebase.google.com/v1/r/project/cinespot8-95f00/firestore/indexes?create_composite=Ck9wcm9qZWN0cy9jaW5lc3BvdDgtOTVmMDAvZGF0YWJhc2VzLyhkZWZhdWx0KS9jb2xsZWN0aW9uR3JvdXBzL3Jldmlld3MvaW5kZXhlcy9fEAEaCwoHbW92aWVJZBABGggKBGRhdGUQAhoMCghfX25hbWVfXxAC
Promise.then (async)
(anonymous) @ script.js:13

해석해보면 '쿼리에 색인이 필요합니다. 여기에서 생성할 수 있습니다.' 라면서 주소까지 친절하게 알려주고있었다. 

 

오류 메세지를 통해 오류 원인을 알고 왜 따로 색인 생성이 필요한지 찾아보니까 문서에 다음과 같은 설명이 나온다. 파이어베이스 내부 구조나 규칙으로 인해 복합 색인을 할 경우엔 파이어베이스 콘솔에 들어가서 따로 설정을 해주어야한다는 설명.

 

파이어베이스 콘솔 들어가서 아래와 같이 색인 설정을 해주니.. 오류가 발생하지 않고 원하는 조건으로 조회가 잘 되었다. 허허

 

라이브서버 관련 문제

VScode 에서 라이브서버로 파일을 열었을 때 오류 발생하기도 했다. 관련 내용은 여기에 정리! ㅎㅎ