19. API 활용

이 장에서는 HTML5 API인 드래그 앤 드롭 API, Blob API, File API, Web Workers API를 배우고 이를 활용하면 웹 애플리케이션을 만들 수 있다.

드래그 앤 드롭 API👊

HTML 요소 드래그할 수 있게 만들기

<div draggable="true">드래그 할 수 있습니다.</div>

드래그, 드롭 이벤트

이벤트 이름	설명
dragstart	드래그 시작할 때 발생
drag	드래그 하는 동안 발생
dragend	드래그 끝날 때 발생
dragenter	마우스 포인터 드롭 요소 안쪽으로 들어갈 때 발생
dragover	마우스 포인터 드롭 요소 안쪽에 있을 때 발생
dragleave	마우스 포인터 드롭 요소 바깥으로 나갈 때 발생
drop	요소에 드롭할 때 발생

데이터 전달

드래그 앤 드롭 이벤트는 dataTransfer 프로퍼티를 갖고 있고, dataTransfer은 DataTransfer 객체이다.

전달 순서

1. dragstart 이벤트 처리기 안에서 setData 메서드에 데이터 타입을 지정한 데이터 추가

e.dataTransfer.setData("text/plain", value);

2. dragover 이벤트 처리기 안에서 브라우저의 기본 동작을 취소한다.

e.preventDefault();

3. getData 메서드를 사용해서 데이터를 지정한 데이터 타입으로 가져온다.

var value = e.dataTransfer.getData("text/plain");

19-1 예제
19-a 예제

Blob👊

자바스크립트로 이미지, 음성, 영상 등의 이진 데이터를 다룰 수 있다.

데이터베이스 관리 시스템의 BLOB (Binary Large Object) 에서 유래했다. 이미지나 음성 등의 멀티미디어 데이터를 저장하는 DB의 BLOB처럼 자바스크립트의 Blob 객체는 데이터 덩어리를 참조하는 용도로 사용한다.

Blob 생성자

var blob = new Blob(source, { type: contentType });

Blob이 받는 인수의 의미는 다음과 같다.

• source: 버퍼 배열 (ArrayBuffer, TypedArray, String, 기타 모든 데이+터 타입)
• contentType: 생성하는 데이터의 MIME 타입

프로퍼티 이름/ 메서드 이름	설명
size	Blob 객체가 참조하는 데이터의 크기
type	Blob 객체가 참조하는 데이터의 MIME 타입을 뜻하는 문자열
slice(start, end, contentType)	버퍼의 start 부터 end 까지의 복사본을 Blob객체로 반환

Blob 객체 가져오기

1. Blob 생성자로 생성
   Blob 생성자의 첫 번째 인수로 ArrayBuffer나 형식화 배열 등이 요소로 담긴 배열을 넘기면 Blob 객체를 가져올 수 있다.

2. XMLHttpRequest로 웹의 데이터를 HTTP 통신으로 가져오는 방법
   

function getBlob(url, callback) {
  var req = new XMLHttpRequest();
  req.onload = function () {
    callback(req.response);
  };
  req.open("GET", url);
  req.responseType = "blob";
  req.send(null);
}

3. postMessage로 다른 윈도우나 스레드에서 가져오는 방법
   postMessage 함수 사용

4. 파일에서 가져오는 방법
   

<input type="file" />

요소를 사용하면 파일을 읽어들여서 그것을 File 객체로 가져올 수 있다.

File 객체

File 객체는 로컬 파일을 참조하는 Blob 객체이고, 로컬 파일을 읽거나 쓸 수 있다.

File 객체는 Blob 객체를 상속받은 객체이다.

프로퍼티	설명
lastModified	File 객체가 마지막으로 수정된 날짜 (단위 밀리초)
lastMOdifiedDate	File 객체가 마지막으로 수정된 날짜 (Date 객체)
name	File 객체가 가리키는 파일의 이름

로컬 파일을 File 객체로 불러들이는 방법

1. type="file" 속성을 지정한 input 요소로 불러오는 방법

<!-- 사용자가 input 버튼을 클릭해서 파일을 가져올 수 있다. -->
<input type="file" />

<!-- 사용자가 shift를 눌러서 중복 선택을 할 때 사용 -->
<input type="file" multiple />

<!-- 선택할 수 있는 파일 유형을 MIME 타입으로 지정 가능 -->
<input type="file" accept="image/*" />

2. 드래그 앤 드롭으로 불러들이기
   앞에서 배운 드래그 앤 드롭으로 다른 요소가 가진 데이터를 다른 요소에 전달하는 방법을 배웠다.
   
   드래그한 파일의 File 객체는 이벤트 객체의 dataTransfer 프로퍼티 안에 있는 files 프로퍼티에 저장된다.

element.ondrop = function (e) {
  var files = e.dataTransfer.files;
};

FileReader

Blob 객체에는 데이터를 읽을 수 있는 메서드가 없다.

FileReader 객체를 사용하면 Blob 객체, File 객체의 내용물을 읽을 수 있다.

FileReader 인스턴스 생성

