오늘 한 일

프로젝트 진행
┗ password 확인
┗ 삭제, 수정 기능 구현
자바스크립트 강의복습

오늘 공부한 내용

✅ 삭제 전 password 확인

리뷰 삭제 전에 password가 동일한지 확인 후 삭제되도록 하고 싶었는데
이미 deleteReview 함수에서 filter로 id를 확인하는 작업을 하고 있었기 때문에
💥 password 확인은 순서를 어떻게 가져가야할지 고민해도 떠오르지 않았는데
이상하게 하루 지나니 너무 손쉽게 해결할 방법이 생각나서 바로 해결했다

💡
1. 클릭된 리뷰의 id와 password 값을 받아온다
2. prompt 에서 비밀번호를 입력받는다
(prompt는 string 타입이기때문에 number로 변환)
3. if 조건문으로 받아온 password와 입력받은 값이 다르면 alert로 경고를 띄우고 함수 중단
4. 비밀번호가 맞으면 id를 비교해서 리뷰 삭제

const deleteReview = (id, password) => {
  const deletePassword = Number(prompt('비밀번호를 입력하세요'));
  if (deletePassword !== password) {
    alert('비밀번호가 일치하지 않습니다.');
    return;
  }
  storage = storage.filter((review) => review.id !== id);
  saveReview();
};

✅ onclick에 객체를 넘겼을 때 오류

💥 수정 기능 구현을 위해 map에서 순회한 review 객체 데이터를 버튼 클릭이벤트에 넘겨주려고 했는데 계속 오류가 발생했다
Uncaught SyntaxError: Unexpected identifier 'Object'
💡 html 코드에 매개변수로 객체를 넘기려고 하니 오류가 난 것 같다 (정확한 이유를 모르겠음)
💡 id와 password만 넘겨서 id에 맞는 리뷰를 find로 찾는 것으로 해결

// 문제코드
<button onclick="editReview(${review})">수정</button>

어려웠던 내용

✅ html에 onclick으로 넣은 이벤트를 분리하려는 노력

문제 코드
<button>삭제</button>

💥 btn.addEventListener() 와 같은 방법으로 할 수 없었던 이유
map을 돌면서 button을 만들었기 때문에 이벤트리스너를 밖으로 빼면
review에 대한 데이터를 받아올 수 없었음

결과적으로는 실패
html에 onclick으로 이벤트를 달아주는 게 아무래도 좋지 않다고 생각되어
질문하러 간 김에 튜터님과 코드를 고쳐보기로 했다
튜터님이 내가 짜놓은 코드를 최대한 건들지 않고 이리저리 해결해주시기는 했으나
그 방법은 아직 내가 하기엔 너무 어려운 부분이라 일단은 원래 방법대로 하기로 했음

튜터님이 하신 접근법
버튼에 id를 review.id로 할당하고 버튼에 이벤트리스너를 달아서
그 버튼이 클릭되었을 때 id를 토대로 localstorage에서
알맞은 데이터를 다시 빼내오는 방법
(localstorage에 movieId를 key로 하여 review가 배열형태로 한 번에 저장되어 있어서
꺼낼 때도 몇 번의 과정을 거쳐야했음.. 😭)

✅ 참조형 데이터

💥 리뷰를 수정할 때 review.id를 받아와 해당 리뷰를 찾은 다음
새 정보를 입력하고 해당 리뷰에 업데이트 해주는 과정에서
원본(storage)을 업데이트 하지 않아도 바뀌는 것이 이해가지 않아서 강의를 다시 봤다

💡 find로 찾은 결과가 객체이기 때문에 참조값이 같아서
reviewToUpdate를 업데이트 하면 storage도 같이 변경됐음!

const editReview = (id, password) => {
  const editPassword = Number(prompt('비밀번호를 입력하세요'));
  if (editPassword !== password) {
    alert('비밀번호가 일치하지 않습니다.');
    return;
  }
  
	// 리뷰 찾아오기
  const reviewToUpdate = storage.find((review) => review.id === id);
  const newRating = prompt(
    '새로운 평점을 입력하세요 (e.g. 5)',
    reviewToUpdate.rating
  );
  if (newRating !== null && !isNaN(Number(newRating))) {
    // 평점 업데이트
    reviewToUpdate.rating = Number(newRating);
  }

  const newReviewText = prompt(
    '새로운 리뷰를 입력하세요',
    reviewToUpdate.review
  );
  if (newReviewText !== null && newReviewText.trim() !== '') {
    // 리뷰 업데이트
    reviewToUpdate.review = newReviewText;
  }
  saveReview();
};

📍 https://velog.io/@jetiiin/변수-선언과-데이터-할당기본형-참조형

느낀점

1. 어제는 아무 생각도 나지 않다가 하루 지나니 뿅하고 생각이 나는 경우도 있다 😏
   (하지만 끝까지 생각 안나고 못하는 일이 더 많다 ^^)
2. 하루종일 코드를 본 것 같긴한데 적고 보니 별 거 안 한 것 같은 너낌..
   (여기저기서 도움을 받았지만) 해보고 싶었던 기능이 다 완성돼서 뿌듯하다
   이제 다듬는 일만 남았다!
3. 목요일이긴 한가보다 조금 지치넹