validator 프로젝트!

YEONGHUN KO·2021년 11월 13일
0
post-thumbnail

1. validator

회원가입에 필요한 각종 정보를 입력한다음 조건이 미달되면 에러메세지를 띄우고 조건이 통과되면 성공메세지를 띄운다.

모든 조건이 통과가 되면 콘솔창에 등록완료 메세지를 띄운다.

그리고 컴포넌트 형식으로 코드를 짰다. HTML 까지 다 만들고 기능까지 추가해서 App이라는 컴포넌트에 잘 정리하여 독립적으로 존재하도록 하였다.
component / utils 폴더로 나누고 파일의 특성별로 나누어 정리하였다. 그리고 마지막으로 checkUserInfo.js를 통해 사용자 정보를 검증한다.

1-1. 위계

  • main.js

    • App.js
      • AdduserInfo.js
      • button.js
      • header.js
  • utils폴더

    • template.js
    • constant.js
    • validator.js(생성자 함수인지 판별하는 함수)
    • domStorage.js
    • checkUserInfo.js(가장 마지막에 실행되야하는 함수)

validator 코드를 확인하고 싶다면 요기로에 방문해볼것

2. 배운점

- HTML

  1. SMALL / P TAG
  2. CONTAINER로 감싸고 FORM-CONTROL로 또다시 분리시켜 관리
  3. input-type text / password로 구분가능

- CSS

  1. .form-control.success input => success했을때 input을 바꿀 수 있다. 일종의 if로써 기능.
.form-control.success input {
  border-color: var(--success-color);
}

- JS

  1. array를 argument로 넘겨줘서 한꺼번에 처리했다.

  2. Array.prototype.every() 메소드를 배웠다.

  3. valid를 통해 모든 field의 통과여부를 관찰하고 모두 다 통과했으면 register한다. 따라서 각 함수는 조건이 부합되면 true를 아니면 false를 리턴한다.

form.addEventListener("submit", function (e) {
  e.preventDefault();

  // check if every fields are valid, then show successfully registered message!
  // this is really interesting approach using 'Array.prototype.every' method!
  const valid = [
    checkRequired([username, email, password, password2]),
    checkLength(username, 3, 15),
    checkLength(password, 6, 25),
    checkEmail(email),
    checkPasswordsMatch(password, password2),
  ].every((check, i) => {
    // console.log(i);
    // console.log(check);
    return check;
  });

  if (valid) {
    console.log(
      `Congratulation ${username.value}! You are successfully registered!`
    );
  }
});
  1. script상에서 main.js 아래에 checkUserInfo.js를 따로 선언해야했다. 왜냐면DOM TREE가 다 생성이 되고 나서 검증을 해야하기 때문이다. APP안에서 검증을 하면 아직 DOM이 생성되기 전이므로 NULL이 떠버린다.

  2. click 이벤트가 등록되는 요소가 형제요소라면 첫번째 형제에만 등록됨

    • form_control에 click 등록했었는데 다른데 클릭해도 안되던것이 username을 클릭하니 됨.
  3. closest는 위쪽으로(부모쪽으로) 올라가면서 찾는다. 아래쪽으로는 내려가지 않는다.

완성!

profile
'과연 이게 최선일까?' 끊임없이 생각하기

0개의 댓글