HTML5

1.Geo Location

1)개요

디바이스의 물리적 위치 정보를 파악하기 위한 JavaScript API
위치 정보: GPTS와 같은 위성 정보를 이용해서 가져오는 방법
가까운 라우터의 위치
기지국의 위치:위치 정보 사용을 허용을 해야하만 사용 가능

2)위치 정보 사용 가능 여부 확인

navigator.geolocation 의 값을 확인

3)위치 정보를 가져와서 한번만 사용

navigator.geolocation.getCurrntPosition(위치 정보를 가져오는데 성공 했을때 호출되는 함수, 위치 정보를 가져오는데 실패 했을때 호출되는 함수, 옵션)
위치 정보를 가져오는데 성공 했을 때 호출되는 함수에는 매개변수로 위치 정보와 관련된 객체가 전달됩니다.
이 객체가 저장하고 있는 정보는 javascript뿐 아니라 모바일 API에서도 동일
coords: latitude(위도), longitude(경도), altitude(고도-GPS가 아니면 없음), accuracy(정확도), altitudeAccuracy(고도의 정확도), heading(방향), speed(속도)
timestamp: 위치정보를 가져온 시간

위치 정보를 가져오는데 실패했을 때 호출되는 함수에도 매개변수가 넘어가는데 이 경우에는 에러 객체가 전달되고 code 속성을 확인하면 실패한 이유를 알수 있습니다.

4)위치 정보를 계속 가져와서 사용하기

let 변수 = navigator.geolocation.watchPosition(위치 정보를 가져오는데 성공했을 때 호출되는 함수, 위치 정보를 가져오는데 실패했을 때 호출되는 함수, 옵션) 로 위치 정보를 계속해서 파악하고 clearWatch(변수)를 호출하면 더 이상 위치 정보를 가져오지 않습니다.

5) 옵션

객체 형태로 대입

{
       enableHighAccuracy: 정확도가 높은 위치 정보를 사용하도록 하는 옵션인데 기본값은 fasle, 
       timeout: 일정 시간이 지난 데이터는 폐기하는 옵션으로 밀리초 단위로 설정,
       maximumAge:0을 설정하면 항상 최신의 데이터를 가져옵니다. 위치 정보를 가져오는 주기ㅍㄴ에서
}

스마트 폰을 이용하는 경우는 옵션 설정이 중요합니다.
스마트 폰에서 배터리를 가장 많이 소비하는 2가지가 블루투스를 사용하는 것 과 gps를 이용하는 경우입니다.

6) 웹 화면에 현재 위치에 해당하는 카카오 맵을 출력

KaKao Open API:

2.File API

File을 읽고 쓰기 위한 API
input 타입의 file 에 multiple 속성이 추가되어 이 속성의 값을 설정하면 여러 개의 파일을 선태갛는 것이 가능
텍스트 파일을 읽을 때는 인코딩 설정에 주의해야 합니다.
일반 파일을 읽을때는 fileReader 객체를 생성한 후 reader.readAsDataURL(파일객체)를 호출하고 load 이벤트 와 error 이벤트를 처리합니다.
load는 전부 읽었을 때 FileReader 객체의 result에 읽은 내용을 저장하고 error 이벤트는 읽기에 실패했을 때 실패한 이유를 저장하고 있는 객체를 넘겨줍니다.

이미지 미리보기

3.Drag And Drop API

브라우저 내에서 사용할 수 도 있고 외부 프로그램과 브라우저 사이에서도 사용할 수 있음
외부 프로그램과 사용할 때는 외부 프로그램에서 드래그를 하고 브라우저에 드랍을 해야 합니다.
파일을 첨부할때 많이 사용

4.브라우저에 데이터를 저장

1)브라우저에 데이터를 저장하는 이유

불필요한 트래픽을 줄이기 위해서
메일 앱의 경우 매번 서버에 접속해서 서버의 데이터를 받아오는 것은 자원의 낭비가 될수 있습니다.
맨처음 접속을 할 때는 데이터를 다운로드 받고(파일의 존재여부를 확인) 다음 부터는 마지막 업데이트 된 시간을 비교해서 양쪾의 시간이 다르면 데이터가 수정된 것이므로 다운로드를 받고 양쪽의 시간이 같다면 업데이트 된 내용이 없으므로 다운로드를 받지 않도록 구현을 합니다.
offline 상태에서도 데이터를 사용할수 있도록 하기위해서

2)브라우저에 데이터를 저장하는 방법

