ExtJS 개발하기 위해 선행되는 지식들

넥스트리 포스팅했던글을 다시 정리하여 올리다.
사내 제품개발시 ExtJS를 사용할 일이 있어 내용을 보다가 해당사이트(www.extjs.com)을 번역하기로 맘먹었다.



매뉴얼번역: http://extjs.com/learn/Manual:Resources

ExtJS로 개발하기 위해서는 다음과 같은 것들이 필요하다. 반드시 읽어 볼것... 이미 앞의 EXTJS 시작하기 에서  맛뵈기(?)로 보았으니 이를 개발하기 위한 준비물들이 필요하겠다.

일반적인 JavaScript Learning Guide

참고사이트

1. Mozilla Developer Center: Core JavaScript 1.5 Reference Manual
2. Yahoo UI개발자인 Douglas Crockford's JavaScript
3. Yahoo Developer Network : YUI Theater  ( 더글라스 크록포드의 동영상 강의 수록)
4. Peter-Paul Koch의 QuirksMode
5. http://home.cogeco.ca/~ve3ll/jstutor0.htm

그외 볼만한 사이트(Dead Trees)

1. JavaScript: The Definitive Guide by David Flanagan
2. Pro JavaScript Techniques by John Resig
3. Ajax and REST Recipes by Christian Gross
4. ppk on JavaScript by Peter-Paul Koch
5. Professional JavaScript for Web Developers by Nicholas C. Zakas
6. Ajax Patterns and Best Practices by Christian Gross
7. Dynamic HTML by Danny Goodman
8. Head First Design Patterns by Freeman & Freeman

 

OO JavaScript 참조사이트

1. How to achieve private, public, and privileged members in JavaScript, by Dustin Diaz.
   : Method scoping에 대한 좋은 설명
2. OOP in JS, Part 1 : Public/Private Variables and Methods, by Gavin Kistner.
   : Scoping 및 prototyping에 대한 샘플
3. A JavaScript Module Pattern, by Eric Miraglia in YUI Blog.
   : 더글라스 크록포드가 얘기한 module pattern에 대한 설명
4. Again with the Module Pattern - reveal something to the world, by Christian Heilmann.
   : 모듈패턴
5. JavaScript for Object-Oriented Programmers (Appendix B of the book AJAX in Action).

CSS 참조사이트

• CSS 2.1 specifications
• CSS contents and browser compatibility
• Position is Everything (PIE)
• CSS-Discuss mailing list archive
• css-discuss Wiki
• CSS Examples
• 53 CSS-Techniques You Couldn't Live Without
• CSS Tutorials
• Layout Grid Bookmarklet

DOM

• QuirksMode.org, Peter-Paul Koch's website.
  : 웹2.0 표준에 대해 샘플 소스 및 팁을 보여줌 유명한 사이트
• DOM Core Javascript bindings, from W3C's Document Object Model (DOM) Level 2 Core Specification.
• HTML Javascript bindings, from W3C's Document Object Model (DOM) Level 2 HTML Specification.

 

 

그외 기술

Yahoo! User Interface Library (YUI)

Ext JS 은 yui-ext에서 부터 시작되었다. 아래 사이트에서 YUI에 대해서 좀 봐두는것도 좋을지도..

1. YUI Library
2. ydn-javascript: Yahoo! User Interface Library Group
3. YUI Blog

JSON 관련

• The official JSON website.
• JSON for the masses, by Dustin Diaz.
• Mastering JSON, by Patrick Hunlock

 

 

Platform-Specific Resources

ExtJS를 서버사이드 프레임웍으로 사용한 녀석들.....

PHP

대표적인 샘플코드는 모두 PHP코드로 되어 있는 걸 보면  PHP에서 개발하기 가장 쉬운것 같음.
ExtJS 내장 PHP프레임웍 :  Qcodo Development Framework

Java

Direct Web Remoting (DWR) : http://getahead.org/dwr

.NET

• AjaxPro 는 .Net 을 이용한 서버사이드 Ajax
• Jayrock  :  .Net에 JSON / JSON-RPC 를 이용 
• Json.NET  : .Net에서 JSON을 쓰게 만들어주는 라이브러리 (PHP의 toJSON()이나, Struts의 JSON과 같은건가 보다... ㅡ.,ㅡ; ) 

Python

• simplejson
• python-json Python JSON Implementation.
• demjson
• python-cjson
• Choosing a Python JSON Translator
• cheeseshop

Django

