Sun Developer Network 공식 블로그

Phobos는 자바 플랫폼에서 실행되며 스크립팅하기 편리한 경량의 웹 애플리케이션 환경입니다. Phobos를 사용하면 스크립팅 언어가 제공하는 이점을 이용하고 자바 플랫폼의 강력한 기능을 활용할 수 있습니다. 스크립팅하기 편리한 Phobos는 신속하게 애플리케이션을 개발할 수 있도록 도와주는 프로그래밍 환경을 제공합니다. Phobos가 기본적으로 제공하는 언어는 JavaScript입니다. Phobos는 Mozilla Rhino 스크립팅 엔진을 사용하여 JavaScript를 지원합니다.

스크립팅 언어는 강력하고 편리하게 사용할 수 있습니다. 또한 대화식으로 개발하는 방식이기 때문에 애플리케이션을 개발하고 사용할 준비가 될 때까지 애플리케이션 동작을 점차 다듬을 수 있습니다. 이 기능은 Ajax 지원 웹 애플리케이션을 개발할 때 특히 중요합니다. 일반적으로 Ajax 지원 웹 애플리케이션의 경우 여러 번의 대화식 인브라우저 테스팅(in-browser testing) 및 개선 작업이 필요합니다. Phobos에서는 대화식 개발 모드를 사용할 수 있을 뿐 아니라 스크립팅 개발자가 언제든지 자바 코드를 호출할 수 있습니다. 스크립팅 개발자가는 자바 플랫폼에서 실행되는 API, 라이브러리, 프레임워크를 다시 사용할 수 있습니다. Phobos를 사용하면 "두 가지" 방식을 모두 이용할 수 있습니다. 즉, 스크립팅 언어로 "소프트"(자주 수정되는 코드)를 작성하고, 자바 프로그래밍 언어 같은 컴파일된 언어로 "하드"(거의 수정되지 않는 코드)를 작성합니다.

이번 팁에서는 Phobos 및 jMaki를 사용하여 간단한 Ajax 지원 웹 애플리케이션을 만들겠습니다. jMaki 프레임워크는 CSS, HTML 및 JavaScript 등의 표준 기반 기술을 사용하는 웹 2.0 애플리케이션을 생성하는 데 사용되는 경량 프레임워크입니다. jMaki에 대해서는 2007년 1월 27일자 테크팁 jMaki 입문 를 참조하십시오.

NetBeans IDE를 사용하여 애플리케이션을 구축하고 GlassFish 애플리케이션 서버에 애플리케이션을 배포하게 됩니다. 이 팁에서는 NetBeans IDE 6.1 및 GlassFish v2ur2 애플리케이션 서버를 설치한 것으로 간주합니다. NetBeans IDE 6.1의 웹 및 자바 EE 버전을 설치하면 함께 설치됩니다.

이 팁에는 샘플 애플리케이션 코드가 수록된 패키지가 함께 제공됩니다. 이 팁의 코드 예제는 해당 패키지에 포함된 샘플의 소스 코드에서 추출한 것입니다.

Phobos 프레임워크

Phobos 애플리케이션 작동 방식을 이해하려면 기본 프레임워크에 대해 알아보는 것이 좋습니다.

Phobos에서는 서블릿 컨테이너에 요청이 들어올 때마다 컨테이너가 Phobos 서블릿을 호출합니다. 그러면 Phobos 서블릿이 JavaScript로 작성된 Phobos 프레임워크에 요청 처리를 위임합니다. Phobos 프레임워크는 요청 URI를 특정한 수의 미리 정의된 패턴과 일치시키려고 시도합니다. 일치되는 항목이 발견되면 프레임워크에서 해당 패턴과 연결된 스크립트나 컨트롤러를 호출합니다.

Phobos에 HTTP 요청을 처리하는 여러 가지 방법이 있습니다. 가장 간단한 방법은 request 및 response라는 두 가지 미리 정의된 변수에 액세스할 수 있는 일반 스크립트를 쓰는 것입니다. 이러한 변수에는 서블릿 컨테이너가 만드는 HttpServletRequest 및 HttpServletResponse에 대한 참조가 있습니다. 그런 다음 사용자가 작성한 스크립트가 해당 요청 처리 논리를 수행하고 응답을 생성합니다.

