Min's Engineer Story

지난  몇 주간 틈틈이 짬 날때 마다 만든 프로그램이 있다. (이거 만드느라고 집필에는 손도 안댔다는 - -)

실제 만든건 2주정도 되는 것 같다.

뭐 어떻게 보면 별거 아니지만,
내 업무상 필요해서 만든 프로그램이다.

이 프로그램은 다음과 같은 기능을 제공하는 프로그램이다.
- 뭔가 작업을 하는 동안 발생한 이슈 사항들을 적어 놓는다.
- 그 이슈에 대한 시간이 자동으로 저장된다.
- 나중에 해당 내용을 시간대 별로 확인을 할 수 있다.
- Internet Explorer나 Firefox만 있으면 사용가능하다.(Mac 유저분들에게는 죄송하지만, 내가 테스트해 본 결과 GWT ext의 오류로 인해서 Safari에서는 돌아가질 않는다. 메소드 하나 때문인데, 그 메소드는 현재는 꼭 써야 하는 상황이기에, 나중에 관련 버그를 GWT ext를 맹그는 애들이 수정하면 사용 가능할 듯 하다.)


아직 정식으로 누군가에게 써보라고 주기에는 부족한 부분들이 있어서
어느 정도 쓸만한 상태가 되면 공유할 생각이다.

기본적으로 GWT ext를 갖고 만들었기 때문에, Tomcat만 설치되어 있는 PC나 서버에서는 누구나 사용할 수 있다. 나중에 제공할 WAR 파일만 Tomcat의 webapps 디렉토리에 복사하고 Tomcat 수행하면 설치는 끝...
DB를 사용하게되면 설치하기도 귀찮을 것으로 판단되어, 개인용도로 사용하기 위해서 파일 기반으로 관련 정보를 저장하도록 만들었다.
만약 나중에 사용하는 분들이 많을 경우 DB 버젼도 시간이 있다면 확장할 생각이다.
(그럴 일은 별로 없을듯... ^^);

GWT를 사용하면 디자인을 위한 CSS를 정의하기 위한 시간이 많이 소요되는데, (뭐 처음에 정의해 놓으면 되겠지만, 나같은 개발자에게는 그 작업이 제일 싫은 노가다 작업이라....)
GWT ext를 사용하니 화면의 디자인을 위한 시간이 많이 줄어들어 편했다.
하지만, GWT와 GWT ext는 코딩 방식이 완전히 틀리다.

GWT ext 에 대한 이해를 하는데  개발중 대부분의 시간이 소요되었다.

궁금해 하시는 분들은 많지 않겠지만, 사용하는 동영상과 실제 Tomcat 설치용 WAR 파일은 조만간 공개하도록 하겠습니다.

백문이 불여일견이므로, GWT 샘플을 한번 돌려보자.

이클립스 메뉴에서 File --> New... --> Examples 를 선택한 다음, GWT Samples 를 선택한다.
(만약 Cypal이 정상적으로 깔리지 않았다면, 이 목록이 나타나지 않을 것이다.)

그 다음화면에서 다음과 같이 KitchenSink를 선택한다.

그 다음 Finish를 누르면, 해당 프로젝트의 Java Resources하단에 sample_src패키지가 생기고, 그 밑에 Kitchen Sink 샘플이 설치된다.

정상적으로 샘플이 저장되었다면, 해당 프로젝트를 선택한 상태에서 오른쪽 마우스를 클릭하고, Run As... --> Open Run Dialog... 을 클릭한다.

그러면 중간에 뻘건 가방 아이콘과 함께 GWT Hosted Mode Application 이라는 것이 있을 것이다.

만약 Kitchen Sink가 없다면, GWT Hosted Mode Application 을 더블클릭한다.

그러면 가장 위에 이름을 지정하는 곳이 있고, 원하는 이름을 입력한다.

Project와 Module 은 각각 본인의 프로젝트와 방금 추가한 모듈을 선택한다. Apply를 누르고 Run을 눌러보자.

정상적으로 지정이 되었다면, 다음의 두개 화면이 나타날 것이다.

하나는 Host 모드로 돌아가는 톰캣서버 콘솔이고 여기서 에러 메시지를 확인할 수 있다.

