간단한 Javascript 데이터 액세스 소개

정말 멋진 Web 2.0 Javascript 애플리케이션 프로토타입을 작성하고 싶겠지만, 데이터베이스를 연결하는 코드를 작성하는 데 모든 시간을 소비하고 싶지는 않을 것이다. 전통적으로 데이터베이스에서 프론트엔드로 데이터를 가져오려면 모든 CRUD(Create, Read, Update, and Delete) 메소드를 사용하여 데이터베이스에서 각 테이블에 맞는 클래스를 작성해야 한다. 그런 다음, 클래스 위에 마샬링 코드를 일부 삽입하여 프론트엔드에 액세스 계층을 제공해야 한다. 그런 다음 Javascript 라이브러리를 클래스 위에 삽입하여 백엔드에 액세스한다. 이러한 과정은 매우 복잡하다.

이 기사에서는 데이터베이스 클래스 하나로 여러 개의 데이터베이스 테이블을 둘러싸는 새로운 방법을 소개한다. 드라이버 스크립트 하나로 프론트엔드를 백엔드에 연결하고 프론트엔드에 있는 다른 랩퍼 클래스를 사용하여 필요한 모든 테이블에 액세스할 수 있게 한다. 그림 1에는 완전한 스택이 표시되어 있다.

샘플 애플리케이션에서는 항목을 새로 추가하는 기능이 있는 목록 페이지가 기본 사용자 인터페이스가 된다. 이 페이지에서는 Javascript 클래스를 사용하여 백엔드를 통해 데이터베이스에 액세스한다. 따라서 이 Javascript 클래스는 jQuery를 사용하여 Ajax 요청을 수행한다.

Ajax 요청은 PHP 드라이버 페이지에서 처리되며 이 페이지에서는 요청이 유효한지 확인한 후, 요청을 처리하는 데이터베이스 랩퍼 클래스로 전달한다. 이 랩퍼가 결과를 일부 리턴하면 PHP 드라이버 페이지에서 JSON 형식으로 변경하여 다시 브라우저에 전송한다.

이러한 방식에는 몇 가지 제한사항이 있다. 첫째, 각 요청이 테이블당 한 번씩 수행되기 때문에 관련된 테이블 전체를 대상으로 작업을 수행하기에는 좋지 않다. 이 방법을 수정하려면 사용자 정의 메소드를 새로 추가하여 테이블 전체를 대상으로 관계형 요청을 해야 한다. 둘째, 데이터에 대한 적절한 액세스 권한을 보장하기 위해 역할이나 사용자를 확인하는 과정을 수행하지 않기 때문에 데이터 보안에 문제점이 있다. 사용자와 역할을 처리하는 코드를 일부 추가하여 이 방법을 수정할 수 있다.

이 코드를 이용하면 데이터베이스에서 데이터를 가져와서 사용자 인터페이스로 보낼 수 있는 쉽고 빠르고 안전한 방법을 통해 신속하게 애플리케이션 프로토타입을 작성할 수 있다. 또한, 이 코드는 데이터베이스 액세스, PHP, Ajax, jQuery 및 Javascript와 같은 기술을 배울 수 있는 우수한 학습 도구이다.

위로

데이터베이스 빌드

모든 것은 데이터베이스에서 시작된다. 이 예제에서는 저자와 그들이 작성한 책으로 구성된 데이터베이스를 사용한다. 목록 1에는 데이터베이스를 초기화하는 데 필요한 MySQL 초기화 코드가 표시되어 있다.

DROP TABLE IF EXISTS authors;
CREATE TABLE authors (
  id BIGINT NOT NULL PRIMARY KEY auto_increment,
  name VARCHAR(255) NOT NULL
);

DROP TABLE IF EXISTS books;
CREATE TABLE books (
  id BIGINT NOT NULL PRIMARY KEY auto_increment,
  author_id INT NOT NULL,
  name VARCHAR(255) NOT NULL
);

INSERT INTO authors VALUES ( 0, 'Jack Herrington' );
INSERT INTO authors VALUES ( 0, 'Dave Smith' );
INSERT INTO authors VALUES ( 0, 'Harold Rollins' );

INSERT INTO books VALUES ( 0, 1, 'Code Generation In Action' );
INSERT INTO books VALUES ( 0, 1, 'Podcasting Hacks' );
INSERT INTO books VALUES ( 0, 2, 'Welcome To The Universe' );