스크립트가 대체로는 모든 작업을 처리하기에 충분하더라도 MVC(model-view-controller) 패턴에 기반한 더욱 구조화된 방식을 따르는 것이 더 좋습니다. Phobos에서 세 가지 구성 요소가 모두 JavaScript로 작성됩니다. 이 컨트롤러는 스크립트 내에 호스팅된 JavaScript 클래스로, 이 스크립트는 컨트롤러의 해당 구성 요소와 이름이 같아야 합니다. EJS(Embedded JavaScript) 파일, 즉, JavaScript 문 및 식이 내장된 HTML이 들어 있는 파일이 표시됩니다. 모델의 정의가 애플리케이션에 남겨집니다. 일반적으로 모델은 JavaScript와 자바 개체로 구성되어 있습니다.

Phobos 프레임워크에 대한 자세한 내용은 Phobos 개요를 참조하십시오.

애플리케이션

이 팁에서는 Phobos를 사용하여 Ludovic Champenois가 2008년 6월 16일 테크팁 OpenSolaris에서 PHP와 함께 jMaki 사용에 게재한 PHP 애플리케이션을 다시 구현합니다. PHP 애플리케이션에 대한 설명은 해당 팁의 "샘플 애플리케이션" 섹션을 참조하십시오. 그림 1은 PHP 애플리케이션에서 표시한 웹 페이지를 보여줍니다.

그림 1. PHP 애플리케이션의 웹 페이지

PHP 애플리케이션은 데이터베이스로 MySQL을 사용합니다. 그러나 이 애플리케이션의 Phobos 버전은 MySQL 대신 JavaDB를 사용합니다. 자바 DB 데이터베이스가 GlassFish v2ur2와 번들로 함께 들어 있습니다.

NetBeans IDE 6.1에 Phobos 플러그인 설치

애플리케이션을 빌드하기 전에 NetBeans 6.1 IDE에 Phobos에 대한 지원을 추가해야 합니다. 이 지원은 새로운 Phobos 프로젝트 형식 및 EJS 페이지용 구문 인식 편집기 같은 기능이 포함된 Phobos 관련 플러그인에서 제공합니다.

Phobos 플러그인을 설치하려면

자바 DB 데이터베이스 구성

다음에는 이 애플리케이션의 새 데이터베이스를 만들겠습니다.

1. 다음과 같은 방법으로 자바 DB를 시작합니다.
   • NetBeans IDE에서 Services 탭을 클릭합니다.
   • 데이터베이스 노드를 확장합니다. 데이터베이스 목록에 자바 DB가 나타나야 합니다.
   • 자바 DB를 마우스 오른쪽 버튼으로 클릭하고 Start Server를 선택합니다.
2. 다음과 같은 방법으로 자바 DB 데이터베이스를 만듭니다.
   • 자바 DB를 마우스 오른쪽 버튼으로 클릭하고 Create Database를 선택합니다. 그러면 Create Java DB Database 창이 열립니다.
   • 데이터베이스 이름으로 data를 입력합니다. 이 이름은 Phobos에 미리 구성된 데이터베이스 이름입니다. (Phobos에 미리 구성된 데이터베이스 구성 매개 변수에 대한 자세한 내용은 데이터베이스에 연결 섹션을 참조하십시오.) 그리고 사용자 이름으로 APP를, 암호로 APP를 입력합니다. (이러한 매개 변수와 액세스할 데이터베이스 유형은 완전히 구성하고 사용자가 지정할 수 있습니다. 애플리케이션을 개발하거나 나중에 애플리케이션을 배포할 때 다른 매개 변수나 다른 데이터베이스 유형을 지정할 수 있습니다.)
   • O.K. 버튼을 클릭합니다.
3. 드라이버 노드를 확장합니다. 그림 3과 같이 jdbc:derby://localhost:1527/data의 드라이버가 나타나야 합니다. 이 드라이버는 data 데이터베이스의 드라이버입니다.

   

   그림 3. 드라이버 목록

웹 애플리케이션 관련 프로젝트 만들기

