강의에 나온 코드를 전체적으로 따라하고 다시 복습을 하는데 역시 한 번 들었을 때 보다 더 잘 이해가 된다.
그리고 조금 원시적인 방법이지만 강의에 나온 코드들을 강사의 설명과 함께 노션에 정리 하는데 시간은 걸려도 이해하는데는 효과가 좋은 것 같다.
// Show input error massage
function showError(input, message) {
const formCtrl = input.parentElement;
formCtrl.className = 'form-control error';
const small = formCtrl.querySelector('small')
small.innerText = message;
}
input의 부모 요소인 form-control을 변수 formCtrl로 설정한다.
오류 클래스를 추가하기 위해 formCtrl의 클래스 명을 'form-control error'으로 변경한다.
→ CSS에서 error 클래스를 추가해야 small의 visibility를 visible로 바뀌게 끔 설정했기 때문
formCtrl의 small 태그를 변수 small로 설정한다.
small의 전체 텍스트 변경 → 함수 showError(username, message)에서 전달된 메세지를 보여주기 위함
function checkRequired(inputArr) {
inputArr.forEach((input) => {
if (input.value.trim() === '') {
showError(input, `${getFiledName(input)} Is required`);
} else {
showSuccess(input);
}
});
}
input.value의 모든 공백을 제거하기 위해 trim을 쓰고, value가 공백이면 오류를 보여주기 위해 showError 함수가 실행되도록 한다.
${getFiledName(input)} Is required
); }showError 함수의 파라미터1 의 값을 input으로 설정하고 message를 설정하기 위해 위해 파라미터2의 값을 `${getFiledName(input)} Is required
로 한다.
value가 공백이 아니면 showSuccess 함수가 실행되도록 한다.
이런식으로 정리했는데 확실히 코드들의 상호관계를 알게 되니까 이해가 잘된다. 그리고 강의 댓글에 수강생들이 자신이 고친 코드를 설명과 함께 올려주기도 해서 많은 공부가 된다. 나도 더 열심히 해야지🥲