이 코드를 데이터베이스로 가져가려면 먼저, 다음과 같이 데이터베이스를 작성한다.

% mysqladmin create books

그런 다음, 다음과 같이 테이블과 일부 데이터를 데이터베이스에 추가한다.

% mysql books < books.sql

물론, 데이터베이스 사용자 이름과 비밀번호를 지정해야 하는 경우에는 명령이 약간 달라질 수 있다.

위로

데이터베이스 랩퍼 작성

데이터베이스에 액세스하려면 먼저, PHP로 DatabaseWrapper 클래스를 작성해야 한다. 이 클래스는 데이터베이스 연결 핸들과 생성 중인 테이블 이름을 받고 다음과 같은 다섯 가지 메소드를 제공한다.

• get—get 메소드는 정수 ID가 주어진 테이블에 있는 하나의 행을 리턴한다. 이 테이블의 "id" 필드에는 고유 정수 값이 있다고 가정한다.
• getAll—이 메소드는 데이터베이스에 있는 모든 레코드를 리턴한다. 이 메소드에는 몇 가지 옵션이 있다. 여기에서는 리턴되는 레코드 수를 제한하는 한 가지 옵션만 구현한다. 원하면 더 많은 옵션을 추가할 수 있다. 예를 들면, "order" 옵션은 지정된 필드로 정렬된 레코드를 리턴한다.
• delete—delete 메소드는 정수 ID를 받아서 테이블에 있는 해당 행을 삭제한다.
• insert—insert 메소드는 테이블에 행을 새로 추가한다.
• update—update 메소드는 정수 ID를 받아서 업데이트할 행과 지정된 값으로 업데이트할 필드의 해시 테이블을 지정한다.

이러한 다섯 가지 함수를 통해 모든 클라이언트의 CRUD 인터페이스가 완전하게 구현된다. 그렇지만 이러한 함수는 하나의 테이블에 대해서만 작동하며 관계를 통해 다수의 테이블 전체를 대상으로 작동하지는 못한다는 제한이 있다.

목록 2에는 데이터베이스 랩퍼 클래스 코드가 표시되어 있다.

<?php
class DatabaseWrapper {
  private $dbh;
  
  public function __construct( $dbh, $table ) {
    $this->dbh = $dbh;
    $this->table = $table;
  }

  public function get( $id ) {
    $sql = 'SELECT * FROM '.$this->table.' WHERE id = :id';
    $sth = $this->dbh->prepare($sql);
    $sth->execute(array(':id' => $id));
    return $sth->fetchObject();
  }

  public function getAll( $options = array() ) {
    $sql = 'SELECT * FROM '.$this->table;
    if ( isset( $options->{'limit'} ) ) {
      $sql .= ' LIMIT '.$this->dbh->quote( $options->{'limit'}, PDO::PARAM_INT );
    }
    $sth = $this->dbh->prepare($sql);
    $sth->execute();
    return $sth->fetchAll( PDO::FETCH_CLASS );
  }

  public function delete( $id ) {
    $sql = 'DELETE FROM '.$this->table.' WHERE id = :id';
    $sth = $this->dbh->prepare($sql);
    $sth->execute(array(':id' => $id));
  }

  public function update( $id, $values ) {
    $binds = array( ':id' => $id );
    $bindnames = array();

    foreach(array_keys($values) as $k) {
      $k = $this->clean( $k );
      $binds[ ":$k" ] = $values[ $k ];
      $bindnames []= "$k=:$k";
    }

    $bindnames = join( $bindnames, ',' );

    $sql = 'UPDATE '.$this->table." SET $bindnames WHERE id=:id";

    $sth = $this->dbh->prepare($sql);

    $sth->execute( $binds );
  }

  public function insert( $values ) {
    $keys = array();
    $binds = array();
    $bindnames = array();

    foreach(array_keys($values) as $k) {
      $k = $this->clean( $k );
      $keys []= $k;
      $binds[ ":$k" ] = $values[ $k ];
      $bindnames []= ":$k";
    }

    $keys = join( $keys, ',' );
    $bindnames = join( $bindnames, ',' );

    $sql = 'INSERT INTO '.$this->table." ( $keys ) VALUES ( $bindnames )";

    $sth = $this->dbh->prepare($sql);

    $sth->execute( $binds );

    return $this->dbh->lastInsertId();
  }

