블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 달린 댓글

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



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

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


일반적인 JavaScript Learning Guide
Edit section

참고사이트
Edit section

  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)
Edit section

  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).

DOM

 

 

그외 기술

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 관련

 

 

Platform-Specific Resources

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

PHP
Edit section

대표적인 샘플코드는 모두 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과 같은건가 보다... ㅡ.,ㅡ; ) 

Ruby on Rails

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

IBM Lotus Notes/Domino

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

 

 

통합개발툴(IDE)
Edit section

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를 볼수 있다.

AptanaIDE

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

 

 


 

다양한 디버깅툴

Firebug (FF에서 강추)

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


Screencasts


Tutorials


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

HTTP Trafic Viewer

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

MS Script Editor

IE Web Developper

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

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


'Scripter > EXTJS' 카테고리의 다른 글

Extjs 기본 DomQuery  (0) 2008.02.18
Extjs 초보자를 위한 애플리케이션 레이아웃(2.02)  (8) 2008.02.17
Extjs scope에 대한 고찰  (2) 2008.02.17
ExtJS Tutorial  (1) 2008.02.17
ExtJS 시작하기  (8) 2008.02.17
ExtJS 개발하기 위해 선행되는 지식들  (7) 2008.02.15
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2010.04.06 22:46 꼼즈  댓글주소  수정/삭제  댓글쓰기

    아나~ 뭐 이리 볼게 많아.. 짜잉나게.. ㅠ.ㅠ
    하튼 거맙다.. 떵~ 니 게시물 다 읽어줌마~~~~~ 냐하핫~~!

  2. 2010.04.06 22:47 꼼즈  댓글주소  수정/삭제  댓글쓰기

    아... 여기도 오오구나... ㅠ.ㅠ
    오오~~~ 마이 갓~! (지굽다.... 이 생활이...)

  3. 2010.04.06 22:50 꼼즈  댓글주소  수정/삭제  댓글쓰기

    모든 링크를.. 새창으로 바꿔놓으면.. 사용자들이 편리하지 않을까효??? ㅡㅡ+

  4. 2011.07.20 09:09 Alex  댓글주소  수정/삭제  댓글쓰기

    저는 현재 미국에 인턴쉽을 와있는 학생입니다. 이번에 회사와 면접을 봤는데 EXT JS와 PHP를 이용해서 SCHEDULER를 만들어 오

    랍니다. ( 저는 참고로 로우 레벨 랭귀지 밖에 다루지 못합니다. HTML 자바 스크립트 PHP에 관한 아주 약간의 지식 밖에 없습니다.)

    EXT JS라는 프레임워크를 처음 들어봤는데 (사실 프레임워크가 무엇인지도 어제 알았습니다.) 이제 대강 VIEW 쪽은 JAVA SCRIPT와

    EXT를 이용해서 만들고 서버사이드는 PHP를 이용하고 my sql 을 연결하면 되겠는데, 이제 시작을 하고자 SCHEDONA 홈페이지에서 튜토리얼을 따라 가려고 하였습니다. 그런데 FEDORA10 에서 해야 튜토리얼에 써있더라고요 ㅠㅠ 제가 리눅스 지식이 거의 없습니다. 제가 스케쥴러를 EXT JS를이용해서 만들려면 무엇 부터 공부해야 할까요? 일단 컴퓨터 운영체제를 리눅스로 바꿔야 하나요 될수 있으면 windows에서 하고 싶습니다 현재 시간이 별로 없습니다.. 일단 개발 환경 구축하는것만이라고 가르쳐주시면 감사하겠습니다.(현재 이클립스는 설치했고 aptana flug in도 설치 한것같습니다.. 혹시 tomcat을 이용할수 있나요?) 책도 없고 미국 땅에 미치겠습니다. 다 가르쳐 달라고 하는것이 아니라 어떻게 공부해야 되는지만좀 알고싶습니다. 혹시 AJAX부터 선행학습 해야하나요? 길잃은 불쌍한 어린양에게 한마디 조언이라도 부탁드립니다. 감사합니다.

    • 2011.07.20 14:48 신고 데꾸벅  댓글주소  수정/삭제

      반갑습니다.

      미국 인턴쉽이라 영어는 기본이시겠군요.. 부럽습니다. ^^

      ㅎㅎ extjs 를 하시려면 당연히 자바스크립트를 아셔야 겠죠.
      일단은 간단한 자바스크립트 공부를 시작하시기를 권해드립니다.

      1. 웹페이지에 대한 이해
      HTML과 CSS는 기본입니다. HTML과 CSS는 실습위주로 되어 있는 얇은 책을 선택해서 기본지식만 가지고 계시면 될것 같네요.
      HTML은 태그사용법만 아시면 될듯 하고 CSS는 selector 부분이 있는데 이 부분을 이해하시는게 중요합니다.
      Javascript로 CSS를 핸들링하여 HTML (DOM) 을 바꾸는 것이 extjs라는 자바스크립트 UI 프레임웍입니다.

      2. extjs 프레임웍 익히기
      extjs는 시중에 나온 자바스크립트 프레임웍중에 Learning curve가 굉장히 가파릅니다(steep). 배우는데 시간이 많이 걸린다는 얘기죠..
      그래서 빨리 적용하기 위해서는 extjs 웹사이트(www.sencha.com)의 예제사이트를 방문해서 구현하고자하는 스케줄러와 유사한 기능의 예제를 붙여서 전체적인 레이아웃과 컴포넌트들과의 상호작용을 먼저 보시길 권해드립니다.

      3. 서버 환경셋팅
      SCHEDONA가 뭣하는 사이트인지 몰라서.. 긁적!! ^^
      거기 튜토리얼에 Fedora에서 작업하라고 한것은 PHP와 apache 셋팅을 위한것 같은데.. 굿이 리눅스에서 하지 않으셔도 됩니다.

      윈도우 환경에서 APM(apache + php + mysql)을 셋팅하실수 있습니다. extjs 환경설정을 굳이 리눅스배워가며 하실 필요는 없다는 얘기죠... 대한민국의 유명한 apm툴인 APMSETUP(www.apmsetup.com) 을 설치하시기만 하면 끝입니다.
      말씀하신 톰캣은 Java언어를 위한 웹서버(?)이므로 PHP를 이용한다면 필요가 없습니다.

      4. extjs 개발하기
      본 포스트 글에서 언급한 aptana나 spket과 같은 툴을 사용하시는것도 좋지만 잘 셋팅이 안되면 디버깅하기 힘들다는 단점은 있지만 그냥 일반적인 메모장과 같은 에디터를 사용하시는것도 좋습니다. (하드코딩의 묘미도 있으니까요.. ^^ )

      어떤 스케줄러를 만드시려는지 모르겠지만 extjs 예제사이트(http://www.sencha.com/products/extjs/examples/) 에 보면 feed viewer 예제나 simple task(http://www.sencha.com/blog/tasks2)예제를 한번 맘잡고 뜯어 보시는게 빨리 이해하시기 쉬울겁니다.


      5.마치며.
      extjs로 만든 스케줄러는 이미 만들어 진것이 있긴 한데.. ㅎㅎ
      답을 드리면 그런가요?
      http://www.bryntum.com/
      http://www.bryntum.com/examples/

      참조하시는것도.. ㅎㅎ
      연락처가 없어서 보시려나? 후훗!

  5. 2011.08.03 02:53 Alex  댓글주소  수정/삭제  댓글쓰기

    답변 감사 드립니다. 현재 스케쥴러 하나를 뜯어서 보고있습니다. 그런데 문제가 있습니다. ㅠㅠ

    간단히 질문은 php로 서버사이드를 개발하고 extjs로 웹 표현과 처리부를 구현하려고합니다. ( 하고 있습니다. ) 그런데 이제 개발을

    본격적으로 하려면 Eclipse면 Eclipse 한 개발 툴에서 컴파일이 되고 서로 데이터를 주고 받아야 하는데,, 이 환경을 구성을 3일째

    삽질 하고 있습니다. 처음에는 기존에 eclipse3.4 버전에 PDT(PhpDevelopmentToolkit)를 추가 하고 Apache 톰캣 mysql을 연동해

    서 개발하려고 하였으나 (수많은 방법을 시도해봄 ㅜㅜ기억도 안날정도로)실패 하였습니다. 그래서 현재는 Eclipse3.4 버전에서는 Extjs를 이용한 웹 표현과 처리부 일부(web page)만 돌려보고있습니다.

    그러나 web application 을 완성 하려면 php를 이용해서 DB연동도 해야합니다. ...

    그리고 현재는 PHPeclipse (eclipse + PDT) 를 이용한 버전 (3.6)에다가 xampp를 설치 해서 php파일을 컴파일 하는데는 성공했습

    니다. 그러나 여기서는 EXTjs 프로젝트가 컴파일이 되지 않습니다. Xampp 내부에 있는 Tomcat에 연동해서 실행했지만 찾을수 없다

    고합니다. 어떻게 이문제를 해결해야할까요 ㅠㅠ 3일동안 수많은 방법을 시도해봤습니다. 금요일이 마감기한입니다..

    분명 Xampp가 mysql php tomcat apache가 연동 되어 있는 거라고 알고 있는데요 어떻게 eclipse에서 이것들을 이용하는지 모르겠

    습니다. 개발 환경을 만들어야 프로그램을 짜는데 지금은 그냥 눈으로 코드만 �f어 보고 있습니다. 도움을 구합니다. 감사합니다. extjs와 php 를 함께 실행할수 있는 환경을 가르쳐 주세요 ㅠㅠ 부탁입니다.

    개발환경 windows XP
    Java SDK jdk1.6.0_26
    apache-tomcat-5.5.15 그리고 7(xampp 내부에) 총두개가 설치되어있습니다.
    apache server
    mysql
    eclipse helios 3.6 (php 버전)
    eclipse ganymede 3.4 (순정)

    • 2011.08.03 17:30 신고 데꾸벅  댓글주소  수정/삭제

      안녕하세요?
      PHP로 개발하는데 tomcat은 필요없습니다. 그리고 굳이 XAMPP를 쓰실 이유도 없지요. xampp 는 단순히 apache + mysql + php +perl 을 이용한 크로스(x) 플랫폼일 뿐입니다. 서버환경은 단순히 (APM: apache + php + mysql) 만 설치하시면 됩니다.
      PHP는 컴파일러가 있긴합니다만 (엄밀히 말하면 인코더) 자바나 C언어처럼 컴파일과정이 필요없는 Interpreter언어입니다.

      PDT 를 사용하시려면 아래 URL을 참조하세요.
      http://www.ibm.com/developerworks/kr/library/tutorial/os-eclipse-europa2/section4.html


      굳이 eclipse PDT를 사용하지 않고도 개발하실 수 있습니다.
      괜히 환경셋팅만하다가 시간 다 보내실듯 하네요..
      extjs는 javascript library로 html과 같이 서버사이드언어가 아니라 클라이언트 언어라고 보시면 됩니다.
      그냥 메모장만을 이용해서도 쉽게 작업하실 수 있습니다.


      쉽게 생각하세요.
      서버쪽은 APM 환경으로 구성해서 PHP로 스케줄러의 데이터만 가져오고
      클라이언트쪽은 extjs 로 구성해서 extjs에서 서버쪽의 데이타를 불러오는식 (httpProxy, store)으로 처리하기만 하면 됩니다.