콜백할 때 실행하지말고 함수 자체를 넣어줄 것! //eg.fn() (X) fn (O)
blocking VS non-blocking
blocking 전화
하던 일을 멈추고 받아야 한다(blocking)
요청에 대한 결과가 동시에 일어난다(synchronous)
non-blocking 문자
확인 후, 나중에 답장할 수 있다(non-blocking)
요청에 대한 결과가 동시에 일어나지 않는다(asynchronous)
커피 주문 예시
동기
커피를 다만들고 나서야 주문을 받을 수 있다
비동기
커피와 상관없이 아무때나 주문을 받아두고 커피를 만들 수 있다
직원이 손님을 부른다=call-back
비동기 방식으로 코드를 짜고 싶을 때 콜백 형식을 많이 사용한다
비동기 주요 사례
DOM Element 이벤트 핸들러
마우스, 키보드 입력 (click, keydown등)
페이지 로딩 (DOMContenLoaded등)
타이머
타이머 API(setTimeout등) 커피 주문 예시로 보여준거 waitSync(4000)
애니메이션 API(requestAnimationFrame) 사이트에 나오는 애니메이션 형식들/ 직접 찾아보세요
서버에 자원 요청 및 응답
fetch API 서버에 요청하기 세션
AJAX (XHR) 직접 찾아보세요
브라우저의 비동기 함수 작동 원리를 알려면 (advanced)
Event Loop
Philip Roberts: Help, I'm stuck in an event-loop
----------------------------