  private function clean( $k ) {
    return preg_replace( '[^A-Za-z0-9_]', '', $k );
  }
}
?>

get과 getAll 메소드의 코드가 가장 간단하다. 이 메소드에서는 연결 핸들을 통해 데이터베이스에 대한 SELECT 요청을 수행하기 위해 PHP용 PDO 라이브러리를 사용한다. delete 메소드는 단지 간단한 DELETE 요청을 수행하므로 매우 간단하다.

유념해야 할 한 가지 중요한 사항은 SQL문에서는 콜론으로 분리된 대체 연산자를 사용한다는 점이다. 이러한 대체 연산자는 데이터베이스 액세스를 안전하게 보호하는 중요한 역할을 한다. 대체 연산자를 사용하면 악성 스크립트를 이용하여 쿼리에 SQL을 추가함으로써 기존 코드를 대체할 수 없으며, 공개되지 말아야 하는 데이터에 액세스할 수도 없다. 이러한 전략을 "SQL 인젝션"이라고 하며 이는 매우 일반적인 공격 유형이다.

insert와 update 메소드에서는 입력 데이터에 맞는 추가 필드로 SQL문을 형식화해야 하기 때문에 이러한 메소드는 약간 더 복잡하다. 필드 이름은 필드 이름으로 사용할 수 없는 문자를 리턴하는 clean 메소드를 사용하여 정리한다. 이 메소드를 사용하면 SQL 인젝션 공격을 차단할 수 있다.

위로

웹 프론트엔드에서 데이터베이스 액세스하기

브라우저로 데이터를 가져오려면 웹 페이지를 통해 데이터에 액세스할 수 있어야 한다. 이렇게 하기 위해 driver.php 페이지를 작성한다. 이 웹 페이지에 해당하는 코드는 목록 3에 있다.

<?php
include 'dbwrapper.php';

header( 'Content-Type', 'application/json' );

try {
  $table = null;
  
  if ( $_GET['table'] == 'books' || $_GET['table'] == 'authors' )
    $table = $_GET['table'];
  else
    throw new Exception( 'Invalid table name' );

  $dw = new DatabaseWrapper(
    new PDO('mysql:host=localhost;dbname=books', 'root', ''),
    $table
  );

  $additional = array();
  foreach( array_keys( $_GET ) as $k ) {
    if ( $k != 'table' && $k != 'method' && $k != 'id' ) {
      $additional[$k] = $_GET[$k];
    }
  }

  switch( $_GET['method'] ) {
    case 'get':
      print json_encode( $dw->get( $_GET['id'] ) );
      break;
    case 'getAll':
      print json_encode( $dw->getAll( $additional ) );
      break;
    case 'insert':
      print json_encode( $dw->insert( $additional ) );
      break;
    case 'update':
      $dw->update( $newid, $additional );
      print json_encode( true );
      break;
    case 'delete':
      $dw->delete( $_GET['id'] );
      print json_encode( true );
      break;
    default:
      throw new Exception( 'Unknown method' );
      break;
  }

} catch ( Exception $e ) {
  print json_encode( array( 'error' => $e->getMessage() ) );
}
?>

이 간단한 스크립트는 웹 요청을 통해 GET 매개변수를 받아서 이 매개변수를 DatabaseWrapper 인스턴스에 전송한다. 그런 다음 데이터베이스에 액세스하는 데 성공하면 그 결과를 JSON으로 형식화한다. 처리 과정에서 오류가 발생하면 throw 명령을 사용하여 예외를 처리한 다음, JSON으로 형식화한다.

이 스크립트가 데이터베이스에 있는 모든 테이블을 액세스하지 않도록 이 코드에서는 먼저 요청된 테이블 이름을 확인한다. 이 경우에는 "authors" 또는 "books"만 액세스할 수 있다. 자신의 스키마를 대상으로 이 코드를 사용하는 경우에는 이 코드의 해당 부분을 변경해야 한다.

이 코드에서는 메소드 매개변수를 조사하여 다섯 가지 조치(get, getAll, delete, insert 또는 update) 중 어느 것이 호출되는지 확인한다. insert가 호출되는 경우에는 GET 배열의 추가 키 배열과 함께 update와 getAll도 전송된다.

