[0822] 브라우저에 저장되는 데이터

#WebStorage / WebSQL / IndexedDB

: 브라우저에 데이터를 저장하는 API

● WebStorage : 작은 양의 데이터를 저장할 때 사용

● WebSQL / IndexedDB : 많은 양의 데이터를 저장할 때 사용

▷ 모든 데이터를 매번 서버에서 불러오게 되면 동일한 데이터를 여러 번 불러서 트래픽 비용이 증가할 수 있고 온라인이 아니면 사용할 수 없습니다.

▷ 오프라인 상태에서도 데이터를 사용하게 하고 동일한 데이터를 중복해서 불러서 증가하는 트래픽 비용을 줄일 목적으로 브라우저에 데이터를 저장합니다.

● WebSQL

: 브라우저 안에 SQLite라고 하는 관계형 데이터베이스를 이용해서 데이터를 저장하는 API

▷ 안드로이드, iPhone, Embedded 기기 들이 대부분 이 데이터베이스를 이용합니다.

#File API

: 로컬에 있는 파일을 읽을 수 있는 HTML5 API

▷ FileReader 객체 이용

1. 객체 생성

new FileReader()

2. 읽을 파일을 연결

blob : 파일의 내용을 의미하는 바이트 배열

file input에서 설정된 value 가 선택한 파일(blob)의 배열이다.

1) 텍스트 파일인 경우

readAsText(선택한 파일, 인코딩 방식)

2) 텍스트 파일이 아닌 경우

readAsDataURL(선택한 파일) : 텍스트가 아니라서 인코딩을 적을 필요가 없다.

3. 파일을 읽을 때 발생하는 이벤트

1)onload

: 파일의 내용을 전부 읽었을 때 호출되는 이벤트

2)on progress

: 파일의 내용을 읽고 있는 도중에 호출되는 이벤트

3)on error

: 파일의 내용을 읽는데 실패했을 때 호출되는 이벤트

4. 파일의 내용 읽기

: result라는 속성을 이용하면 읽을 수 있습니다.

fileAPI 실습 분석

https://docs.google.com/presentation/d/1FMWHYohUMR3F_yXqh7q_z4eoHcAojMXb7ibr6_ZLdXw/edit#slide=id.p

Web Worker

: 자바스크립트 코드를 스레드로 수행하도록 해주는 API

▷ 처리시간이 오래 걸리는 자바스크립트가 있을 때 사용

MathML

: 수학 수식을 만들 수 있는 마크업 언어

▷ Firefox만 지원

Application Cache (필수)

: 자주 사용하는 리소스를 로컬에 저장해두고 사용할 수 있도록 해주는 API

▷ 웹 서버를 구축할 때 변하지 않는 리소스들이 있다면 이 기능을 이용해서 서버의 부하도 줄여주고 클라이언트에서 처리속도도 높여주는 것이 좋습니다.

WebPush, WebSocket, Communication API

: 통신과 관련된 API 들인데 서버를 별도로 만들어야 합니다.

▷ WebPush : 서버가 클라이언트의 요청이 없어도 메시지를 전송할 수 있는 기술

▷ WebSocket : ajax를 이용하지 않고 서버와 통신하는 기술

▷ Communication api : 페이지들끼리 통신하는 기술