HTML5 - 쿠키 vs. 로컬스토리지 (local storage)

2011.03.01 21:17
일전에 모바일웹에서 사용자의 특정 값을 비로그인 환경에서 보관해야 할 개인화된 정보가 있었습니다.
당연히 쿠키를 사용하면 쉽게 해결 될 수 있는 것이였습니다.
하지만 모바일 환경이라는 점(HTML5를 보다 잘 지원함으로)으로 쿠키를 대체할 수 있는 기술을 검토해 봤습니다. 여기저기 흩어져 있는 자료를 모은 정도이지만 그때 검토하기 위해 정리한 자료를 공유합니다.
(Mindjet이라는 MindMap을 사용해서 그림이미지로 첨부합니다)


다운로드 받아보시면 잘 보이실거에요.

다운로드 받아보시면 잘 보이실거에요.


모바일웹에서는 로컬스토리지 사용이 충분히 가능한 상황임을 알게 되었습니다. 특히나 모바일에서는 성능문제가 PC보다 민감하다고 볼 수 있는데요. 쿠키의 경우 HTTP Header에 매번포함되어야 하는 문제도 있습니다. 물론 쿠키의 얼마 안되는 사이즈가 중요한 문제는 아니긴 합니다 ^^

그래도 모바일이라면 로컬스토리지 사용을 검토해 보시면 좋겠네요

Mindmap자료도 첨부합니다.(Mindjet이라는 프로그램에서 열릴겁니다)



니가요 HTML5_JS_CSS AJAX, cookie, Gmail, html5, local storage, localstorage, web storage, 구글 검색 히스토리, 로컬스토리지, 쿠키

Javascript(Ajax) 개발자에게 필요한 역량

2011.02.27 08:37
제목을 UI 개발자로 하려다가, Javascript 개발자로 변경했습니다.
정확히 Javascript만을 주로 다루는 개발자는 굉장히 드믑니다. 하지만 웹개발의 이동이 Ajax나 Javascript으로 이동함으로써 Javascript만을 주로 다루는 개발자가 많아지고 있으며 그만큼의 전문성이 웹에서 요구되고 있습니다.
Front-End가 무거워지고 복잡해 짐으로써 비 전문가들의 개발로 인해 웹페이지는 사용자들에게 더 좋은 경험을 주지 못하고 있습니다. 이것은 웹의 발전과 사용자의 경험이 비대칭으로 이뤄지는 형태라서 이것에 대한 책임을 웹개발자가 어느정도 책임을 지고 있어야 합니다.

이러한 문제를 해결하기 위해 3가지를 중점적으로 Javascript 개발자의 필수 역량이라고 생각됩니다.

첫째. 마크업과 CSS
마크업 다시 말해 정적인페이지를 디자인하고 개발하는 것은 UI개발자가 가지고 있어야할 필수 항목 입니다.
Javascript와 HTML&CSS를 각각 전문화된 영역으로만 생각하고 서로에 대한 이해가 없다면 UI개발진행중에 많은 비효율과 혼란이 발생합니다. 즉 CSS로 처리할 수 있는 것을 모른채 Javascript로 하거나, Javascript의 동작원리를 이해하지 못한채 HTML을 구현함으로해서 DOM을 제어하고 이벤트를 조작하는데 어려움을 겪을 수 있습니다.
특히 UI Component(위젯)의 개발에서는 두개의 적절한 조화로움이 있어야만 재사용이 가능한 코드를 개발 할 수 있습니다.
Javascript개발자는 마크업과 css를 같이 개발하는 편도 좋습니다.
그런 상황이 아니라면 반드시 마크업과 CSS의 이해를 Javascript의 이해에 앞서 익혀야 합니다.
앞으로 CSS3에서는 정말 많은 기능을 구현할 수 있습니다.(이전에 Javascript로 삽질했던 것들이 점차적으로 브라우저에서 NATIVE하게 해결됩니다)  이런 상황에서 html/css를 별개로만 생각하면 곤란하겠죠?

