[westargram] main 화면 구현5 / 댓글 삭제, 댓글 좋아요, 게시글 좋아요 / id,pw 유효성 검사 (정규표현식)

댓글 삭제 기능 구현

댓글은 비교적 그 상위 부모요소에서 해당 element를 지우면 되니 간단하게 가능!!

<main.html>
function addSubmitComment( e ) {
  e.preventDefault();
  if (commentInputValue.value.length !== 0 || commentInputValue.value.replace(/(\s*)/g, '')) {
    commentMainBox.innerHTML += `
      <div class="comment-box">
        <div class="comment-left-section">
          <span class="comment-nickname-link"><a href="#" class="nickname-link"></a>${accountObj['nickname']}</span>
          <span class="comment-text">${commentInputValue.value}</span>
        </div>
        <div class="comment-icon">
          <button class="comment-like-btn"><i class="far fa-heart"></i></button>
          <button class="comment-delete-btn"><i class="fas fa-times"></i></button>
        </div>
      </div>
    `;
    commentInputValue.value = null;
    commentSubmitBtn.style.color = '#d3e5f6';
  }
  commentCountBtn.innerText = `댓글 ${commentMainBox.children.length}개`;
}
<main.js>
  function deleteComment( e ) {
  commentMainBox.removeChild(e.parentNode.parentNode);
}

delete button에 onclick이벤트를 줘서 해당 요소 클릭시 그 해당하는 요소만 지우도록 했다.

댓글 좋아요 기능

우선 클릭을 안한 상태에서는 회색 테두리인 하트, 클릭시 빨간색으로 채워진 하트가 되는데 자연스럽게 바뀌도록 transition 과 animation ,keyframs 를 사용하도록 하겠다!!

function clickLike( e ) {
  if (e.children[0].className === "far fa-heart") {
    e.classList.add('like-scale-action');
    e.children[0].className = "fas fa-heart";
    e.children[0].style.color = 'red';
  } else {
    e.classList.add('like-scale-action');
    e.children[0].className = "far fa-heart";
    e.children[0].style.color = '#9f989e';
  }
  e.classList.remove('like-scale-action-in');

"이렇게 주면 위에서 추가해서 이벤트 발생하고 삭제 되겠지?" 라는 생각에 시도..
컴퓨터 :"응 안돼 나 엄청빨라😁" setTimeout()을 사용해서 해결하였다!
이 함수를 이용해서 게시글 좋아요 버튼에도 적용하면 되겠다!

function clickLike( e ) {
  if (e.children[0].className === "far fa-heart") {
    e.classList.add('like-scale-action');
    e.children[0].className = "fas fa-heart";
    e.children[0].style.color = 'red';
  } else {
    e.classList.add('like-scale-action');
    e.children[0].className = "far fa-heart";
    e.children[0].style.color = '#9f989e';
  }
  setTimeout(() => {
    e.classList.remove('like-scale-action-in');
  },400)
}

게시글 좋아요 기능 구현

중복된 곳으로 clickLike() 사용했지만 게시글 부분은 다시 돌아올 때 color: black 이라서 그부분만 따로 수정해주자

parentNode의 className을 비교해서 게시글 이미지 하트 아이콘이라면 다시 돌아갈 때 color:black으로 돌아갈 수 있도록 했다.

else {
    e.classList.add('like-scale-action');
    e.children[0].className = "far fa-heart";
    e.parentNode.className === "header-icon" ? e.children[0].style.color = 'black' : e.children[0].style.color = '#9f989e';
  }

로그인 유효성 검사 (정규표현식)

정규표현식을 사용하면 아이디 유효성 검사하는데 정말 간단해진다!!

ID에 @ 포함여부

메일 중에 chanho.yoon.1993@gmail.com ych2174@gmail.com 이메일이 있다. 이러한 이메일 아이디 양식을 지켰는지 판별하려면 정규표현식을 어떻게 사용해야할까??!

• 먼저 @앞에 아이디가 들어가는데 아이디에는 .,number,string 이 들어갈 수 있다.
• 또한 무조건 @는 하나가 존재해야한다
• @뒤 부터의 문자는 숫자와 대문자를 포함하지 않는다. (이메일)

const idRegExp = /^[A-Za-z0-9_][A-Za-z0-9._]*[@]{1}[a-z]*[.]+[a-z]{1,3}$/;

이렇게 정규표현식을 사용했을 경우 위의 경우를 다 판별할 수가 있다.
/ : 정규 표현식의 시작과 끝을 판별
[A-Za-z0-9] : 문자셋으로 안에 범위 값을 지정 ( 대문자,소문자,숫자 입력 가능 )
^ : 문장의 처음을 의미
$ : 문자의 끝을 의미
{3,10} : 문자열의 길이를 뜻한다. 최소 3자부터 10자까지 허용
* : 앞의 표현식이 0회 이상 연속으로 반복되는 부분과 대응한다.
+ : 앞의 표현식이 1회 이상 반복되는 부분과 대응한다.

정규표현식 참고하기 좋은 곳1
정규표현식 참고하기 좋은 곳2

비밀번호 5글자 이상

메일과 마찬가지로 정규표현식을 쓰면 간단하게 가능하다!

const pwRegExp = /^[A-Za-z0-9!@#$%^&*()-_=+?/,.<>][A-Za-z0-9!@#$%^&*()-_=+?/,.<>]{4,}$/;
  if (!pwRegExp.test(pw)) {
    getLoginPw.focus();
    getLoginPw.value = getLoginId.value.replace(' ', '');
    getLoginPw.value = null;
    alert('5글자 이상 입력해야 합니다.');
    return;
  }