버블링 / 캡쳐링
캡쳐링 : 위에서 아래로 전파
버블링 : 아래서 위로 전파
함수나 클래스가 하는 역할을 맨위에 주석으로 달기
parameter를 잘 활용해야 범용성이 올라간다.
opacity : 보였다 안보였다
skew : 비트는거
하드웨어 가속에 대한 글 읽어보기
setinterval
setTimeout
requestAnimationFrame : rAF는 VSync에 맞춰서 16.66ms 시간동안 동작하는 하나의 frame에 맞춰서 실행 가능하다.
Web animation api(Working draft)
- css기반 keyframe 방식 : 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 한다.
element.animate를 이용해서 javascript로 애니메이션을 조절한다.
"can i use web animation api"를 구글 검색창에 쳐보자.
api는 트랜스파일링 불가.
트랜스파일링하는 기능때문에 비표준 사용가능.
babel
비동기
Call Stack에 하나씩 쌓여서 실행됨.
Web APIs : DOM(document), AJAX(XMLHttpRequest), Timeout(setTimeout : 실행했다가 등록만 해주는 함수, 메인동작을 blocking하지 않기 때문에 효과적, asynchronous)
Callback Queue Event Loop onClick, onLoad, onDone -> O
- 비동기 상황 예
var : call stack에 올라가서 asyncrun이 먼저 반환
i값은 부모껀데 사용중이면 closure scope 안에서 그 변수값을 사용하게 되어있음.
closure 과 block scope
promise 패턴
runasync 실행
promise 객체 반환.
.them메소드 싸용 (then은 콜백을 등록하는 함수)
아직 cb1, 2 실행 안함.
아직까지 동기
빨간 resolve할 때 cb1이 실행이 됨.
cb1이 실행되고 나서 cb2가 실행됨.
위에서 promise 객체 반환될 때 resolve가 즉시 실행되지만 cb1이 실해ㅚ는 것은
'promise 데이터'가 cb1의 파라미터
promise 내부에
resolve, reject, then 메소드가 들어있음.
then일 때 콜백함수가 실행됨. 콜백이 여러개 실행될 수 있음. 콜백함수가 등록되었다는 것을 promise는 알고있음.
resolve가 실행되면 promise는 콜백 루틴을 타서 콜백1의 출력이 콜백2의 입력값으로, 콜백2의 출력이 콜백3의 입력값으로 전달전달됨.
resolve를 비동기에서 실행시키면 콜백들이 실행하게 됨.
1초뒤에 resolve 전달
3초뒤에 resolve 전달
asyncObj의 settimeout 이후에 cb1실행하고 cb2 실행해.
promise queue 우선순위 매우 높음.
taskqueue, micro task queue, macro task queue
https://stackoverflow.com/a/25933985
https://velog.io/@titu/JavaScript-Task-Queue%EB%A7%90%EA%B3%A0-%EB%8B%A4%EB%A5%B8-%ED%81%90%EA%B0%80-%EB%8D%94-%EC%9E%88%EB%8B%A4%EA%B3%A0-MicroTask-Queue-Animation-Frames-Render-Queue
///
const columnIdx = findColumnIndex(columnName);
delData(columnIdx, cardIndex);
// console.log(columnName);
// 위의 코드와 동일
// pipeline(findCardIndex, deleteCardFromStorage, print)(columnName)
// target.addEventListener("click", ({ preventDefault, e }) => {
preventDefault();
});
