19. API 활용

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

드래그 앤 드롭 API👊

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

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

드래그, 드롭 이벤트

데이터 전달

드래그 앤 드롭 이벤트는 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 타입

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 객체를 상속받은 객체이다.

로컬 파일을 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개의 메서드 중 하나에 넘긴다.

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생성자로 생성 가능