프로젝트와 HTML 파일 만들고 실행하기

By | 2008년 11월 28일

이클립스에서는 연관된 프로그램들을 프로젝트 단위로 관리한다. 이클립스에서 JSP 프로그램 개발을 위한 JSP 프로젝트는 다양한 방법으로 만들 수 있다. 그 중 주로 사용하는 방법은 “Project Explorer” 뷰의 흰 바탕에서 마우스 오른쪽 버튼을 클릭하여 만드는 방법이다. 먼저 “Project Explorer” 뷰의 흰 바탕에서 마우스 오른쪽 버튼을 클릭하여 “New”의 하부 메뉴에서 “Project”를 선택한다.

프로젝트 메뉴

프로젝트 메뉴


“New Project” 창이 뜨면 “Web”의 “Dynamic Web Project”를 선택하고 “Next” 버튼을 클릭한다.

Dynamic Web Project

Dynamic Web Project


자신이 진행할 프로젝트 이름을 입력한 후 “Finish” 버튼을 클릭한다. 이 때 “Target Runtime”이 “Apache Tomcat” 인가를 확인한다. 이 항목은 이클립스에 서버로 “Apache Tomcat”이 올바르게 등록됐다면 기본으로 나타난다.

프로젝트 이름 입력

프로젝트 이름 입력


프로젝트가 올바르게 생성됐다면 아래 그림과 같이 “Project Explorer” 뷰에 생성된 프로젝트가 나타난다.

프로젝드 확인

프로젝드 확인


프로젝트를 만들었다면 이제 프로젝트에서 HTML, JSP 파일들을 만들고 “Apache Tomcat”을 통해 실행해 보자. 먼저 “Hello.html”을 만들고 실행해 보겠다. 우선 “Hello.html” 파일이 위치할 프로젝트 이름 “JSPLecture” 위에서 마우스 오른쪽 버튼을 클릭한 후 메뉴가 뜨면 “New”의 하부메뉴에서 “HTML”을 선택한다.

HTML 파일 만들기

HTML 파일 만들기


“New HTML Page” 창이 뜨면 “File Name”에 “Hello”를 입력하고 “Finish” 버튼을 클릭한다. 이 때 “Hello” 뒤에 자동으로 확장자 “.html”이 붙는다.

파일명 입력

파일명 입력


이클립스의 “Project Explorer” 뷰 화면에는 “JSPLecture” 프로젝트의 “WebContent” 폴더 아래에 “Hello.html” 파일이 생기고 우측의 소스뷰에는 “Hello.html”을 위한 몇 줄의 html 코드가 생성된다. 코드에서 블럭으로 잡힌 부분의 “Hello JSP…”는 추가된 부분이므로 <body>와 </body> 사이에 추가한다. 소스뷰의 파일명 좌측의 ‘*'(*Hello.html)는 소스가 수정된 후 정장되지 않았음을 의미하므로 디스크 모양의 저장버튼을 클릭하여 저장한다.

수정 내용 저장

수정 내용 저장


저장이 완료되면 소스뷰 상의 파일이름이 “*Hello.html” 에서 “Hello.html”로 변경된다.

소스뷰의 내용

소스뷰의 내용


이제 “Hello.html”을 실행해보자. “Hello.html”을 실행하려면 소스뷰에서 실행하고자 하는 파일 탭 “Hello.html”을 선택하고 실행버튼 “>”을 클릭한다.

Hello.html 실행하기

Hello.html 실행하기


“Run On Server” 창이 뜨면 “Finish” 버튼을 클릭한다. 다음부터 HTML 또는 JSP 프로그램 실행 시 이 창이 뜨지 않도록 하려면 “Always use the this server when running this project” 옆의 체크박스를 선택하면 된다.

JSP 컨테이너 지정

JSP 컨테이너 지정


“Hello.html”의 실행결과는 이클립스 내장브라우저가 실행되면서 보여진다. 이 브라우저의 주소창을 보면 URL이

http://localhost:8080/JSPLecture/Hello.html

로 표시되는데 “:8080″은 TCP/IP 포트 번호며 “Apache Tomcat”의 기본 포트로 사용된다. 그리고 프로젝트명 “JSPLecture”가 URL폴더명으로 사용되고 있음을 알 수 있다.

Hello.html 실행 결과

Hello.html 실행 결과

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.