240509 TIL_팀 프로젝트2 (영화 검색 게시판 제작) 종료 > JS 문법 (유효성 검사, 보안)

미밍·2024년 5월 9일
1

우당탕탕 개발 일기

목록 보기
31/108

팀 프로젝트 끝 ~240509

고민했던 유효성 검사 부분

  if (rating === 0) {
    alert("평점은 1점부터 10점까지 해주세요.");
    return;
  }

  if (!nickname || !pw || !comment || !rating) {
    alert("닉네임, 비밀번호, 평점, 댓글을 모두 입력해주세요.");
    return;
  }

  if (isNaN(rating)) {
    alert("평점은 숫자로 입력해주세요.");
    return;
  } else if (rating > 10 || rating < 0) {
    alert("평점은 1점부터 10점까지 해주세요.");
    return;
  } else {

더 생각나는 게 없었다. 그런데, 사실 유효성 검사할 부분은 더 많은데 너무 쉽게 생각했던 것 같다. 다음엔 좀 더 신중하게 고민해보기로 했다.

썼던 기능만 계속 재활용하는 기분인데, 다음에는 안 썼던 것을 써보기로 했다...!

function renderComment() {
  const renderAllComment = loadComments(movieId);

  const CommentSection = document.querySelector(".commentLi");
  CommentSection.innerHTML = "";

  renderAllComment.forEach((render) => {
    CommentSection.innerHTML += `
            <div class="userComment">
              <p>닉네임: ${render.nickname}</p>
              <p>${render.comment}</p>
              <p>별점 : ${render.rating} / 10</p>
            <button type="button" class="delBtn" onclick="DeleteComment(${render.id})">삭제</button>
            </div>`;
  });
}
renderComment();

특히 이런 곳!innerHTML 말고 다른 거 써보기.

[팀 프로젝트 회고록]
비밀번호 CR을 담당했는데, 저번에 비밀번호 보안 관련해서 input 태그 말씀해주셨는데, 또 까먹었다...!!! prompt로 쉽게 쉽게 구현한 것을 다시 한 번 재현한 듯 하여 아쉽다. 다음엔 꼭, 꼭 기억해야지...!
이번 프로젝트도 팀원 분들을 너무 잘 만나 즐겁게 작업했다~!다음에도 즐겁고 더 성장하는 작업이 됐으면 좋겠다!

profile
프론트앤드; Frontend

2개의 댓글

comment-user-thumbnail
2024년 5월 9일

크하~~ 혜미님 고생많았어요요

1개의 답글