본문 바로가기

보물창고/IT 정보

HTML 5로 모바일 웹 애플리케이션 작성하기, Part 4: Web Workers를 사용하여 모바일 웹 애플리케이션 속도 높이기

반응형


기사 원문으로 가시면 자세한 설명과 소스코드 자료를 볼수 있습니다



요약: 웹 애플리케이션은 전통적으로 싱글스레드 세상에 갇혀 있었습니다. 너무 복잡하면 애플리케이션의 UI가 멈추는 위험을 감수해야 하기 때문에, 실제로 개발자들은 코드에서 할 수 있는 것에만 활동이 제한되었습니다. Web Workers는 멀티스레드를 웹 애플리케이션에 도입하여 이 모든 과제를 극복했습니다. 이는 대부분 애플리케이션의 로직이 클라이언트측인 모바일 웹 애플리케이션에 특히 유용합니다. 이 기사에서는 Web Workers로 작업하는 방법을 살펴보고, 이에 가장 적합한 태스크가 무엇인지 알아봅니다. 다른 HTML 5 기술을 사용하여 어떻게 이러한 기술의 효율성을 높일 수 있는지 살펴볼 것입니다.



모바일 장치에서 멀티스레드 JavaScript
멀티스레드 또는 동시 프로그래밍은 대부분의 개발자에게 익숙한 것이다. 이는 대부분의 현대 프로그래밍 언어에서 어떤 방식으로든지 지원된다. 그러나 JavaScript는 동시 프로그래밍을 지원하는 언어가 아니다. 작성자는 웹 페이지에서 단순한 태스크를 수행하도록 설계된 JavaScript와 같은 언어에 대해 이러한 작업이 너무 문제가 많고 불필요하다고 생각했다. 그러나 웹 페이지가 웹 애플리케이션으로 진화하면서 JavaScript로 수행된 태스크의 복잡도는 JavaScript를 다른 언어와 동등한 수준으로 끌어 올렸다. 동시에 동시 프로그래밍을 지원하는 다른 언어로 작업하는 개발자들은 스레드와 뮤텍스와 같은 동시 프리미티브에 수반되는 놀랍도록 높은 복잡도로 인해 애를 먹으며 고생했다. 사실 최근에는 Scala, Clojure 및 F#과 같은 많은 수의 새 언어 모두 동시성의 간소화를 보장하며 진화하였다.



Listing 1. 페이지 스크립트에서 Web Worker 사용하기

Listing 2. Worker 스크립트

장치 지원

Workers로 성능 개선하기

Listing 3. 거래 애플리케이션 HTML

Listing 4. loadDeals 함수

그림 1. 모바일 거래 UI

Listing 5. 거래 세부 사항 프리페치하기

Listing 6. 거래 세부 사항 Worker 스크립트

Listing 7. Worker로 가져온 스크립트

그림 2. 표시된 거래 세부 사항

Listing 8. showDetails 함수

요약
Web Workers는 웹 개발자에게 이국적인 새로운 기술처럼 보인다. 그러나 이 기사에서 살펴본 것과 같이 이는 매우 실용적인 애플리케이션이다. 모바일 웹 애플리케이션의 경우에는 특히 더하다. Workers는 데이터를 프리페치하거나 다른 앞선(ahead-of-time) 조작을 수행하는 데 사용되어 훨씬 더 생생한 UI를 제공할 수 있다. 이는 잠재적으로 느린 네트워크를 지나 데이터를 로드해야 하는 모바일 웹 애플리케이션의 경우에 특히 더할 수 있다. 이를 캐싱 전략과 결합하면 사용자는 애플리케이션의 간결함에 감탄할 것이다.


 
 기사 원문으로 가시면 에제 코드와 자세한 설명을 볼 수 있습니다
아이베엠 디벨로퍼 웍스 : http://www.ibm.com/developerworks/kr/
기사 원문 주소 : http://www.ibm.com/developerworks/kr/library/x-html5mobile4/index.html

반응형