• Django's
• Ext+Django Forms
• Django JSON Reader

Ruby on Rails

Ext plugin - ROR는 내장 플러그인으로 작동하므로 gem을 이용해 받으면 되겠다...  (찾기가 더 힘드네.. ㅡ.,ㅡ;)

ColdFusion

• CFJSON
• ColdFusion 8
• Coldfire
• Manual:Resources:ColdFusion

IBM Lotus Notes/Domino

IBM's Lotus Notes/Domino : IBM 머찌다라는 말만..

 

 

통합개발툴(IDE)

Eclipse Based IDEs

Eclipse 은 오픈소스 통합개발툴 (among other things!)이다. ExtJS개발을 위해 이클립스를 사용하기 위해서는 먼저 자바스크립트 사용할수 있는 플러그인을 설치해야 한다.
아래의 플러그인을 추천한다.

• Aptana - JavaScript, HTML, CSS, PHP languages, FTP/SFTP 지원, RIA/Web2.0등 Ajax 관련 프로젝트에 적합 (느리다는 단점이 있음.. ㅠ.,ㅠ)
  
• Spket - JavaScript, XUL, SVG, Laszlo, Silverlight,등 각 모듈 라이브러리 지원(http://blog.naver.com/techbug/150024518549 )
  
• JSEclipse - JavaScript

위에 열거된 플러그 인들은 각자 자바스크립트 에디터를 포함하고 있다.  자바스크립트를 열때 "Open with"로 열어서 사용하도록...플러그인을 선택할때는 코드 assist를 지원하는지 확인해 봐야 할듯

 

Aptana + Spket + ExtJS(강추..)

• Aptana다운로드 http://www.aptana.com/download_all.php
• Aptana > Help > Software Updates > Find and Install > Search for new features to install > New remote site.. > "http://www.spket.com/update/"
• Spket설치 ( Spket IDE Tutorial )
  
  1. Window > Preferences > Spket > JavaScript Profiles > New > "ExtJS"
  2. "ExtJS" 선택하고  "Add Library"에서 "ExtJS"선택
  3.  "ExtJS" 선택하고 "Add File", 에서 "./ext-2.0/source" 디렉토리에서 "ext.jsb"를 선택
  4. ExtJS profile을 디폴트로 선택 
     
  5. Aptana 플러그인을 새 시작
     
  6. 새로운 JS파일을 만들면 ExtJS의 Code completion options를 볼수 있다.
     

Spket IDe

• Homepage
• Ext JS demo
• Discussion in Ext JS forums

AptanaIDE

• Aptana는 상당히 매력적인 플러그인다. 대부분의 Ajax Library를 제공한다.

 

 

 

다양한 디버깅툴

Firebug (FF에서 강추)

Firebug는 Firefox에 애드온되어 작용하는데 웹페이지의 내용(CSS,HTML,Javscript등)을 실시간으로 볼수있는 상당히 매력적인 도구이다.

• Firebug

Screencasts

• Debugging JS with Firebug
• Hewitt's screencast
• Video Tutorials on how to use the Firebug Extension
• Firebug 1.0 Beta Screencast

Tutorials

• Javascript debugging with Firebug

다른 브라우저에서 Firebug console을 이용하기

• Firebug Lite

HTTP Trafic Viewer

피들러는 서버와 PC사이의 HTTP 트래픽 로그를 볼수 있는 디버깅 프록시이다. IE전용이나 Firefox의 proxy고급옵션에서 사용할수 있으며 자신이 원하는대로 필터링 하여 사용할수 있다.

• Fiddler

MS Script Editor

• MS Script Editor

IE Web Developper

IE WebDeveloper는 인터넷 익스플로러 애드온 프로그램이다. 

• IE Web Developper

Testing Data Generator

SQL,CSV,xml, excel등 테스트 데이타를 생성해준다.

http://www.benjaminkeen.com/software/data_generator/

YSlow

YSlow는  rules for high performance web sites를 기반으로 현재 페이지의 속도를 분석해준다. YSlow 는 Firefox 애드온 프로그램으로 인기가 있다.Firebug web development tool.

• Performance report card
• HTTP/HTML summary
• List of components in the page
• Tools including JSLint

http://developer.yahoo.com/yslow/

DebugBar - IE 플러그인 (강추)

• DOM Inspector,
• HTTP Inspector
• Javascript Inspector and Javascript Console
• HTML Validator
• And many more features

http://www.debugbar.com/?langage=en