TIL 5일차

HTML / CSS

HTML : 구조/의미 담당
CSS : 문서의 표현

• CSS3 : 어디에(selector) 어떤(property) 어떻게(value)

---

Dom

JS와 같이 등장
점차 발전하여 HTML 문서를 직접 수정까지도 가능

---

노드

1. 문서노드 : 최상위
2. 요소노드 : 태그를 표현
3. 속성노드 : 자식노드가 아닌 태그에 옆에 붙어있음
4. 텍스트노드

---

태그 찾는 방법

1. getElementById : 먼저찾은 요소 하나 반환
2. getElementByClassName : 일치하는 모든 요소 반환
3. getElementByTagName : 일치하는 모든 요소 반환
4. querySelector : 먼저 찾은 요소 하나 반환
5. querySelectorAll : 일치하는 모든 요소 반환

• id가 있는 요소는 window 객체를 통해 찾을 수도 있다.

---

태그를 기준으로 다른 태그 찾기

1. parentNode : 선택한 대상의 부모노드
2. firstElementNode : 선택한 대상의 첫번째 자식 노드
3. children : 선택한 대상의 모든 자식 노드
4. nextElementSibiling : 선택한 대상의 다음 형제 요소 노드
5. previousElementSibiling : 선택한 대상의 이전 형제 요소 노드

---

속성 관련

1. className : 클래스 속성 값
2. classList : 클래스 관련 리스트
3. hasAttribute : 해당 속성이 있다면 속성값을 리턴하고 아니면 null 리턴
4. getAttribute : 해당하는 속성에 따르는 값을 가져온다.
5. setAttribute : 속성과 값을 설정
6. removeAttribute : 속성 제거

---

속성 예제

<h1 class='a'>abc</h1>
<script>
    const h1 = document.querySelector('.a')
    console.log(h1.className)
    console.log(h1.classList)
    console.log(h1.getAttribute('class'))
    console.log(h1);
    setTimeout(()=>{
    h1.setAttribute('id','abc');
    h1.removeAttribute('class')
    console.log(h1);
    },1000)
</script>

• 콘솔 출력의 경우 위쪽 h1 출력과 아래쪽 h1 출력이 태그의 속성 설정보다 늦게 되므로 같은 결과가 나오는 것을 막기 위해
  setTimeout을 사용하여 결과를 확인 했다.

---

텍스트 노드 관련

1. textContent
2. innerHTML => XSS 위험

---

요소 노드 생성 / 추가 / 삭제

1. createElement
2. appendChild
3. removeChild

---

Virtual Dom

기존의 Dom이 매번 많은 변화를 통해 성능에서 문제가 생기는 것을 해결 하기 위해 생긴 개념

1) 반복문을 돌려 Dom을 업데이트
2) 반복문을 돌려 string을 업데이트 하다 마지막에 Dom을 업데이트

• 2)이 1)보다 라이브 Dom을 건드리는 것이 적으므로 시간이 적게든다.

---

documentFragement

메모리 상에서 조작 후 라이브 Dom트리에 추가

ex) createDocumentFragement 메소드 사용

<ul id="ul">
</ul>
<script>
   var element  = document.getElementById('ul'); // ul이 존재한다고 가정
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera',
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);
</script>

---

평가 / 일급 / 일급 함수

1. 평가 : 코드가 계산되어 값을 만드는 것
2. 일급 : 값으로 다루며 변수에 담고 함수의 인자 및 결과로 사용가능
3. 일급 함수 : 함수를 값으로 다룰 수 있다.
   ex) const a = ()=>{}

---

고차함수 (함수를 인자 or 리턴)

1. 함수를 인자로 받아서 실행하는 함수
2. 함수를 만들어 리턴하는 함수

---

1.

const apply1 = f => f(1);
console.log(apply1(a=>a-1));		//0

const set = [1,2,3].map(x=>x*x)		//[1,4,9]

map또한 함수를 인자로 받으므로 고차함수이다.

---

2.

const calculate = (a) => (b) => (c) =>(a+b+c)
calculate(1)				//(b) => (c) =>(a+b+c)
calculate(1)(2)				//(c) =>(a+b+c)
calculate(1)(2)(3)			//6

---

for of / for in

1. for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복
2. for of 반복문 : Symbol.iterator 속성을 가지는 컬렉션 전용

---

이터레이터 (ES6에서 추가)

1. iterable : 이터레이터를 리턴하는 [Symbol.iterator]()를 가진 값
2. iterator : { value, done } 객체를 리턴하는 next()를 가진 값
3. iterable protocol : 이터러블과 관련 동작하도록 한 규약

• 이터러블 관련 개념

1. Array
2. new Set
3. new Map

---

github 피드백

1. ==보단 ===사용을
2. 빈배열은 Boolean으로 true이다.
3. forEach는 return이 없을때 map은 return이 있을때 사용
4. forEach에서 사용법

[[10,900,80]].forEach(val=>{console.log(val[1],val[2])})

900, 80을 출력하기 위해 이것보단

[[10,900,80]].forEach(([_,h,p])=>{console.log(h,p)})

이게 더 보기 좋다.

---

느낀점

• Dom관련 내용은 예전에 해봐서 웬만큼 알고 있었고 for of가 iterator와의 연관성이 감명 깊었다.
  매번 객체를 for of로 순회할 때 not iterable 오류가 났었는데 arr[Symbol.iterator](); 이렇게 적용되어 next메소드로 처리를 할 수 없는 형태이기 때문에 객체는 for of 가 안됐구나 느꼈다.