[개발기초] 유효성 검사 - 2주차 (2)

💆‍♂️ 처음 본격적으로 진행되었던 pair와의 sprint.

일단 내가 비전공자고 코딩에 대해선 모르는 것들이 9할이었기에 혹시나 수준차가 너무 나고 내가 민폐를 끼치면 어쩌나 하는 생각에 과제를 진행하게 되었지만 걱정보다 잘해내고 있는 나의 모습을 발견 할 수 있어서 다행이었다.

10일 정도 이 프로그램에 참여하며 비전공자인 내가 다행이라 느꼈던 부분은, 내가 프로그래밍 언어의 자세한 문법 하나하나를 정확하게 꿰뚫고 있지는 않지만 프로그래밍언어가 만들고자 하는 논리구조의 아이디어는 이해하고 있다는 것이다.

어떻게 하면 문제가 해결되겠다는 아이디어는 있으나, 그것을 적기 위한 프로그래밍적 문법이 부족한 것이다.

어찌되었건 이번 게시글에서는 '유효성 검사'라는 것에 대해 배운다.

그냥 단순히 말해서, 웹사이트에 ID와 Password를 적을 때 최소한의 requirements와 일치여부를 코딩 로직을 통해 따져주는 것이다.

function isMatch (elPassword, elPasswordRetype) {
  if(elPassword === elPasswordRetype) {
    return true
  } else {
    return false
  }
}

elPasswordRetype.onkeyup = function () {
  if(elPassword.value == elPasswordRetype.value) {
    //비밀번호가 일치합니다 메세지가 보여야 함(remove hide)
    elMachedPassword.classList.remove('hide');
    //비밀번호가 일치하지않습니다 메세지가 가려져야 함(add hide)
    elMisPassword.classList.add('hide');
  } else {
    //비밀번호가 일치합니다 메세지가 가려져야 함(add hide)
    elMachedPassword.classList.add('hide');
    //비밀번호가 일치하지않습니다 메세지가 보여야 함(remove hide)
    elMisPassword.classList.remove('hide');
  }
}

📝이 과제를 통해 얻어간 걷은

1.onkeyup
: User가 type할 때마다 반응함, 여기에 함수적용가능 나는 여기서 passwrod와 retyped password를 일치시켜주는 함수를 작성함.

elPasswordRetype.onkeyup = function () { }

2.classList add, remove
: 해당되는 class의 이름에서 글자를 추가하거나 삭제가능

elMachedPassword.classList.remove('hide')

3.hide
: html에서 class뒤에 hide 붙여주면 그 줄 사라짐
ex.

<div class="mismatch-message hide">비밀번호가 일치하지 않습니다</div>

👀reference code

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

elPasswordRetype.onkeyup = function () {
  if(isMatch(elPassword.value, elPasswordRetype.value)) {
    elMisPassword.classList.add('hide');
  } else {
    elMisPassword.classList.remove('hide');
  }
}

이때가 고차함수 문제들 풀기 전인데 이때까지만 해도 코드 까막눈이었다..