[javascript] 회원가입 유효성 , form 입력값 확인 구현 + 코드 리뷰 피드백

 회사에서 이틀동안 html,css , javascript 교육을 받은 후,

회원가입 폼을 구현하는 실습시간을 가졌다.

오후에는 코드 리뷰 시간을 가졌는데 
리뷰를 할줄 알았으면 조금 더 성의있게 열심히 했을텐데 ... 조금은 아쉬웠다
다음부터는 작은거라도 꼼꼼히 코드 작성하기 ...!!

코드 리뷰를 한다길래 처음에는 떨렸지만 막상 해보니까 재미있고 더 열심히 공부해서
다른 사람들의 코드를 다 이해하고 싶어졌다 ...!!! 화이팅

/*  
1. 정규식을 이용해서 이메일 유효성 검사 기능구현하기
*/
document.getElementById('email').addEventListener('blur', function(event) {
      const value = this.value,
      elParent = this.parentElement,
      parentClassList = elParent.classList;

    if(value) {
    if(!/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/g.test(value)) {
        parentClassList.add('error');
        parentClassList.remove('success');
    }else{
        parentClassList.add('success');
        parentClassList.remove('error');
    }
}else{
    parentClassList.remove('success', 'error');
}
  });

첫번째는 이메일 유효성 검사 기능을 구현하는 것이었는데 
이부분은 사실 다르게 나오기가 힘들어서 다른분들도 이런식으로 했던거같다
하지만 정규식을 const로 선언해서 넣었으면 조금 더 깔끔하게 할 수 있었는데  왜 저렇게 했는지 모르겠다 ㅎㅎ.. 

여기서 받은 피드백은 들여쓰기를 주의하라는 것이었다. if문을 보면 잘못된게 보인다..
앞으로 주의하자 !!

/* 
2.  form 전송 시 각 항목 입력값 확인
  # 이름, 이메일, 비밀번호, 개인정보수집동의 필수 입력 값
   */
 
    document.getElementById('form').addEventListener('submit', function(event) {

        const value = this.value,
              
              nameValue = document.getElementById('username').value,
              pwdValue = document.getElementById('pwd').value,
              pwdConfirmValue = document.getElementById('pwdConfirm').value,
              checkbox = document.getElementById('privacy').checked,

              elParent = this.parentElement,
              parentClassList = elParent.classList;
        
       function submitClick(){
            if(pwdValue , nameValue , pwdConfirmValue ,checkbox == ""){
                alert("필수항목들을 모두 입력해주세요.");
                event.preventDefault();
            }else{
                alert("회원가입 완료");
            }
       }
       submitClick();
       value.addEventListener("click", submitClick);
 
     });

두번째는 form 전송 시 , 필수항목을 체크했는지 확인하는 기능을 구현하는거였는데

지금 올린 이 코드는 틀린 코드다..

우선 피드백을 얘기하자면  function submitClick() 없이 if문만 있어도 괜찮다는게 문제고

if문 안에 넣은 조건식 자체가 오류다 

4개의 변수를 같이 넣었는데 실제로 테스트를 해보면 중간값에 값이 없어도 회원가입 완료가 뜬다.
내가 테스트를 해보았을때는 중간값을 비우지않고 첫번째값만 비워봤어서 에러가 안 떴는데
다시 해보니 에러투성이였다.

애초에 너무 간결하게만 적으려고 초점을 맞추었던게 문제였다 .. 흑
간결한 코드도 좋지만 아직 배워가는 단계에서는 길게 풀어서 적는것도 좋은 방법이라고 말씀해주셨다


피드백 & 앞으로 주의할 점

• 변수명을 더 쉽게 남들이 알아볼 수 있게 적기(애매하게X) 
• 들여쓰기 신경쓰기
• eventListener 오류 .. (함수는 빼도 될 거 같다.)
• 굳이 함수 안에 if문 안 넣어도 된다 
  
  
  이미 알고있는 기본적인 걸 지적받아서 부끄러웠지만
  내가 놓친 부분이니까 다음부터는 더 주의할거같고 오늘 받은 피드백을 바탕으로
  코드를 수정한뒤, localStorage까지 추가해서 최종 코드를 업로드 해야겠다 !