JavaScript
동기 호출과 비동기 호출
Mia_
2022. 11. 22. 16:50
비동기 호출 (Asynchronous call)
1. Before 비동기 호출
1.1 callback review
- 다른 함수(A)의 인수(argument)로 넘겨주는 함수(B)
- parameter를 넘겨 받는 함수(A)는 callback 함수(B)를 필용 따라 즉시 실행(synchronously) 할 수 도 있고, 아니면 나중에 (asynchronously) 실행 할 수도 있다
1.2 callback in action
- 반복 실행하는 함수(iterator)
: 배열의 길이만큼 반복 실행 된다
- 이벤트에 따른 함수(event handler)
+ 함수 실행을 연결하는 것이 아님! 함수 자체를 연결!
2. 동기 함수와 비동기 함수
2.1 blocking과 non-blocking
동기 blocking | 비동기 non-blocking |
요청에 대한 결과가 동시에 일어남 (synchronous) | 요청한 결과가 동시에 일어나지 않음 (asynchronous) |
전화에 비유 : 하던 일을 멈추고 받아야 함 | 문자에 비유 : 확인 후 나중에 답장할 수 있음 |
- 동기 함수의 예제
- 비동기 함수 예제
2.2 비동기 함수 전달 패턴
callback 패턴
이벤트 등록 패턴
3. 비동기의 주료 사례
◎ DOM Element의 이벤트 핸들러
- 마우스, 키보드 입력 (click, keydown 등)
- 페이지 로딩 (DOMContentLoaded 등)
◎ 타이머
- 타이머 API(setTime 등)
- 애니메이션 API (requestAnimationFrame)
◎ 서버에 자원 요청 및 응답
- fetch API
- AJAX (XHR)
+ API