Kendo UI Framework


참조 URL
  1. http://www.kendoui.com/
  2. http://demos.kendoui.com/
  3. http://demos.kendoui.com/web/overview/index.html
  4. http://demos.kendoui.com/mobile/overview/index.html#/
  5. http://demos.kendoui.com/web/spa/index.html
  6. http://demos.kendoui.com/web/validator/index.html



 Telerik사에서 공개한 HTML5 UI Framework다. 다른 프레임워크와 특이한 점은 DataSource를 객체를 통해서 다양한 데이터 종류를 하나의 일관된 방법으로 핸들링 하도록 제공하고 있다.











코너스톤 프리엠워크 cornerstone-framework


참조 URL
  1. http://blog.cornerstone.sktelecom.com/post/39027114036
  2. https://github.com/cornerstonewdk/cornerstone-framework
  3. http://blog.cornerstone.sktelecom.com/post/43817216270/1
  4. http://blog.cornerstone.sktelecom.com/archive



 

 SKTelecom에서 지원하고 있는 Client side 개발 프레임워크이다.


jQuery, Underscore.js, Backbone.js, Require.js, Mustasche.js, Twitter Bootstrap을 조합하여 만든 프레임워크이며 웹앱과 대규모 분산 개발 환경에서 개발할 수 있도록 조율되어 있다.











javascript json 파싱 - 하위 브라우저 호환


참조 URL
  1. http://www.json.org/js.html
  2. https://github.com/douglascrockford/JSON-js
  3. https://github.com/douglascrockford



 일부 하위 버전의 브라우저에서는 json.stringify()과 json.parse()를 지원하지 않아 에러가 발생할 수 있다.  이때 Douglas Crockford님이 만들어 배포한 json2.js 파일을 다운 받아 HTML 페이지에 설치해 주면 Serialization과 DeSerialization을 정상적으로 동작하게 된다.  아래 json2.js파일을 다운 받을 수 있게 올려 놓았으니 필요하면 다운 받아 사용하기를 바라며 고마움을 Douglas Crockford에게 해주시기를 바랍니다.




json2.js


json2.zip










최신 jQuery에 대한 질문과 답변

Latest jQuery interview questions and answers


참조 URL
  1. http://www.codeproject.com/Articles/618484/Latest-jQuery-interview-questions-and-answers



 코드 프로젝트 사이트의 'jQuery By Example'의 저자가 작성한 문서다. 이미 많은 부분을 알고 있을 것이라 생각이 들지만 기초를 다시 한번 확인하자는 취지에도 읽어 보면 좋은것을 얻을 수 있을 것이다. 영어를 잘 하지도 못하고 발로 직역해야 해서 일부의 원문과 링크만을 알려 드린다. 관심 있으면 링크로 찾아 들어가는 수고까지 해주면 좋겠다. 노력하는 자에게 선물이 있을 것입니다.



Below is the list of latest and updated jQuery interview questions and their answers for freshers as well as experienced users. These interview question covers latest version of jQuery which is jQuery 2.0. These interview questions will help you to prepare for the interviews, for quick revision and provide strength to your technical skills. 

Q1. What is jQuery?

Ans: jQuery is fast, lightweight and feature-rich client side JavaScript Library/Framework which helps in to traverse HTML DOM, make animations, add Ajax interaction, manipulate the page content, change the style and provide cool UI effect. It is one of the most popular client side library and as per a survey it runs on every second website.

Q2. Why do we use jQuery?

Ans: Due to following advantages.

  • Easy to use and learn.
  • Easily expandable.
  • Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
  • Easy to use for DOM manipulation and traversal.
  • Large pool of built in methods.
  • AJAX Capabilities.
  • Methods for changing or applying CSS, creating animations.
  • Event detection and handling.
  • Tons of plug-ins for all kind of needs.


..... 이하는 원문에서 보시기 바랍니다.

http://www.codeproject.com/Articles/618484/Latest-jQuery-interview-questions-and-answers


















jQuery UI + jQuery Tool UI


참조 URL
  1. http://jqueryui.com/
  2. http://jquerytools.org/


 요즘 웹 개발의 트랜드가 Twitter에서 배포하기 시작한 BootStrap을 사용하여 개발하는 추세가 이전보다 많아 지고 있으며, BootStrap를 더욱 확장하여 제공하는 유,무료 사이트 들도 많이 존재 하고 있다. 그렇지만 기존에 jQuery와 일반 CSS로 개발된 사이트를 한번에 엎어서 개발 할 수 없다면 jQueryUI나 jQuery Tool UI가 대안이 될 수 있을 것이라 소개한다.

















Frontend Development Tools

( 웹 개발 툴 소개 )


참조 URL
  1. https://github.com/codylindley/frontend-tools
  2. https://github.com/codylindley/simple-frontend-boilerplate
  3. https://github.com/codylindley/backbone-boilerplate



 Cody Lindley (codylindley)라는 분이 GutHub에 "Landscaping With Frontend Development Tools"라는 제목으로 올려진 글을 소개 하고자 한다. 이 페이지는 제목 그대로 웹 개발에서 UI에 필요한 개발 도구들에 대한 분류와 링크를 공유하고 있다. 적당한 프레임웍을 개발하고자 한다면 이 페이지에서 소개한 링크를 따라가 보면 전체 적인 개발 프레임을 구성하는데 도움을 받을 수 있을것이라 생각한다.


 예를 들자면 필자는 이전까지는 Script Loader에 대한 라이브러리를 Requirejs나 LazyJS에 대하서만 알고 있었는데 아래와 같은 리스트를 통해서 더 많은 정보를 알게 되어 검토하지 못했던 사안에 대해서 좀더 많이 생각할 수 있게 되었다.


