영화 리스트 5일 차 @코드 점검

오늘은 달리 할 일이 없어져서 대부분 코드를 점검하고 개선하는 데에 시간을 보냈다. 이미 main에 병합까지 했으니 이제는 완전히 자기만족이지만, 아직은 스스로 코드를 짜고도 이게 왜 작동이 되는지 잊어버리기 쉽상이다보니 이러한 시간이 있는 게 좋았다는 생각이 들기도 했다. 

 

먼저 최초로 살펴본 코드는 함수를 만들어놓고도 사용하는 걸 까먹은 경우이다. 

let review = JSON.parse(localStorage.getItem(`review${movieId}`)) || [];

let review = getReviewData();

 

이 두 코드에서 review는 같은 값을 가지게 되도록 getReviewData 함수를 선언해두었다. 그리고 그러고도 사용하지 않아 main에는 위쪽 코드가 반영되어 있다... 굉장히 부끄럽지만, 실제로 겪어보니 앞으로 코드를 짜면서도 종종 있을 수 있는 일인 것 같아 각 함수의 역할과 결과값을 잘 기억해두고, 필요하다면 주석도 달아두는 게 좋겠다는 생각을 했다. 

---

그리고 두 번의 역변을 겪은 리뷰 삭제 함수가 있다. 밑의 코드들은 모두 비슷한 결과를 내는 코드들이다. 

 

처음

if (passwordWindow === deletePassword) {

      let deleteCard = "";

      reviewData.forEach((element, index) => {

        if (deletePassword === element.password) {

          deleteCard = reviewData.splice(index, 1);

        }

      });

      reviewData = reviewData.filter((n) => n !== deleteCard);

      localStorage.setItem(`review${movieId}`, JSON.stringify(reviewData));

      alert("리뷰가 삭제되었습니다.");

      window.location.reload();

    }

수정 1번

if (passwordWindow === deletePassword) {

      let deleteCard = "";

      for (const element of reviewData) {

        if (deletePassword === element.password) {

          deleteCard = reviewData.splice(element, 1);

          break;

        }

      }

      reviewData = reviewData.filter((n) => n !== deleteCard);

      localStorage.setItem(`review${movieId}`, JSON.stringify(reviewData));

      alert("리뷰가 삭제되었습니다.");

      window.location.reload();

    }

수정 2번

if (passwordWindow === deletePassword) {

      for (const element of reviewData) {

        if (deletePassword === element.password) {

          reviewData.splice(element, 1);

          break;

        }

      }

      localStorage.setItem(`review${movieId}`, JSON.stringify(reviewData));

      alert("리뷰가 삭제되었습니다.");

      window.location.reload();

    }

 

처음 코드는 리뷰들의 비밀번호가 같을 경우 하나의 리뷰를 삭제하면 같은 비밀번호를 가진 리뷰들의 데이터가 같이 삭제되는 오류가 나타났다.

 

이러한 오류를 수정하기 위해서 수정 1번으로 코드를 개선했는데, for of문을 사용해서 break를 넣음으로써 삭제해야하는 데이터를 하나로 좁힐 수 있었다. 

 

그런데 여기서 기존에 index를 넣던 자리에 element를 넣어도 코드가 정상 작동하는 것을 보고 splice에서 숫자가 아닌 element를 넣어도 작동을 하는 게 맞는지 검색하는 와중에 splice가 배열에 변화를 주는 메서드라는 것을 알게되었다. 때문에 filter와 같은 수정 1번의 일부 코드가 불필요한 코드라는 것을 알게 되었다. 그래서 다시 한 번 더 수정을 하여서 수정2번 코드를 완성하게 되었다. 

 

 

 

이후 나중에서 알게 된 필수 문법 map/set 중 하나를 사용해보려고 했으나, 현재 코드에서 이러한 문법을 사용하는 것은 너무 불필요한 동작이 늘어나고 문법에 맞추어서 코드를 수정하는 것 또한 시간이 많이 걸리는 일이니 당장에는 삼가기로 했다. 나중에 여유가 되거나, 다시금 map/set을 사용해야 할 때가 있을 때 이러한 문법 사용을 시도해보아야 할 것이다. 듣기로는 많은 데이터를 다루는 데에 필수적인 문법이고 곧잘 사용되는 문법이라고 하니, 나중에라도 잘 알아두어야 할 것이다.