이클립스에서 웹프로그래밍

이클립스의 기능을 확장해 ?J2EE 웹 애플리케이션 개발에 필요한 통합 환경을 제공하는 것을 목표로 하는 프로젝트다. WTP에는 HTML, CSS, JSP, XML, ?JavaScript, SQL 등 각종 소스 코드를 편집할 수 있는 에디터뿐 아니라, ?J2EE 네비게이터, 웹 서비스 위저드, 데이터베이스 접속 도구 등 ?J2EE 애플리케이션 개발에 유용하게 사용할 수 있는 다양한 도구가 포함되어 있다.

설치
인터넷 브라우저로 WTP 홈페이지(http://eclipse.org/webtools/index.html)에 접속한 다음 왼쪽 메뉴에서 downloads라고 쓰인 곳을 클릭하면 WTP 다운로드 페이지로 갈 수 있다. Latest Downloads 난에서 최신 버전에 대한 링크를 클릭하면 선택한 버전을 다운로드할 수 있는 페이지가 표시되는데, 여기서 WTP를 다운로드할 수 있다. 페이지 중간쯤에 Requirements 난을 보면 WTP가 실행되기 위해 EMF, GEF, EMF Model Runtime이 필요하다는 설명이 있는데, 링크를 클릭해 모두 다운로드한다. 바로 아래 ?WebTools Platform; Runtime 항목에 있는 링크를 클릭해 WTP를 다운로드 한다.그리고 각 드라이버와 WTP의 압축 파일을 풀어 이클립스가 설치된 디렉터리에 복사하면 설치가 끝난다.

제대로 설치됐다면 메뉴바에서 Windows>Open Perspective>Other를 선택해 퍼스펙티브 선택 다이얼로그를 띄웠을 때 ?J2EE 퍼스펙티브가 추가된 것을 볼 수 있을 것이다.

간단 웹 애플리케이션 작성 예제
welcome.jsp는 사용자 일므을 물어보고 이름을 입력하면 환영 메시지를 표시하는 간단한 예제다.웹 프로젝트 생성

J2EE 퍼스펙티브로 전환하면, 퍼스펙티브 왼쪽에 Package Explorer 대신 Project Explorer가 위치한 것만 빼고는 Java 퍼스펙티브와 모양이 비슷한 것을 볼 수 있다. 웹 애플리케이션을 작성하기 위해서는 먼저 웹 프로젝트를 만들어야 한다.

Project Explorer에서 Dynamic Web Projects를 선택한 다음 컨텍스트 메뉴를 띄워 New>Dynamic Web Project를 선택하면 아래 그림과 같이 웹 프로젝트 위저드가 뜬다.

사용자 삽입 이미지

Name 항목에 프로젝트 일므을 입력하면 Context Root 항목도 프로젝트 이름과 동일하게 설정된다. 다이얼로그 위쪽에 보면 에러 메시지가 표시되어 있는데, 타깃 서버를 지정하지 않아서 그런 것이다. 다이얼로그 중간의 Target server 항목 옆에 있는 New 버튼을 누르면 아래 그림과 같이 타깃 서버 런타임을 선택할 수 있는 다이얼로그가 뜬다. 여기서 적절한 항목을 선택한다.

사용자 삽입 이미지
Next 버튼을 누르면 톰캣 설치 디렉터리를 물어보는 페이지로 바뀐다. Browse 버튼을 이용해 톰갯 설치 디렉터리를 지정하면 웹 프로젝트 위저드 다이얼로그 윗부분에 있던 에러 메시지가 사라진다. Finish 버튼을 누르면 웹 프로젝트가 생성된다. 생성된 프로젝트는 아래 그림과 같이 Project Explorer에서 확인할 수 있다.

사용자 삽입 이미지
JSP 작성 및 실행

Project Explorer에서 Dynamic Web Projects>?WebExample>?WebContent를 선택한 다음 컨텍스트 메뉴를 띄워 New>JSP를 선택한 다음 다이얼로그에서 파일 이름을 welcome.jsp로 지정하고 Finish 버튼을 누르면 아래 그림과 같이 JSP 에디터가 열리며 코드가 생성된다.사용자 삽입 이미지

JSP 파일이 생성되는 형식이나 인코딩 설정은 Preferences 다이얼로그의 Web and XML>JSP Files 페이지와 그 밑에 있는 JSP Templates 페이지에서 바꿀 수 있다.

Java 에디터에서 편리하게 사용했던 코드 어시스트, 빠른 수정 등의 기능을 JSP 에디터에서도 사용할 수 있다. 저장할 때는 자동으로 컴파일되며 컴파일 에러나 경고가 있을 경우 Problems 뷰에 표시된다. JSP 코드를 입력하면 아래 그림과 같이 Outline 뷰에 JSP 코드의 구조가 표시된다.

사용자 삽입 이미지Project Explorer에서 welcome.jsp를 선택한 다음 컴텍스트 메뉴를 띄워 Run As>Run on Server를 선택하면 JSP를 실행할 수 있다.

사용자 삽입 이미지
Run>Run on Server 메뉴를 선택하면 위의 그림과 같은 다이얼로그가 나타나는데, Apache>Tomcat v4.1 Server를 선택한다. 다이얼로그 아랫 부분에 있는 Set server as project default(do not ask again) 체크 박스에 체크해 두면 JSP를 실행할 때마다 서버를 물어보지 않도록 할 수 있다.

Finish 버튼을 누르면 자동으로 톰캣 서버가 실행되고 에디터 영역에 실행 결과가 나타난다. 톰캣 서버가 실행될 때의 로그 메시지는 콘솔 뷰에 표시되고, 톰캣 서버의 실행 상태는 Servers 뷰를 통해 확인할 수 있다.

사용자 삽입 이미지

디버깅

JSP 코드도 브레이크포인트를 지정하고 한 스텝씩 실행시키면서 디버깅을 할 수 있다. JSP 에디터에서 Java 코드가 있는 부분에 브레이크포인트를 지정하고 컨텍스트 메뉴에서 Debug As>Debug on Server를 선택하면 된다. 서버가 이미 실행 모드로 실행 중이라면 중지하고 디버그 모드로 다시 실행할지를 물어본다. 디버깅을 하기 위해서는 서버가 디버그 모드로 실행되어야 한다.

서블릿 작성

Package Explorer에서 Dynamic Web Projects>?WebExample을 선택한 다음 컨텍스트 메뉴를 띄워 New>Servlet을 선택하면 아래 그림과 같이 서블릿 생성 다이얼로그가 뜬다.

사용자 삽입 이미지

그림과 같이 패키지는 example.web으로, 클래스 이름은 ?GuestBookServlet으로 지정하고, 다이얼로그 아랫부분에 있는 Generate an annotated servlet class 체크박스의 체크를 제거한 다음, Finish 버튼을 누르면 서블릿 코드가 생성된다. 그리고 web.xml에 조금 전 생성한 서블릿이 자동 등록된다.

사용자 삽입 이미지

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다