2021년 4월 27일 코드스테이츠 DAY-23 (DOM, 유효성 검사 : 김정빈님 코드 분석 + 알게된 점)

DOM 

 

DOM(Document Object Model)이란 그대로 해석하자면 문서 객체 모델을 의미한다. 

 

Javascript로 HTML을 조작하기 위하여 HTML을 객체로 정의한 것이라고 이해할 수 있겠다. 

 

유효성 검사 : 김정빈님 코드 분석

 

Sprint Feedback 시간에 자신이 완료한 sprint(유효성 검사 페이지)를 자원하여 발표하는 시간이 주어졌고

 

동기 중 제일 먼저 김정빈님이라는 분이 프레젠테이션을 시작하셨다. 

 

시작하자마자 딱 눈에 띄는 깔끔한 CSS가 보였고, 중간중간 예쁜 반응도 있었기에 관심이 절로 갔다.

 

김정빈님의 발표가 끝나고 정빈님이 코드를 디스코드에 뿌려주셨는데, 

 

이 코드 분석을 주제로 블로깅하면 공부가 많이 될 것 같아서 정빈님의 사전 협조를 구했다.

 

자 한번 정빈님의 코드를 보자. 

 

아! 코드 보기전에 정빈님의 깃헙 주소는 아래와 같다. 

 

https://github.com/jeongbeen2/im-sprint-validation-check

 

정빈님의 자바스크립트 코드 중 인상깊은 부분을 가져와 보겠다. 

 

let elInputUsername = document.querySelector('#username'),
  elFailureMessage = document.querySelector('.failure-message'),
  elSuccessMessage = document.querySelector('.success-message'),
  elOnlyEngNum = document.querySelector('.only-engNum'),
  passWord = document.querySelector('#password'),
  passWordRetype = document.querySelector('#password-retype'),
  misMatchMessage = document.querySelector('.mismatch-message'),
  failurePassword = document.querySelector('.failure-password'),
  registerBtn = document.querySelector('#registerBtn');

let isIdValidate = false,
  isStrongPW = false,
  isMatchedPW = false;

// ? ########################### handler function ###########################

function idHandler() {
  if (!isMoreThan4Length(elInputUsername.value)) {
    elOnlyEngNum.classList.add('hide');
    elSuccessMessage.classList.add('hide');
    elFailureMessage.classList.remove('hide');
    isIdValidate = false;
  } else if (onlyNumberAndEnglish(elInputUsername.value)) {
    elSuccessMessage.classList.remove('hide');
    elFailureMessage.classList.add('hide');
    elOnlyEngNum.classList.add('hide');
    isIdValidate = true;
  } else {
    elOnlyEngNum.classList.remove('hide');
    elSuccessMessage.classList.add('hide');
    elFailureMessage.classList.add('hide');
    isIdValidate = false;
  }
}

function pwHandler() {
  if (!strongPassword(passWord.value)) {
    failurePassword.classList.remove('hide');
    isStrongPW = false;
  } else {
    failurePassword.classList.add('hide');
    isStrongPW = true;
  }
}

function pwMatchHandler() {
  if (!isMatch(passWord.value, passWordRetype.value)) {
    misMatchMessage.classList.remove('hide');
    isMatchedPW = false;
  } else {
    misMatchMessage.classList.add('hide');
    isMatchedPW = true;
  }

  if (isIdValidate && isMatchedPW && isStrongPW) {
    registerBtn.classList.add('activeBtn');
  } else {
    registerBtn.classList.remove('activeBtn');
  }
}

// ? ########################### validator function ###########################

function isMoreThan4Length(value) {
  return value.length >= 4;
}

function isMatch(password1, password2) {
  return password1 === password2;
}

// [유효성 검증 함수]: 영어 또는 숫자만 가능
function onlyNumberAndEnglish(str) {
  return /^[A-Za-z][A-Za-z0-9]*$/.test(str);
}

// [유효성 검증 함수]: 최소 8자 이상이면서, 알파벳과 숫자 및 특수문자(@$!%*#?&)는 하나 이상 포함
function strongPassword(str) {
  return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(
    str
  );
}

// ! ############################## init function ##############################

function init() {
  elInputUsername.addEventListener('keyup', idHandler);
  passWord.addEventListener('keyup', pwHandler);
  passWordRetype.addEventListener('keyup', pwMatchHandler);
}

init();

 조금만 가져오려고 했는데 보니까 참 배울게 많은 코드라서 전체를 참고했다. 

 

 JS에서 인상깊은 포인트들은 아래와 같다. 

 

• idHandler, pwHandler, pwMatchHandler함수들은 유효성을 검증하는 함수(isMoreThan4length, isMatch, onlyNumberAndEnglish, strongPassword)를 통과하였을때 default값이 false인 isIdValidate, isStrongPw, isMatchedPw 변수에 true를 재할당하였고, 모두 true가 되었을 때 회원가입 버튼을 활성화하도록 사용하였다.
• 이러한 논리의 흐름은 사실 나로서는 생각하지 못했는데 동기지만 참 배울것이 많다고 느꼈다. 앞으로의 프로젝트에서 이러한 화면을 만들 수 있는 기회가 생긴다면 이 논리를 나 또한 적용해 보겠다. 이 논리를 머릿속에 넣어놓는 다면 유효성 검증하는 것 뿐만이 아닌 다른 곳에서도 사용할 수 있지 않을까? 
• 또한 일단 코드가 많이 깔끔하고 예쁘다는 것 그리고 기능별로 잘 모아놓았다는 것(변수는 변수끼리, handler function끼리, validator function끼리 init함수 끼리)
• 내가 잘안되는 부분이라서 그런지 참 부럽다고 생각하는 동시에 반성이되는 부분이다. 

자 또한 CSS에서 인상깊은 포인트를 살펴보자.

 

fieldset > input {
  height: 30px;
  margin: 5px 0px;
  font-size: 20px;
  padding-left: 5px;
  border: none;
  border-bottom: 1px solid rgba(2, 7, 21, 0.2);
}

fieldset > input:focus {
  outline: none;
  border-bottom: 2px solid #2b66ff;
  animation: 0.15s ease-in slideIn;
}

@keyframes slideIn {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

 

• 디테일하지만 아기자기한 animation이다. 
• 사용자가 input창에 focus하면 border-bottom이 짠하고 틔어나오는 animation이다. 
• scale로 애니메이션을 주는 것은... 음 정말 내가 잘하지 않는 부분이다.
• 하지만 실제로 적용된 모습을 보니 깔끔하게 느껴졌다.
• 항상 큰 부분들의 움직임에 신경을 많이 썼던 탓인지 디테일적인 부분이 부족했었는데, 이런 코드를 볼 수 있는 기회가 생겨서 정말 다행이다.  

 

학습을 하는것도 많은 공부가 되지만 보고 따라해보고 직접 무언가를 하는 곳에서도 배우는 것이 많다.

 

학습과 실습 이 두가지의 밸런스가 중요한 것 같다는 느낌을 다시 받았다.

 

아 잘하고싶다. 곧 React가 시작된다. 내일부터 준비를 해봐야겠다.