📚TIL

day6

DOM(Document Object Model)

• DOM은 트리구조로 이루어짐 : 문서노드 - 요소노드 - 속성노드 - 텍스트노드
• DOM Tree는 preOrder로 순회
• DOM 선택 : getElementById, getElementByClassName, getElementByTagName, querySelector, window.[id]
• DOM 탐색 : parentNode, First(Last)ElementNode, children, nextElementSibling, previousElementSibling
• DOM 조작 : class 접근, hasAttribute, getAttribute, set(remove)Attribute, textContent, createElement, append(remove)Child, innerHTML

가상돔(virtual DOM)

• 실제 DOM Tree를 JavaScript 객체로 필요한 정보만을 담아 만들어짐
• 이벤트나 돔의 수정이 필요한 곳에서 직접 돔을 수정하지 않고 가상돔을 바뀌는 부분만 수정한 후 렌더링하는 방식
• 가상돔과 진짜 돔에서 탐색을 두번해야하기 때문에 렌더링 횟수만 줄어들 뿐 메모리는 더 많이 사용
• 빠른 개발을 위해 개발 편의성이 중요시 될 때 가상돔 사용

평가와 일급

• 평가 : 코드가 계산되어 값을 만드는 것
• 일급 : 값으로 다룰 수 있음, 변수에 담을 수 있음, 함수의 인자로 사용될 수 있음, 함수의 결과로 사용될 수 있음
• 일급 함수 : 함수를 값으로 다룰 수 있음
• JavaScript에서 함수를 값으로 다룰 수 있으며 이 성질을 이용해서 많은 조합성을 만들어내고 추상화의 좋은 도구로 사용

고차함수

• 고차 함수 : 일급 함수를 이용하여 함수를 값으로 다루는 함수
• 함수가 함수를 리턴할 땐 클로저를 이용하여 리턴

const higherOrder = a => b => a+b; 
//이 함수는 a를 계속해서 기억하고 있으며 a와 함수를 통칭해서 클로저라고 함
const sum = higherOrder(11); 

log(sum); 		//b => a+b
log(sum(10));		//21

🌊하루를 마치며

앞부분에서 클로저를 배웠음에도 의미가 명확히 떠오르지 않아 이번 강의를 통해 클로저를 다시 찾아보고 복습하였다. 간혹 다른 사람들의 코드에서 리턴을 브라켓을 이용하여 함수를 리턴하는 것을 봤는데 강의를 통해 이 부분을 명확히 알 수 있었다. 가상돔 또한 처음 접한 개념이어서 생소하지만 흥미로운 부분이었다. 다만 어떤 현업에서 어떤식으로 사용하는지 추측이 잘 안되어 이 부분은 서칭해봐야겠다.

내일은 오늘 다 못들은 강의를 마무리하고 강의 밀리지 않는 것이 목표 !