일주일간 모은 링크 #4

2011.01.02 23:00
UX MYTHS
사용자 경험에 대한 오해를 수집하고 틀린 이유에 대해 설명해주는 사이트입니다. 이런 글은 대체로 영어로만 되어 있는 경우가 많으나 이 페이지의 경우 한글로 번역되어 있습니다. 이제까지 알고 있는 정보들이 정말 올바른 정보인지 이 페이지를 보면서 한 번 검토해보면 어떨까요?

제목 그대로 JavaScript에서 메모리 정보를 얻는 방법입니다. 일본어 페이지이지만 구글에서 제공하는 번역 기능을 이용하면 이해하는데 큰 문제는 없을 것입니다. (저는 구글 크롬의 번역 기능을 사용) 좀 아쉬운 점이 있다면 Webkit 계열의 브라우저와 Firefox에서 사용 가능한 방법만을 알려주고 있습니다. 국내에서는 IE의 비율이 높은데 이에 대한 방법이 없는 것은 아쉽다고만 표현하기에는 좀 부족한 것 같네요.

일본어로 된 페이지입니다. 일본의 JavaScript개발자들이 봤을 때 의미 있는 책을 정리해 둔 것으로 보입니다. 이 블로그에서도 JavaScript책에 대해 쓴 글이 있는데요 이 글보다는 좀 더 넓은 범위에 대한 책을 언급하고 있습니다. 어떤 책을 봐야할지 고민하고 있는 경우라면 옆나라의 사람들은 어떤 책을 보고 있는지 참고해도 좋을 것으로 생각합니다. 물론, 제가 봤을 때도 고개가 끄덕여지는 그런 책들을 모아놨습니다. 

JavaScript로 개발할 때 사용할 수 있는 도구에 대해 간단하게 소개하고 있는 발표 자료입니다. 텍스트 에디터부터 통합 개발 환경, 디버그 도구 및 배포시에 사용할 수 있는 프로그램까지 개발부터 배포까지의 모든 단계에서 필요한 도구에 대해 간단히 소개하고 있습니다. 어떠한 도구를 사용해야 할지 고민했던 분이라면 이 자료 하나만으로도 기본적인 도구를 갖출 수 있을 것입니다.

Nicolas C. Zakas가 YUIConf에서 발표한 JavaScript의 성능을 높이는 방법입니다. 앞의 내용 중 일부는 이전에도 어디선가 얼핏 본듯한 내용입니다. 아마 이전의 발표에서 사용했던 자료를 다시 사용한 것으로 보입니다. 뒷편에는 Web Workers에 대한 내용이 추가되었습니다. 성능을 개선할 수 있는 좋은 방법인만큼 꼭 살펴봐야 할 내용이라고 봅니다. JavaScript의 실행 속도가 문제가 된 적이 있다면 이 발표 자료를 보면서 개선할 수 있는 부분이 없을지 꼭 찾아보기 바랍니다.

nundefined HTML5_JS_CSS Chrome, firefox, memory, Safari, User Experience, UX, webkit, yuiconf

일주일간 모은 링크 #3

2010.12.26 23:00
Tangram - 바이두에서 만든 자바스크립트 라이브러리
바이두에서 만든 자바스크립트 라이브러리로 65KB (gzip 압축시 17.7 KB)인 매우 작은 사이즈를 자랑합니다. Cheat Sheet를 봐서는 많은 기능보다는 핵심적인 기능으로만 구성했다는 느낌이 듭니다. 핵심적인 라이브러리 외에도 효과, 버튼, 날짜 선택기 등 기본적인 그러나 빈번하게 사용되는 컴포넌트를 같이 제공하고 있습니다.

자바스크립트를 이용하여 .tag.gz 파일을 읽고 MP3의 ID3 tag를 읽는 라이브러리입니다. 기본적으로 작지 않은 크기의 파일을 읽어야 하므로 실제 서비스에 적용하는 일은 그렇게 많지 않을 것으로 생각합니다. 하지만 자바스크립트를 사용하여 PC상에서만 하던 작업을 웹브라우저에서도 할 수 있다는 점에서 재미있는 라이브러리라고 하겠습니다. 

