Javascript [9]

팀 프로젝트 마무리

1. 유효성검사

2. 체크한 행 삭제

3. 삭제시 Localstorage 저장된 값과 일치시에 삭제

- 유효성검사

/* 유효성 검사 함수 */
    // 1.작성자 유효성 검사 함수
    function validateName(name) {
      // 최소 2자 이상, 한글 또는 영어
      return /^[가-힣a-zA-Z]{2,}$/.test(name);
    }
    if (!validateName(reviewerInput)) {
      alert("작성자 이름을 입력하세요 (최소 2자, 한글 또는 영어).");
      return;
    }
    // 2.리뷰 유효성 검사 함수
    if (!reviewInput.trim()) {
      alert("리뷰를 작성하세요");
      return;
    }
    // 3.비밀번호 유효성 검사 함수
    function validatePwd(pwd) {
      // 4자리 숫자
      return /^\d{4}$/.test(pwd);
    }
    if (!validatePwd(pwdInput)) {
      alert("비밀번호 4자리를입력하세요(숫자)");
      return;
    }

1번 내용이 데이터를 넣는 것이라면, 유효성검사는 데이터를 넣기 위한 필수 조건이라고 볼수 있다.
조건문 3개( 작성자 , 리뷰, 비밀번호)에 대한 유효성검사를 하나 할때마다 return을 받아야 다음으로 넘어가게 작성해줌으로써 전부 확인이 되면 데이터 저장이 되도록 구현.

선택된 행 삭제

//삭제버튼 클릭시 handlebutton함수로 이동
    deleteBtn.addEventListener("click", () => {
      handleSaveButton();
    });
    const handleSaveButton = () => {
      const chkboxes = document.querySelectorAll(".chkbox");
      chkboxes.forEach((chk) => {
        if (chk.checked) {
          const selectTr = chk.closest("tr"); //가장근접한 tr확인
          const rowIndex = selectTr.rowIndex; //테이블에서 해당열의 index값을 구하는 rowIndex
          const existingReview = JSON.parse(localStorage.getItem(movieId)) || [];
          existingReview.splice(rowIndex - 1, 1); // rowIndex는 1부터 시작하므로 1을 빼줌
          localStorage.setItem(movieId, JSON.stringify(existingReview));
        }
        reviewList(); //안써주면 reload를해야 확인이 가능함
      });
    };
    deleteBtn;

localstorage에 저장된 pwd와 일치해야 삭제

const handleSaveButton = () => {
    let enteredPwd = prompt("삭제하려면 비밀번호를 입력하세요");
    const movieId = URLSearch.get("id");
    const existingReview = JSON.parse(localStorage.getItem(movieId)) || [];
    let matchingIndex = -1;
    // 입력된 비밀번호와 일치하는 리뷰 찾는거
    existingReview.forEach((review, index) => {
      if (review.pwd === enteredPwd) {
        matchingIndex = index;
      }
    });
    if (matchingIndex !== -1) {
      //-1로 설정하는이유는 비밀번호가 일치않는다는걸 인식시키기 위함이라고 한다.
      // 일치하는 비밀번호가 있다면 해당 리뷰 삭제
      existingReview.splice(matchingIndex, 1);
      // 수정된 리뷰 목록으로 localStorage 업데이트를 한다
      localStorage.setItem(movieId, JSON.stringify(existingReview));
      reviewList();
    } else {
      alert("비밀번호가 일치하지 않습니다");
      return;
    }
  };

처음 삭제 진행시 3번내용처럼 해당 ”tr” 의 rowIndex를 구해서 삭제를 시켰던 것으로는 localstorage에 저장된 비밀번호와 일치시켜서 삭제로 넘어가는데 문제가 있었음.

해결

matchingIndex라는 변수를 -1로 설정해서 forEach문 반복문으로 체크한 해당 index와 matchingIndex를 비교해서 splice 함수로 선택된 행을 삭제시키는 것으로 해결을 하였음.

해야 할 것 및 회고

피드백부분에서 console.log창이 발표때 보인다고 한점, function함수를 너무 한곳에 두지말고 별도의 function으로 분리했으면 좀더 나은코드가 될거라고 피드백을 해주셨다.
팀원간에 소통이 중요하다고 생각을했고, 내 코드만이 아닌 팀원, 더나가서 다른사람의 코드를보고도 내것으로 만드는게 중요하다고 생각이 드는 프로젝트였던것 같다. 프로젝트때 하지 못했던 부분들을 좀 만지면서 완전하게 만드는 시간을 가지는게 좋을것같다.