[Westa] Login, Main 페이지 리뷰

삼항 조건 연산자 (중복된 함수 삭제)

• 삼항 조건 연산자가 이미 true/false에 따른 if else문을 간단하게 나타내는 방식이므로 다시 if else문에 삼항 조건 연산자를 넣을 필요가 없다.
  (true/false에 따른 리턴값을 지정해주는 btnOn이라는 함수는 필요 없음)

[수정 전]

function allClear() {
    if (id.value !== "" && password.value !== "" && password.value.length >= 5) { 
        return true;
    } else {
        return false;
    }
}
function btnOn(allClear) { 
    const check = allClear(); 
    const yes = () => Btn.style.opacity = "1"; 
    const no = () => Btn.style.opacity = "0.3";
    return (check ? yes() : no()) 
}
id.addEventListener("keyup", ()=>{ 
    btnOn(allClear); 
});
password.addEventListener("keyup", ()=>{
    btnOn(allClear);
});

[수정 후]

function validate() {
    Btn.style.opacity =
    id.value !== "" && password.value !== "" && password.value.length >= 5 ?
    "1" : "0.3"
}
id.addEventListener("keyup", ()=>{ 
    validate();
});
password.addEventListener("keyup", ()=>{
    validate();
});

keyup 대신 input 이벤트

이벤트: input

• 키보드 이벤트와 달리 input 이벤트는 어떤 방법으로든 값을 변경할 때 발생.
• 마우스를 사용하여 글자를 붙여 넣거나 음성인식 기능을 사용해 글자를 입력할 때처럼 키보드가 아닌 다른 수단을 사용하여 값을 변경시킬 때도 input 이벤트가 발생한다.

Form 태그

• semantic 태그
• 이외의 장점들?

Small 태그

• semantic 태그