자바스크립트를 공부할 때 읽으면 좋을 책들을 단계별로 소개하고 있습니다. 초급/중급/고급/신의 네 가지 수준으로 나누어 소개하고 있으며 이 외에도 참고하면 좋을 블로그에 대한 소개도 되어 있습니다. 마지막에는 여러 책 중 단 세 권만을 선택해야 할 때 고른 책도 정리되어 있습니다. Professional JavaScript for Web Developers, Object-Oriented JavaScript, JavaScript Patterns 가 바로 그 주인공이네요. 안타깝게도 아직 국내에 번역서는 안나온 상태입니다.

HTML5의 Canvas에 대한 튜토리얼 사이트입니다. Basics, Advanced, Games의 세 단계로 나뉘어 있으며 현재 Basics는 완료되고 Advanced가 연재 중입니다. 아직까지 연재된 분량이 어렵지 않고 절 하나의 양이 그렇게 많지 않으므로 하루에 한 절씩 따라하며 익히다 보면 어느새 Canvas에 대해 많은 것을 알 수 있게 될 것 같습니다.

초보자를 위한 자바스크립트 디자인 패턴입니다. 무료로써 파일, ePub, PDF, 온라인 버전 등을 제공하고 있습니다. 위에서 언급한 JavaScript Patterns 책을 구입하기 전에 이 글부터 먼저 보면 좋을 것으로 생각합니다.


nundefined HTML5_JS_CSS Baidu, canvas, Design Patterns, html5, id3, mp3, tangram, tar.gz, tgz, tutorial, 자바스크립트 책

자바스크립트 프레임웍 제대로 알고 사용하기

2010.12.22 13:57

 

jQuery라는 것을 많이 들어보셨을 것 같습니다. 자바스크립트 프레임웍이라고 하는 것인데요, 자바스크립트 라이브러리라고도 합니다.

이번엔 자바스크립트 프레임웍이 어떤 특징을 가지고 있고, 어떤 장점을 가지고 있는지 한번 확인하겠습니다.

자바스크립트 프레임웍의 올바른 이해를 통해 100% 제대로 활용할 수 있는 계기가 되면 좋겠습니다.
 

자바스크립트 개발은 서버사이드 개발과 비교할 수는 없지만 결코 더 쉽지 않은 이유가 많습니다.

어디에서 명세화 되어 있지 않은 브라우저 호환성(compatibility) 문제의 경우 개발자의 디버깅으로 하나하나 해결해야 합니다. 또한 자바스크립트의 구현은 어찌나 어렵고 귀찮은지, 특히 OOP개념으로 구현된 코드를 수수정하거나 읽는 것만으로도 힘이 듭니다.
이 뿐만이 아닙니다
. 디버깅은 정말 환상적입니다. 최근에서야 각 브라우저 벤더사들이 소위 개발자툴을 함께 제공하고 있긴 합니다만
아직도 디버깅을 어떻게 해야 하고 오류메시지를 어떻게 이해하고 해결해야 할지는 많은 UI개발자들을 지치게 만들고, UI개발을 꺼려하게 되는 가장 큰 이유이기도 합니다.

하지만 이러한 문제를 조금씩 줄여 나가는 노력이 생겼습니다.

호환성 문제를 모아서 라이브러리화 시키고, 자주 쓰는 함수를 재사용할 수 있게 하며, 쉽게 OOP개념의 코드를 구현 할 수 있도록 일정수준의 패턴을 알려주기도 합니다. 본질적인 자바스크립트 개발의 어려움(자바스크립트의 특성을 이해해야 하는 어려움에서 출발)을 해소해주진 못하지만, 정말 편리하게 UI개발을 해주는 것들이 나왔습니다.

JQuery가 대표적인 자바스크립트 프레임웍 입니다. (놀랍게도 최근 1-2년 이야기 입니다)

물론 아직까지 YUI, prototype, dojo, mootools, extJs등이 건재하며 비슷하면서도 툴마다의 특성과 철학을 가지고 유지되고 있습니다.

 

아래 표는 최근의 추세를 보여줍니다. jQuery  사용성 과 속도라는 핵심가치에서 모두 우수한것임에 틀림 없는것 같습니다


<점유율 비교>

 


자바스크립트 프레임웍이 가지고 있는 장점과 특징을 꺼내서 정리해보도록 하겠습니다
.

 

