오늘 한 일

• 어제 들은 강의 내용 복습
• 복습한 내용 노션에 정리

강의에 나온 코드를 전체적으로 따라하고 다시 복습을 하는데 역시 한 번 들었을 때 보다 더 잘 이해가 된다.

그리고 조금 원시적인 방법이지만 강의에 나온 코드들을 강사의 설명과 함께 노션에 정리 하는데 시간은 걸려도 이해하는데는 효과가 좋은 것 같다.

어떤식으로 정리 했냐면...

input에 error 메세지 표시하기

// 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;
} 

const formCtrl = input.parentElement;

input의 부모 요소인 form-control을 변수 formCtrl로 설정한다.

formCtrl.className = 'form-control error';

오류 클래스를 추가하기 위해 formCtrl의 클래스 명을 'form-control error'으로 변경한다.
→ CSS에서 error 클래스를 추가해야 small의 visibility를 visible로 바뀌게 끔 설정했기 때문

const small = formCtrl.querySelector('small')

formCtrl의 small 태그를 변수 small로 설정한다.

small.innerText = message;

small의 전체 텍스트 변경 → 함수 showError(username, message)에서 전달된 메세지를 보여주기 위함

모든 input의 값을 올바르게 작성했는지 확인하는 함수 만들기

function checkRequired(inputArr) {
  inputArr.forEach((input) => {
    if (input.value.trim() === '') {
      showError(input, `${getFiledName(input)} Is required`);
    } else {
      showSuccess(input);
    }
  });
}

if (input.value.trim() === '')

input.value의 모든 공백을 제거하기 위해 trim을 쓰고, value가 공백이면 오류를 보여주기 위해 showError 함수가 실행되도록 한다.

{ showError(input, ${getFiledName(input)} Is required); }

showError 함수의 파라미터1 의 값을 input으로 설정하고 message를 설정하기 위해 위해 파라미터2의 값을 `${getFiledName(input)} Is required로 한다.

• ${input.id}를 사용해도 되지만 첫글자를 대문자로 변환하기위해 getFiledName 함수를 사용함

else { showSuccess(input); }

value가 공백이 아니면 showSuccess 함수가 실행되도록 한다.

---

이런식으로 정리했는데 확실히 코드들의 상호관계를 알게 되니까 이해가 잘된다. 그리고 강의 댓글에 수강생들이 자신이 고친 코드를 설명과 함께 올려주기도 해서 많은 공부가 된다. 나도 더 열심히 해야지🥲