두번째. 최적화
이것은 앞서서 이미 포스팅을 썻는데요.
http://nundefined.tistory.com/3
http://nundefined.tistory.com/6
http://nundefined.tistory.com/7

다시 말씀드리고 싶은 사항은 한가지 입니다.
웹의 구현방식의 변화와 함께 최적화해야 할 중요한 부분도 Server-Side에서 Front-End로 이동하고 있습니다. 최적화를 해야 하는 대상이 이미지(그래픽),물리적인방법,웹서버,웹스크립팅,스크립트난독화 등 이런 부분을 과거의 성능엔지니어라는 사람들이 처리 할 수 없습니다.
다양한 직군의 개발자가 각각해야할 것들이 있으며, 이를 전체적으로 컨트롤하고 컨설팅할 수 있고 해야하는 사람은 JavaScript개발자이며, 반드시 그래야만 합니다.
최적화를 공부하세요 ^^

세번째. JavaScript CORE영역의 이해
JavaScript는 사실 중요하지 않고 심지어 JAVA의 스크립트언어로 이해되는 경우도 있습니다.(전혀 그렇지 않죠)
JavaScript  OOP개발이 가능하기도 합니다.어떻게 보면 진정한 객체지향 언어 입니다.
하지만 유연함과 자유로운 특징으로 인해, 비 JavaScript전문가도 개발이 가능합니다. 무슨말이냐면 정확하고 언어의 이해가 깊지 않아도 소위 돌아가는 코드 구현이 가능합니다.
사실은 OOP중심의 언어적인 특징을 잘 살린 JavaScript구현결과를 보는 것은 매우 어렵습니다.
(이런 것이 어렵다면 프레임워크를 사용하는 것만으로도 많은 JavaScript장점을 살릴 수 있습니다)

그럼 JavaScript에서 core란 무엇일까요? <core api모 그런건 아닙니다>
  • EcmaScript이 의해
  • NodeJS 와 같은 서버사이드에서의 JavaScript의 활용
  • 자바스크립트 렌더링 엔진의 이해(브라우저에서 사용중인)
  • Ojbect,Function의 이해
  • 브라우저 호환성이슈에 대한 이해(이것은 중요한 경쟁력입니다. 이것을 버리지 마세요!!)
  • Pattern의 이해(잘못된 패턴을 고르고, 좋은 패턴의 장점을 활용한 코딩 기법)

이상 3가지를 다시 한번 정리해보겠습니다.
  • 마크업과 CSS를 이해하자
  • 웹최적화에 대한 이해를하자
  • 자바스크립트 CORE영역을 이해하자

이것이 제가 생각하는 JavaScript 엔지니어(Front -End Engineer)의 스킬셋이자 역량입니다.
하지만 개개인 마다 생각하는 가치는 모두 다르겠죠. 제가 생각하는 부분을 참고하여 스스로의 스킬셋과 역량셋을 만들어 나가시면 좋겠습니다.



니가요 HTML5_JS_CSS AJAX, ECMAScript, Function, javascript, nodejs, Object, UI 개발자, 역량

JavaScript 특징의 이해 - JS의 중심 Function 살펴보기(2)

2011.02.27 08:09
Callback Function
먼저 아래의 예제를 살펴봅니다.

function execCode(callback){
//함수내용이 어쩌구 저쩌구
callback();
//이러쿵 저러쿵
}
function makeToy(){
//이리저리 주절주절
}

execCode(makeToy);

위의 예제에서 makeCode함수를 callback함수라고 합니다.
이러한 callback함수는 어디에 사용될까요?

첫번째로 event listener로 사용됩니다.
document.addEventListener("click",eventFunction(),false);
이벤트가 실행될때 어떠함수가 실행되도록 지정하는 것도 일종의 callback함수입니다.