Web Storage: Map 의 형태로 저장
Web SQL:관계형 데이터베이스(SQLite3 - 외부에서는 접속이 불가능한 저용량 데이터베이스, 사용법은 MySQL 과 유사) 이용
indexde DB: 자바스크립트 객체 형태로 저장 -NOSQL 과 유사
기존에는 Cookie를 사용했는데 Cookie를 사용하게 되면 문자열만 저장할 수 있고 서버에게 매번 전송됩니다.
전송 여부를 클라이언트가 결정할 수 없습니다.

3)Web Storage

종류는 2가지
LocalStroage : 브라우저에 저장해서 지우지 않는한 절대 삭제가 되지 않는 저장소
SessionStorage : 현재 접속 중인 브라우저에 해당하는 저장소로 접속이 종료되면 소멸됩니다.
데이터 저장과 가져오기 그리고 삭제

저장
스토리지.키이름 = 데이터
스토리지.["키이름"] = 데이터
스토리지.setitem("키이름",데이터)

가져오기
스토리지.키이름
스토리지.["키이름"]
스토리지.getitem("키이름")

삭제
delete스토리지.키이름
delete스토리지.["키이름"]
스토리지.removeitem("키이름")

저장소에 데이터가 변경되면 window 객체에 storage 이벤트가 발생하고 이벤트 객체에는 key, oldValue, newValue, url, sotrageArea 같은 속성이 만들어 집니다.

Local Strage는 전역 변수 localStrage 로 사용할 수 있고 Session Storage 는 sessionStrage로 사용할 수 있습니다.

저장된 내용을 확인하는 방법은 브라우저의 검사 창에서 application을 확인하면 됩니다.

세션 스토리지 - 브라우저를 종료 했을때 내용이 소멸되는지 와 현재 창에서 새창을 출력했을 때 내용이 복제가 되는지 확인

로컬 스토리지 -id 저장을 구현하는데 브라우저를 종료하고 다시 연결했을 때 내용이 존재하는지 여부를 확인

로컬 스토리지는 보안이 중요하지 않은 많지 않은 양의 데이터를 저장하는데 용이
장바구니 구현이나 아이디 저장에 유용하게 사용할 수 있습니다.

동일한 패턴의 데이터가 많은 경우는 로컬 스토리지 보다는 Web SQL이나 indexed DB를 권장

5.Web Worker

javascript를 이용한 백그라운드 처리

avascript에서는 Thread 표현 대신에 Worker 라는 표현을 사용

TML과 함께 있는 javascript 코드에서 긴 작업을 수행하게 되면 작업이 끝날때까지 다른 작업을 수행할 수 없음(UI는 아무것도 할수 없는상태)

Web Worker 는 UI 변경을 하지 못하고 DOM 객체 제어를 할수 없지만 localStorage 와 XMLHttpRequest(ajax) 사용은 가능

Web Worker 생성
let 변수 = new Worker("자바스크립트 파일 경로");//워커는 별도의 스크립트 파일에 만들어야함

워커 와 브라우저 사이의 메시지 전송
워커변수.postMessage("메시지") => 워커에서는 message 이벤트가 발생함
워커 파일에서는 postMessage("메시지) => 워커 변수에 message 가 발생함

sendMessage는 바로 처리해달라는 요청이고 postMessage 는 다른 작업이 없으면 처리해달라고 하는 요청입니다.

message 이벤트가 발생하면 매개변수에 data 와 error 를 가진 객체가 전달됩니다.
data는 data이고 error는 에러가 발생했을 때 에러에 대한 정보를 가진 객체입니다.

워커는 terminate()를 호출해서 중지가 가능

8.WebSocket

Web 에서의 TCP 통신을 위한 API
일반적인 Web 요청의 처리 방식은 Client 가 Server에게 접속을 한 후 하나의 request를 전송하고 그 request를 Server 가 받으면 처리를 하고 response를 Client에게 전송하고 접속이 끊어집니다.
연속되는 작업을 처리하기 위해 Cookie(클라이언트의 브라우저에 저장) 와 Session(서버에 저장)이라는 개념을 도입
일반적인 Web 요청(HTTP 나 HTTPS)은 본문 이외에 헤더 정보를 같이 전송해야 합니다. 작은 사이즈의 데이터를 보내는경우 오버헤드가 너무큽니다.
Web Sockt을 이용하면 헤더가 거의 없가때문에 이러한 오버헤드를 줄일수 있음
작은양의 메시지를 주고 받는 경우는 ajax 나 Fetch API 보다는 Web Socket을 사용하는것을 권장