호환성(compatibility) - 가장 어려운 UI개발자의 고민을 해결
브라우저는 절대 표준화되지 않을 것 입니다. 심지어 HTML5라는 스펙은 표준을 위한 것이라기 보다는 브라우저의 native한 성격을 최대한 활용하기 위해서 나온 것일 뿐 입니다. 현재 draft상태의 많은 스펙을 마치 표준인 것처럼 브라우저 사들이 경쟁적으로 도입할 것이며, 새롭고 편리한 기능은 누가 먼저랄 것도 없이 먼저 반영하여 릴리즈 할 것 입니다. 그중에 메이저급 기능이라면 HTML6이라는 이름으로 오픈 될 수도 있으니 놀라지 마시기 바랍니다. 아무튼 이런 과정에서 새우등이 터지는 겪이니 개발자는 인기있는 브라우저가 잘 동작하게 코드를 다듬어야 합니다.

자바스크립트 프레임웍은 이런 짓을 누구보다 빨리 반영해주고 있습니다. 대부분의 호환성 문제를 고민하지 않아도 좋습니다.

 

최신성 - 최신 브라우저와 기기를 지원

새로운 브라우저와 기기가 하루가 멀다고 새로나오고 업그레이드가 되고 있습니다

HTML5 새로운 스펙을 도입하고 싶고, 아이패드와 같은 새로운 기기에서 본인의 코드가 정상적으로 동작하기 위해서는 코드의 수정이 불가피 합니다. 하지만 프레임웍에서는 이런 부분을 가장 빨리 지원해주고 있습니다.  HTML5 input Type에는 datetime이나 email, range등 자바스크립트로 문자열제어를 통해서 어렵게 입력값조정을 했던 것을 기본 type으로 지원해주고 있습니다(대부분의 프레임웍은 form 조작을 쉽게 해줍니다). 이런 부분은 프레임웍을 사용함으로써 보다 쉽게 사용이 가능합니다.

 

안전성 - 버그 없이 빠른 렌더링 보장

자바스크립트의 대부분 작업은 사실 HTML 이나 DOM을 조작하는 것입니다. 이런 부분은 selector라는 native한 속성을 기반으로 브라우저에서 편리하게 다양한 기능을 제공합니다. 이런 것을 사용자가 보다 직관적으로 쉽게 사용할 수 있도록 다양한 selector를 지원하고 있습니다. 이런 부분의 지원없이 DOM API만을 가지고 직접 DOM Tree를 탐색하는 것은 성능에 문제를 일으킬 수 있습니다.

프레임웍의 사용으로 반복적인 코드를 상당히 줄일 수 있습니다. 결국 LOC(Line of code)의 경량화로 네트웍비용까지 감소하게 됩니다.

안정성에서 마지막으로 강조 하고 싶은 것은 축적된 노하우 입니다. 자바스크립트 프레임웍이 나온지는 얼마 되지 않았습니다. 하지만 반면에 자바스크립트라는 언어의 버전이 변경되는 등 큰 변화는 없었습니다. 4-5년된 자바스크립트 프레임웍의 나이는 결코 적지 않습니다. 그 동안에 잠재된 문제점은 모두 발견되어 수정되었다고 볼 수 있습니다. 다만 새로운 브라우저와 기기로 인한 호환성 문제와 새로운 기능의 불완전함등만 있을뿐입니다. 이제 대부분의 프레임웍이 여러분의 서비스를 주요한 이슈를 발생시켜 해치지 않을 것 입니다.

 


 

생산성- 보다 빠르게

프레임웍은 Dom조작뿐 아니라, 특정 Element에 이벤트를 바인딩하는 과정 , Ajax통신의 절차적인 프로세스등 일관전 구조에 따라 동적인 처리를 지원합니다. 결과적으로 이런 규칙으로 인해 협업 개발시(collaboration)에 커뮤니케이션 비용을 줄일 수 있습니다

그리고 단순한 스트링을 조작하는 유틸리티 함수등의 사용으로 중복코드를 줄일 수 있으며, 이벤트 바인등하는 과정에서 매크로를 사용하여 개발하는 것을 활용하면 코드량을 확실히 줄일 수도 있습니다 역시 결국 보다 빠르게 개발할 수 있습니다.

마지막으로 다양한 UI Component(widgets)를 사용할 수 있습니다. 디자인요소에 따라서 코드의 수정이 불가피한 경우가 많지만 대부분의 UI Component 사용은 UI 개발을 매우 빠르게 해주는 것임에 틀림 없습니다. 대부분의 프레임웍은 UI Component를 공식관리해주고 있으니 더욱 믿고 쓸수 있습니다.

 

