[Day 17] 2022-0715 - 회원가입 페이지 유효성 검사

오늘 배운 것

• 회원 가입 페이지 유효성 검사 로직 구현 실습, CSS 작성
• 이벤트 객체 개요

새롭게 알게된 것

• 오늘은 어제까지 완성한 유효성 검사에 이어서, 버튼 활성화 기능을 구현했다. 모든 입력값이 정확하게 입력되었을 때만 실행될 수 있도록 모든 유효성 함수의 리턴값을 체크하고 실행할 수 있는 함수를 구현하였다.

// input 값 여부에 따라 버튼 활성화
function checkSignup() {
  let id = elInputUsername.value;
  let email = elInputEmail.value;
  let pw1 = elPassword1.value;
  let pw2 = elPassword2.value;

  if (isMoreThan4Length(id) && isRightFormat(email) && isMoreThan8Length(pw1) && isMatch(pw1, pw2)) {
    elBtnSubmit.disabled = true;
    elBtnSubmit.classList.remove('passive');
  } else {
    elBtnSubmit.disabled = false;
    elBtnSubmit.classList.add('passive');
  }
}

• 이렇게 만든 checkSignup 함수를, keyup 이벤트가 발생중인 모든 이벤트 핸들러에서 실행하여, 이벤트가 발생될 때마다 값을 체크하고 동작하도록 구현하였다. 

// 예시 : 비밀번호 일치 여부 확인 이벤트 핸들러
const passWordConfirmHandler = () => {
  let pswd1 = elPassword1.value;
  let pswd2 = elPassword2.value;
  if (isMatch(pswd1, pswd2)) {
    elMismatch.classList.add('hide');
  } else {
    elMismatch.classList.remove('hide');
  }
  checkSignup(); //매 이벤트가 실행될 때마다 계속 체크한다.
};

elPassword2.addEventListener('keyup', passWordConfirmHandler);

• 입력이 될 때마다 실시간으로 유효성을 체크하고 싶었는데, 이런 방법으로 하니까 하나만 값이 달라져도 바로 버튼이 비활성화가 되도록 만들 수 있었다. 
• 코드를 짤 때마다, 이 방식이 최선인가를 늘 고민하는 편이다. 일단 이보다 더 간단한 방법이 없다고 생각이 들어 구현을 했는데 그래도 이 방식이 괜찮은지 확인해보고 싶어서 라이브세션이 끝난 후 엔지니어님께 질문을 드렸다. 돌아온 답변은 제 3자가 보기에 괜찮고 납득이 간다면 괜찮은 코드이고, 잘 한 것 같다고 말씀해 주셨다. (근데 갑자기 음소거가 되어서 첫 번째 말씀해주신 내용을 못들었다 이런...) 
• '제 3자가 봤을 때 납득이 가면...' 을 괜찮게 짠 코드인지 판단하는 기준으로 삼아도 좋을 것 같다고 말씀해주셨는데, 나에게도 납득할만한 기준이 생긴 것 같아서 좋다. 교과서처럼 정해진 정답 보다는 계속 새로운 시도를 하고 거기서 더 좋게 발전시키는 것이 개발 정신이라는 생각이 든다. 
• 또 클린코드의 중요성에 대해서도 다시 생각하게 되었다. 지금까지는 코드를 작성한 뒤에 조금 복습하고 깔끔하게 리팩토링 할 생각을 잘 안했는데, 오늘은 수업이 끝나고 코드를 다시 깔끔하게 고쳤다. 

See the Pen Untitled by hyejj19 (@hyejj19) on CodePen.

 

 

• input 태그의 disabled 속성 : 이 속성이 있는 요소는 사용할 수 없다. disabled 에 속성을 명시하지 않으면 자동으로 false 값을 가진다. 이 속성을 추가/삭제 하기 위해서 특정 조건에서 element.disabled = true 로 해주었는데, element.removeAttribute 메서드로 disabled 자체를 삭제할 수도 있고, element.setAttribute로 disabled 속성을 추가할 수도 있다.

 

• addEventListner 와 onclick(on이벤트) 차이점 : addEventListener 가 비교적 최신에 나온 기능이고, 하나의 요소에 여러개의 event리스너를 설정할 수 있기 때문에 onclick보다 권장된다. 

 

• 브라우저의 렌더링 과정에 따른 <script> 태그의 위치 및 속성 : 브라우저는 html 문서를 해석할 때 위에서 부터 아래로 해석하고, 이 과정에서 (기본적으로) <script> 태그를 만나면 html 다운로드를 멈추고 자바스크립트를 다운로드한다. 이 태그를 head 에 넣든 body 최하단에 넣든 html 받다 말고 자바스크립트를 받으러 가는 것은 동일하다. 
• 이런 과정의 문제점은 js 가 html보다 더 빨리 받아지면 사용자가 페이지를 볼 수가 없고, 그렇다고 js 를 받기 전에 html을 받으면 js를 사용할 수가 없다. 
• 따라서 해결책은 head 태그 안에 script에 async 혹은 defer 속성을 넣어서 js 파일을 로드하는 것이다. async 속성은 html을 받다가 script를 만나면 js 도 동시에 다운로드 받는데, 단점은 페이지 렌더링이 끝나기 전에 js가 먼저 실행된다는 것이다. defer는 동시에 다운로드 받는 것은 같은데, html 이 모두 다운로드 되면 js를 실행하는 조금 신사적인 녀석이다. (html을 기다려주는 매너가 있는 것 같다.) 
• 그래서 가능하면 head 태그에 script 태그를 넣되, defer 속성을 추가하여 로드하자!

SUMMARY

잘한 것

• 과정 자체에 최선을 다하려고 한 것. 
• 노력해서 달성할 가능성이 높은 정도로 계획을 수정한 것. 
• 페어, 다른 동기분들께 알고 있는 것 나누려고 한 점. 
• 사소한 것이라도 질문하고 답변을 들은 것! 

보완할 것

• 주말에 늘어지지 말고 공부하기!
• 운동 빼먹지 말고 가기 

느낀 점

• 공부한 개념을 바로 실습하면서 사용해보니 훨씬 이해가 잘 되는 것 같고 더 절박하게 (바로 써야하니까) 찾아보게 되는 것 같다. 혼자서 공부를 할 때도 만들면서 배우는 것을 위주로 하는게 효율적일듯.