이제 NetBeans IDE에 Phobos 플러그인을 추가했고 자바 DB 데이터베이스도 만들어 구성했으므로 애플리케이션을 만들 차례입니다. 먼저 NetBeans IDE에서 다음과 같이 새 프로젝트를 만들겠습니다.

1. IDE의 File 메뉴에서 New Project를 선택합니다. 그러면 New Project 창이 열립니다.
2. New Project 창에서 카테고리로 Web을 선택하고 프로젝트로 Web Application을 선택한 후 Next 버튼을 클릭합니다. 그러면 Name and Location 패널이 열립니다.
3. name 필드에 PhobosSample을 입력하고 프로젝트의 해당 위치를 선택합니다. Next 버튼을 클릭합니다. 그러면 Server and Settings 패널이 열립니다.
4. 서버로 GlassFish V2를 선택했고, 자바 EE 버전으로 Java EE 5를 선택했는지 확인합니다. Next 버튼을 클릭합니다. 그러면 Frameworks 패널이 열립니다.
5. Frameworks 필드에서 Web Application Extension으로 jMaki Ajax Framework 및 Phobos Runtime을 선택합니다. jMaki Ajax 프레임워크를 선택하면 패널에 CSS Layout 섹션이 표시됩니다. 그림 4와 같이 CSS Layout 섹션에서 No CSS Style을 선택합니다.

   

   그림 4. Phobos 및 jMaki 프레임워크 선택

6. Finish 버튼을 클릭하여 프로젝트를 작성합니다.
7. Projects 탭에서 새 PhobosSample 프로젝트를 확장합니다. 그림 5는 웹 페이지 및 구성 파일 같은 웹 애플리케이션 프로젝트로 구성된 익숙한 요소와 함께, Phobos Application 폴더에 있는 Phobos 전용 요소가 PhobosSample 프로젝트에 포함되어 있는 모습을 보여줍니다.

   

   그림 5. PhobosSample 프로젝트

애플리케이션의 스크립트 사용자 지정

Phobos 애플리케이션에는 웹 요청에 대한 응답으로 실행되는 스크립트 세트가 포함되어 있습니다. 뷰로 사용되는 EJS 페이지도 포함되어 있습니다. 이러한 페이지에는 페이지를 표시할 때 실행되는 JavaScript로 작성한 코드 스니펫이 들어 있습니다. 이를 통해 동적 콘텐츠를 생성할 수 있습니다.

작성된 애플리케이션에는 미리 정의된 모델/뷰 쌍이 포함됩니다. 현재 상태로 애플리케이션을 실행하면 웹 페이지가 그림 6과 같이 표시됩니다. Projects 탭에서 PhobosSample을 마우스 오른쪽 버튼으로 클릭하고 Run을 선택하면 이 기본 페이지를 볼 수 있습니다.

그림 6. Phobos 애플리케이션에서 표시되는 기본 페이지

애플리케이션을 원하는 대로 만들려면 모델과 뷰를 사용자 지정해야 합니다. 모델과 뷰를 사용자 지정하려면 미리 생성한 여러 개의 스크립트를 업데이트해야 합니다. 또한 데이터베이스에 연결하는 등의 작업을 수행하려면 다른 스크립트를 만들어야 합니다. 이 팁의 뒷부분에서는 이러한 스크립트 작업을 중심으로 설명하겠습니다.

데이터베이스에 연결

애플리케이션이 작동하려면 데이터베이스에 연결해야 합니다. Phobos에서 시작 스크립트를 사용하여 연결을 구현합니다. 이 스크립트는 웹 애플리케이션을 초기화할 때 Phobos 런타임을 실행하는 특수 스크립트입니다. 이 스크립트는 데이터베이스 계층을 초기화하고, 데이터베이스에 연결하며, 애플리케이션에 필요한 테이블이 있는지 확인합니다. 테이블이 없으면 스크립트에서 만듭니다.

이러한 작업은 PHP 버전 애플리케이션의 setup.php 페이지에서 수행됩니다. Phobos 버전의 애플리케이션에서는 애플리케이션을 시작할 때 브라우저에 설치 페이지가 자동으로 표시되므로 수동으로 표시할 필요가 없습니다.

시작 스크립트를 만들려면

