Java에서 Ajax로 웹개발할때 사용할 수 있는 웹 개발 프레임워크, 라이브러리, 툴킷에 대한 문서를 소개합니다. IBM DeveloperWorks에 공개된 문서중 "전문가다운 Ajax 애플리케이션 개발, Part 3: DWR, 자바, Dojo 툴킷을 사용하여 자바와 자바스크립트 통합하기"라는 문서입니다.
 Michael Garpin이라는 eBay의 개발자가 작성한 글로서 장동수님께서 번역하셧습니다.

지금 바로 이름이 떠오르는 자바(Java™) 웹 개발 프레임워크, 라이브러리, 툴킷만 해도 엄청나게 많습니다. 뭐가 뭔지, 어떤 것이 문제 해결에 도움이 될지 알아내는 것만 해도 버거운 일이죠. 그러나 Ajax 개발을 하고 있다면 반드시 알아두어야 할 라이브러리가 바로 DWR(Direct Web Remoting)입니다. 이 라이브러리는 자바 언어와 자바의 웹 기술을 사용하여 Ajax 개발을 더 쉽게 해줍니다. 이 라이브러리는 Ajax와 자바 웹 애플리케이션을 긴밀하게 통합하는 방법에 있어 기준을 제시합니다. DWR은 Ajax 기술들의 광범위한 연합인 Dojo 재단에 합류했습니다. 이 기사에서는 DWR을 사용하면 Ajax가 얼마나 간단해지는지 알아보겠습니다.

이 글은 Ajax 애플리케이션 제작에 사용할 수 있는 인기있는 자바스크립트 라이브러리들에 대해 알아보는 연재의 세 번째이자 마지막 기사다. Part 1에서는 Prototype 라이브러리를 사용하여 노래를 관리하는 웹 애플리케이션을 만들어 보았다. Part 2에서는 script.aculo.us를 사용하여 사진을 관리하는 웹 애플리케이션을 만들어 보았다. 이번에는 DWR을 사용하면 Ajax가 얼마나 간단해지는지 알아보자.

이 기사에서는 DWR 2.0을 사용한다. 예제 코드는 제네릭스(generics)와 어노테이션(annotation)을 사용하므로 자바 5 이상이 필요하다. 예제에서는 MySQL 5.12와 톰캣(Tomcat) 6.0.14를 사용하고 있지만, 쉽게 교체할 수 있을 것이다. 데이터베이스 접근을 위해 JPA(Java Persistence API)를 사용하며, JPA 구현체는 OpenJPA 1.0을 사용한다. 하이버네이트(Hibernate)나 Kodo 등의 다른 JPA 구현체로 바꿔도 된다. 이 기사에서는 Ajax 디버깅을 위한 멋진 도구인 파이어버그(Firebug: 파이어폭스용 플러그인)를 사용한다. 이 도구들에 대한 링크는 참고자료에 나와 있다.

DWR 소개

Ajax 애플리케이션이 처음 등장했을 때는 마법처럼 보였지만, 다행히도 개발하는 과정은 직관적이다. 모든 Ajax 상호작용은 서버 측 엔드포인트(endpoint: 웹 서비스에서 빌려온 용어)와 그 엔드포인트를 호출하는 클라이언트 측 코드가 필요하다. 또한 클라이언트와 서버가 주고받는 데이터를 직렬화(serialize)하는 코드도 필요하다. 서버 측 엔드포인트는 일반적인 서비스(RESTful이든 아니든)면 되지만, 클라이언트 측에는 종종 요구에 부합하는 좀 더 구체적인 코드가 필요하다. 강한 결합(tight coupling)을 피해야 할 때도 있지만, 필요할 때도 있다. 후자라면 DWR이 준비된 해결책이다. DWR은 선언적인 방법으로(declaratively) 서버 측 코드를 Ajax 엔드포인트로 만들 수 있고, 모든 부가적인 설비도 자동으로 만들어 준다. 지금부터 구체적인 예제를 통해 DWR이 어떻게 동작하는지 알아보자.


 이 문서는 Ajax 개발시 성능 문제를 개선하기위해서 필요한 도구를 소개하고 있습니다. 제가 사용중인 Firebug도 소개하고 있구요. Yslow라는 도구도 소개하네요.
 갈수록 사용하는 곳이 많아지는 Ajax와 이에따른 성능 문제에 고민하는 개발자라면 한번 읽어볼만한 내용이라고 생각합니다.


원문 : Ajax 성능분석 (최신 도구를 사용하여 작업을 마무리하기)