그외

같은 이야기이지만 코드의 유지보수ㅡ가 용이한점, 일관된 구조로 인해 가독성이 좋아지는 점 등의 장점이 있습니다.

 

대부분의 프레임웍은 이러한 장점을 모두 가지고 있습니다. 적은 부분의 개발 코드에서도 프레임웍을 사용하는 것을 권장해드립니다.

혹시라도 프레임웍 사용을 하지 않는다고 하여도 프레임웍기반의 마이그레이션을 하는 방법은 어렵지 않으며, 선택적인 기능만 프레임웍기반으로 개발할 수 있습니다.

다만 여러 프레임웍을 동시에 사용하는 것은 자제해야 합니다.

일시적인 비용일지라도 하나의 프레임웍기반으로  마이그레이션을 하여 사용하는 것이 좋습니다. 이런 과정이 어렵다면 프레임웍이 제공하는 충돌방지 방법(namespace로 감싸는 방법등)을 사용하시면 됩니다.

 

아직도 프레임웍에 대한 어려움을 느끼셨다면 이번기회에 프레임웍을 사용하여 개발이 힘을 쏟아 보시는것이 어떨까 합니다 ^^

 

 

니가요 HTML5_JS_CSS AJAX, dojo, extjs, framework, javascript, jindo, JQuery, YUI

일주일간 모은 링크 #2

2010.12.19 23:00
JavaScript로 Rich Internet Application(이하 RIA)을 만들 때 따르면 좋을 가이드라인입니다. 일반적으로 RIA의 경우 대부분의 기능이 JavaScript로 구현되고 매우 복잡해지는 경향이 있습니다. 이럴 때 프로그램 전체를 관통하는 가이드라인이 있다면 프로그램의 성능도 개선되고 이후 관리가 편해지는 장점도 있습니다. 아직 특별한 가이드라인이 없는 상황이라면 이 페이지를 기본으로 삼아도 좋을 것 같습니다. 또한 내용 중에는 빠른 실행을 위한 코드 작성 방법도 많이 언급되어 있으므로 실행 속도가 느려 고민하고 있는 경우라면 이 페이지의 내용을 바탕으로 소스코드를 검토해봐도 좋을 것으로 생각합니다.

현재 스마트폰에서의 브라우저가 어떤 상황인지에 대해 정리한 Peter-Paul Koch의 글입니다. 글의 서두에서 2~3년 내에 어떤 사이트에서든지 모바일을 지원하게 될 것이므로 개발자는 이를 위한 기술을 닦아야 한다고 이야기 합니다. 하지만 모든 브라우저에 맞는지 테스트하기는 어렵다고도 합니다. 최소한 열 개의 OS가 존재하고 15개 브라우저에 대해 생각해봐야 하는 상황이라고도 합니다. 하지만 기기가 비싸 모든 개발자가 기계를 구매할 여력이 되는 것은 아니므로 이 글을 통해 모바일 웹 마켓, 폰 플랫폼과 브라우저에 대해 조망하려고 한다고 합니다. (멋지군요!) 재미있는 것은 글 중에 Dolfin(삼성 바다의 웹브라우저)이 가장 빠른 모바일 브라우저라고 하는 부분이 있습니다. (오호~) 또한 글의 마지막에는 읽어볼만한 글을 소개하고 있으므로 모바일 웹에 관심있는 분들이라면 이 글부터 시작해보시면 좋을 것으로 생각합니다.

스크립트를 로드하는 속도를 개선하는 JavaScript 모듈입니다. High Performance Web Sites와 Even Faster Web Sites의 저자인 Steve Souders가 만들었습니다. 예전에는 야후에서 일하고 있었는데 지금은 구글에서 일하고 있군요. 웹사이트의 퍼포먼스나 속도에 대한 책은 이 분이 쓴 책을 제외하면 거의 없는 상태로 어떻게 보면 웹사이트의 속도라는 분야에서는 독보적이라고 할 수도 있을 것 같습니다. 어쨌든 ControlJS의 경우 JavaScript가 실행되는 동안 화면의 렌더링이 멈추는 문제를 피하기 위해 ControlJS에서 스크립트를 로드하는 타이밍을 관리하거나 특정한 이벤트와 연결하여 이벤트가 발생하는 시점에 페이지를 로드한다던가 하는 방식을 지원하는 것으로 보입니다. 그리고 로드가 완료된 후에는 사용할 수 없는 document.write기능을 사용할 수 있게 해줍니다. 실제 적용을 위해서는 고려해야 할 요소가 더 있을 것 같다는 생각이 들긴 하지만 속도 문제로 어려움을 겪고 있다면 한 번쯤 심각하게 고민해봐야 할 프로그램이라고 생각합니다.