1. Phobos Application 아래에서 모듈 패키지를 마우스 오른쪽 버튼으로 클릭하고 New then Other를 선택합니다. 그러면 New File 창이 열립니다.
2. Scripting을 선택하고, 파일 형식으로 Phobos Script를 선택한 후 Next 버튼을 클릭합니다. 그러면 Name and Location 패널이 열립니다.
3. 스크립트 파일 이름으로 application을 입력합니다. Created File 필드에서 리소스의 전체 이름이
   web/WEB-INF/application/module/application.js인지 확인합니다.
4. Finish 버튼을 클릭하여 스크립트 파일을 만듭니다. 모듈 패키지 아래에 새 파일인 application.js가 추가된 것이 보입니다.
5. application.js 파일을 엽니다.
6. application.js 파일의 내용을 다음과 같이 바꿉니다.
   

   library.common.define(module, "application", function() {
   
          this.onStartup = function() {
   
              application.options.database.preferred = "client";
              library.db.initialize(application.datasource.client);
   
              var sql = new library.db.SqlHelper();
              library.db.using(sql, function() {
                  try {
                      var result = sql.query({query: "SELECT COUNT(*) FROM products"});
                  }
                  catch (e) {
                      // must create the table
                      sql.execute("CREATE TABLE products (" +
                                     "id int NOT NULL GENERATED ALWAYS AS IDENTITY PRIMARY KEY," +
                                     "name varchar(15) NOT NULL," +
                                     "category varchar(20) NOT NULL," +
                                     "price varchar(20) NOT NULL)");
   
                  }
              });
          }
      });

   
   
   library.common.define 함수는 함수 아래 부분의 코드를 모두 포함하므로 Phobos는 이 함수를 호출하여 패키지를 만듭니다. 이 함수 줄은 자바 프로그래밍 언어에서 package module.application; 문에 해당하는 것으로 볼 수 있습니다. JavaScript 언어에는 기본 패키지 구성이 없습니다. 그러므로 Phobos(및 다른 JavaScript 라이브러리)가 자체 구성을 정의해야 합니다.

패키지 본문에서 onStartup 함수를 정의하고 내보냅니다. 애플리케이션을 시작할 때 Phobos 런타임에서 이 함수를 호출합니다. onStartup 함수는 클라이언트 데이터베이스를 기본 데이터베이스로 선택하고 초기화합니다. 이 함수의 구성 매개 변수는 Phobos에서 다음과 같이 미리 정의됩니다.

application.datasource.client = {
       dataSourceClassName: "org.apache.derby.jdbc.ClientConnectionPoolDataSource",
       username: "APP",
       password: "APP",
       properties: {
             serverName: "localhost",
             portNumber: "1527",
             connectionAttributes: ";create=true",
             databaseName: "data"
       }
   }

보는 바와 같이 databaseName은 data로, NetBeans IDE에서 이전에 만든 데이터베이스 이름과 일치합니다.
다른 데이터베이스를 사용하려면 위에 표시된 코드를 복사하여 애플리케이션 모듈에 붙여 넣고 필요에 따라 편집해야 합니다. application.js 스크립트의 나머지 코드는 데이터베이스에 연결하여 SQL 쿼리를 실행하려고 시도합니다. 이러한 시도가 실패하면 SQL CREATE 문을 실행하여 제품 정보가 포함된 테이블을 만듭니다. 이 코드는 JavaScript를 더 편리하게 사용할 수 있는 계층 내에 JDBC를 포함하는 Phobos db 라이브러리(library.db)를 사용합니다. 이 라이브러리에 대한 자세한 내용은 Phobos Library Documentation을 참조하십시오.

애플리케이션을 다시 실행하여 추가된 코드가 올바른지 확인하고 애플리케이션을 데이터베이스에 연결할 수 있는지 테스트합니다. 모든 것이 잘 작동하면 전과 같은 페이지가 표시됩니다. 이 페이지의 내용은 애플리케이션의 기본 컨트롤러를 수정할 때까지 변경되지 않습니다. 오류가 발생하면 Phobos 오류 페이지가 완전한 스택 추적 메시지와 함께 나타나야 합니다.

기본 페이지 변경