Module/Script Loaders (Javascript Loaders Comparison)


  그렇지만 시간과 여유가 만족 스럽지 못하다면 소개된 여러 라이브러리 중에서 커뮤니티가 활성화된 라이브러리를 사용하는 것도 하나의 방법일 수 있겠다. ^^




jQuery++


참조 URL
  1. http://jquerypp.com/



 jQuery를 부족한 부분을 도와주는 핼퍼 라이브러리를 소개하고자 한다. jQuery++ 라이브러리는 jQuery UIjQuery Tools와 같은 UI를 지원하는 프로젝트는 아니며 대신에 jQuery 1.8이상에서 지원하지 않는 저 수준 유틸리티를 지원한다. AMD 모듈 로딩 방식도 지원하고 있어서 Requirejs에서 동적으로 가져올 수 있다. 부분적으로 선택하여 사용할 수 있도록 아래와 같이 나눠서 웹 페이지에 로딩할 수 있다.


DOM HELPERS - faster and easier DOM manipulation with:

EVENTS - listen to special events with:








zeptojs

모바일에서 jQuery의 대안


참조 URL
  1. http://zeptojs.com
  2. http://zeptojs.com/#platforms - 호환 브라우저


 jQuery 문법에 호환되는 라이브러리로 9.7k의 용량을 가지고 있다. IE를 제외한 대부분의 브라우저에서는 호환이 되고 있으므로 모바일 전용 페이지를 만들때에는 고려해보면 좋을 것이다.


 zeptojs는 jQuery를 대체하기 위해 나온것은 아니며 모바일에 특화된 성격을 같고 있으며 jQuery에 익숙한 사용자들이 쉽게 접근 가능 하도록 하고 있다. 아래 '코드1'은 zeptojs의 예제  코드다. 


[코드1] zeptojs 예제 코드


 selector 문법이 jQuery와 같아 따로 학습 곡선없이 사용할 수 있을 것이다. 아래 '코드2'는 ajax를 사용법이다. 중요하다고 생각되어 한번 더 살펴 본다.


[코드2] zeptojs의 ajax 예제 코드


 일반 웹 페이지가 아닌 제한된 요건(예 모바일 전용 사이트)에서 속도가 중요시 된다면 한번 고려해 볼 수 있는 라이브러리라 할 수 있겠다.





ES5-shim.js
구형 브라우저에서 ECMAScript 5를 지원하도록 해주는 라이브러리 )

참조 URL
  1. https://github.com/kriskowal/es5-shim
  2. http://ko.wikipedia.org/wiki/ECMA스크립트
  3. http://www.ecmascript.org/
  4. http://www.ecma-international.org/publications/standards/Ecma-262.htm
  5. http://kangax.github.io/es5-compat-table/ ECMAScript 5 호환 브라우저 테이블


 어디서 들었는지는 모르지만 현재 나는 ECMAScript 6 버전을 재정하고 있는줄 알고 있어서 왜 지금에서야 ES5가 나오는지 이해를 못하고 있다가 'www.ecmascript.org'에서 확인을 하고 나서야 내가 잘못 생각하고 있다는 것을 알게 되었다. ES5-shim.js는 ES5에서 새로 추가되는 map, filter, every, some, reduce와 같은 메소드를 하위 브라우저에서도 사용할 수 있도록 확장시켜준다. 


 'https://github.com/kriskowal/es5-shim/blob/master/README.md' 파일에 보면 추가된 메소드를 자세하게 확인 할 수 있을 것이다.













HTML5 Cross Browser Polyfills


참조 URL
  1. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
  2. http://html5please.com/
  3. http://remysharp.com/2010/10/08/what-is-a-polyfill/ - Polyfill 에 대한 용어 정리
  4. http://blog.naver.com/PostView.nhn?blogId=bigdata1907&logNo=110153835621 - Polyfill 에 대한 용어 정리


 HTML5에서 추가되는 기능에 대해서 하위 브라우저에서도 사용할 수 있도록 지원해주는 라이브러리를 정리해 놓은 사이트가 있다. Modernizr의 wiki인 'HTML5-Cross-Browser-Polyfills'에서 대안 리스트를 확인 할 수 있다.


 예로 HTML5를 지원하는 브라우저에서는 localStorage를 사용할 수 있는데 IE7에서 대체할 수 있도록 지원되는 라이브러리 리스트를 아래와 같이 알려 주고 있다.


 이 중에 개발 범위나 지원 브라우저를 고려해 선택해서 테스트를 해 보면 될 것이다. 구글링을 하지 않아도 한곳에서 정리가 되어 있으니 고마워 해야 하겠다. 빠른 시간안에 모든 브라우저가 HTML5를 지원하였으면 하는 바램이다.



 

[그림1] WebWorker과 WebSocker의 Polyfill



+ Recent posts