var reader = new FileReader();

읽고자 하는 Blob 객체를 적절한 이벤트 처리기 안에서 4개의 메서드 중 하나에 넘긴다.

메서드	설명
readAsText(blob, [, encoding])	텍스트 형식으로 읽기
readAsArrayBuffer(blob)	ArrayBuffer 형식으로 읽기
readAsDataURL(blob)	data URL이 가리키는 데이터 읽기
readAsBinaryString(blob)	이진 데이터 형식으로 읽기

Blob URL

Blob은 Blob을 가리키는 URL을 가질 수 있다. 이를 Blob URL 이라고 한다.

Blob URL을 가져오려면 URL.createObjectURL 함수를 사용한다.

var blobURL = URL.createObjectURL(blob);

그러면 "blob : "으로 시작하는 무작위 문자열이 Blob 객체의 Blob URL로 설정되고 이것을 가져올 수 있다.

var a = new Uint8Array([1, 2, 3]);
var blob = new Blob([a], { type: "application/octet-binary" });
var blobURL = URL.createObjectURL(blob);
console.log(blobURL); // blob:null/~~~

// revokeURL 함수로 메모리에서 해제할 수 있다.
URL.revokeURL(blobURL);

Blob URL의 활용

1. 이미지의 Blob URL을 img 요소의 src 속성 값으로 설정하면 그 데이터를 이미지로 표시할 수 있다.

var blobURL = URL.createObjectURL(blob);
var img = document.createElement("img");
img.src = blobURL;

2. Canvas의 drawImage 메서드에 그 img 요소 객체를 넘기면 Canvas에 이미지를 그릴 수 있다.

var blobURL = URL.createObjectURL(blob);
var img = document.createElement("img");
img.onload = function () {
  ctx.drawImage(img, 0, 0);
  URL.revokeObjectURL(this.src);
};
img.src = blobURL;

3. XMLHttpRequest가 읽어들일 URL로 설정하면 그 데이터를 텍스트로 읽어 들일 수 있다.

var blobURL = URL.createObjectURL(blob);
var req = new XmlhttpRequest();
req.onload = funtion() {
  callback(req.responseText);
};
req.open("GET", blobURL);
req.send(null);

Blob 응용

1. <'input type="file">로 이미지 파일을 읽어들이는 기능
2. 드래그 앤 드롭으로 이미지 파일을 읽어 들이는 기능
3. 이미지 필터링 기능
4. 이미지 저장 기능

Web Workers👊

클라이언트 측 자바스크립트는 싱글 스레드이다. 하지만 브라우저는 Single Thread로 동작하지 않는다. Web Workers를 사용하면 특정 작업을 멀티 스레드로 실행할 수 있다. Web Workers에서 병렬로 실행되는 스레드는 워커 라고 한다.

워커와 메인 스레드는 다른 전역 객체를 가지며, 상대방의 전역 객체를 참조할 수 없다. 또한 postMessage를 사용한 비동기 통신만 가능하다.

Web Workers의 기본

Web Workers로 멀티 스레드를 처리하는 방법은 다음과 같다.

Worker 객체 생성하기

먼저 워커를 정의할 자바스크립트 파일을 만든다.

var worker = new Worker("worker.js");

워커에 메시지 보내기 / 받기

postMessage로 워커에 메시지를 보낼 수 있다.

worker.postMessage("message");

워커에서 메시지를 받기 위해서 message 이벤트 처리기를 등록해야한다.

self.onmessage = function(e) {
  var message = e.data;
  ...
}

워커에서 메인 스레드로 메시지 보내기 / 받기

워커에서 메인 스레드로 메시지를 보내기 위해 postMessage 메서드를 호출한다.

self.postMessage("message");

워커에서 메인 스레드로 메시지를 받으려면 message 이벤트 처리기를 등록해야한다.

worker.onmessage = function(e) {
  var message = e.data;
  ...
}

워커 스레드 강제종료 / 스스로 종료
강제 종료

worker.terminate();

스스로 종료

close();

외부 스크립트 읽어 들이기

importScripts("scripts.js");

importScripts 함수로 외부 스크립트 파일을 읽어 들일 수 있다.

워커로 할 수 있는 일

Web Workers의 워커를 활용하여 무슨 일을 할 수 있는지 정리해보자. 특히 Blob을 읽어 들이는 작업과 XMLHttpRequest를 사용한 통신 작업을 동기적으로 실행 할 수 있다.

1. 워커에는 코어 자바스크립트의 모든 사양이 포함되어 있다.
   
   워커의 전역 객체는 self, this로 참조 가능
   
   

2. 클라이언트 측 자바스크립트 객체에 정의된 일부 프로퍼티를 사용할 수 있다.
   
   setTimeout(), setInterval() 등
   
   

3. 일부 HTML5 API를 사용할 수 있다.
   
   Blob(), FileAPI() 등
   
   

4. 공유워커를 사용할 수 있다.
   
   공유 워커는 여러 워커의 전역 객체를 공유할 수 있는 워커이다. ShareWorker생성자로 생성 가능