0000 사진 고르기: Web Worker를 사용하여 dataURL 생성

[min20]

DataURL을 생성할 때 문제가 아닌가 싶은데, 일단 BackLog에 넣어두고 시간날 때 교수님 찾아뵙기.

[min20]

2014.12.22에 한 일

1. WebWorker에 대해 공부
2. 간단한 동작법 구상: drag 이벤트로 받은 file을 worker에 보내면 dataURL을 생성하여 반환한다.
   • worker.postMessage({"targetMethod": /parameters/}) 형식으로 데이터를 보내고
   • worker.addEventMessage("message", function(event) { event.data }) 로 데이터를 받는다.
3. 예제코드 작성(/WEB-INF/jsp/test/WebWorker.jsp 및 관련 자바스크립트)

[min20]

코드 돌려보지 않고 그냥 암산하듯이... 머리 속으로 동작 흐름 떠올리면서 어기적 어기적 짜고 있었는데, 아주 큰 문제가 발생. File API와 CustomEvent를 직접 만들어 써보려 했고 이에 따라 코드까지 대충 만들어 놓았는데, worker에서는 여기에 어떻게 접근해야 하는지 모르겠다. Event야 소소한 문제지만, File API는.... 만약 지원되지 않는다면 Worker를 사용할 이유가 없어진다...

월요일에 Worker에 대해 추가정보 찾아보고, 없을 경우의 차선책

1. drag & drop을 이용한 File Upload 예제들을 잘 살펴본다.
   • 저번주에 좀더 빠르고 쾌적하게 동작하는 Drag & Drop Uploader를 보았다. 이들의 코드를 분석해본다.
2. 디자인 개편이나 열심히 한다.

[min20]

공부할 것

1. Javascript File System
   • http://www.html5rocks.com/en/tutorials/file/filesystem/
2. Basic Web worker
   • http://www.html5rocks.com/en/tutorials/workers/basics/
3. The Synchronous FileSystem API for Workers
   • http://www.html5rocks.com/en/tutorials/file/filesystem-sync/

쭉 살펴보니까 별로 필요 없다

[min20]

짱 크게 커밋함.

WebWorker에서는 비동기로 동작하는 FileReader() 는 지원하지 않고, 동기로 동작하는 FileReaderSync() 만 지원됩니다. 콜백 안 쓰니까 오히려 더 편한듯....

[crongro]

짱크네

[min20]

File 을 dataURL 로 변경하는 것을 Web worker로 처리하였습니다. 속도측정은 안 했습니다.

(문제가 되었던) 큰 이미지파일 업로드 시에

• (의외로) Safari가 가장 쾌적하게 컨텐츠를 로드합니다. 사용성에 확실한 개선이 느껴집니다.
• Chrome은 대기가 좀 길게 느껴지나, 한꺼번에 팍 하고 뜨기 때문에 전체 시간은 길지 않은 것 같습니다. 사용성에 큰 개선이 있다고 보기는 어렵습니다.
• FireFox는 제대로 동작하지 않습니다. 브라우저가 뻗어버리는 수준이라 사용성은 최악입니다. 디버거를 돌릴 수 있는 수준이 아니라서... 왜 이런 현상이 일어나는지 잘 모르겠습니다.
• Chrome과 Firefox 모두 "추가로 하고싶은 작업"에 적어놓은 문제 때문에 쾌적하지 않은 것 같습니다.

작은 이미지파일 업로드 시에는

• 모든 브라우저가 굉장히 빠르게 컨텐츠를 로드합니다. 확실히 나아진 것 같네요.

추가로 하고싶은 작업

1. thumbnail 추가하는 부분이 conversion이 완료될 때까지 기다리고 있다. 이 부분에서 사용성을 크게 해친다. thumbnail wrapper를 먼저 추가한 후 dataURL 로드가 끝날 때 를 추가하는 것이 어떨까?

[min20]

요약: 데모는 작은 이미지파일로 진행합시다...

[skyhills13]

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