웹 어플리케이션 개발 입문서
이 문서는 NetBeans IDE의 기초적 사용법을 익히게 하여 웹 어플리케이션을 개발하도록 도와 줄 것입니다.
간단한 웹 어플리케이션을 생성하고 배치하여 브라우저에 프레젠테이션하는 법을 보여줍니다.
어플리케이션은 여러분의 이름을 입력하도록 묻기 위하여
JavaServer Pages™ (JSP) 페이지를 채용합니다.
그리고 나서, HTTP 세션 동안에 그 이름을 보존하기 위하여
JavaBeans™ 콤포넌트를 사용하고,
두번째 JSP 페이지 출력을 위하여 그 이름을 찾아옵니다.
(역자주: NetBeans IDE가 아직 한글화 작업이 이루어지지 않았기 때문에 영문으로 된 메뉴와 화면으로 설명합니다)
NetBeans IDE로 작업하는 것에 관하여 더 많은 정보를 찾으신다면,
Documentation, Training & Support를 참조하십시오.
예상 소요 시간 : 25 분
아래와 같은 주제가 다루어집니다:
소프트웨어 설치하기
시작하기에 앞서서, 컴퓨터에 다음 소프트웨어가 설치되어 있는지 확인한다:
- NetBeans IDE 6.0, 웹 및 자바 EE 설치용(Web and Java EE installation) (다운로드)
- 자바 표준판 개발킷(Java SE Development Kit) (다운로드)
주:
- 이 학습서를 통하여 작업을 하려면, IDE에 서버가 등록되어 있어야 합니다.
웹 및 자바 EE 설치용(Web and Java EE installation)은
Apache Tomcat servlet container 6.0.14 또는 GlassFish V2 application server를
여러분이 선택적으로 설치하여 등록하게 하여줍니다.
- 만약 여러분이 NetBeans IDE를 처음으로 설치하신다면,
자바 표준판 개발킷(Java SE Development
Kit - JDK)이 설치되어 있어야만 합니다. JDK는 자바로 개발하는 데 필요한 다양한 툴과 API 뿐만아니라, 자바 실행환경(Java Runtime
Environment - JRE)도 포함하고 있습니다.
웹 어플리케이션 프로젝트 설정하기
- 메인 메뉴에서, 파일(File) > 새 프로젝트 만들기(New Project; Ctrl-Shift-N)를 선택한다.
카테고리(Categories) 밑에서, 웹(Web)을 선택한다.
프로젝트(Projects) 밑에서, 웹 어플리케이션(Web Application)을 선택하고, 다음(Next)을 클릭한다.
- 제 2단계로, 프로젝트 이름(Project Name) 텍스트상자에 HelloWeb이라 입력한다.
콘텍스트 경로(Context Path, 즉 서버에서의 경로)가 /HelloWeb이 된다는 점에 주목한다.
- 프로젝트 위치(Project Location)을 컴퓨터의 임의의 등록부(폴더)로 명기한다.
이 학습서의 목적을 위하여, 이 등록부는 $PROJECTHOME(프로젝트 홈)으로 부르기로 한다.
- 어플리케이션을 배치하고자 하는 서버를 선택한다.
IDE에 등록된 서버만 목록에 나온다. 다음(Next)을 클릭한다.
- 메인 프로젝트로 설정(Set as Main Project) 체크상자는 선택된 채로 그냥 놔두고, 마침(Finish)을 클릭한다.
IDE는 $PROJECTHOME/HelloWeb 프로젝트 폴더를 생성한다.
프로젝트 폴더에는 프로젝트의 Ant 빌드 스크립트와 같은 프로젝트 메타데이타(metadata)와 소스 일체가 담겨 있다.
HelloWeb 프로젝트가 IDE안에 열린다.
시작 페이지(welcome page)인 index.jsp가 메인 창의 소스 편집기에 열린다.
프로젝트의 논리적 구조는 프로젝트(Projects) 창에서(Ctrl-1), 파일 구조는 파일(Files) 창에서(Ctrl-2) 각각 살펴볼 수 있다:
웹 어플리케이션 소스 파일을 생성하고 편집하기
소스 파일을 생성하고 편집하는 것은 IDE가 복무해야 가장 중요한 기능히다.
결국, 그것은 아마 여러분이 하루의 대부분을 행하면서 보내는 것일 것이다.
IDE는 개발자의 개인적 스타일을 보충할 수 있는 광범한 도구를 제공한다.
여러분이 모든 것을 직접 코딩하는 것을 좋아하든지,
아니면 IDE가 커다란 뭉치덩어리를 뽑아내 주길 바라든지 간에 막론하고...
자바 패키지 및 자바 소스 파일을 생성하기
- 프로젝트(Projects) 창에서 소스 패키지(Source Packages) 꼭지를 펼친다.
소스 패키지(Source Packages) 꼭지가 기본값(default)으로 비어져 있는 패키지 꼭지라는 점을 주목한다.
- 소스 패키지(Source Packages) 꼭지에서 오른쪽으로 클릭하고 새로 만들기(New) > 자바 클래스(Java Class)를 선택한다.
클래스 이름(Class Name) 텍스트상자 안에 NameHandler라고 입력한다.
패키지(Package) 콤보상자에는 org.mypackage.hello라고 적어 넣고, 마침(Finish)을 클릭한다.
새 NameHandler.java 파일이 소스 편집기에 열린다는 점을 주목한다.
- 소스 편집기안에서, 클래스 선언 바로 아래에 다음과 같은 줄을 적어 String 변수(variable)를 선언한다:
String name;
- 클래스에 다음과 같은 생성자(constructor)를 추가한다:
public NameHandler()
- NameHandler() 생성자 안에 다음과 같은 줄을 추가한다:
name = null;
값메기기(Setter) 및 값얻기(Getter) 메쏘드 생성하기
- 소스 편집기에서 name 필드(field)를 오른쪽으로 클릭하고,
리팩토링하기(Refactor) > 필드 캡슐화하기(Encapsulate Fields)를 선택한다.
필드 캡슐화하기(Encapsulate Fields) 대화창이 표안에 name 필드를 나열하면서 열린다.
필드의 가시성(Fields' Visibility)은 기본값으로 private로 되어 있고
접근자의 가시성(Accessors' Visibility)은 public으로 되어 있는 점을 주목한다.
이는 클래스 변수 선언에 대한 접근 한정자(access modifier)는 private로 특정해지는 반면,
값얻기(getter)와 값메기기(setter) 메쏘드는 각각
public과 private 한정자를 가진 것으로 생성될 것을 가리키고 있다.
- 리팩토링하기(Do Refactoring)를 선택한다. name 필드를 위한 값메기기(Setter) 및 값얻기(Getter) 메쏘드가
발생한다. 클래스 변수에 대한 한정자는 private인 반면,
값얻기(getter)와 값메기기(setter) 메쏘드는 각각 public 한정자를 가지고 발생한다.
자바 클래스는 마치 아래와 비슷하게 보여야 것이다:
package org.mypackage.hello;
/**
*
* @author nbuser
*/
public class NameHandler {
private String name;
/** Creates a new instance of NameHandler */
public NameHandler() {
name = null;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
기본값(default) JavaServer Pages 파일 편집하기
- 소스 편집기의 윗단에 표시된 탭을 클릭하여
index.jsp 파일로 포커스가 돌아오게 한다.
- 소스 편집기 오른편에 있는 팔레트(Ctrl-Shift-8) 안에서,
HTML 폼(HTML Forms)을 펼치고 폼(Form) 항목 하나를 집어다
소스 편집기 안에 있는 <h2> 태그들 아래 점으로 끌어 놓는다.
폼 끼워넣기(Insert Form) 대화상자가 나타난다:
다음과 같은 값을 설정한다:
- Action: response.jsp
- Method: GET
- Name: Name Input Form
예(OK)를 클릭한다. HTML form이 index.jsp 파일에 추가된다.
- 텍스트 입력(Text Input) 항목을 끌어 </form> 태그 바로 앞 점에다 놓고,
다음과 같은 값을 설정한다:
예(OK)를 클릭한다. HTML <input> 태그가 <form> 태그 사이에 추가된다.
- 단추(Button) 항목을 끌어서 </form> 태그 앞 점에다 놓는다.
다음과 같은 값을 설정한다:
예(OK)를 클릭한다. HTML Button이 <form> 태그 사이에 추가된다.
- Enter your name:을 <input> 태그 앞에 적어 넣고
<h2> 태그 사이의 기본값 Hello World!텍스트를 와 Entry Form 태그로 바꾼다.
- 소스 편집기 안에서 오른쪽으로 클릭하여 서식하기(Format; Alt-Shift-F)를 선택하고, 코드를 정돈한다.
여러분의 index.jsp 파일은 이제 다음과 비슷하게 보여질 것입니다:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h2>Entry Form</h2>
<form name="Name Input Form" action="response.jsp">
Enter your name:
<input type="text" name="name" />
<input type="submit" value="OK" />
</form>
</body>
</html>
JavaServer Pages 파일 생성하기
- 프로젝트(Projects) 창에서, HelloWeb 프로젝트 꼭지를 오른쪽으로 클릭해서 새로 만들기(New) > JSP를 선택한다.
새 JSP 파일 만들기(New JSP File) 마법사가 열린다.
파일을 response라 이름짓고, 마침(Finish)을 클릭한다.
response.jsp 파일 꼭지가 프로젝트(Projects) 창의 index.jsp 아래 나타나고
소스편집기에 새 파일이 열린다는 점을 주목한다.
- 소스 편집기의 오른 편에 있는 팔레트에서, JSP를 펼치고 Bean 사용하기(Use Bean) 항목을 끌어다
소스 편집기 안의 <body> 태그 아래 점에 놓는다.
Bean 사용하기 끼워넣기(Insert Use Bean) 대화창이 열린다.
다음과 같은 값을 설정한다:
- ID: mybean
- Class: org.mypackage.hello.NameHandler
- Scope: session
예(OK)를 클릭한다.
<jsp:useBean>
태그가 <body> 태그 아래에 추가되는 것을 주목한다.
- 팔레트에서 Bean 속성 메기기(Set Bean Property) 항목을 <h2> 태그 바로 앞 점에다 끌어 놓고, 예(OK)를 클릭한다.
나타나는 <jsp:setProperty> 태그 안에서,
비어있는 value 특성을 지우고 다음과 같이 편집한다:
<jsp:setProperty name="mybean" property="name" />
<jsp:setProperty>
문서에서 지적된 것처럼, 속성의 값은 여러가지 방법으로 메길 수 있다. 이 경우에는,
index.jsp로부터 들어오는 사용자 입력(user input)은 request 객체에 넘겨지는
한 쌍의 이름과 값(name/value pair)이 된다.
<jsp:setProperty> 태그를 사용하여 속성을 설정할 때,
request 객체 안에 포함된 속성의 이름에 따라 값을 특정할 수 있다.
그러므로, property를 name으로 설정함으로써,
사용자 입력(user input)에 의하여 특정된 값(value)을 찾아올 수 있다.
- <h2> 태그 사이의 텍스트를 다음과 같이 보이도록 바꾼다:
<h2>Hello, !</h2>
- 팔레트로부터 Bean 속성 얻기(Get Bean Property) 항목을 끌어다
<h2> 태그 사이의 콤마부호 다음에 놓는다.
Bean 속성 얻기 끼워넣기(Insert Get Bean Property) 대화창에서 다음과 같은 값을 명기한다:
- Bean Name: mybean
- Property Name: name
예(OK)를 클릭한다.
<jsp:getProperty>
태그가 이제 <h2> 태그 사이에 추가된 것을 주목한다.
- 소스 편집기 안에서 오른쪽으로 클릭하여 서식하기(Format; Alt-Shift-F)를 선택하고, 코드를 정돈한다.
여러분의 response.jsp 파일은 이제 다음과 비슷하게 보여질 것입니다:
<body>
<jsp:useBean id="mybean" scope="session" class="org.mypackage.hello.NameHandler" />
<jsp:setProperty name="mybean" property="name" />
<h2>Hello, <jsp:getProperty name="mybean" property="name" />!</h2>
</body>
웹 어플리케이션 프로젝트 빌드하고 실행하기
IDE는 웹 어플리케이션을 빌드하고 실행하는데 Ant 빌드 스크립트를 사용한다.
IDE는 새 프로젝트 만들기(New Project) 마법사와 프로젝트의 프로젝트 속성(Project Properties) 대화상자에서
입력한 선택 사항을 근거로 빌드 스크립트를 발생시킨다.
(프로젝트(Projects) 창에서 프로젝트 꼭지를 오른쪽으로 클릭하여 속성(Properties)를 선택하면 된다.)
- 프로젝트(Projects) 창에서, HelloWeb 프로젝트 꼭지를 오른쪽으로 클릭하여 실행하기(Run; F6)를 선택한다.
IDE는 웹 어플리케이션을 빌드한 다음, 프로젝트를 생성할 때 명기해 놓은 서버에 이를 배치시킨다.
index.jsp 페이지가 여러분의 기본(default) 브라우저에 열린다:
- 여러분의 이름을 텍스트상자에 입력하고 예(OK)를 클릭한다. response.jsp
페이지가 다음과 같은 인사말을 건네면서 나타난다:
참조할 만한 곳
이상으로 웹 어플리케이션 개발 입문서를 마치겠습니다.
이 문서는 NetBeans IDE를 사용하여 간단한 웹 어플리케이션을 작성하고 서버에 배치하여
브라우저에 프레젠테이션을 하는 방법을 보였습니다. 또한, 어플리케이션에서
사용자 데이터를 수집하고 보존하고 출력하는데 JavaServer Pages와 JavaBeans를
사용하는 방법도 보였습니다.
NetBeans IDE 웹 어플리케이션 개발에 관한 보다 고급의 정보를 찾으시려면
다음과 같은 자원을 참조하십시오:
맨위로
