Ajax 애플리케이션 개발 툴

Posted by 빵빵빵
2009/01/20 19:45 전산(컴퓨터)/PC-Windows



원본 : http://cafe.naver.com/q69/86108
추가 복사본 : http://flashcafe.org/ajax_study/3627


Ajax 애플리케이션 개발 툴

 

Ajax 애플리케이션을 개발하기 위해서는 개발 툴이 필요하다. UTF-8이 지원된다면 어떤 에디터(Editor)를 사용해도 Ajax 애플리케이션을 개발하는데 문제가 없다. Ajax는 어떤 언어가 되었든 간에 서버용 애플리케이션과 데이터를 주고 받아야 하므로 서버용 언어를 같이 사용할 수 있는 툴이라면 효율성이 높을 것이다. 다수의 개발자가 수행하는 프로젝트에서는 통합개발환경(IDE: Integrated Development Environment)을 지원하는 툴을 사용할 것이다.

 

Ajax 애플리케이션을 개발하기 위한 툴은 많다. 여기에서 이 모든 것을 전부 다루기에는 본문과 다른 면을 다루는 것이 되므로 필자가 주로 사용하는 툴을 살펴보려고 한다. 그렇다고 해서 여기에서 다루는 툴만을 사용해야 한다는 의미는 아니며, 사용성 측면에서 본다면 독자의 손에 익은 툴이 최선이라고 할 수 있다.

 

자바 언어 개발자에게 널리 알려진 툴 중의 하나가 이클립스(Eclipse)이다. 이클립스 환경에서Ajax 애플리케이션을 개발할 수 있는 많은 플러그인이 있다. 그 중에 앱테너(aptana)가 있는데, Ajax 요소기술 언어뿐만 아니라 prototype.js, Scriptaculous, Rico, Dojo, Yahoo UI 등의 많은 Ajax 프레임웍 및 라이브러리를 지원한다. 또한, 이러한 라이브러리를 개발자가 추가할 수도 있다.

 

 
사용자 삽입 이미지

[그림 3-1] aptana 공식 사이트

 

앱테너는 http://aptana.com에서 다운로드 받을 수 있으며 [그림 3-1]에서 볼 수 있듯이 Windows. Macintosh, Linux를 지원하며 이클립스의 플러그인도 지원한다. 자바스크립트, CSS, XHTML에 대한 Code Assist뿐만 아니라 prototype.js에 있는 메서드에 대해서도 Code Assist를 제공한다. 최근 발표된 버전에는 자바스크립트 디버거 기능을 포함하고 있다.

 

영어이지만, ‘screenshots’를 클릭하면 주요 화면을 볼 수 있으며, ‘screencasts’를 클릭하면 작동(operation) 방법을 동영상으로 제공하고 있다. 영어로 설명을 하지만, 마우스와 키보드를 사용하여 설명하므로 감각적으로 어느 정도는 이해할 수 있다. 아래의 [그림 3-2]은 HTML을 작성한 화면이다.
 
사용자 삽입 이미지
 

[그림 3-2] aptana HTML 편집 화면

 

필자가 이 책의 원고를 정리하는 도중에 0.2.8.13195 버전이 출시되었다. 이전 버전에서는 자바스크립트에서 한글을 사용할 때 백 스페이스 키를 눌러 한글을 고치려고 할 때 프로그램이 멈추는 문제가 발생하였으나 새로운 버전에서는 이런 문제가 해결되었다. 하지만, 한글 사용에 있어 에러는 아니지만, HTML이나 자바스크립트에서 텍스트로 작성한 한글의 색이 다르게 표시되는 등의 점은 남아있다. 그렇다고, 이런 점이 소스 코드에 영향을 미치진 않는다.
플래셔(phpserv)



다른 글 원본 : http://www.mimul.com/pebble/default/2008/05/18/1211087580000.html

무료 JavaScript 개발 툴

1. Spket IDE
 - JavaScript와 XML의 개발을 쉽게 해주는 이클립스에 플러그인 .
 - AJAX Library : ExtJS, jQuery, YUI
 - 다운로드 사이트 : 여기에서 받으세요.
 - 사용 방법 : 여기에서 보세요. 

2. Apatana
 - JavaScript 개발 툴
 - AJAX Library : ExtJS, jQuery, YUI, Scriptaculous, dojo, aflax, prototype, rico, Adobe Spry, mootools 지원
 - 다운로드 사이트 : 여기에서 받으세요.
 - 사용 방법 : 여기에서 보세요.

3. JSEclipse
 - Adobe에서 만든 JavaScript 개발 툴
 - AJAX Library : Dojo, Prototype, Spry, YUI, Qooxdoo
 - 다운 로드 사이트 : 여기에서 받으세요.

