내일배움캠프 React트랙 24일차 회고 (2022.12.01)-DOM

다양한 객체를 특별한 구조에 담아둘 수 있다. 즉, 객체의 집합체를 나타내는 것이 자료구조이다. 

자료구조종류로는 Array, Queue, Stack, Hash Table, Linked List, Tree, Graph등이 있다.

 

 

얕은복사(Shallow Copy)

얕은 복사의 경우 객체를 온전히 받아오는 것이 아니라 참조된 값, 즉 객체의 메모리 주소를 복사하여 같은 객체를 참조한다. 

 

 

고차함수(Higher-order function)

함수를 인자로 받는 함수(콜백함수), 함수를 반환(출력)하는 함수를 고차함수라 한다.

함수형프로그래밍, 순수함수, 불변성 -> side effect가 없도록

---

DOM(Document Object Modeling)

자바스크립트는 HTML과 CSS를 웹페이지상에서 동적으로 만들어주는 주체이다. 이때 HTML 파일에 접근하기위해서는 자바스크립트가 접근할 수 있는 파일 -> 객체로 변해야하기때문에  자바스크립트가 읽을 수 있도록 Parsing과정을 거쳐 생성된 객체가 바로 돔이다.

마치 한글파일확장자를 워드에서 읽을 수 있도록 확장자를 변경해주는 것과 같은 이치이다.

 

웹브라우저의 랜딩process

 

1. 웹 페이지 로딩 과정
2. 홈페이지 접속(클라이언트가 서버에게 요청)
3. HTML 문서를 수신(서버가 클라이언트에 응답)
4. 브라우저가 HTML 파일을 해석 후 객체화(parsing)
5. 돔 생성

 

접근 및 제어

모든 node마다 속성과 메서드를 보유한 DOM의 특성을 이용해 접근

• document 최상단노드에 접근
• parentNode 주체가 되는 노드의 상위태그에 접근
• childNodes 주체가 되는 노드에 속한 하위태그에 접근
  document.childNodes[1].childNodes[2]
  이런식으로 가지를 치듯이 하위 노드에 접근할 수도 있지만 복잡하므로 let body = document.childNodes[1].childNodes[2]와 같이 변수로 할당할 수도 있다. 이 상태에서 다시 body.childNodes[0]로 접근하는 것도 가능하다.
• 하위태그는 여러개가 될 수 있지만 상위태그는 무조건 한 개이므로 parentNode와 childNodes는 단수/복수의 차이가 존재한다. 이런 이유로 childNodes를 지칭할 때는 [index]가 필요하다.
• getElementById(''), getElementsByClassName(''), getElementByTagName(''), querySelector(''), querySelectorAll('') 특정 요소에 접근
  • class 특성을 공유하는 군집
  • id 단일 요소만을 가리키는 고유 식별자
• 이러한 특성 차이로 요소를 가져올 때 Element에서 단수/복수의 차이가 존재한다. 그래서 getElementsByClassName('')은 [index]가 필요하다.

생성

• append
• createElement('')

변경

• innerHTML
  html 요소 자동 변환

   document.querySelector('h1').innerHTML = '<h2>배고프다</h2>'

  기존의 h1 태그 안에 하위 태그로 h2 생성

• innerText
  텍스트로 인식응용결과: <p>This is a paragraph</p>
• const para = document.createElement("p"); para.innerText = "This is a paragraph"; document.body.appendChild(para)

• document.querySelector('h1').innerText = '<h2>배고프다</h2>'

  h1 태그에서 h2로 변경
  단, <h2></h2> 역시 텍스트로 인식하므로 배고프다만 입력해야 한다.

• style.속성
  스타일 변경

• setAttribute('속성', '값')
  기존의 Node에값을 포함하는 속성 추가

   document.querySelector('h1').setAttribute('class', 'title')

  <h1>태그에 새로운 속성이 추가된 <h1 class="title">로 변경

• write('내용')
  모든 내용물을 내용으로 변경하므로 사용을 권장하지 않음

• addEventListener('action', function)
  action 행동을 취하면 function을 실행. 주로 클릭 이벤트에서 사용

 

함수와 메서드의 차이
간단하게 요약하자면 함수중에서도 객체내에 작성된 함수를 메서드라 한다.

• 함수
  단독 호출 가능 ex) getAge();
• 메서드
  호출 주체 필요 ex) person.getAge();

런타임 환경
자바스크립트와 Node.js는 모두 동일한 언어를 사용하지만 자바스크립트에서는 동작하는 문법이 Node.js에서는 동작하지 않을 수 있다. 환경이 다르기 때문인데, 이 환경을 런타임 환경이라고 한다.