비동기 자바스크립트 + XML(Asynchronous JavaScript + XML; Ajax) 덕분에 상호작용과 성능에 대한 사용자들의 기대치가 계속 높아지고 있고, Ajax를 웹 응용 프로그램의 필수 요소로 취급하는 개발자들도 점점 늘고 있습니다. 더 많은 코드가 클라이언트 측으로 이동하고 네트워크 모델이 바뀜에 따라, 커뮤니티는 Ajax 고유의 성능 문제들을 다루기 위해 더 많은 도구를 만들어내고 있습니다. Ajax-강화 응용 프로그램에서 성능 문제를 찾아내고 바로잡아주는 도구들에 대해 알아보겠습니다.

성능은 응용 프로그램에 Ajax를 도입해서 개선하려는 일차적인 이유 중 하나다. Ajax는 서버와 통신할 때 전체 페이지를 요청하지 않으므로 응답 시간을 개선할 수 있다. 응답 시간을 줄이면, Ajax는 훨씬 더 나은 사용자 경험을 제공할 수 있다. 그러나 Ajax 응용 프로그램의 성능을 분석하고 향상시키려면 전통적인 웹 응용 프로그램과는 다른 도구가 필요하다. 이 기사에서는 이러한 도구들에 대해 알아보고, 성능 문제를 찾고 고치기 위해 그 도구들을 사용하는 방법을 보여준다.

자주 쓰이는 약어
  • CSS: Cascading Style Sheets
  • HTML: Hypertext Markup Language
  • XML: Extensible Markup Language
  • HTTP: Hypertext Transfer Protocol

Ajax 응용 프로그램 성능은 웹 응용 프로그램의 몇 가지 측면에 근거한다.

  • 서버 응답 시간
  • 네트워크 전송 시간
  • 클라이언트 자바스크립트 처리 시간

전 통적인 웹 응용 프로그램 개발에서는, 서버 응답 시간이 성능 분석의 일차적인 관심사다. 성능 분석은 대부분 신속하게 요청을 처리하고, 필요한 응용 프로그램 로직을 수행하고, 응답을 생성하는 애플리케이션 서버의 능력을 측정한다. 일반적으로 잘 알려진 것처럼, Ajax 응용 프로그램 개발에서도 이러한 능력이 응용 프로그램 성능의 결정적인 측면이지만, 이 기사는 성능의 다른 부분에 초점을 맞출 것이다.




 이번에도 IBM DW의 기술 문서중에서 Ajax관련 글을 소개하려합니다. 정말 Ajax가 대세...
Ajax와 XML을 이용해서 YouTube같은 멀티미디어 서비스를 제공하는 사이트에 적용된 기술을 설명하고 있습니다. PHP에 Ajax 기술을 적용해서 예를 들고 있죠.
한번쯤 읽어두면 도움이 될 거라 생각합니다. ^^

원문 : Ajax와 XML: 미디어용 Ajax (한글)(부제 : Ajax 기술을 사용하여 영화와 슬라이드 쇼 보여주기)

2007 년 12 월 18 일

광대역, 미디어, 영화, 이미지, 사운드 드라이브는 Web 2.0에 일대 혁신을 가져왔습니다. 미디어에 PHP와 Asynchronous JavaScript™ + XML (Ajax) 기술을 결합하는 방법을 배워봅시다.

웹 애플리케이션의 새로운 조류를 가장 잘 드러내는 사이트가 무엇이냐고 묻는다면, 대부분 YouTube라고 대답할 것이다. 이 사이트는 뚜렷한 방식으로 신 기술을 채택했을 뿐만 아니라, 우리가 미디어를 보는 방식과 미디어와의 관계를 변화시킨 사이트라고 할 수 있다. 주요 이야기들이 기존의 전통적인 미디어에 나타나기 전에 YouTube에서 발생하고, 그렇지 않을 때에는, YouTube는 하나의 큰 TiVo처럼 작동한다.


필자는 Jack D. Herrington이라는 20년 경력의 소프트웨어 엔지니어입니다.
 Code Generation in Action, Podcasting Hacks, PHP Hacks등의 책을쓴 사람이네요.
 이번엔 IBM DeveloperWorks[각주:1]의 웹 개발 관련 자료 중에서 [Ajax와 XML: 라이트박스(lightbox)용 Ajax] (Ajax 기술을 사용하여 라이트박스, 팝업, 윈도우, 페이더(fader) 만들기)라는 글을 소개합니다.

 이  문서는 자바스크립트 라이브러리를 이용해서 동적인 웹 프로그램을 만드는 법을 알려줍니다. 이미지를 같은 화면 내에서 크게 보여주는 법이나 툴팁을 보여주는 등의 현재 여러 서비스에서 쓰고 있는 기능들을 구현하는 법을 실제 예제와 소스 코드로 설명하고 있어서 당장 뭔가를 만들어 내야하는 개발자에게 유용할 거라고 생각합니다.