JS의 primitive type에 대해 적은 글입니다. 링크명에서도 쉽게 알 수 있듯 일본어로 되어 있는 사이트입니다. JavaScript의 문법적인 내용에 관심이 있는 분이라면 간단하게 읽어볼만한 내용입니다. (그만큼 이미 알고 있는 분들도 많을듯)

모바일 웹을 개발할 때 필요한 에뮬레이터와 시뮬레이터에 대한 정보를 모아둔 사이트입니다. 위의 링크 중에도 테스트할 수 있는 기기가 매우 비싸 개발자가 기기를 모두 갖출 수 없다는 글이 있었는데 그런 어려움을 일부 해소할 수 있는 좋은 방법이라고 하겠습니다. iOS, Android, Galaxy Tab addon, Nokia나 BlackBerry용도 있습니다. 

nundefined HTML5_JS_CSS Browser, code guideline, controljs, high performance web sites, mobile browser, RIA, Rich Internet Applications, smartphone, steve souders

일주일간 모은 링크 #1

2010.12.12 23:30

자바스크립트의 성능을 향상시키는 10가지 방법에 대한 글입니다. 로컬 변수를 활용하라, with()구문을 사용하지 말라 등 속도를 높이기 위한 방법을 설명해두었습니다. 최근 자바스크립트 엔진의 속도가 빨라지면서 코드가 느리게 짜여진 경우에도 문제가 발생하는 일은 많지 않지만 어딘가에 있을 자바스크립트의 실행 속도가 느려 고민하는 분들은 이 글을 읽고 한 번쯤 코드를 살펴보면 좋을 것 같습니다.

iOS, android, nokia & symbian, blackBerry 등 다양한 기기에서 모바일 웹 개발을 할 때 살펴봐야 할 공식 가이드를 한 곳에 모아둔 곳입니다. 글에서 모아둔 가이드가 완전하지 않고 때로는 틀리는 경우도 있다고 경고하고는 있지만 모바일 웹을 만들 때 가장 먼저 살펴봐야 할 자료들이라고 생각합니다.

HTML의 Canvas와 자바스크립트를 이용하여 누드 사진을 판독하는 자바스크립트 라이브러리입니다. 서버에서 누드 사진을 판독하는 기술은 이미 오래 전에 도입된 것으로 알고 있는데 이제 HTML을 이용한 이미지에 대한 처리가 가능해지면서 이런 재미있는(?) 코드도 나오는 듯 합니다. 현재 이 코드는 IE9, FF3.6 이상, 크롬, 사파리 (아이폰/아이패드 포함), 오페라 브라우저에서 사용할 수 있습니다. <video>를 사용한 동영상에서 누드 사진(동영상이라고 해야할까요?)을 판독하는 데모도 있습니다만 제 네트워크 속도가 문제인지 정상적으로 데모를 확인할 수는 없었습니다.

크롬 웹스토어가 오픈하면서 크롬 브라우저에서 애플리케이션을 실행시킬 수 있게 되었는데요 여기에 발표된 여러 앱들이 iPad의 디자인에서 얼마나 많은 영향을 받았는지에 대한 기사입니다. 저는 아직 설치를 해보지 않았는데 기사에 있는 이미지들을 보면 iPad앱과 거의 동일한 것을 알 수 있습니다. 기사 내에서 iPadification of the web (웹의 아이패드화)이라는 표현을 썼는데요 이런 방향이라면 내년 상반기에는 국내에서도 iPad 앱과 유사한 웹을 만나게 될 가능성이 높을 것 같습니다. 물론 이렇게 된다면 HTML5와 자바스크립트의 활용도가 더 커지겠지요.



nundefined HTML5_JS_CSS canvas, Detection, guideline, IPAD, javascript, Mobile Web, Performance, Web App, 누드사진판독, 모바일웹, 성능, 성능향상, 향상