4. JSDT
 - JavaScript IDE로 디버깅까지 가능
 - AJAX Library : 지원 예정
 - 사용 방법 : 여기에서 보세요.



이클립스 가이드  출처 : http://wiki.dev.daewoobrenic.co.kr/mediawiki/index.php/JCF3.0%E2%84%A2_%EA%B0%9C%EB%B0%9C%ED%88%B4(%EC%9D%B4%ED%81%B4%EB%A6%BD%EC%8A%A4)_%EC%84%A4%EC%B9%98_%EB%B0%8F_%ED%99%9C%EC%9A%A9%EA%B0%80%EC%9D%B4%EB%93%9C

JCF3.0™ 개발툴(이클립스) 설치 및 활용가이드

From JCFWiKi

Jump to: navigation, search

그림:check.gif

  • 산출물 : JCF3.0™ 개발툴(이클립스) 설치 및 활용가이드
  • 작성자: 고경철
  • 작성일 : 2007/12/03
  • 버전 : 0.9
  • 개정이력 :

Copyright © 2007 Daewoo Information Systems Co., Ltd.

목차

[숨기기]

[편집] Eclipse Europa 다운로드

그림:warning.gif

  • 이클립스 버전 :eclipse-jee-europa-fall2-win32.zip

[편집] Eclipse 플러그인

[편집] bookmark.xml을 이용한 플러그인 업데이트

[편집] bookmark.xml 사용하는 방법

그림:warning.gif

bookmarks.xml의 경로 : \eclipse\configuration\org.eclipse.update

다운로드받은 이클립스 설치폴더에 들어가서 bookmarks.xml을 편집한다.
다운로드받은 이클립스 설치폴더에 들어가서 bookmarks.xml을 편집한다.
  • bookmarks.xml은 url을 통해 이클립스 플러그인을 다운받을 목록을 저장하는 xml 파일이다.
  • bookmarks.xml안에 플러그인 이름과 다운 url 경로가 표시되어 있다.
  • 그러므로 기존의 bookmarks.xml을 jcf에서 제공하는 bookmarks.xml으로 파일을 교체하면 help>software Updates>Find and Install>Search for new features to install 목록에 플러그인이 자동으로 추가된다.
추가된 플러그인 목록을 다운받으려면 해당 플러그인을 체크한 후 finish를 누른다.
추가된 플러그인 목록을 다운받으려면 해당 플러그인을 체크한 후 finish를 누른다.

