4주 2일차 - 복습

1. 리뷰

1.1 notes

한없이 얕은 지식으로 아는척 한 것에 자괴감이 든다. 심란한 밤이다.

2. 배운 것

DOM crud 메서드

• 개발분야에서의 query단어의 의미
• 튜토 1: 화면과 기본 동작 구현(css와 js 별도 파일로 연동) *예제에서 이벤트리스너를 사용하지 않았음에 유의.
  1. 각각 아이디 비번 입력창 label 연동하고 fieldset으로 감싸서 block만듬.
  2. 오류, 참 메세지도 div로 만들고 클래스를 부여하고 별도 css파일에서 감춰둠.
  3. 쿼리셀렉터로 선택하여 js에서 html 요소에 접근. 변수에 담는게 편하다.
  4. 요건 충족시 js로 숨김속성 부여한 클래스를 remove하거나 add하여 보이거나 감춤.
• 튜토 2: 유효성 검사 로직 구현
  1. 참, 오류 메세지 각각 쿼리셀렉터로 선택하고 변수에 할당해둠.
  2. 이벤트핸들러 함수로 조건 true시 참 메세지 보이게, false시 오류 메세지 보이게 작성.(onkeyup: 키보드 입력 이벤트)
  3. 숨김 클래스를 add하면 화면에서 안보이고 remove하면 화면에서 보인다.
  4. 비밀번호, 전화번호 등 다 비슷한 패턴으로 구현가능하다.

이벤트 객체

• event 의 값, [event.target](<http://event.target>) 의 값, event.target.value 의 값
• innerHTML 은 태그를 직접 삽입하므로 보안에 취약하기 때문에 사용을 지양한다.
• .id = '부여할 아이디'; 로 요소에 id를 자바스크립트로 부여할 수 있다.

복습

• for in, for of의 차이, forEach 참조

3. 내용 정리

• console.dir() : 요소를 JSON과 같은(객체 형태) 트리 구조로 출력.(mdn)
• .parentElement : 해당 요소의 부모 요소를 반환하는 메서드
• .createElement : 새로운 html 요소를 생성하는 메서드
• .classList.add(’클래스명') : 해당 요소를 지정한 클래스에 추가하는 메서드
• .append() : 해당 요소를 지정한 요소에 삽입하는 메서드
• .setAttribute() : 요소의 속성을 지정하는 메서드. (속성명, 속성값)
• .remove() : 해당 요소를 삭제하는 메서드
• 부모에 .innerHTML 값으로 '' 공백을 할당하여 자식 요소를 지우는 방법의 문제점:
• .removeChild() : 자식 요소를 삭제하는 메서드. 예시에선 while문으로 반복시킴.(조건으로 firstChild가 true)
• visibility: hidden : css - 컨텐츠는 지우나 공간은 여전히 차지함. 완전히 요소를 보이지 않게 하려면 display: none; 속성을 주는 것이 맞다.
• dom 이벤트를 감지하는 메서드에 함수 호출을 할당하는 것이 아니라 함수 자체(함수명)을 할당해야 한다.(튜토2 퀴즈 3번)
• .classList : js로 html 요소의 class에 접근하는 메서드. 예제에선 remove()와 같이 사용.
• node는 요소의 상위 개념이다. 자바스크립트 외 다른 언어도 dom을 가지고는 있으나 자바스크립트의 dom이 가장 안정적이고 오래 쓰였다.(종합퀴즈 1번)
• node ≠ element 요소 노드는 노드의 4가지 종류 중 하나이다.(문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드)

4. 할 일

• css flex 복습