애플리케이션이 데이터베이스에 연결되지 않으면 기본 페이지부터 나머지 코드를 구현하기 시작할 시간입니다. 이 페이지는 PHP 버전 애플리케이션의 index.php 페이지에 해당합니다. 그러나 몇 가지 뚜렷한 차이점이 있습니다. Phobos는 PHP와 달리 MVC 프레임워크 전체를 사용하므로 애플리케이션 논리가 뷰와 컨트롤러로 분리됩니다.

먼저 뷰를 업데이트하겠습니다. 프로젝트의 Phobos Application 아래에 있는 뷰 패키지의 main.ejs 파일을 업데이트하면 됩니다. 뷰의 내용은 PHP 버전의 index.php 페이지 내용과 비슷합니다. 주된 차이점은 뷰는 <?php ?> 섹션 내에 PHP 스니펫을 사용하지 않고 <% %> 내에 JavaScript 스니펫을 사용하는 점입니다.

main.ejs 파일의 코드를 다음 코드로 바꿉니다.

<html>
      <head>
         <title>Phobos Sample Application</title>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
         <link rel="stylesheet" href="style.css">
      </head>
      <body>
      <br>Using the following form, you can add products that will be inserted in
      a JavaDB database, and displayed using the jMaki Ajax framework in the table below.<br>
      <br><br>
      <form action="#" >
      Product Name : <input id="name" name="name" type="text"><br>
      Product Category :<input id="category" name="category" type="text"><br>
      Product Price : <input id="price" name="price" type="text"><br>
      </form>
      <%
          library.jmaki.insert({
               component: "yahoo.button",
               value: {label : 'add a product' }
          });
      %>
      <br>
      <b><center>List of Products:</center></b><br><br>
      <%
          library.jmaki.insert({
              component: "yahoo.dataTable",
              args: {columns : [
                       { 'label': 'name', 'id' : 'name'},
                       { 'label':'category', 'id' : 'category'},
                       { 'label': 'price ', 'id' : 'price'}
              ]},
              service: library.httpserver.makeUrl("/main/listProducts")
          });
      %>
      </body>
   </html>

파일에 내용을 붙여 넣을 때 NetBeans IDE에서 JavaScript 섹션을 강조 표시하여(기본색: 밝은 녹색) 해당 섹션이 동적 콘텐츠가 될 부분임을 나타냅니다. 강조 표시한 색으로 이러한 섹션과 페이지의 나머지 부분이 구분되어 입력한 대로 표시됩니다.

main.ejs 파일의 library.jmaki.insert 함수를 보십시오. 이 함수는 Phobos에서 jMaki 위젯을 삽입하기 위해 사용됩니다. 이 함수를 PHP 버전 애플리케이션의 index.php 파일에 포함된 addWidget 함수와 비교하면 두 함수의 인수가 비슷하다는 것을 알 수 있습니다. jMaki JSP 태그 라이브러리에 필요한 인수도 같습니다. 따라서 PHP에서 Phobos로 바로 전환할 수 있습니다.

Phobos 버전과 PHP 버전에서 jMaki 위젯을 사용하는 방식의 중요한 차이점 하나는 Phobos에서는 위젯에 전달되는 값과 인수(args) 가 문자열이 아니라 JavaScript 개체라는 점입니다. 이 점이 Phobos에서 가장 흥미로운 기능 중 하나입니다. 클라이언트(즉, 브라우저 내에서 실행 중인 스크립트)와 서버가 같은 언어(JavaScript)를 공유합니다. 따라서 두 계층 간에 더 쉽게 데이터를 공유할 수 있으며 여러 차례의 변환 작업을 수행할 필요가 없습니다. 특히, JSON(JavaScript Object notation)이 두 계층에서 지원하는 기본 형식이 되며, 이러한 특징 때문에 특히 매력적인 데이터 형식입니다.