이 코드를 테스트하려면 웹 브라우저를 열고 다양한 URL 매개변수를 사용하여 driver.php 페이지에 액세스한다. 그림 2에는 URL에 get 메소드를 사용하여 하나의 레코드를 액세스하도록 지정했을 때의 결과가 표시되어 있다.

그림 2에는 요청된 author 행을 JSON 형식으로 인코딩한 레코드가 표시되어 있다. JSON 오브젝트에는 Javascript 해시 테이블로 인코딩된 레코드의 "id" 필드와 "name" 필드가 모두 포함되어 있다.

이 요청에 사용된 매개변수는 다음과 같다.

driver.php?table=authors&method=get&id=1

모든 레코드를 가져오려면 메소드를 변경하고 "id" 스펙을 제거한다.

driver.php?table=authors&method=getAll

그림 3에는 가져온 레코드를 JSON으로 형식화한 결과가 표시되어 있다.

그림 3에는 리턴된 Javascript 레코드의 배열이 표시되어 있으며, 이 배열에는 데이터베이스에 있는 각 행의 "name"과 "id" 필드가 포함되어 있다.

분명히 서버 코드의 기초는 웹 인터페이스를 빌드하기에 충분하다. 그러면 이제 프론트엔드를 빌드하자.

위로

Javascript 액세스 클래스 작성

웹 브라우저로 데이터베이스에 액세스하려면 Ajax를 통해 driver.php를 사용하는 클래스가 필요하다. jQuery나 Protype.js와 같은 Javascript 라이브러리를 사용하지 않으면 Ajax 요청이 약간 까다로울 수 있다. 이 기사에서는 jQuery를 사용하지만, 이 코드를 약간 수정하여 어떤 것이든 원하는 라이브러리를 사용할 수 있다.

jQuery 이외에도 Class 확장을 사용할 수도 있으며 이렇게 하면 새 Javascript 클래스(이 경우에는 목록 4에 있는 DbWrapper 클래스)를 쉽게 정의할 수 있다.

var DbWrapper = Class.create({
  table: '',
  get: function( id, callback ) {
    $.getJSON( 'driver.php', { table: this.table, method: 'get', id: id }, callback );
  },
  getAll: function( callback, params ) {
    if ( params == null ) params = {};
    params.table = this.table;
    params.method = 'getAll';
    $.getJSON( 'driver.php', params, callback );
  },
  insertObject: function( params, callback ) {
    params.table = this.table;
    params.method = 'insert';
    $.getJSON( 'driver.php', params, callback );
  },
  updateObject: function( id, params, callback ) {
    params.table = this.table;
    params['id'] = id;
    params.method = 'insert';
    $.getJSON( 'driver.php', params, callback );
  },
  deleteObject: function( id, callback ) {
    $.getJSON( 'driver.php', { table:this.table,
        'id':id, method: 'delete' }, callback );
  }
});

이 간단한 클래스는 백엔드에 있는 다섯 가지 메소드를 각각 둘러싼다. 각 메소드는 선택된 메소드를 기반으로 하는 다양한 매개변수 세트를 사용하여 getJSON을 호출한다. 이외에도 각 메소드는 요청을 통해 리턴되는 데이터를 처리하는 콜백을 받는다.

delete는 Javascript의 예약어이기 때문에 insert, update 및 delete의 메소드 이름은 insertObject, updateObject 및 deleteObject로 변경된다.

목록 5에는 새 Javascript 클래스를 사용하는 페이지가 표시되어 있다.

<html>
<head><title>Database access test</title>
<script src="jquery-1.5.min.js"></script>
<script src="Class-0.0.2.min.js"></script>
<script src="dbwrapper.js"></script>
<script>
var dbw = null;