다른 하나는 결과를 확인하기 위한 브라우져다.

이제 GWT의 재미를 슬슬 느껴보자.~~~

GWT로 뭐 하나 개발할 일이 있어서, 이왕 하는거 정리도 할겸, 모르는 분들이 쉽게 할 수 있도록 할 겸, 정리한번 해 봅니다. 예전 안드로이드 처럼 연재가 끊길 수도 있으나, GWT는 이미 다 알고 있는 상태라~~~.

자~ 이제 시작하기 전에 준비물을 준비하자.

1. Java JDK 1.5 이상 (http://java.sun.com 에서 알아서 받으세요)
2. Eclipse 3.3 이상에 WebTools Platform 2.0 포함된거 (이것도 http://www.eclipse.org 에서 알아서 받으세요.)
3. Cypal Studio for GWT (요건 http://www.cypal.in/studio 에서 다운로드 받으면 됩니다.)
4. GWT 라이브러리 (요거는 구글에서 GWT 라고 치면 가장 첨에 나온다. 앞으로도 가장 첨에 안나올 리가 없다.)

Cypal 관련된 시스템 요구사항은 http://www.cypal.in/studiodocs#requirements 를 참조하기 바란다.

일단 자바랑 Eclipse 3.3은 다운로드 받아서 설치했다고 치고, Cypal studio랑 GWT 라이브로도 다운로드 받았다고 치고 시작하겠다.

다음의 순서에 따라서 세팅해 주기 바란다.

1. Cypal studio를 다운로드 받아서 압축파일을 풀면 4개의 jar 파일이 있는데, 그 파일을 이클립스 설치 위치/plugin 폴더에 몽땅  복사하고, 이클립스를 띄운다. (이클립스가 이미 띄워져 있는 상황에서는 다시 띄워라)

2. 이클립스를 띄웠으면, 메뉴에 Window --> Preferences를 눌러 Cypal Studio 라는걸 찾는다. (없으면 잘 찾아보기 바란다.)

3. Cypal Studio를 눌러서 보면, GWT 라이브러리의 Home 위치를 지정하는 입력 상자가 상단에 있는데 거기에 GWT 압축을 해제한 디렉토리를 지정해준다. (doc, samples 폴더가 하위에 있는 위치를 지정하면 된다.)

4. 이제 이클립스 플젝을 맹글어야 하는데, New project... 을 누른 후 플젝 종류를 선택하는 화면에서 Dynamic Web Project를 클릭한 후 Next를 누른다.

5. 그 다음에서 프로젝트 이름을 지정한 이후에 Configuration 지정하는 부분에서 drop down 메뉴를 내려서 "Cypal Studio for GWT"를 선택해야만 한다. (반드시 !!!!!)

6. 그 다음에 finish를 누르면 GWT를 맹글 수 있는 프로젝트 생성 및 초기 설정이 완료된다.

다음에는 GWT 샘플을 돌려보면서 GWT를 어떻게 사용할 수 있는지 알아보자.

변한게 별로 없을 것이라 생각하고...

일단 예전에 정리해 놓은것을 올려놓겠다.

출처는 Googlipse 홈페이지.


I know you don't have time to read a manual with dozens of pages. So here is a shortest manual possible for Googlipse.

여러분들이 여러 페이지의 메뉴얼을 읽을 시간이 없다는걸 저도 알고 있습니다. 그래서, Googlipse에 대한 가장 짧은 메뉴얼이 여기 있습니다.


Requirements:
요구사항 :

      Googlipse requires Eclipse 3.2 with WebTools Platform 1.5 running on a Java 1.5 VM. You need to separately install Google Web Toolkit.

      Googlipse 는 자바 1.5 VM에서 작동되고, 웹툴 플랫폼 1.5가 설치되어 있는 Eclipse 3.2가 필요합니다. GWT는 따로 설치해 놓으셔야 하구요.


Installation:
설치:

(*) Drop the com.googlipse.gwt_.jar file in your eclipse\plugins folder
(*) Open Eclipse. Select Window->Preferences->Googlipse and set GWT home to the directory where you have installed the Google Web Toolkit.
(*) You are all set to code.


(*) com.googlipse.gwt_.jar 파일을 eclipse\plugins 폴더에 떨궈 놓으세요.
(*) Eclipse를 엽니다. Window->Preferences->Googlipse 를 선택하고 GWT home 위치를 여러분이 GWT를 설치한 디렉토리로 설정하세요.
(*) 이제 모든 준비는 끝났지요.

Adding Googlipse to your project:
      Googlipse is implemented as a WTP Facet. When creating a new Dynamic Web Project, select Googlipse in the Project Facets page. If you already have a Dynamic Web Project, you can add Googlipse facet by selecting Project->Properties->Project Facets(Please make sure you don't have gwt-user.jar in your classpath). In case you didn't like Googlipse, you can remove the facet.

Googlipse를 프로젝트에 추가하기:
      Googlipse는 WTP Facet로 구혔되었습니다. 새로운 Dynamic Web Project때에는, Project Facets페이지에서 Googlipse를 선택하세요. 이미 Dynamic Web Project가 있을 경우에는, Project->Properties->Project Facets를 선택해서 Googlipse facet를 추가할 수 있습니다. (gwt-user.jar가 클래스패스에 없는지 꼭 확인하시구요). Googlipse가 마음에 안드시면, facet을 삭제하실 수 있습니다.


Creating a Module:
      Once you have a Dynamic Web Project with Googlipse facet, you can add a new module by File->New->Other->Googlipse->Gwt Module. Modules can be created only in valid java packages (default package is not allowed). Either you can type in the package (with project & source folder) in the location field or you can select it by clicking Browse button. You can also click the Create button to create a new package. Next type in the name of the module. Click Finish, you will have all the artifacts for the module generated.

모듈 생성 :
      Googlipse facet을 사용하는 Dynamic Web Project 이 있을 경우에는 , File->New->Other->Googlipse->Gwt Module을 통해서 새로운 모듈을 추가할 수 있습니다. 모듈은 적합한 자바 패키지를 사용하였을 경우에만 추가 됩니다. (기본 패키지는 불가함). 패키지에서 location 필드를 입력하거나 Browse 버튼을 선택해서 패키지를 선택할 수 있습니다. Create 버튼을 클릭해서 새로운 패키지를 만들 수도 있습니다. 그 다음에는 모듈 이름을 입력합니다. Finish를 누르면, 모듈과 관련된 모든 결과물들이 만들어집니다.


Adding a Remote Service:
      Note :A Remote Service will be created only in a module. So if you don't have a module, you need to create one using the New Module wizard, before this step. You can select File->New->Other->Googlipse->Gwt Remote Service. Click the Browse button and select the module (the gwt.xml file). Type the name and uri for the service and click Finish. Now the artifacts for the remote service will be generated. Entries are added to web.xml and gwt.xml


리모트 서비스 생성:
      노트 : 리모트 서비스는 모듈에서만 추가가 됩니다.그래서 모듈이 없으면, 이 단계 이전에 신규 모듈 위저드를 사용해서 하나 생성해야 합니다. File->New->Other->Googlipse->Gwt Remote Service를 선택하세요. Browse 버튼을 누르고, 모듈을 선택하세요 (gwt.xml파일 선택). 서비스를 위한 이름과 uri를 입력한 후 Finish버튼을 클릭하세요. 리모트 서비스를 위한 결과물들이 만들어집니다. 이러한 엔트리들은 web.xml과 gwt.xml에 추가가 됩니다.

Adding a Remote Service method:
      You can open the RemoteService interface and add/change methods in it. You need to provide the implementation of those methods in RemoteServiceImpl class, but thanks to Googlipse, you don't have to do anything in RemoteServiceAsync. Googlipse will automatically update the corresponding Async file whenever a RemoteService interface is changed.

리모트 서비스 메소드 추가하기 :
      리모트 서비스 인터페이스 파일을 열어서 메소드를 추가하고 삭제할 수 있습니다. 여러분은 RemoteServiceImpl 클래스를 구현해서 이 메소드의 내용을 채워야하지만, Googlipse 덕분에 RemoteServiceAsync를 구현할 필요는 없습니다. Googlipse 에서 자동으로 RemoteService 인터페이스가 변경되었을때 Async파일을 수정해 주기 때문입니다.  

Calling a method using Remote Service:
      The utility class in the Remote service should help you in making the remote call.

Google에서 GWT (Google Web Toolkit)을 공개 했다.

왜 했을까 ?

원문 출처 : http://code.google.com/webtoolkit/overview.html

What is Google Web Toolkit?
구글 웹 툴킷이 뭔가 ?

Google Web Toolkit (GWT) is an open source Java development framework that lets you escape the matrix of technologies that make writing AJAX applications so difficult and error prone. With GWT, you can develop and debug AJAX applications in the Java language using the Java development tools of your choice. When you deploy your application to production, the GWT compiler to translates your Java application to browser-compliant JavaScript and HTML.

GWT는 오픈소스 자바 개발 프레임웍이며, AJAX개발을 쉽게 할 수 있도록 도와준다. GWT로 AJAX를 개발하고 디버그할 수 있으며, 당신이 사용중인 자바 개발 툴을 사용할 수 있다. 당신의 어플리케이션은 프로덕션으로 만들때, GWT 컴파일러는 당신의 자바 어플리케이션을 브라우져에서 사용가능한 자바스크립트와 HTML로 번역해준다.

Here's the GWT development cycle:

GWT 개발 사이클을보면 다음과 같다.

1. Use your favorite Java IDE to write and debug an application in the Java language, using as many (or as few) GWT libraries as you find useful.
   
   당신이 좋아하는 자바 IDE에서 자바언어로 어플리케이션을 만들고 디버그해라. 최대한 많은 GWT 라이브러리를 사용해서.
   
2. Use GWT's Java-to-JavaScript compiler to distill your application into a set of JavaScript and HTML files that you can serve with any web server.
   
   GWT의 자바 to 자바스크립트를 사용해서 당신의 어플리케이션을 자바스트립트 셋과 HTML파릴로 만들어라. 그러면 어떠한 웹서버에서도 사용이 가능해진다.
   
3. Confirm that your application works in each browser that you want to support, which usually takes no additional work.
   
   당신이 만든 어플리케이션이 여러 브라우져에서 수행되는지를 확인해 보라. 아마도 추가적인 일을 할것이 없을 것이다.
      
   

Why Translate Java Code to JavaScript ?
왜 자바코드를 자바스크립트로 변환해야 하는가 ?

Java technologies offer a productive development plaform, and with GWT, they can instantly become the basis of your AJAX development platform as well. Here are some of the benefits of developing with GWT:
자바 기술은 생산성 좋은 개발 플렛폼을 제공하고, GWT를 이용하면 AJAX 개발 플렛폼에서 개발을 쉽게 할 수 있다. GWT의 장점은 다음과 같다.

• You can use all of your favorite Java development tools (Eclipse, IntelliJ, JProfiler, JUnit) for AJAX development.
  
  당신이 좋아하는 AJAX개발을 위해서 자바 개발툴을 사용할 수 있다.(이클립스, 인텔리J, J프로파일러(이건 프로파일런데...), J유닛(이건 테스트 툴인데)
  
• Static type checking in the Java language boosts productivity while reducing errors.
  
  자바 언어의 정적 타입 체크 기능으로 에러를 줄이고 생산성을 향상 시킬 수 있다.
  
• Common JavaScript errors (typos, type mismatches) are easily caught at compile time rather than by users at runtime.
  
  실행시에 에러를 잡아내는 것 보다 컴파일시에 일반적인 자바 스크립트 에러를 쉽게 잡아낼 수 있다.
  
• Code prompting/completion is widely available.
  
  코드 프롬프팅 및 완료가 가능하다.
  
• Automated Java refactoring is pretty snazzy these days.
  
  자동화된 자바 리펙토링이 쉽도록 되어 있다.
  
• Java-based OO designs are easier to communicate and understand, thus making your AJAX code base more comprehensible with less documentation.
  
  자바 기반의 객체지향 디자인은 커뮤니케이션하고 이해하기에 쉽도록 되어 있기 때문에, 당신의 AJAX코드 기반으로 반드는 것은 문서화 작업을 적게하고 이해하기가 쉽다.