두번째로 Timeout()가 있습니다.
var testFun=function(){
//blah blah....
}
setTimeout(testFun,200);

위의 예와 같이 timeout 인자로 들어가서 동작되는 것도 callback함수 입니다.

Function Hoisting
이것은 함수의 scope와 관련이 있습니다.
함수는 크게 함수리터럴과 함수선언문(declaration)이 있습니다.(지난번 포스팅내용)
함수 실행문이 만약 함수 선언문 보다 앞서서 호출되는 어떻게 될까요? 일반적으로 문제가 없이 동작이 됩니다. 정확히는 함수선언문인 경우에만 오류없이 동작합니다. 함수선언문에서 이러한 이유는 현재의 scope내에서 함수정의문이 가장 위로 올라가기 때문 입니다. 따라서 함수를 어디에 정의해도 동일한 scope내에서는 그 함수를 어디에서 호출하던지 상관 없습니다.

solvin();   //잘 동작합니다. 함수선언문인 경우 hoisting되었기 때문입니다.
nayun();  //오류가 납니다.
function solvin(){}
var nayun = function(){}


하지만 함수 리터럴은 오류가 발생할 수 있습니다. (ie브라우저인경우 함수리터럴인 경우에도 함수이름이 정의되어 있다면 함수선언문과 같이 함수정의를 scope상단으로 이동시킵니다)
여튼 이러한 이유로 함수선언문이 더 일반적인 사용법이라고 볼 수도 있습니다.

위와 같이 함수선언문이 scope내의 맨 위로 올라가는 것을 function hoisting이라고 합니다.
너무 낯선 개념은 아니고, 사실은 자바스크립트 개발자는 이러한 현상이 자연스럽게 생각될 수 있는 것 같습니다.