[편집] basic 추천 플러그인 목록

  1. Subversion(SVN) (http://www.polarion.org/projects/subversive/download/1.1/update-site/)
  2. Eclipse SQL Explorer (수동설치 : http://eclipsesql.sourceforge.net)
  3. Spring IDE (http://springide.org/updatesite)
  • basic 추천 플러그인 목록 bookmarks.xml 다운받기 : (bookmarks.xml)

[편집] advanced 추천 플러그인 목록

  1. JBoss IDE (http://download.jboss.org/jbosside/updates/stable)
  2. Maven (http://m2eclipse.codehaus.org/update/)
  • advanced 추천 플러그인 목록 bookmarks.xml 다운받기: (bookmarks.xml)


[편집] 개별 Eclipse 플러그인 추천 목록

그림:check.gif

설치 방법 공통

요즘 플러그인들은 거의 다 업데이트 사이트를 이용해서 다운로드 및 업그레이드를 하게 되어있다.

위치 : Help - Software updates - Find and Install...

[편집] SVN Client

권장하는 이클립스 플러그인 Subversive

그림:forbidden.gif

subversive 외에 subclipse라는 것도 있는데, 몇 가지 이유에 의해 subversive 플러그인을 이용할 것을 권한다.

[편집] DB Client

SQL Explorer(2006년 이후로 업데이트가 없음..)

easySQL(2007.02 최근 업데이트.. 썩 괜찮을듯 함..)

[편집] Maven 플러그인 m2eclipse

이 플러그인을 이용하게 되면 pom.xml 파일에 정의된 dependency에 따라 동적으로 빌드 클래스패스와 동기화시켜준다. 이클립스의 Package Explorer에서 보면 Maven2 Dependencies라는 컨테이너가 새로 생기고 그 아래에 dependent jar들이 들어가서 관리된다.

그림:warning.gif

플러그인 기능 중에서 add dependency를 사용하게 되면 pom.xml 파일의 dependencies에 요소를 추가해주는데, pom.xml에 있던 한글이 모두 깨져버린다. 우선은 찾는데만 이용하고 pom.xml 편집은 수작업으로 하는 편이 좋겠다.

[편집] SpringIDE

  • Spring IDE 2.0에 추가된 기능
    • Spring Web Flow 개발 지원
    • XSD 기반의 Spring Configuration 지원
    • Spring AOP 기반의 개발 지원
    • new Project 기능 업데이트, UI 업데이트
  • 플러그인 홈페이지 http://springide.org/updatesite/

[편집] 기타 개발 IDE

[편집] apatana

Ajax 개발을 위한 자바스크립트 기반 개발환경을 제공합니다.

Rails, Adobe® AIR™, iPhone 개발에 특화된 환경도 제공하고 있습니다.

[편집] soapUI

웹서비스 개발 및 태스팅툴로서 독립어플리케이션 및 각종 IDE의 플러그인을 제공합니다.

[편집] Maven2 Dependency Analyzer 1.0.1

Maven2 POM Dependency 분석하여 시각적으로 표시해주는 툴입니다.

[편집] Acceleo 2.0.0

MDA 기반의 코드생성 플러그인


[편집] Retrotranslator

http://retrotranslator.sourceforge.net/

레트로트랜슬레이터는 자바 5로 컴파일된 클래스 파일들을 자바 1.4 VM에서 돌릴 수 있도록 변환시켜주는 바이트코드 변환기입니다. 무료이며, ASM 바이트코드 조작 프레임워크와 동시작업 유틸리티를 자바 1.4로 옮긴 것을 기반으로 한 오픈소스 도구입니다.

이름에서도 알 수 있듯이 과거로의 회귀 변환기입니다.

원본 주소 - 'http://wiki.dev.daewoobrenic.co.kr/mediawiki/index.php/JCF3.0%E2%84%A2_%EA%B0%9C%EB%B0%9C%ED%88%B4%28%EC%9D%B4%ED%81%B4%EB%A6%BD%EC%8A%A4%29_%EC%84%A4%EC%B9%98_%EB%B0%8F_%ED%99%9C%EC%9A%A9%EA%B0%80%EC%9D%B4%EB%93%9C'




또다른 문서 출처 : http://mudchobo.tomeii.com/tt/241

[유틸리티] JS(JavaScript) + HTML형태의 AIR개발할 수 있는 IDE Aptana Studio!

이런 IDE도 있군요.
지원하는게 좀 특이하군요.
Ruby on Rails, Adobe® AIR™, Apple iPhone(아이폰!!!), PHP(EditPlus면 만사오케이인데^^)를 지원합니다.

사용자 삽입 이미지

로고도 이쁘네요^^


우선 이클립스 기반이어서 이클립스 플러그인 형식으로도 설치를 할 수 있습니다.
그냥 설치하면 플렉스빌더처럼 StandAlone형태로 돼요.
http://www.aptana.com/studio/download
여기서 받으면 되구요.
다음 신공으로 설치하면 됩니.....아 안된다-_-;
선택 사항이 하나 나오는데요. 파일을 Aptana Studio랑 연결할꺼냐고 묻는데 연결하고 싶으면 다 선택하시고 연결하기싫으면 해제해야겠죠? ^^ 어쨌든 설치가 완료되고 실행해봅시다-_-;
무슨 경고창이 뜹니다-_-; FireFox를 깔라고 하네요-_-;
가볍게 깔아주든지 그냥 무시합시다-_-;
보면 이클립스랑 완전 똑같군요-_-;

프로젝트를 만들어봅시다.
File -> New -> Project -> .....아....아무것도 없군요.
AIR플러그인을 설치해야합니다.
처음에 나오는 Aptana Start Page에서 Plugins에서 중간쯤에 Adobe® AIR™가 보일껍니다.
Download and install클릭하면 Adobe AIR Support체크하고 설치하면 됩니다.

그럼다시 프로젝트를 만들어봅시다-_-;
File -> New -> Project -> AIR Project가 생겼습니다.
Project이름은 HelloAir -_-;
Next로 끝까지가면 Ajax Library를 선택할 수 있어요^^
저는 Ajax를 모르므로 ㅠㅠ 그냥 Finish를.....ㅠㅠ

왼쪽 아래에 Project를 보면 AIRAliases.js파일이 꼭 필요한데 알아서 집어넣어줍니다.
저거 혼자서 다하려면 AIR SDK에서 가져와서 추가해줘야해요.
위에 RUN을 해보면 애플리케이션이 뜰꺼에요 ^^
air객체를 통해서 air관련된 것을 접근해서 쓸 수 있어요!
air.trace("") 하면 trace도 찍을 수 있답니다-_-;

Aptana의 가장 큰 단점!
아직 디버깅이 안돼요-_-;
2009/01/20 19:45 2009/01/20 19:45

이 글에는 트랙백을 보낼 수 없습니다