목차
- 팁
- DOM TREE & 랜더링
- 이터레이터
- 제너레이터
- 느낀점
강의 중 팁
포스팅에 앞서 강의 내용 중 팁
html css 공부 방법?
사례를 그냥 외우는게 좋다.
codepen.io
사이트로 css 구조 참고!
이후에 알아볼 것은
css id와 class차이점=>
만약 id가 여러개면?
css 선택자 종류 알아보기.
dom이란?
dom
document object model
dom은 왜 탄생했을까?
js가 탄생하면서 같이등장
html문서와 상호작용이 가능
초창기엔 접근 가능한 태그가 많지 않았다.
표준안은 1998년에 등장했고 대다수의 브라우저에 적용되기까지 시간이 오래 걸렸다.
점자 발전하여 html 문서를 직접 수정까지도 가능하게 되었다.
돔트리는
프로토 타입 객체로 정의되있음
최상의 노드에서 =>하위노드로
돔트리에서 요소는 어떻게 찾을까?
dom tree 순회는 preOrder(전위순회)로 이루어진다.
따라서 순서대로, li태그가
list1 list2 list3있다면
list1 list3 list3에 해당하는 li가 탐색된다.
dom트리 렌더링
1. 브라우저는 html을 읽고 파싱후 돔트리구성
2-3. 이어서 스타일 시트를 파싱하여 스타일 룰을 만들어 링크한다 (attachment)
4. 그다음 랜더트리를 완성한다.
5. 그 후 실제화면을 그려준다
html을 읽고 파싱=돔트리
css =>cssom트리
=rendering후 출력
바뀐다면 다시 과정
dom 선택(다루는법)
js로 이용하여 dom 찾기
getElementByID
dom tree에서 요소 노드를 id로 찾는다 제일 먼저 찾은 요소 하나를 반환한다
getElementByClassName
dom tree에서 요소 노드를 class로 찾는다 일치하는 ㅁ든요소 반환
getElementBytagName
dom tree에서 요소 노드를 태그로 찾는다 일치하는 ㅁ든요소 반환
querySelector
dom tree에서 요소 노드를 CSS Selector 문법으로 찾는다. 제일 먼저 찾은 요소 하나를 반환한다.
querySelectorAll
dom tree에서 요소 노드를 css selector 문법으로 찾는다. 일치하는 모든 요소를 반환한다.
사용하기 가장편한방법
window.[id]
id가 있는 요소는 window 객체를 통해 찾을 수 있다. 여러 개라면 리스트로 반환된다
dom탐색
parentNode
선택한 요소 노드의 부모 노드를 불러온다. .document의 부모 노드는 null이다.
firstElementNode
선택한 요소 노드의 자식 요소 노드 중 첫 번째를 불러온다. 없을 경우 null을 반환한다.
children
선택한 요소 노드의 자식 요소 노드를 불러온다. 없을 경우 빈 배열을 반환한다.
nextElementSibling
선택한 요소 노드의 다음 형제 요소 노드를 불러온다, 없을 경우 null을 반환한다.
previousElementSibling
선택한 요소 노드의 이전 형제 요소 노드를 불러온다. 없을 경우 null을 반환한다.
DOM 조작
class 접근
선택한 요소 노드에서 className과 classList로 요소의 class 속성을 불러오고 변경할 수 있다.
hasArrtibte
선택한 요소 노드에서 속성을 가지고 있는지 확인 할 수 있다.
getAttribute
선택한 요소 노드에서 속성의 값을 반환한다. 없다면 null을 반환한다.
setAtriibute
선택한 요소 노드에서 속성을 정의한다.
removeAttribute
선택한 요소 노드에서 속성을 제거한다.
textContent
선택한 요소 노드에서 텍스트 노드에 접근, 변경할 수 있다.
innerHTml
선택한 요소 노드 내부 html을 수정한다. xss 위험이 있다.
createElement
요소 노드를 생성 할 수 있다.
appendChild
선택한 요소 노드 마지막 자식 요소로 추가한다.
removechild
선택한 요소 노드 자식 노드중 해당되는 요소를 제거한다.
가상 돔?
한 번에 여러 개의 dom 객체를 수정 한다면?
ex) dom 렌더링 과정을 생각해보면,
dom을 한번 조작할때마다 레이아웃과 렌더링을 해야한다.
브라우저 렌더링은 오래걸림
개발자가 이걸 일일이 최적화를 할 수 없다
따라서 가상돔을 이용하여 바뀌는 부분만 수정하여 이용한다.
최적화겸 편의성을 위해 가상돔 사용
가상돔의 오해
virutal dom은 dom보다 빠르다?
react는 dom보다 빠르다는것은 미신이고, 유지보수 용이한
애플리케이션을 만들도록 도와주고 대부분의 유스케이스에 충분히 빠를 뿐이다.
js의 함수
일급함수
함수를 값으로 다룰 수 있다
조합성과 추상화의 도구로 사용한다.
log(f1())
고차 함수
함수를 값으로 다루는 함수
함수를 인자로 받아서 실행하는 함수
- apply1
- times
//함수를 f(함수)로 인자를 받아 사용한다.
const add2 = a =>a+2;
log(apply1(add2)); //3
const times = (f,n) => {
let i =-1
while(++i<n) f(i);
}
times(log,3);
//함수를 만들어 리턴하는 함수 (클로저를 만들어 리턴하는 함수)
const addMaker = a =>b => a+b;
const add 10 =addMaker(10);
log(add10); // b=>a+b
log(add10(5));//15
log(add10(10));//20함수형 프로그래밍에서 리스트 순회는 중요하다
es6이되면서 리스트 순회가 바뀌었다 =>언어적 큰 발전
어떤 규약과 리스트 순회가 있을까?
for(let i=0; i<list.length;i++)
에서
for(const a of list) 로바뀌었다
js에서 순회방법
const arr = [1,2,3];
let iter1 = arr[Symbol.lterator]();
iter.next();
for (const a of arr) log(a);
const set= new Set([1,2,3]);
for (const a of set) log(a)
set[0] 으로 접근안댐
const map =new Map([['a',1]. ['b',2], ['a',3]]);
for(const a of map) log(a);
map[0]으로 접근안댐for .. of문은 키와 매핑되는 방식이 아니다.
그렇다면?
Symbol.iterator
es6에 추가됨.
어떤 객체의 키로 활용될수 있다.
arr[symbol.iteraror]
이터러블/이터레이터 프로토콜
- 이러터블
이터레이터를 리턴하는 symbol.iterator()라는 메소드를 가진 값이다 - 이터레이터
: {value,done} 객체를 리턴하는 next() 를 리턴하는 가진 값 - 이터러블/이터레이터 프로토콜
이터러블을 for..of, 전개 연산자 등과 함께 동작하도록 한 규약
ex)
const arr = [1,2,3];
let iter1 = arr[Symbol.lterator](); //이터레이터를 리턴
iter.next();//1이 나온다 next()를 리턴한다.
//아래 for문을 돌리면 2,3이나온다
iter.next();//2가 나온다.
//아래 for문을 돌리면 3이나온다
iter.next();//3이고,
//아래 for문을 돌리면 아무값도 출력 안된다.
for (const a of arr) log(a);
따라서 arr은 이터러블/이터레이터 프로토콜이다.
set 도 동일
map은 ["a",1]이 출력
const map =new Map([['a',1]. ['b',2], ['a',3]]);
for(const a of map.keys()) log(a); //.keys()를 하면 key가 뽑힌다.
for(const a of map.values()) log(a); //.keys()를 하면 values가 뽑힌다.
for(const a of map.entries()) log(a); //.entries()를 하면 다뽑힌다.사용자 정의 이터러블을 구현하면서
이터러블에 대해서 더 정확하게 알아보자
const iterable={
[Symbol.iterator](){
let i = 3;
return{
next(){
return i == 0 ? {done: true } : {value: i--,done:false};
},
[Symbol.interaor](){return this;}
}
}
};
let iterator = iterable[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
for (const a of iterable) console.log(a);
arr2=[1,2,3];
let iter2=arr2[Symbol.iterator]();
iter2.next();
console.log(iter2[Symbol.iterator]()==iter2);
for (const a of arr2) console.log(a);
for(const a of document.querySelectorAll('*'));
console.log(a);//모든 문서
const all = document.querySelectorAll('*');
console.log(all);//이터러블 형태로 나옴
let iter3 = all[Symbol.iterator]();
log(iter3.next());
log(iter3.next());//value값이 나옴제너 레이터
제너레이터
이터레이터이자 이터러블을 생성하는 함수
제너레이터는 이터러블을 리턴하는 함수!
js는 어떠한 값이든 이터러블이면 순회가능.
제너레이터는 문장을 값으로 만들고, 이를 통해 순회 할 수 있다.
즉 어떤한 상태나 어떠한 값이든 순회 할 수 있다.
=>다형성이 높다.
ex)
function *gen(){
yield 1;
if(false) yield 2;
yield 3;
return 100;
};
let iter=gen();
console.log(iter[Symbol.iterartor] == iter);//false
console.log(iter.next());//{ value: 1, done: false }
console.log(iter.next());//{ value: 3, done: false }
console.log(iter.next());//{ value: 100, done: true }
console.log(iter.next());//{ value: undefined, done: true }
for (const a of gen()){
console.log(a);
};//1 3
느낀점
오늘은 DOM트리의 생성과정, 랜더링 과정을 배웠다.
스터디를 통해 미리 배울 수 있었던 내용이었지만, 한번 더 들어 확실히 정리했다.
처음배우는 개념인 이터레이터와 제너레이터를 학습하였는데, 처음이라 그런지 익숙해 질 필요성을 느꼈다. 그러나 그만큼 흥미 있는 내용들이었고 강사님도 너무 잘 설명해주셔서 다음날이 기대가 된다.!
학습하는 우리가 버거워 보였는지... 멘토님과 매니저님이 상의 끝에 진도를 완화해 주셨다고 한다. 살짝 벅찬감이 있었는데, 안도와 더불어 못따라가는 내가 죄송한 마음도 느꼈다... 더 열심히 해서 보답해드리는 수 밖에 없을 것 같다.
내일도 파이팅팅!