EJS 페이지에서 또 언급할 사항은 라이브러리 함수 library.httpserver.makeUrl("/main/listProducts")에 대한 호출입니다. Phobos 뷰는 정적 콘텐츠와는 다른 디렉토리 트리에 저장되므로 다른 리소스를 참조하거나 뷰에서 컨트롤러를 참조하면 오류가 발생하기 쉽습니다. library.httpserver.makeUrl 함수는 절대 URL을 인수로 지정할 수 있으므로 이런 경우에 도움이 됩니다. 그러면 런타임에 URL이 올바른 URL로 바뀝니다. 이 예에서 URL은 기본 컨트롤러를 가리키며, 기본 컨트롤러에 액세스하면 listProducts 메소드가 호출됩니다.

jMaki Glue 추가

애플리케이션에서 jMaki를 사용하므로 jMaki Glue 파일인 glue.js를 만들어야 합니다. 이 파일은 publish-subscribe 이벤트 모델을 사용하여 페이지의 위젯을 함께 "연결합니다". 프로젝트의 Web Pages 아래에서 찾을 수 있는 Glue 파일(resources/glue.js)의 내용을 다음과 같이 바꿉니다.

// uncomment to turn on the logger
   jmaki.debug = false;
   // uncomment to show publish/subscribe messages
   jmaki.debugGlue = false;

   // map topic for the add Product button
   jmaki.subscribe("/yahoo/button/onClick", function(args) {
      // get the values of the 3 fields in the form:
      var name= document.getElementById("name").value;
      var category= document.getElementById("category").value;
      var price= document.getElementById("price").value;
      //do an ajax request to the add server side logic, with the correct params:
      jmaki.doAjax({
        url : "addProduct",
        method : "POST",
        content: {
          name : name,
          category : category,
          price : price
        },
        callback: function(req) {
        //in this call back, we just add a new row to the local jMaki table
        if (jmaki.trim(req.responseText) == "OK")
          jmaki.publish ('/yahoo/dataTable/addRow', {
                         value: {
                          name : name,
                          category : category,
                          price : price
                         }
          });
        else 
         alert ("error adding a row: "+req.responseText);
       }
     });
   });

컨트롤러 업데이트

수정된 뷰는 컨트롤러의 몇 가지 추가 동작(구현해야 할 listProducts 작업)에 기반합니다. 그러나 우선은 생성된 컨트롤러 코드를 다시 작성하여 더욱 멋진 모양으로 사용하고 JavaScript를 더 쉽게 읽을 수 있도록 만듭니다. Phobos Application 아래에 있는 컨트롤러 패키지에 포함된 main.js 파일의 코드를 다음 코드로 바꿉니다.

library.common.define(controller, "main", function() {

        function Main() {
        }

        Main.prototype.show = function() {
            model = {};

            library.view.render("main.ejs");
        }

        // export the controller class
        this.Main = Main;
   });
 




이 코드는 앞서 정의한 application.js 파일의 코드와 비슷합니다. 
컨트롤러 자체는 모듈이지만 프로젝트의 controller 노드 아래에 정의되어 있습니다. 
컨트롤러 모듈은 생성자 함수(이 예에서는 Main 함수)를 통해 JavaScript에 표시되는 컨트롤러 클래스를 정의합니다. 
또한 컨트롤러 클래스에는 일반적으로 JavaScript에서 생성자 프로토타입을 사용하여 정의되는 액션 메소드가 하나 이상 있습니다. 
전체 코드가 독특하기 때문에 처음에는 이상하게 보일 수도 있습니다. 

일부 코드를 수정했으므로 애플리케이션을 다시 실행하여 테스트해보겠습니다. 애플리케이션을 실행할 때 그림 7과 같은 페이지가 나타나야 합니다. 페이지의 일부가 제대로 표시되지 않는 경우에는 오류 메시지도 표시됩니다.

그림 7. 애플리케이션 페이지 표시 오류

이러한 오류의 원인은 애플리케이션이 일부 jMaki 위젯을 페이지에 삽입하려고 시도했으나 해당 위젯의 리소스가 애플리케이션에 없기 때문입니다. 이 문제를 해결하는 가장 쉬운 방법은 다음 작업을 수행하는 것입니다.

1. main.ejs 뷰를 엽니다.
2. NetBeans IDE에서 jMaki 팔레트를 엽니다.
3. jMaki 팔레트에서 jMaki Yahoo 항목을 확장합니다.
4. jMaki Yahoo 버튼 및 Data Table 위젯을 페이지로 드래그 앤 드롭합니다.

