[HTML] API

 

 

 

 

HTML이 제공하는 여러 API를 사용해 다양한 기능을 쉽게 구현하자.

사용하기 전 웹 브라우저가 API를 제공하는지 확인해야 한다.

 

 

1. Drag and Drop 

 

 

 

 

 

 

사용자 인터페이스 중 Drag and Drop 이 있다.

구글 캘린더에서 일정을 등록할 때 사용하기도 하는데, API 를 사용하면 Drag and Drop 을 쉽게 구현할 수 있다.

 

 

 

 

(https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop)

 

드래그 시작 시 dataTransfer 객체에 Text 형식의 id를 보낸다.

기본적으로 HTML에서는 다른 요소가 드랍되는걸 지원하지 않기 때문에 드랍 대상인 div 박스에서는 preventDefault() 메서드를 실행시킨다.

 

이미지를 드래그해서 div 박스에 드랍하면 getData() 메서드로 데이터를 꺼내고, div 박스의 내부에 이미지가 자식으로 등록된다.

 

 

 

2. Web Storage

 

 

동일한 서버에 접속 할 때 마다 쿠키의 내용을 담아 웹 서버에 전송한다.

여기서 쿠키는 클라이언트에 간단한 정보를 저장하기 위해 사용된다.

 

4KB 크기의 문자열 데이터만 저장할 수 있고 보안에 취약하다는 단점이 있다.

이러한 단점을 보완하기 위해 Web Storage가 도입됐다.

 

 

 

 

Web Storage는 두 가지로 나뉜다.

두 가지 Storage의 특징은 위의 표를 참고하자.

 

Web Storage 내부에서 데이터는 키-값 쌍으로 저장되고, 5MB 정도를 저장할 수 있다.

쿠키와 달리 서버에 정보를 보내지 않아 보안도 어느정도 보장된다.

 

 

 

개발자 도구에서 Application을 확인해보면 어떤 데이터가 Web Storage에 저장돼있는지 확인할 수 있다.

 

(https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local)

 

Web Storage를 사용하기 전에 브라우저가 해당 기능을 지원하는지 꼭 확인하자.

 

 

 

3. Web Worker

 

페이지의 성능에 영향을 주지 않고 백그라운드에서 실행되는 자바스크립트를 의미한다.

 

복잡한 수학 계산 등 시간이 많이 걸리는 작업들을 웹 워커에 위임하면 사용자는 웹 페이지에서 자신이 원하는 작업을 계속하고, 웹 워커는 백그라운드에서 해당 작업을 수행해 작업이 완료되면 사용자에게 보여주는 방식으로 작동한다.

 

 

 

 

 

Web Worker에서 DOM을 변경하는 작업은 불가능하다.

UI Thread에게 수행 결과를 넘겨주고 UI Thread가 DOM을 변경하는 방식으로 처리한다.

 

 

Web Worker에도 두 가지 종류가 있다.

 

Directed Worker : 워커를 생성한 페이지에서만 백그라운드 프로세스가 응답한다

Shared Worker : 하나의 워커가 여러 개의 문서에 응답한다.

 

 

 

 

 

 

4. Geolocation

 

 

사용자의 위치 정보를 가져올 수 있다. (위도 / 경도)

사용자가 승인하지 않으면 사용할 수 없고, GPS를 가진 기기에서 더 정확하다.

 

 

 

 

getCurrentPosition()

 

 

인자로 세 가지를 받는다.

 

첫 번째 인자로 성공 시 호출되는 콜백 함수를 받고, 두 번째 인자로는 실패 시 호출되는 콜백 함수를 받는다.

세 번째 인자로는 위치 정보를 가져 올 때의 옵션을 설정한다.

 

정확도 / 시간 제한 설정 / 유효기간 설정 등을 설정할 수 있다.

 

구글맵 API와 함께 사용해 여러 기능을 구현할 수 있다.

 

 

watchPosition() / clearWatch()

 

watchPosition() 함수로 사용자의 현재 위치를 연속적으로 받아오고, clearWatch() 함수로 watchPosition() 함수를 중단한다.

 

이동 중에 변하는 위치를 가져올 때 사용한다.

 

 

 

5. File

 

 

사용자의 로컬 파일을 읽어온다.

 

사용자가 파일을 업로드하면 FileReader 객체로 파일의 데이터에 접근한다.

 

 

 

 

 

6. 텍스트 편집

 

 

Contenteditable : 특정 요소의 편집 여부를 설정한다.

DesignMode : 페이지 전체의 편집 여부를 설정한다.

 

 

 

 

div 영역을 편집 할 수 있도록 설정하고 execCommand 함수로 글의 굵기, 서식 등을 설정할 수 있도록 한다.

execCommand에는 다양한 속성이 있으니, 필요할 때 찾아서 사용하자.

 

 

 

7. Web Socket

 

 

이제는 브라우저 내부에서 Web Socket을 지원해 따로 설치하지 않아도 Web Socket을 사용할 수 있다.

 

(https://ko.javascript.info/websocket#ref-663)

 

 

 

8. Server-Sent Events

 

 

페이지를 새로고침하지 않고 서버로부터 자동적으로 데이터를 전달받는 기법이다.

 

 

 

demo_sse.php 서버에 접속해 주기적으로 데이터를 받아온다.

데이터가 갱신 될 때 마다 onmessage 이벤트를 발생시킨다.

 

 

서버에서 전송하는 데이터는 그때 그때 새롭게 전송한다고 헤더에 명시한다.

 

실제로 전송되는 값은 echo "data: " 이후 부분이다.

 

(https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse)