1. <form> tag 의 중요성

    • 미니터(유사 트위터)과제를 하다가 아래와 같은 에러 메세지를 발견했다.
      [DOM] Password field is not contained in a form: (More info: https://goo.gl/9p2vKq) ;
    • 구글링을 해보니 <li>가 <ul> 이나 <ol> 밑으로 들어가는 이유과 같다고 함. 굳이 필요는 없지만 조금 더 정확하게 코드를 구현하기 위해 필요한 기능이라고 한다. (semantically correct)
  1. <autocomplete="current-password">의 사용
    • 미니터 과제를 하다가 또다른 에러 메시지를 발견했다.
       [DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://goo.gl/9p2vKq) 
    • 자동으로 채운다는건데... 이게 굳이 필요한가?
    • 조금 더 구글링을 해보니, autocomplete attribute가 브라우저에게 해당 필드가 어떤 정보를 원하는지 미리 전달한다고 한다. autocomplete="current-password" 라고 하면 해당 브라우저가 지금 사용자가 비밀번호를 입력한다는 것을 알게 하는듯?
    • 구글 브라우저의 설명은 아래와 같다:
      Autocomplete attributes help password managers to infer the purpose of a field in a form, saving them from accidentally saving or autofilling the wrong data. A little annotation can go a long way: some common values for text fields are “username”, “current-password” (login forms and change password forms) and “new-password” (registration and change password forms).
  1. keyEvents:

    • keydown, keyup, keypress를 사용해봤다.
    • password창과 confirmPassword창의 value가 다를 경우 비밀번호가 틀렸다는 것을 보여줘야하는데, 눌렸을 때 보여주는 것이 더 빠르다고 생각해서 keydown으로 작성했다.
      • 하지만 결과는 참패였는데...키 하나를 추가로 입력해야 비밀번호가 틀렸다는 것이 인식되었다. 키를 눌러야 eventListener가 해당 이벤트를 듣고 실행한 함수 내에서 if문이 돌아가기 때문이다.
  2. event.stopPropagation()

    • 현재 진행중인 이벤트를 멈추게 하는 기능
    • 미니터 구현 시, textarea를 클릭하면 textarea의 크기를 증가시키고, 다른 영역을 클릭할경우 크기를 원복하고 싶었음. 아래와 같이 구현함
let enlargeTextarea = () => {
  event.stopPropagation();
  elTextarea.style.height = "150px";
}

elTextarea.addEventListener('click', enlargeTextarea);

document.addEventListener('click', () => {
  elTextarea.style.height = "50px";
})