- Q.
onKeyup 이벤트 안에서 value 값을 넣고 비교하면, 테스트가 통과되는데,
function isMatch() 함수의 if문에 value 값을 넣고 비교하면,
'두 개의 값을 입력해서 일치하지 않으면, false를 반환합니다.' 에러가 뜨는 이유는?
A.
onKeyup 이벤트 안에서 value 값을 넣어도,
function isMatch() 함수의 if문에 value 값을 넣어도
둘 다 정상 동작하는 방법이지만, isMatch 테스트에서 오류가 난 이유는
isMatch 테스트 로직 자체에 있다.isMatch 테스트 로직은
it('두 개의 값을 입력해서 일치하지 않으면 false를 반환합니다', () => {
expect(isMatch('supersecret', 'wrongpassword')).to.be.false
}) 이므로isMatch에 value를 넣어 비교하면,
typeof password가 "object"이므로,
문자열.value는 잠재적으로 "undefined"일 수 있다.
이는 password가 객체이지만,
문자열에서 "value"라는 속성이 없기 때문이다.하지만 password 객체가 문자열의 프로토타입을 상속 받았다면,
문자열.value는 password 객체에서 상속 받은 속성 중 하나일 수 있다.
이 경우 "value" 속성이 password 객체에서 정의되어 있으면
해당 값이 반환된다.따라서 typeof password가 "object"이지만
password 객체가 어떤 속성을 가지고 있는지에 따라
문자열.value의 값이 결정된다.
let elInputUsername = document.querySelector('#username')
let elFailureMessage = document.querySelector('.failure-message')
let elSuccessMessage = document.querySelector('.success-message')
// ~할 때 = 이벤트, 이벤트가 발생하며 실행되는 함수 = 이벤트 핸들러
// 주어인 아이디 입력창(elInputUsername)에
// 글자를 키보드로 입력할 때(onkeyup) = 실행할 함수(=이벤트 핸들러
elInputUsername.onkeyup = function (){
if(isMoreThan4Length(elInputUsername.value)){
// 성공 메시지가 보여야 한다.
elSuccessMessage.classList.remove('hide')
// 실패 메시지가 가려져야 한다.
elFailureMessage.classList.add('hide')
}else{
// 성공 메시지가 가려져야 한다.
elSuccessMessage.classList.add('hide')
// 실패 메시지가 보여야 한다.
elFailureMessage.classList.remove('hide')
}
}
// 글자 수가 4개 이상이면 (조건문)
function isMoreThan4Length(value) {
return value.length >= 4
}
let password1 = document.querySelector('#password');
let password2 = document.querySelector('#password-retype');
let elPasswordMessage = document.querySelector('.mismatch-message');
function isMatch(password1, password2) {
// 두 개의 비밀번호가 같으면(조건문), true 반환
// 두 개의 비밀번호가 다르면, false 반환
// + '비밀번호가 일치하지 않습니다' 메세지가 보여야 한다.
if(password1 === password2){
elPasswordMessage.classList.add('hide');
return true;
}else if(password1!== password2){
elPasswordMessage.classList.remove('hide');
return false;
}
}
password1.onkeyup = function() {
isMatch(password1.value, password2.value);
}
password2.onkeyup = function() {
isMatch(password1.value, password2.value);
} +)
- validator.js 를 활용하여,
Bare Minimum Requirements 이상의 유효성 검사 진행- 네이버 회원가입, 로그인 창의 유효성 검사를 참고해보기
- validator.js 개선
- 휴대폰 번호가 맞는지 검증
- 이메일 주소가 맞는지 검증
- 다양한 비밀번호 검증 사례를 chatGPT에게 물어보기
- CSS를 본인의 입맛에 맞게 개선
+) 후에 네이버나 자주 사용하는
브라우저의 회원가입, 로그인 창에서 개발자 도구를 열어
어떤 유효성 검사들을 했는지, 어떤 코드들을 사용했는지 살펴볼 것.
소감
🔡➡️💻➡️🤓👍
오늘은 어제 배운 학습 내용을 복습하는 시간이었다.
배웠던 내용들을 한번 훑어보기도 하고, 내일 배울 것도 예습할 수 있었다.
이런 시간이 종종 있었으면 좋겠다.
오전에는 Unit 9,10 강의 자료를 다시 보면서 복습을 했고,
오후에는 Unit 11 강의 자료를 보고 라이브 세션을 들었다.
처음에는 라이브 세션을 들어도 무슨 이야기를 하는지
따라갈 수도 없었고, 모르는 부분이 정확하게 어느 부분인지
나조차도 알 수 없어서 어떻게 질문을 해야할지
혹여나 답변을 받아도 그걸 이해할 수 있을까 싶어
매일 새벽까지 공부하고 새벽같이 일어나 공부했다.
그래서 일까 오늘은 신기하게
라이브 세션의 내용들을 다 따라갈 수 있었고,
마지막에 유효성 검사에서 생긴 에러에 대해 질문할 수 있었다.
스스로 굉장히 뿌듯한 하루였다.
한 달 가까이 만든 학습 방법이
틀리지 않았음을 비로소 요즘 체감하고 있다.
이 방법을 유지하며, 끝까지 완주하자! 🏃♀️💨
