2012년 9월 5일 수요일

GWT(구글 웹 툴킷) 이클립스(Eclipse)에서 사용하기


여러 뻘 짓 끝에 겨우겨우 제대로된 사용법을 터득했다.

여기에 이클립스에서 GWT 를 사용하는 법을 내가 이해한대로 쉽게 적어 두고자 한다.

필요하신 분 보시길...
(설명은 구글 홈페이지 설명을 그대로 따라가되 더 상세하게 설명한다. 아마 이 분야를 모르는 사람도 적어도 환경설정을 할 수 있을 정도가 될것이다. 설명을 따라가기만 한다면...)



나도 GWT 를 이클립스에서 사용할 수 있다!!


1. JDK 를 다운받는다.


에서 다운받을 수 있는데 종류가 좀 많다.
필자는  웹페이지 개발을 중점으로 하기위해

JDK 6 Update 14 with Java EE 를 받았다.

앞의 숫자 내용은 버전이 업될 경우 올라갈수 있으니 필자와 똑같이 따라가고 싶다면 JAVA EE 를 보고 다운 받도록 한다. 설치는 대충 다음다음 하면 된다. 혹시나 계정이나 암호 같은 것을 입력하는 게 나온다면 언젠가 쓸 일이 있을지 모르니 파일과 같이 메모장에 적어서 고이 모셔두길 권한다.


2. GWT 파일을 받는다.


위링크를 따라가면 Download Google Web Toolkit 이라는 버튼이 있다.
눌러서 다운받는다. 다운 받은 압축파일은 적당한 곳에 푼다.
(참고로 필자는 C:\gwt-windows-1.7.0 에 풀었다. 이글을 작성하는 현재 gwt 는 1.7.0 버전이다.)


3. GWT를 풀어놓은 디렉토리를 환경변수로 설정한다.

   3-1. 내컴퓨터 오른쪽 버튼으로 클릭하여 속성 선택
   3-2. 시스템 등록정보 창이 나온다. 고급 탭을 클릭!
   3-3. 고급탭을 선택하면 창 아래부분에 '환경변수'라는 버튼이 있다. 클릭!
   3-4. 환경변수 창이 뜬다. (사용자이름)에 대한 사용자 변수에 몇가지 내용이 있을 것이다.
         그중에 변수 이름이 PATH 인것을 선택하여 편집을 클릭.
         (PATH가 없다면 새로만들기로 생성한다. 왠만하면 있다.)
   3-5. PATH에 기존값이 있다면 앞의 값 뒤에 ;(세미클론)을 붙이고 GWT폴더위치를 넣는다.
   (필자는 C:\gwt-windows-1.7.0  이므로 이렇게 써넣었다.
    필자 컴퓨터의 PATH 변수 값>>C:\Program Files\ESTsoft\ALZip;C:\gwt-windows-1.7.0 )

4. 이클립스를 설치한다.


위에서 다운받는다. 여기도 종류가 많은데 JAVA EE 개발자용으로 다운받도록 한다.

그리고 설치가 끝나면 workspace 설정을 하는것이 나오는데, 필자는 C:\workspace 로 했다.


5. GWT 프로젝트를 생성한다.

필자는 여기서 한참 헤맸었다. 분명 구글 홈페이지 설명에 보면 이클립스를 사용할 경우 projectCreator 라는 커맨드를 사용하라고 되어있는데 그런 명령어는 아무리 쳐도 없고, 아무리 뒤져봐도 그런 커맨드 파일은 존재하지 않았기 때문이다. 그리고 이클립스를 사용하지 않는다면, applicationCreator 를 사용하라고 나왔는데 그것도 없었다. ㅡㅡ

현재 필자가 설치한 버전은 1.7.0 인데 여기서 저 두 커맨드의 역할을 하는건 webAppCreator 이다.
이 커맨드 파일은 gwt 폴더 안에 있다.

자 이제 윈도우 시작 버튼을 누르고 실행을 누른다.(단축키 윈도우키+R)
나오는 창에 cmd 라고 치면 도스창이 뜬다.

도스창에 한번

webappcreator

라고 쳐본다. webappcreator 의 사용법이 쭉 나온다면 지금까진 성공이다.

자 이제

cd c:\workspace

를 치면 workspace 폴더 안으로 들어간다.

그리고

webappcreator -out StockWatcher com.google.gwt.sample.stockwatcher.client.StockWatcher

라고 치면 추루룩 폴더들을 생성한다고 뜬다.
 workspace 폴더를 확인하면 StockWatcher 라는 폴더가 생성되어있다.

위 모든 경로나 이름 설정은 구글에 나와있는대로 했다.
앞으로 예제도 쓸 예정인데 똑같이 해놓는다면 예제를 따라할때 훨씬 편할 것이라고 생각한다.


6. 생성된 프로젝트를 이클립스에서 임포트 한다.

자 이제 프로젝트를 생성했으니 이클립스와 연동할 시간이다.
이클립스를 실행하여 <파일> 메뉴에서  <임포트> 를 선택한다.

창이 하나 뜰것이다.

폴더가 잔뜩있는데 General 폴더를 열어 Existing Projects into Workspace 를 선택하고
다음을 누른다.

Select root directory 에서 생성해놓은 프로젝트 경로를 선택한다.

필자는 C:\workspace\StockWatcher 폴더이다.

자 아래 Projects: 라는 레이블이 붙은 칸안에 StockWatcher 가 생긴것이 보일것이다.

선택하고 Finish 한다.




드디어 완성이다. 이클립스 프로젝트로 StockWatcher 가 생성된것이 보일것이다.
이것이 GWT 개발을 시작하기위한 초기 설정이다.

제대로 생성됬나 의심스럽다면 StockWatcher 프로젝트를 선택한 후에 Run을 해본다.

메뉴에서 Run 의 Run 을 실행하던가,
메뉴상자에서 초록색 원안의 하얀 화살표 모양을 클릭하면 된다.

Google Web Toolkit Hosted Mode 라는 이름을 가진 창과
Web Application Starter Project 라는 이름을 가진창 두개가 뜨면 성공적으로 설치한것이다.




시간이 되면 다음에는 위의 환경을 기초로 해서 예제프로그램을 작성해 보도록 하겠다.

블로그 보관함