Parentheses
이것은 보통 실행함수라고 아래와 같은 형태를 가집니다.
function(){//body code}()
위 코드에서 뒷부분 () 을 영어로 parentheses라고 합니다.위의 예는 특별한 경우이고 일반적으로 아래의 경우도 같습니다.
call();
이것은 연산자라는 사실을 기억해야 합니다.
만일 ()를제외하고 함수를 부르면 어떻게 될까요? 이것은 함수를 실행하는 것이 아니고 함수자체를 전달하는 것입니다.  보통 이벤트 핸들러에 함수자체를 전달하기도 하죠

document.onclick = iamfunction;


커링(currying)
커링은 자바스크립트의 여러가지 특징으로 인해 함수를 호출하는 특별한 방법이라고 볼 수 있습니다.
full application이라는 것과, Partial Application을 간단히 이해해야 합니다.

아래의 예제에서 2가지 사례를 볼 수 있습니다.(예제는 Javascript Patterns 라는 책의 80page를 참고)
function sum(x,y) {
 return x+y;
}

//full application
sum.apply(null,[3,4]);

//partial application
var newadd = sum.partialApply(null,[3]);
newadd.apply(null,[4]); 
위의 예제의 full application의 경우에는 apply라는 함수를 사용해서 3,4라는 인자를 받아서 사용하고 있습니다. apply를 일반적인 형태로 사용한 것 뿐인데요. 이런 경우를 full application이라고 부릅니다.

두번째의 경우 한번에 실행 해야 할 것을 나눠서 실행하고 있습니다. 그만큼 파라미터의 개수가 반으로 줄었습니다.이러한 패턴을 partial application이라고 부릅니다.

마치 아래와 같이 동작합니다.
sum(3)(4) //parentheses가 2번실행된 것 같이.

예제에 중요한 포인트는 partialApply라는 함수가 보입니다.
이것이 이처럼 파라미터를 나눠서 실행가능하게 동작해주고 있는데요, 이런 것이 가능하도록 partialApply라는 함수를 구현해 두고 사용하면 됩니다.
이러한 함수의 형태는 인터넷에서도 어렵지 않게 찾을 수 있습니다.

http://westhoffswelt.de/blog/0053_currying_functions_in_javascript.html
http://extralogical.net/articles/2010-08-21-currying-javascript/

대부분 비슷한 방법으로 curry함수를 구현하게 됩니다.
마지막으로 partial application과 currying라는 용어가 혼돈될 수 있는데요, 이것은 굳이 어렵게 구별할 필요는 없는 것 같습니다. 일반적으로 currying은 파라미터의 개수가 한정되어 있지 않습니다. 그렇게 구현하면 되겠죠?
하지만 꼭 그런것만은 아닌것 같습니다.
일반적으로 currying이라는 것은 partial application을 다루는 방법으로 생각하는 것이 좋겠습니다.

다음편에는 아래 내용을 작성 하겠습니다.
- Function Scope(Scope chain이란?)
- call object
- Closure 이해하기

참고
JavaScript Patterns
Javascript The Definitive Guide
자바스크립트 핵심 가이드

니가요 HTML5_JS_CSS AJAX, Callback, currying, hoisting, javascript function, jindo, JQuery, partial application, 자바스크립트, 커링

JavaScript 특징의 이해 - JS의 중심 Function 살펴보기(1)

2011.02.14 00:43
JavaScript(이하 JS)라는 언어는 다른 언어와 달리 몇가지 특징을 가지고 있습니다. 그런 특징들은 사실 UI를 개발하는데 매우큰 걸림돌이 되지는 않는것 같습니다. 이는 언어적인 자유도가 상대적으로 높은 JS에서 잘못된 패턴을 허용하기 때문이기도 합니다.
몇가지 언어적인 특징을 이해하기 앞서 가장 중요하다고 생각되는 Function , Object , Scope등을 앞으로 단계적으로 작성해보려고 합니다. 저도 이기회에 몇가지 참고할 수 있는 책과 웹을 탐독한 후 머리속에 정리되는 내용을 적어보려고 합니다. 어쩌면 짜집기식의 내용취합일 수 도 있지만 그래도 몇가지 책에서 이해하기 어려운 부분을 쉽게 작성해보려고 노력해 보겠습니다 ^^

Function - 삼형제
Function의 그 종류부터 알아보겠습니다. 정확히 딱 3가지뿐입니다.
첫번째 --> var fc = new Function();
두번째 --> function fd(){/* ...*/}
세번째 --> var fl = function(){/* ...*/}

어떻습니까? 간단하지 않습니까? 아닌가요? 사실은 비슷하기도 합니다. 당연히 사용하려는 목적(function은 기능이라는 뜻이자나요)은 동일합니다.

첫번째 var fc = new Function();
이것은 Function Class라고합니다.(어렵죠?) 생성자 함수라고도 합니다. 바로 말씀드리면 잘 사용하지 말아야할 방법입니다. (그러니 전문가도 아니고 잘 모르겠다면 안쓰면 됩니다).
심지어 Function() 안에 prameter와 함수내용을 콤마로 구분해서 (문자열의 경우 escape처리까지) 작성해야 하니 보기도 상당히 난감할 것 입니다.
몇가지 특징을 추가로 나열하면 다음과 같습니다(특징이 모두 단점이군요)
- 메모리 사용이 매우 좋지 않음
- Dynamic하게 실행될때마다 매번 생성된다(비효율)
- OOP개념의 프로그램이라고 볼 수는 있다
- 재귀호출을 지원할 수 없다(아래 두번째 방법도 이건 마찬가지 입니다)
- Scope 가 애매모호 할 수 있다(실제 실행되는 장소에 따라서 local,global등이 결정됩니다)


두번째 function fd(){/*.....*/}
이것은 가장 전형적인 함수의 모습 그 자체 입니다. Function Declarations라고 합니다. 쉬운 한국말로는 함수문장 이라고 합니다. 함수문장이라.. 말그래도 함수라는 이야기겠죠?
우리는 이런 것을 가장 흔하기 사용합니다.
사실 이것은 아래의 것과 같다고 볼 수 있습니다
같다 ==> var fd = function fd();

JS의 함수는 모든 것이 value라는 개념이라고 보시면 됩니다.(함수는 객체라고도 합니다. 이것도 분명히 맞다고 봅니다) 아무튼 우리는 이것을 가장 많이 별 걱정없이 사용하면 됩니다.

세번째 var fl = function(){/* ...*/}
이놈은 가장 골치아픈 놈이기도 합니다. (함수에 이름도 없군요). Function literal 한국말로는 함수리터럴(그렇게 그냥 읽습니다)이라고 합니다. 또는 Function Expression 이라고도 합니다.(함수표현식이라고 할 수 도 있군요)
전 함수리터럴 이라고 부릅니다. 이놈의 특징은 무엇보다 변수 fl에 함수를 저장하고 있다는 것입니다.
앞서 이야기 했지만 사실 모든 함수는 value('값')임으로 이표현은 당연하기도 합니다. 이처럼 함수는 변수에 저장할 수도 있고, 다른함수에 전달인자로 사용 할 수도 있습니다. 아 다른 함수의 리턴으로 사용할 수 도 있습니다.
함수리터럴을 설명하다보면 함수의 특징이 모두 다 나오게 됩니다. 일단 종류 설명에서는 여기까지 하고 나머지는 뒤로 미루겠습니다.
한가지 함수리터럴에서 함수의 이름을 붙일 수는 있습니다. 하지만 이것은 좋은 방법이 아닙니다. 왜냐면 함수의 Hoisting 이라는 특징이 있는데(IE에서는 이런 부분에서 오류가 발생 할 수 있다고 합니다) Hoisting이라는 것은 간략히 말해서 함수문장(Function Declarations)종류만 함수정의를 실행영역 뒤에 두어도, scope상단으로 이동하는 특징으로 인해 오류가 생기지 않는 다는 것입니다.(아 이해 가십니까? 차후 자세한 설명을 하겠습니다)
아무튼 함수리터럴에서 함수이름을 사용하는 것을 자제하면 됩니다.
var fl = function funName(){}   (x)
var fl = function(){}   (o)



Function - 객체입니다
JS에서 함수는 객체(Object)입니다.
객체는 무엇인가요? 프로퍼티(Properties)와 메소드(Method)가 있습니다. 정말 함수도 프로퍼티와 메소드가 있을까요? 그렇습니다. 존재합니다.
length, prototype, arguments 라는 프로퍼터가 있습니다.(몇개 안되는 함수의 프로퍼티(속성)임으로 꽤 중요한 특징을 담고 있겠습니다)
apply() , call(), length() 는 함수가 가지고 있는 메소드 입니다. 메소드라는 용어는 객체상에서 호출되는 함수라고 생각하면 됩니다.

몇가지 간단히 추가로 알아보겠습니다
전달인자의 개수를 판단하는 arguments.length()와 다릅니다. 함수의 length()는 argument.callee.length()로 접근하고 원래 함수가 정의된 인자의 개수를 판단할 때 사용합니다.

call()과 apply()는 함수가 실행되는 시점의 Scope을 특정 객체의 영역안으로 지정하는 효과를 얻을 수 있습니다
예를 들어 아래와 같은 식입니다.
var objectEx = {
  var funInObj : function(){},
}

objectEx.funInObj()로 호출하는 것은 objectEx객체의 메소드로 호출되는 것입니다. 그런에 이런 경우 this의 scope는 Global입니다.
this Scope를 객체로 제한하려면 아래와 같이 해야 합니다.
funInObj.apply(objectEx , ["arg"]);

이와 같은 경우 함수의 몸체안에서의 scope는 objectEx객체를 가르킵니다. call과 apply의 차이는 두번째 인자를 배열로 처리가 가능한지 아닌지의 차이만 존재 합니다.
그리고 apply의 첫번째 인자를 null로 주는 경우 this Scope는 Global을 가르킴으로 주의 해야 합니다.

함수는 객체라고 하는데요, First Class Object라는 용어로도 쓰입니다(Javascript Patterns라는 책에서 정의되었더군요) 위에서 이야기 했지만 몇가지 함수의 특징을 다시 정리하면 아래와 같습니다.
- 런타임과정에서 생성될 수 있다
- 다른 함수의 인자로 사용이 가능, 다른 함수의 리턴값으로 사용이 가능하다
- 변수로 지정할 수 있다.
- 배열의 프로퍼티로 지정 가능하다(a[0] = function(){ })
- 객체(object)의 프로퍼티로 지정 가능하다

이런 특징만으로 여러가지 형태의 패턴을 가진 함수가 존재 합니다. 이런 패턴은 여러가지 장점을 가질 수 있으면, 잘 알려진 방법도 있지만 매우 특이한 방법도 존재 합니다.
이점은 다음편에 작성해보도록 하겠습니다.


함수의 Scope
함수의 Scope는 간략히 아래와 같은 특징이 있는것 같습니다.
함수의 이름은 함수가 정의되는 순간에 Global scope가 됩니다. 하지만 함수안의 인자,변수등은 모두 지역변수로 지정됩니다.
다시말해, 자바스크립트에서 함수는 실행되는 영역이 아니고, 정의되는 영역에서 수행이 됩니다.
중첩된 함수에서 함수의 Scope는 복잡하고 재미있는 상황이 발생 합니다.
중첩된 함수라는 것은 함수안에 함수가 존재하는 형태인데요. 중첩된 함수(inner Function)가 자신의 부모함수의 변수를 사용하는 경우(중첩된 함수는 부모의 모든 지역변수를 사용할 수 있습니다)에 이를 리턴하는 경우에 부모의 변수가 함수가 종료되어도 계속 사용이 됩니다. 
이것을  closure라고 합니다(클로저)
일반적인 함수의 종료후에 그 변수가 scope chain에서 사라지는 것이여야 하는데, 이런것에 대한 약간의 예외 상황이 발생하는 것입니다.
scope chain에 대해서는 추가적으로 아래의 url에서 더 자세한 정보를 다루고 있습니다.
http://dev.naver.com/tech/ajaxui/ajaxui_2.php#a_2_2 <정말 정리가 잘되어 있습니다>
함수의 scope에 대해서 제가 더 추가적인 이해를 통해 설명을 드릴 수 있기를 기대해 봅니다 ^^


함수의 몇가지 추가사항
전달인자
전달인자는 정의된 함수의 그 개수보다 더 많아도 되고, 적어도 됩니다. 어떤 경우에도 오류를 발생 하지 않습니다. 많다면 무시되고, 적다면 undefined입니다.

name 프로퍼티
함수는 name이라는 프로퍼티가 있습니다.
function funName(){}
funName.name // funName 이 리턴

이것은 디버깅하는 경우 유용할 수 있으니 참고하시기 바랍니다.


다음에는 함수의 나머지 특징(여러가지 사용 예)에 대해서 작성해보도록 하겠습니다. 아마도 이런것이 될 것 같습니다.
  • callback()
  • hoisting
  • 즉시실행함수
  • 커링
  • 자기호출함수
<얼마나 깊이 있게 작성 하게 될지는 모르겠네요 ㅎㅎ>

마지막으로 블로그 작성이 꾸준하지 않으면 얼마나 어려운지 알게 되네요 ㅎㅎ

참고한 내용
http://rx4ajax-jscore.com
책 - JavaScript Patterns
책 - 자바스크립트 핵심가이드(The Good Parts)
책 - Javascript Definitive Guide
기타 웹상의 내용들과 어딘지 모르는 머리속 기억들..


니가요 HTML5_JS_CSS AJAX, Function, javascript 특징, patterns, 자바스크립트, 자바스크립트 함수, 패턴

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

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