(TIL) D+15 유효성 검사 및 이벤트 객체

유효성 검사

키보드 이벤트

• 버튼 클릭시 콘솔에 메시지가 출력되게 작성 예시

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

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

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

• 실수하기 쉬운 사례

// 실수하기 쉬운 사례

// 사례1
btn.onClick = function () {      // onClick(X) onclick(O)
	console.log('버튼이 눌렸습니다!')
}

// 사례2
function handler() {
	console.log('버튼이 눌렸습니다!');
}

btn.onclick = handler();    // 속성(onclick)에 이벤트 핸들러를 등록할 때에는 함수 그 자체로 등록해야 함!

<참고>

https://developer.mozilla.org/ko/docs/conflicting/Web/API/Element/keyup_event

https://developer.mozilla.org/ko/docs/Web/API/Element/keyup_event

https://www.daleseo.com/js-key-events/

// 비밀번호 매칭 검사 파트

let elInputPassword = document.querySelector('#password');

let elInputPasswordRecheck = document.querySelector('#password-retype')

let elMismatchMessage = document.querySelector('.mismatch-message')

elInputPasswordRecheck.onkeyup = function () {
  if(isMatch(elInputPassword.value, elInputPasswordRecheck.value)) {
    // 미스매치 메시지를 가린 상태로 놔둬(hide 상태 유지해줘)
    elMismatchMessage.classList.add('hide');
  } else {
    // 미스매치 메시지를 보여줘(hide 제거해서)
    elMismatchMessage.classList.remove('hide');
  }
}

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

// 생각나는 문제점
// 비밀번호 확인을 먼저 치고 비밀번호를 치면 메시지 작동이 제대로 안됨

이벤트 객체 기초

• 이벤트 종류 파악
• 이벤트 핸들러 구현, 이벤트 핸들러를 요소에 적용
• onclick 직접 할당과 addEventListener 차이
• eventHandler 함수 제작과 첫번째 인자 사용

addEventListender 과 onkeyup 차이

• 여러개의 이벤트를 한번에 연결해줄 수 있다.
• 클린코드 가독성면에서도 유리함
• 과제에서 이벤트 핸들러를 변수로 만들어 놓고 실행할 수 있도록 해보기

클린코드 기법 관련

• 함수인 것과 아닌 것들의 구역화
• 적절하고 간결한 변수명 설정

유효성 검사 관련

• 프론트단에서도 유효성 검사를 하지만
• 백엔드 서버단에서도 유효성 검사를 실시하여 이중 체크함

이벤트 관련 추가 학습

이벤트 입문
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events
이벤트 참조
https://developer.mozilla.org/ko/docs/Web/Events
이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
이벤트 리스너 (addEventListener)
https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener
이벤트 객체 더 알아볼 것들
onsubmit, onchange, onmouseover, onkeyup, event.preventDefault
querySelector 에 대한 궁금증

• 첫번째 인자에 div 를 넣으면?
• 다른 복잡한 작업을 할 수 있을까??
• 부모는 꼭 document 객체여야 하는가?

그외 들은 것들

코드도 유행 하는 스타일이 있음. 빨리 공부해서 적용해야 도태되지 않음
검색해보고 어떤 걸 발췌해서 빠르게 적용하느냐도 능력임
리액트와 인증보안에 대해 잘 해두어야 나중에 프론트 분야에서 경쟁력 생김
섹션4에서 좋은 내용들이 많은데 평균적인 수준만 소화해도 좋은 주니어가 될 수 있음
항상 최적화, 클린코드, 구글링을 핵심으로 삼고 일할 것
리액트 환경에서 유효성 검사를 잘 할 줄 알아야됨 (지금한거 나중에 리팩토링해보기)