1. Web API
노별마루
Browser

2. API란?
(Application Programming Interface)

5. 분류 (프로토콜)
HTTP API
01.
WebSocket API
02.

6. 분류 (접근 방식)
Public API
01.
Private API
02.

7. 분류 (기능)
Web API
01.
Data API
02.
Hardware API
03.

8. Web API

9. 무엇인지도 모르고 사용했던...
- Document API
- Console API
- Canvas API
- Geolocation API
- Web Storage API

11. Page Visibility

13. 현재 웹 페이지의 가시성 상태를 감지할 수 있다.
그에 따른 불필요한 자원 활용을 줄일 수 있다.
사용자 경험 개선
성능 최적화 ↑

14. Intersection Observer

16. boundingClientRect: 관찰 대상의 사각형
intersectionRect: 관찰 대상의 교차한 영역
intersectionRatio: 관찰 대상의 교차한 영역 백분율
isIntersecting: 관찰 대상의 교차 상태
target: 관찰 대상 요소
time: 시간정보
callback

17. root: 관찰자의 대상 요소
rootMargin: root 범위를 축소 or 확대
thresholds: 관찰자의 가시성 비율을 설정
option

18. 성능 개선
리소스 절약
가시성 분석
사용자 경험 개선 ↑

19. Resize Observer

21. borderBoxSize: 관찰 대상의 테두리 사이즈
contentBoxSize: 관찰 대상의 사이즈
contentRect: 관찰 대상의 교차한 영역 백분율
target: 관찰 대상 요소
callback

22. 반응형 대응 및 유연성
ReFlow & RePainting 최소화

23. Mutation Observer

25. addNodes: 추가 노드 목록
removedNodes: 제거한 노드 목록
type: 속성, 문자열, 자식노드 카테고리
target: 관찰 대상 요소
callback

26. attributes: 속성 변경 감지 여부 설정
childList: 자식 노드의 추가 및 삭제 감지 여부 설정
characterData: 해당 노드의 텍스트 감지 여부 설정
subtree: 자식 노드까지 모두 관찰할지 여부 설정
option

27. ServiceWorker

29. 백그라운드 데이터 동기화
타 출처의 리소스 캐싱
네트워크 요청 관리
푸시 알림
실시간 감시와 대응

30. Push

32. 마케팅 및 유지 관리
자동 동기화
실시간 알림 제공

33. 감사합니다.
출처: https://developer.mozilla.org/en-US/