원문 : Ajax와 XML : 라이트박스(lightbox)용 Ajax

모든 것이 놀랍고 매력적인 요즘, 사용자들의 관심을 끌기란 어려운 일입니다. Ajax 툴과 Lightbox, 팝업, 윈도우, 페이딩(fading) 메시지 같은 새로운 기술을 사용하여 사용자의 관심을 끌어봅시다.


아래 이미지는 본문의 일부입니다.
사용자 삽입 이미지
위의 이미지 처럼 한눈에 들어오는 예제로 설명하고 있습니다. 보기 좋죠?
  1. IBM DeveloperWorks란 개발자들을 위한 다양한 정보를 제공하는 개발자 커뮤니티입니다.
    www.ibm.com/developerworks/kr [본문으로]
 10월의 두번째 글을 작성합니다. 내일까지만 일하면 하루 쉽니다. :)
야호~

 이번에는 IBM DeveloperWorks에서 JAVA로 웹개발을 할때 도움이 될 만한 글을 찾았습니다. Cypal Studio for GWT라는 Eclipse에서 GWT[각주:1] 구현을 지원해주는 플러그인을 소개하는 글입니다. Cypal Studio for GWT의 설치 및 설정, 사용법을 알려주는 글입니다.
 Eclipse에서 GWT를 이용해보고 싶었던 분들이라면 편하게 이용하실 수 있을거같아서 소개합니다.

Cypal Studio for GWT를 사용하여 Ajax 개발 단순화 하기 (한글)

 원문의 내용대로 설치 및 설정까지를 따라해 봤는데, 본문에 나오는대로 GWT 1.4버전에서는 정상적으로 작동하지 않음을 확인했습니다. GWT 1.3버전을 설치하시길 바랍니다. 최신 버전인 GWT 1.4에서 작동하는 Cypal Studio가 빨리 나오면 좋겠네요.
최신 버전 설치하기... 이것도 병인데... :)

GWT는 JavaScript 없이 자바 프로그래밍 언어 내에서 동적인 웹 애플리케이션들을 완벽히 작성할 수 있도록 해주는 툴 세트이다. GWT 애플리케이션은 모든 주요 브라우저에서 실행되며, 사용자와의 상호 작동성도 뛰어나고, 자바 개발 환경 내에서 완벽히 테스트 및 디버깅 될 수 있다.

GWT 프레임웍은 네 개의 주요 컴포넌트를 갖고 있다. 자바 언어로 구현된 위젯 컬렉션은 Swing 보다 단순한 애플리케이션 프로그램 인터페이스(API)에서 기대하는 표준 사용자 인터페이스(UI) 기능을 제공한다. 원격 프로시저 메커니즘은 클라이언트와 서버 간 통신에 사용되며, GWT에서는 모든 파이프와 데이터 변환이 처리된다. 완전히 통합된 브라우저 시뮬레이터로 GWT가 개발 시 실행될 수 있으며, GWT 디버깅 세션 동안 에디터에서 중단점을 설정할 수 있다. 마지막으로, 컴파일러는 자바 코드를 클라이언트 브라우저에서 실제로 실행되는 크로스 브라우저 JavaScript 코드로 변환하며 브라우저 비호환성을 관리하기 때문에 여러분이 관리할 필요가 없다.

GWT가 Ajax 애플리케이션을 생성하는 프로세스를 단순화 하는 동안, 동기화 된 여러 부분들이 작동하도록 해야 한다. 이 글을 쓰고 있는 현재, GWT 고급 툴 지원은 주요 자바 개발 환경에 나타나기 시작했다.

Cypal Studio for GWT는 GWT 개발 시 수행되는 공통의 태스크들을 단순화 하는 Eclipse용 플러그인이다. 이 글에서는 GWT의 모든 부분을 설명하지 않는다. 참고자료 섹션에서 GWT 작동 방법과 애플리케이션을 생성하는 방법을 참조하기 바란다.



  1. Goole Web Toolkit(GWT)은 자바개발자들이 AJAX 어플리케이션을 개발하는데 사용할 수 있는 프레임워크입니다. Google Web Toolkit website [본문으로]

+ Recent posts