그림 8은 드래그 앤 드롭하여 생성한 코드의 일부를 나타냅니다.

그림 8. jMaki Yahoo 위젯을 드래그 앤 드롭하여 생성한 코드

jMaki 팔레트는 library.jmaki.insert 함수를 호출하는 일부 JavaScript 스니펫을 자동으로 삽입합니다. 페이지에 이미 해당 코드가 포함되어 있으므로 이러한 스니펫은 안전하게 삭제할 수 있습니다. 위젯을 드래그 앤 드롭할 경우 좋은 점은 필요한 리소스가 파일 프로젝트에 추가되는 것입니다. 추가된 리소스는 프로젝트의 Web Pages/resources/yahoo 폴더 아래에 있습니다.

애플리케이션을 다시 실행합니다. 그림 9와 같이 리소스와 관련된 오류 메시지가 사라지고 페이지 위쪽의 버튼이 제대로 표시됩니다. 그러나 테이블이 있어야 할 페이지 아래쪽에는 오류 메시지가 계속 남아 있습니다.

그림 9. 데이터 로드 실패 오류가 표시된 애플리케이션 페이지

오류 메시지는 listProducts 컨트롤러에서 메소드가 아직 정의되지 않았음을 나타내는 표시입니다. 이제 main.js 스크립트 내에서 다음 코드를 추가하여 정의하십시오.

   Main.prototype.listProducts = function() {
       library.httpserver.sendJSON({rows: module.persistence.fetchProducts()});
   }

Persistence 계층 추가

이제 Phobos에서 개발 진행 과정을 따라갈 수 있도록 Persistence 계층을 구현하겠습니다. 그러면 브라우저에서 listProducts 기능을 테스트할 수 있습니다. Persistence 계층을 구현하려면 persistence.js 모듈을 만듭니다. application.js 모듈을 만들 때 수행한 과정과 마찬가지로 시작 스크립트를 실행합니다.

persistence.js 모듈을 만들었으면 이 모듈의 내용을 다음 코드로 바꿉니다.

library.common.define(module, "persistence", function() {

       this.fetchProducts = function() {
               var sql = new library.db.SqlHelper();
               var products = [];
               library.db.using(sql, function() {
               products = sql.select({table: "products",
                                      columnMapping: columnMapping});
               });
               return products;
        };

        this.addProduct = function(product) {
            var sql = new library.db.SqlHelper();
            library.db.using(sql, function() {
                sql.insert({table: "products",
                            values: product,
                            propertyMapping: propertyMapping,
                            prepare: true});
            });
        };

        var columnMapping = {
          ID: "id",
          NAME: "name",
          CATEGORY: "category",
          PRICE: "price"
        };

        var propertyMapping = {
          id: "ID",
          name : "NAME",
          category : "CATEGORY",
          price : "PRICE"
        };
   });

시작 스크립트의 내용과 같이 Persistence 모듈은 Phobos db 라이브러리를 사용하여 JDBC와 직접 상호 작용하지 않도록 방지합니다. 이 모듈은 이 개체(여기에서는 모듈 자체)에 fetchProducts 및 addProducts 함수를 추가하는 방식으로 두 함수를 내보냅니다. 새 제품을 추가하는 코드는 간단합니다. 이 코드는 입력 데이터를 검증하지 않습니다. 두 함수 모두 예외를 처리하지 않고 호출자에게 다시 전달하기만 합니다. 프로덕션 애플리케이션의 경우 잘못된 데이터나 악성 데이터가 데이터베이스로 전송되지 않도록 훨씬 많은 검사 작업이 포함됩니다. 

아래쪽의 두 매핑 개체에 대해서는 설명을 하고 지나가겠습니다. 자바 DB가 모든 열 이름을 대문자로 변환하므로 데이터베이스에서 데이터를 검색하면 NAME, CATEGORY, PRICE라는 이름의 등록 정보가 표시됩니다. 그러나 main.ejs 페이지를 검사하면 각각 name, category, price라는 등록 정보가 나타납니다. 열 이름의 매핑 두 개를 등록 정보 이름으로 지정했다가 다시 원래 이름으로 지정하여 데이터베이스 계층에서 변환하는 것이 더 쉽습니다. 이 방법은 JavaScript에 일반적으로 사용되는 camel case로 작성된 이름을 매핑하려는 경우에도 유용합니다. 예를 들어 streetAddress를 STREET_ADDRESS와 같이 데이터베이스에 일반적으로 사용되는 밑줄 연결 이름으로 지정하려는 경우가 이에 해당합니다.

