[Develop] 23.07.10 개발 공부 일지

요약: 자바스크립트 기초 문법, 패스트캠퍼스 인터렉티브 UI 강의, 생활코딩 리액트 강의

일시: 23.07.10 09:30~17:20 + a

장소: 더휴먼컴퓨터아트아카데미, 집

배운 점:

자바스크립트 엘리먼트, 텍스트 추가, 삭제, 변경

• HTMLCollection과 NodeList 차이
  • HTMLCollection은 DOM에 추가된 새로운 요소를 가져오지만, NodeList는 가져오지 못한다.
• nodeType
  • 요소노드 경우 : 1 반환.
  • 속성노드 경우 : 2 반환.
  • 텍스트노드 경우 : 3 반환.
  • 주석노드 경우 : 8 반환.
• element.textContent = '내용'
• innerHTML
  • innerText는 불필요한 공백을 제거하고 텍스트로 반환하지만 textContent는 모든 텍스트를 그대로 가져오는 차이점
  • textContent가 호환성이 좀 더 높음
• document.createElement(nodename);
  • javascript를 통해 동적으로 특정한 이름의 HTML element를 생성하는데 사용
• parentNode.appendChild(childNode);
  • 지정된 상위 노드의 하위노드 목록 마지막에 노드를 추가
• prepend()
  • 콘텐츠를 선택한 요소 내부의 시작 부분에서 삽입
• createTextNode()
  • 텍스트 노드를 생성
• var dupNode = node.cloneNode(deep);
  • 이 메서드를 호출한 Node 의 복제된 Node를 반환합니다.
  • 해당 node의 children 까지 복제하려면 true, 해당 node 만 복제하려면 false
• appendChild()
  • 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다
• removeChild()
  • 부모에서 포함된 자식 노드가 존재할 경우 일치하는 아이디나 클래스 등과 같은 속성을 통해 자식 노드를 제거
• target.classList.toggle('txt-pink')
  • toggle 메서드는 클래스가 존재한다면 클래스를 제거하고, 클래스가 존재하지 않는다면 클래스를 추가하는 메서드

 

생활코딩 리액트

• 실습환경 구축
• 소스코드 수정 방법
• 컴포넌트 제작
• props
• 이벤트
• state

 

 

부족한 점:

리액트에 대한 이해도가 많이 부족하여 연습을 하면서 익숙해져야겠다.