function updateAuthorsTable() {
  dbw.getAll( function( data ) {
    $('#authors').html('<table id="authors"><tr><td>ID</td>
                        <td>Author</td></tr></table>');
    $(data).each( function( ind, author ) {
      $('#authors tr:last').after('<tr><td>'+author.id+'</td>
                        <td>'+author.name+'</td></tr>');
    } );
  } );
}

$(document).ready(function() {
  dbw = new DbWrapper();
  dbw.table = 'authors';

  updateAuthorsTable();
  
  $('#addbutton').click( function() {
    dbw.insertObject( { name: $('#authorname').val() },
      function( data ) {
        updateAuthorsTable();
      } );
  } );
} );
</script>
</head>
<body>
  <table id="authors">
  </table>
  <h3>Add A New Author</h3>
  Name: <input type="text" id="authorname">
  <input type="submit" value="Add" id="addbutton">
</body>
</html>

이 페이지에서는 먼저, jQuery, Class 확장 및 새 DbWrapper.js 파일을 삽입해야 한다. 그런 다음, 이 페이지는 ready 함수에서 로드되므로 DbWrapper를 작성한다. 이 DbWrapper 인스턴스는 랩퍼를 사용하여 데이터베이스에 있는 모든 저자를 요청하는 updateAuthorsTable 함수에서 사용된다. updateAuthorsTable 함수는 데이터베이스 테이블의 컨텐츠를 표시할 페이지의 테이블에 행을 추가한다.

저자 이름 양식은 이 페이지 맨 아래에 Add 단추와 함께 배치된다. 이 Add 단추의 스크립트는 데이터베이스에 새 행을 추가할 DbWrapper 클래스에서 insertObject 메소드를 호출한다. 이 조작이 성공적으로 수행되면 이 스크립트는 updateAuthorsTable 함수를 호출하여 화면을 새로운 행으로 업데이트한다.

모든 것이 제대로 설정된 경우, 처음에 이 페이지를 실행하면 그림 4와 같은 화면이 표시된다.

이 그림에는 해당 페이지가 서버측에 있는 driver.php 스크립트에 연결되어 데이터를 요청한 다음, 데이터를 형식화하여 표시한 결과가 표시되어 있다. 모든 것이 제대로 작동하는 경우에는 이 화면에 데이터베이스에서 가져온 저자 목록과 입력 상자 및 저자 레코드를 새로 작성하는 Add 단추가 표시된다.

다음 단계에서는 행을 추가하는 조작이 작동하는지 확인한다. 이 경우에는 그림 5에서와 같이 저자 이름 필드에 Geraldo Rivera를 입력한 다음, Add를 클릭한다.

이 Add 단추의 코드는 서버에서 insert 메소드를 호출하는 DbWrapper 클래스에서 insertObject 메소드를 호출한다. 이 단계가 성공적으로 수행되면 이 페이지에 있는 Javascript가 페이지가 로드되는 과정에서 처음 호출된 함수를 사용하여 authors 테이블을 업데이트한다. 그림 6에는 그 결과가 표시되어 있다.

그림 6에는 애플리케이션에서 authors 테이블에 저자 "Geraldo Rivera"를 추가한 결과가 표시되어있다. 이 그림에서 사용자에게 백엔드 데이터베이스에 대한 읽기 및 쓰기 액세스 권한이 모두 있다는 것을 알 수 있다. 테이블이 더 많은 다른 스키마에 액세스하려면 driver.php 스크립트에 새 테이블을 지원하는 기능을 추가하기만 하면 된다.

위로

결론

이 기사를 시작할 때 언급한 바와 같이 이 코드는 프로덕션 환경에서 사용하기보다는 신속하게 프로토타입을 작성해야 할 경우에 사용하는 것이 매우 적합하다. 이는 다음과 같은 몇 가지 이유 때문이다.

• 액세스 과정이 매우 개방적이고 이 과정에서 사용자, 역할 또는 권한이 처리된다.
• 이러한 방식은 해당 스키마의 테이블 간에 관계가 있는 경우(이러한 경우가 대부분임)에 특히 효과적이지 못하다.

또한 이 예제는 RESTful 방식을 따르고 있지 않다는 점에 특히 문제가 있을 수 있다. RESTful 방식의 애플리케이션에서는 애플리케이션의 상태를 변경하는 방식으로 GET 요청에 응답해서는 안 된다. (이러한 경우에는 삽입, 업데이트 및 삭제 요청이 발생한다.) 이렇게 한 이유를 설명하자면, REST 방식에서 요구되는 URL 재작성과 POST 및 DELE를 처리하는 PHP 서비스를 설정하기는 매우 어렵기 때문이다. 그 대신 여기에서는 간단한 페이지를 데모로 사용했다.

그러나 모든 제한사항을 제외하면 이 예제는 PHP, PDO 라이브러리 및 jQuery를 함께 사용하여 Javascript용 포터블 데이터 액세스 계층을 작성하는 방법에 대한 매우 흥미로운 예제라고 할 수 있다. 직접 시도해 보도록 하자. 이 예제가 프로덕션 환경에는 적합하지 않다고 해도 이 예제가 독자에게 도움을 줄 수 있을 것이라고 확신한다.

참고자료

교육

• jQuery 사이트: 신속한 웹 개발에 필요한 것을 얻자. jQuery 라이브러리를 다운로드하고 필요한 모든 문서를 찾아보자.
  
  
• jQuery 클래스 확장: Google의 코드 사이트에서 호스트하는, jQuery 클래스를 작성 및 관리할 수 있는 간단한 확장을 찾아보자.
  
  
• PHP 사이트: 웹 개발에 특히 적합하고 널리 사용되고 있는 범용 스크립팅 언어인 PHP에 대한 최상의 참고 사이트인 이 사이트를 방문해 보자.
  
  
• W3C: 다양한 표준을 확인할 수 있는 이 훌륭한 사이트를 방문해 보자. 특히 XML 표준은 이 기사와도 관련이 있다.
  
  
• PDO 라이브러리: PHP 등으로 데이터베이스를 액세스하는 방법과 관련된 이러한 모든 유스 케이스에 대한 우수한 문서를 찾아 보자.
  
  
• 필자의 더 많은 기사(Jack Herrington저, developerWorks, 2005년 3월 - 현재): Ajax, JSON, PHP, XML 및 다른 기술에 대한 기사를 읽어보자.
  
  
• developerWorks의 XML 영역: XML 분야의 기술을 향상시키는 데 도움이 되는 참고자료를 얻을 수 있다.
  
  
• developerWorks 오픈 소스 영역: 오픈 소스 기술을 활용하여 개발 작업을 수행하고 이러한 기술을 IBM 제품과 함께 사용하는 데 도움이 되는 사용법 정보, 도구 및 프로젝트 업데이트와 IBM에서 가장 인기있는 기사 및 튜토리얼을 확인할 수 있다.
  
  
• My developerWorks: developerWorks와 관련된 경험을 개인화할 수 있다.
  
  
• IBM XML 인증: XML 및 관련 기술에 대한 IBM 인증 개발자가 되는 방법을 찾아볼 수 있다.
  
  
• XML 기술 자료: developerWorks XML 영역에서 다양한 기술 관련 기사와 팁, 튜토리얼, 표준 및 IBM Redbook을 볼 수 있다. 또한 더 많은 XML 팁을 읽어본다.
  
  
• developerWorks 기술 행사 및 웹 캐스트: 이러한 세션에 참가하여 최신 기술에 대한 정보를 얻을 수 있다.
  
  
• Twitter의 developerWorks 페이지: 오늘 가입하여 developerWorks 트윗을 팔로우하자.
  
  
• developerWorks podcasts: 소프트웨어 개발자의 흥미로운 인터뷰와 토론을 확인할 수 있다.
  
  
• developerWorks on-demand demos: 입문자를 위한 제품 설치 및 설정 과정에서 숙련된 개발자를 위한 고급 기능의 활용에 이르기까지 다양한 데모를 제공한다.
  
  

제품 및 기술 얻기

• IBM 제품 평가판: IBM SQA Sandbox의 온라인 시험판을 다운로드하거나 살펴보고 DB2®, Lotus®, Rational®, Tivoli® 및 WebSphere® 애플리케이션 개발 도구 및 미들웨어 제품을 사용해 볼 수 있다.
  
  

토론

• XML 영역 토론 포럼: 여러 XML 관련 토론에 참여해 볼 수 있다.
  
  
• developerWorks 커뮤니티: 개발자가 운영하고 있는 블로그, 포럼, 그룹 및 위키를 살펴보면서 다른 developerWorks 사용자와 의견을 나눌 수 있다.
  
  

필자소개

아티클 순위

의견

위로

목차

• 간단한 Javascript 데이터 액세스 소개
• 데이터베이스 빌드
• 데이터베이스 랩퍼 작성
• 웹 프론트엔드에서 데이터베이스 액세스하기
• Javascript 액세스 클래스 작성
• 결론
• 참고자료
• 필자소개
• 의견