이제 Persistence 계층이 완료되면 브라우저가 URL http://localhost:8080/PhobosSample/main/listProducts을 가리켜 addProducts 컨트롤러 작업을 테스트할 수 있습니다. 브라우저에 다음 텍스트가 나타나야 합니다.

   {rows:[]}.

현재 데이터베이스 테이블이 비어 있기 때문에 이렇게 표시됩니다.

제품 추가

애플리케이션 사용자가 Product 버튼을 클릭하여 제품을 추가하면 애플리케이션이 기본 컨트롤러의 addProduct 메소드에 Ajax POST 요청을 보냅니다. 이제 main.js 컨트롤러 스크립트에 다음 코드를 추가하여 이 메소드를 구현할 차례입니다.

   
Main.prototype.addProduct = function() {
        var params = library.httpserver.parseRequestParameters();
        if (params.name) {
            module.persistence.addProduct({name: params.name, category: params.category, price: params.price});
            library.httpserver.sendOk();
        }
        else {
            library.httpserver.sendNotFound();
        }
   }

이 함수는 parseRequestParameters 라이브러리 함수를 사용하여 POST 요청의 본문을 JavaScript 개체로 구문 분석합니다. 그런 다음 이 함수가 해당 개체에서 데이터를 추출하여 데이터베이스 계층으로 전달합니다. 여기서 모든 등록 정보 이름이 일치하므로 함수가 params 개체를 직접 전달하도록 설계되어 있을 수 있습니다. 그러나 일반적으로 데이터베이스 계층에서 웹 페이싱(web-facing) 계층을 격리하는 것이 더 안전합니다. 이 경우 데이터베이스가 악성 클라이언트의 공격에 노출되지 않도록 방지합니다.

애플리케이션 테스트

애플리케이션이 완성되어 테스트할 준비가 되었습니다. 애플리케이션을 실행하고 몇 가지 제품을 추가해봅니다. 그림 10과 같이 업데이트가 UI에 즉시 반영되어야 합니다.

그림 10. 데이터베이스에 제품 추가

브라우저가 http://localhost:8080/PhobosSample/main/listProducts의 listProducts 작업으로 직접 이동하도록 설정할 수도 있습니다. 그렇게 하면 데이터가 JSON 형식으로 표시됩니다.

   
{"rows":[{"id":"1","category":"car","price":"15000","name":"fiat"},{"id":"2","category":"car","price":"18000","name":"subaru"}]}

요약

이 팁에서는 NetBeans IDE에서 Phobos 및 jMaki를 사용하여 Ajax 지원 애플리케이션을 구축하는 방법을 설명했습니다.

이 애플리케이션은 지속적으로 이용할 수 있도록 Phobos에서 제공하는 간단한 JDBC 래퍼 라이브러리를 사용했습니다. 데이터 모델이 더 복잡했다면 애플리케이션에서 Java Persistence API(JPA) 또는 Hibernate 등 완벽한 기능의 Java Persistence 라이브러리를 사용했을 수도 있습니다. JavaScript와 자바 프로그래밍 언어 간의 상호 작용이 뛰어나므로 개발자는 각 작업에 가장 적합한 언어를 사용하여 생산성을 늘릴 수 있습니다.

추가 자료

• Phobos 개요
• Phobos 프로젝트

저자 정보

Roberto Chinnici는 Sun Microsystems의 엔지니어입니다. 현재 자바 플랫폼 자바 EE(Enterprise Edition) 6의 스펙 부문 리더입니다. Roberto는 오랫동안 모든 플랫폼과 Phobos 작성자에게 스크립팅과 동적 언어를 지지해왔습니다.

이 글의 영문 원본은
Building An Ajax-Enabled Web Application Using Phobos and jMaki
에서 보실 수 있습니다.