TIL - 220518

애리·2022년 5월 18일

TIL 코드스테이츠

Section 1

목록 보기

14/14

📌 유효성 검사/이벤트

유효성 검사란?

웹사이트의 회원가입을 진행할 때, 사이트에서는 원하는 조건에 맞게 형식을 맞춰 입력해야 한다.

특정 값은 반드시 입력해야 합니다.
비밀번호는 n 자릿수 이상이어야 한다.
비밀번호와 비밀번호 확인란에 입력된 문자가 동일해야 합니다.

이런 기능을 유효성 검사(Form validation) 라고 한다.

유효성 검사 구현

이번에는 HTML 문서로 작성된 간단한 로그인 페이지에 이러한 유효성 검사를 직접 작성 및 적용해보았다.

먼저 고려한 유효성 검사의 유형은 다음과 같다

아이디는 4글자 이상이라면 “사용할 수 있는 아이디 입니다” 메시지를 출력한다.
아이디가 4글자 이하라면 “아이디는 네 글자 이상이어야 합니다” 메시지를 출력한다.
비밀번호와 비밀번호 확인 창의 입력값이 다르면 “비밀번호가 일치하지 않습니다” 메시지를 출력한다.

고려한 모습 토대로 다음과 같이 구현해보았다.

let username = document.querySelector('#username')
let successMessage = document.querySelector('.success-message')
let failureMessage = document.querySelector('.failure-message')
let password = document.querySelector('#password')
let password_retype = document.querySelector('#password-retype')
let mismatch_message = document.querySelector('.mismatch-message')

//아이디 입력창에 키보드가 눌렀다 떼는 일이 발생하면(이벤트 발생!)
username.onkeyup = function() {
  //아이디의 길이가 4글자 이상이면
  if(isMoreThan4Length(username.value)) {
    //성공메시지를 출력해야한다.
    successMessage.classList.remove('hide')
    //실패메시지를 삭제해야한다.
    failureMessage.classList.add('hide')
  }
  else {
		//아이디의 길이가 4글자 미만이라면
    //성공메시지를 삭제해야한다.
    successMessage.classList.add('hide')
    //실패메시지를 출력해야한다.
    failureMessage.classList.remove('hide')
  }
}
//비밀번호 확인 입력창에 키보드가 눌렀다 떼는 일이 발생하면(이벤트 발생!)
password_retype.onkeyup = function() {
  //만약 비밀번호와 비밀번호 확인창의 입력값이 일치한다면
  if(isMatch(password.value, password_retype.value)) {
    //실패메시지를 삭제
		mismatch_message.classList.add('hide')
  }
  else {
		//비밀번호와 비밀번호 확인창의 입력값이 일치하지 않는다면
    //실패메시지를 출력해야한다.
    mismatch_message.classList.remove('hide')
  }

}
//아이디의 길이가 4이상인지 확인하는 함수
function isMoreThan4Length(value) {
	//아이디의 길이가 4이상이라면 true, 아니라면 false를 반환(boolean)
  return value.length >= 4
}
//비밀번호와 비밀번호 확인창의 입력값이 같은지 확인하는 함수
function isMatch (password1, password2) {
  //password1 === password2 -> true를 반환
  //password1 !== password2 -> false를 반환
  return password1 === password2
 }

이벤트란?

이벤트란 프로그래밍하고 있는 시스템에서 일어나는 사건이나 발생을 말한다. 웹의 경우에, 이벤트는 브라우저 윈도우 내에서 발생하며, 발생될 수 있는 많은 각양각색의 이벤트 타입이 존재한다.

어떤 요소를 선택하거나 어떤 요소 위에 커서를 올려 둘 때(hover)
키보드에서 키를 선택
브라우저 창의 크기를 조정
웹 페이지 로딩을 완료

1. 이벤트 핸들러

