[Day 16] 2022-0714

오늘 배운 것

• DOM 개념 정리 : HTML 문서를 객체화 하여 프로그래밍 언어로 조작할 수 있게 만든 표현. 
  • node > element : 요소는 노드의 한 종류이다. 노드의 종류는 요소, 텍스트, 주석 등이 될 수 있다. 
  • remove 와 removeChild의 차이 
    • remove() : 노드 삭제 후 종료
    • removeChild : 부모 ~ 자식 관계 끊은 후 그 자식 노드를 리턴. 변수에 담아 재활용 할 수 있다.

DOM : Document Object Model

• documentFragment와 HTML5 template 태그 사용 방법 : 미리 만들고 필요한 시점에 쓴다는 공통점(?)이 있음.

[JavaScript]DocumentFragment 와 HTML5 template 태그 사용

새롭게 알게 된 것

• node 와 element의 차이가 신선했다. 이 두 차이를 알고나니 DOM 을 조금 더 잘 이해할 수 있었다. 
• 유효성 테스트 과제 중, 두 비밀번호의 일치 여부를 확인하는 부분이 있었는데 실수가 있었다.

실수한 코드

let elPassword1 = document.querySelector('#password');
let elPassword2 = document.querySelector('#password-retype');
let elMismatch = document.querySelector('.mismatch-message');

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

// 첫번째 입력창에 이벤트 리스너를 달고, 전역변수에 그 value를 재할당함.
let pswd1 = '';
elPassword1.onkeyup = function () {
  pswd1 = elPassword1.value;
};

// 두번째 입력창에도 이벤트 리스너를 달고, 함수 실행 여부에 따라 메시지를 표시함.
elPassword2.onkeyup = function () {
  let pswd2 = elPassword2.value;
  if (isMatch(pswd1, pswd2)) {
    // 같지 않다는 메시지가 삭제
    elMismatch.classList.add('hide');
  } else {
    // 같지 않다는 메시지를 표시
    elMismatch.classList.remove('hide');
  }
};

• 브라우저 상에서는 잘 동작했는데, 테스트의 마지막 문항만 통과를 못했었다. 페어분께서 조금 더 해보신 뒤 코드를 보내주셨는데 단번에 무엇을 실수했는지 파악할 수 있었다. 

elPassword2.onkeyup = function () {
  let pswd1 = elPassword1.value;
  let pswd2 = elPassword2.value;
  if (isMatch(pswd1, pswd2)) {
    // 같지 않다는 메시지가 삭제
    elMismatch.classList.add('hide');
  } else {
    // 같지 않다는 메시지를 표시
    elMismatch.classList.remove('hide');
  }
};

• 사실상 첫 번째 입력창에 이벤트 리스너를 달 필요가 없었다. 왜냐면 타이핑 하는 것에 따라 비교가 이루어지는 것은 두번째 입력창에서만 이루어지기 때문에, 첫 번째 입력창에 입력된 값만을 가져오면 되었기 때문이다. 
• 절대 그 부분이 틀리진 않았을거야! 라고 생각했기 때문에 실수를 발견할 수 없었던 것 같다. 어디서든 틀릴 수 있다는 것을 늘 생각하자!!

오늘의 느낀 점

• 처음으로 스터디를 개설하게 되었다. TIL 스터디 인데, 스터디가 더 안정적으로 운영되면 따로 글을 작성할 예정이다. 우선 스터디를 할까 말까 고민만 하다가 직접 실천했다는 점이 뿌듯하고, 참여해주신 분들에게도 너무 감사하다. 책임감을 갖고 잘 운영해야겠다! 
• 완벽주의를 조금 내려놓고 싶은데 잘 되지 않는다. 지금 꼭 필요한 것에 최대한의 에너지를 집중하고 싶다. TIL 도 너무 잘 쓰려고 하기보다는, 내가 이해한 방식대로 쉽게 풀어 쓰는 것에 초점을 맞추고 싶다. 배운 모든 것을 다 장황하게 쓴다고 머릿속에 남는 것도 아니니까... 물론 찾아볼 때 도움은 되겠지만. 
• 허리가 아파서 의자를 샀다. 오늘은 최대한 바르게 앉으려고 노력했는데, 생각보다 효과가 좋다. 건강한 정신은 건강한 허리에서 나온다!