각각 이용가능한 이벤트들은 이벤트 핸들러(event handler)를 가지고 있는데, 이는 이벤트가 발생되면 실행되는 코드 블럭(JavaScript 함수)을 말한다. 코드 블럭이 이벤트에 응답해서 실행되기 위해 정의되었을 때, 우리는 이벤트 핸들러를 등록했다 말한다. 이벤트 핸들러는 때때로 이벤트 리스너(event listener)라고 불리는데 리스너는 발생되는 이벤트에 대해 듣고, 핸들러는 발생되는 이벤트에 응답해서 실행되는 코드이다.

2. 이벤트 핸들러 등록 방법

이벤트 핸들러를 등록하는 방법은 여러가지가 존재한다.
예시로 어떤 버튼이 존재하고, 버튼을 클릭할 때 콘솔에 "버튼이 눌렸습니다!"가 출력되도록 만들어보자

//1
btn.onclick = function() {
  console.log('버튼이 눌렸습니다!');
}

//2
btn.addEventListener('click', function() {
  console.log('버튼이 눌렸습니다!');
});

//3
function handler() {
  console.log('버튼이 눌렸습니다!');
}
btn.onclick = handler;

//4 (x)
function handler() {
	console.log('버튼이 눌렸습니다!');
}
btn.onclick = handler();

위 방법들 중 4번 방식은 잘못된 예시이다. 이벤트 속성에 이벤트 핸들러를 등록할 때에는 함수 그 자체로 등록하며 함수 실행을 등록해서는 안된다.

3. 이벤트 객체

이벤트 객체 란 특정 타입의 이벤트와 관련된 객체를 뜻하며 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있다. 이벤트 객체는 이벤트의 타입을 나타내는 type.property 와 이벤트의 대상을 가리키는target.property 를 가진다. 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달된다.

<!--이벤트 객체 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>이벤트 객체</title>
  </head>
  <body>
    <button>아메리카노</button>
    <button>카페라떼</button>
    <script>
      let menus = document.querySelectorAll("button"); <!--모든 버튼을 가져옴-->

      let btnAmericano = menus[0];
      let btnCaffelatte = menus[1];

      function handleClick() {
        let currentMenu = event.target.textContent; <!--이벤트 발생 시 각 메뉴의 이름-->
        console.log(currentMenu + "를 클릭하셨습니다.");
      }
      btnAmericano.onclick = handleClick;
      btnCaffelatte.onclick = handleClick;
    </script>
  </body>
</html>

해당 코드에서는 각 버튼을 누를 때 어느 메뉴의 버튼을 눌렀는지를 출력하고 싶어한다. 어느 메뉴를 눌렀는지 확인하기 위해서는 이벤트에 대한 상세정보를 받아오는 target을 이용해 이벤트의 대상을 불러오고 textContent 를 통해 각각의 이름을 불러온다

4. 실제 구현 영상

마무리

좋았던 점, 배운 점

오늘은 어제에 이어서 유효성 검사 과제를 마무리 한 뒤 이벤트에 대해 공부했다. 실제 아주 간단한 회원가입 페이지를 구현하면서 내가 어떤 방식으로 동작하느냐에 따라 어떤 이벤트가 발생했는지, 또 그것을 컴퓨터는 어떤식으로 인식하는지 알게되었다. 사실 글로만 봤을 때는 어떤 말인지 와닿지 않아 걱정했지만 작성된 HTML문서를 실행시켜 내가 작성한 JS코드를 통해 어떻게 동작하는지를 직접 살펴보니 좀 더 이해가 빠르게 되었던 것 같다.

아쉬운 점

어제 오늘 과제가 일찍 끝나 페어분과 함께 CSS 작업을 통해 좀 더 꾸며보기로 결정하고 실행에 옮겼다. 하지만 그과정에서 나의 아직 무지하다못해 처참한 CSS 지식이 드러났다…. 분명 배운건데 하면서 기억을 못해 다시 자료를 찾아 먼 여정을 걸었다ㅋㅋㅋㅋㅋ큐ㅠㅠ 또 아직은 flex의 개념에 익숙치 않은 것 같다.