Persevere에서 Ajax를 사용하여 JavaScript 객체와 서버 데이터를 매핑하기 ![]() | ![]() |
![]() |
난이도 : 중급 Kristopher William Zyp, Software Developer, Xucia 2008 년 1 월 29 일 Persevere 영속 객체 프레임웍은 영속 객체 매핑을 브라우저 JavaScript 환경으로 가져왔습니다. 객체 영속성은 자바™ 프로그래밍과 Ruby 세계에서는 매우 유명하며, 동적 JavaScript 언어는 영속 데이터로 매핑된 객체에 기본적으로 잘 맞습니다. Persevere는 Asynchronous JavaScript + XML (Ajax) 기반 웹 애플리케이션의 매핑과 통신을 자동화 하며, 관리성 있는 데이터 모델, 투명한 클라이언트-서버 Ajax 교환, 자동 상태 변경 스토리지, 트랜잭션 관리를 제공함으로써 개발의 많은 문제들을 해결하고 있습니다. 이상적으로는, 모든 애플리케이션들은 특정 형태의 영속성을 사용한다. 다시 말해서, 미래에 실행할 것을 대비하여 정보를 저장한다는 의미이다. 일반적으로, 향후 검색을 위해 정보를 영속시키는 기능은 애플리케이션의 중요한 측면이고, 애플리케이션이 사용자 인터랙션과 기여를 통합해 가면서, 영속성은 더욱 중요해 지고 있다. 하지만, 영속성은 프로그램 실행 시 데이터가 존재하던 방식과는 개념상 다른 방식으로 상태 정보를 저장해야 한다.
프 로그램 실행 시, 상태 정보는 일반적으로 객체에 저장되고(적어도, 객체 지향 프로그램에서는), 데이터베이스 또는 텍스트 또는 문자 기반 포맷으로 유지된다. 이러한 두 패러다임 간 상태 정보를 변형하려면 상당한 개발 작업이 필요하고, 에러의 가능성이 매우 크다. 영속 객체-매핑 전략은 객체를 영속 데이터에 매핑함으로써 상태 스토리지와 검색에 있어서 자동화를 제공한다. 이와 같은 매핑은 영속 상태에 액세스 하고 그 상태를 저장하는 간단한 메커니즘도 제공한다.
영 속성 매핑은 다른 언어들(예들 들어, Ruby on Rails의 Active Record와 자바의 Hibernate) 사이에서 매우 유명하다. 영속 객체로 작업할 때의 향상된 관리성 때문이다. Ajax 기반 애플리케이션에서, 브라우저에 있는 데이터에서 정보를 저장하는 프로세스는 훨씬 더 복잡하다. 데이터를 직렬화 하여 서버로 다시 보내야 하기 때문이다. 서버는 데이터를 가져오고, 영속 스토어에 저장 프로세스를 수행해야 한다. Orthogonal persistence는 전체적인 스토리지 프로세스를 자동화 함으로써 영속성을 더욱 더 단순화 한다. 영속 매핑 객체에 생긴 변화는 영속 스토리지로 자동 전파된다: 수동으로 저장 할 필요가 없다. 이 글에서는 orthogonal persistence 지원이 되는 JavaScript 언어를 위한 원격 영속 객체 매핑 프레임웍인 Persevere JavaScript 프레임웍을 사용하는 방법을 설명한다. Persevere는 JavaScript Object Notation (JSON)과 JSON for persistence (JSPON) 스팩을 따르는 표준 Representational State Transfer (REST) HTTP 메소드를 사용하여 JavaScript 객체를 원격 영속 데이터 스토어로 매핑한다. 여러분은 또한 Persevere 서버와 연결된 Persevere JavaScript 클라이언트를 사용하는 방법을 배우게 될 것이다. 이것은 데이터베이스와 다른 영속 스토어를 JSON REST 서비스로 노출하는 프로세스를 자동화 한다. Persevere를 사용하게 되면, 브라우저에 있는 JavaScript 객체에 액세스 하여 수정함으로써, 서버 상에 있는 데이터에 액세스 하여 수정할 수 있다. Persevere는 필요한 직렬화, Ajax 호출, 비직렬화를 자동화 한다. 이 글에서는 JavaScript 코드의 영속 객체 매핑을 사용하여 간단한 블로그를 구현하는 방법을 설명한다. 블로그를 만들기 위해서, Persevere 클라이언트 프레임웍과 함께 Persevere 서버를 사용한다. Persevere에서, 일반 JavaScript 객체와 프로퍼티를 사용하여 영속 데이터에 액세스 하여 조작할 수 있다. 영속 데이터 소스는 Persevere 서버가 제공하는 기본 객체 데이터베이스 스토리지이다. Persevere 서버 역시 서버에서 JSON으로 데이터베이스 매핑을 제공한다. JSON은 Persevere 클라이언트와 서버가 통신하는 포맷이다. 여러분은 간단한 JavaScript 코드와 API 사용하여 영속 객체 매핑을 통해 대부분의 객체 액세스와 수정을 수행할 수 있다. (참고자료 섹션에 모든 툴과 관련한 링크가 있다. 다운로드 섹션에서 blog.zip 패키지를 다운로드 하라.) 그림 1은 영속 서비스 지향 아키텍처(SOA)이다: 그림 1. Persevere 영속 JSON SOA ![]() 주: Persevere는 persistentjavascript.org에 정의된 JavaScript에 영속성을 위한 오픈 API 구현한다. (참고자료) 시작하려면, Persevere를 다운로드 하여 설치한다. (참고자료)
Persevere 서버에는 클라이언트가 제공되기 때문에, Persevere 서버만 다운로드 하면 된다. Persevere 서버와
실행할 준비가 된 Apache Tomcat을 다운로드 하거나, Java 2 Platform, Enterprise Edition
(J2EE) 웹 애플리케이션을 다운로드 한다. Tomcat을 다운로드 하면, bin 폴더로 가서 영
속 객체 그래프에서, 객체에 액세스 하여 수정할 수 있고, 변경 사항들이 유지된다. Persevere에는 영속 객체
브라우저(JSPON 브라우저)가 포함된다. 또한, Persevere 서버는 동적으로 확장 가능한 객체 영속 스토리지를 지원하기
때문에, 블로그를 만들기 위해 어떤 테이블도 만들 필요가 없다. 블로그 구현을 시작하기 위해, 브라우저(기본 Tomcat을
사용한다면, http://localhost:8080/browser.html)를 열고, 블로그 어레이 객체를 만든다. (그림 2)
(필자는 블로그 객체를 그림 2. 블로그 어레이 객체 만들기 ![]()
Persevere
프레임웍을 사용하여 영속 객체에 액세스 한다. Persevere 프레임웍에서, JavaScript 코드를 사전 처리하여 레이지
로딩과 orthogonal persistence 지원을 추가해야 한다. JavaScript 파일을 로딩하는 이 예제에서, 기본 Listing 1. 단일 블로그 포스트에 대한 HTML 코드 만들기
그런 다음, 블로그에 새 포스트를 생성하기 위한 HTML/JavaScript 인터페이스를 만든다. 먼저, blog.html이라는 파일을 만들고, 이것을 웹 애플리케이션의 루트 디렉토리에 놓는다. (기본 Tomcat의 webapps/ROOT/). 그리고 나서, 모든 영속성 기능을 하는 JavaScript 코드를 사용하여 blog.pjs라고 하는 파일을 만든다. Listing 2는 블로그 애플리케이션용 HTML 코드이다. Listing 2. blog.html
이제, blog.pjs에
JavaScript 함수를 작성하여 새로운 포스트를 추가할 수 있다. 새로운 포스트를 추가한다는 것은 새로운 포스트를 나타내는
새로운 JavaScript 객체를 만드는 것이다. 새로운 포스트를 영속 블로그 어레이 객체에 추가한다. 대부분의 작업이 표준
JavaScript 코드를 사용하여 수행되지만, Listing 3. addBlogPost() 함수
그런 다음, 블로그에 포스트를 디스플레이 하는 함수를 작성한다. 코드를 모듈화 하려면 두 개의 함수를 작성해야 한다. 하나는 전체 블로그를 렌더링 하는 것이고, 다른 하나는 단순한 단일 포스트를 렌더링 하는 것이다. Listing 4는 이러한 포스트를 디스플레이 하는 JavaScript 코드이다: Listing 4. 블로그용 HTML 코드 생성하기
간단한 이제, 각 포스트를 실행하기 위해, Listing 5처럼 코드를 타이핑 한다: Listing 5. 단일 블로그 포스트용 HTML 코드 생성하기
새로운 포스트가 즉각 나타나게 하려면, 페이지가 로딩될 때 그리고 이제, 새로운 블로그 인터페이스를 사용하여, 포스트를 블로그에 추가하고 기능을 수행하는 블로그를 갖추었다. 두 개의 포스트를 추가한 후에, 여러분의 블로그 모습은 그림 3과 같이 된다: 그림 3. 새로운 블로그 ![]() 영속 객체 브라우저로 가서 저장되었던 데이터를 본다. 그림 4는 포스트에 이은 브라우저이다: 그림 4. 블로그 포스트를 따르는 영속 데이터 ![]() 블로그 포스트에 코멘트를 다는 기능을 추가할 수 있다. 블로그 포스트를 클릭하는 Persevere에 영속 객체 매핑 기능과 Persevere 서버의 동적 객체 생성 기능을 사용함으로써, 블로그에 필요한 영속성을 쉽게 만들 수 있다. 블로그를 생성하기 위해 수행할 필요가 없었던 모든 단계들에 대해 생각해 보라: 데이터베이스 테이블을 생성하거나, Ajax 호출을 작성하거나, Structured Query Language (SQL) 코드를 작성하거나, 설정 파일 수정하거나, 컨트롤러를 생성할 필요가 없었다. 간단한 HTML과 JavaScript 코드를 사용하여 블로그를 구현했다. 여 러분이 구현했던 블로그에는 아직 보안이 확립되지 않았다: 게시할 수 있는 모든 사람들에게 완전히 개방되어 있다. 대부분의 웹 애플리케이션에서, 포스팅 액세스와 데이터 수정을 제한한다. 여러분 블로그의 로직은 클라이언트 측 JavaScript 스크립트이고, 보안은 클라이언트에서만 실행되어서는 안된다. Persevere 서버는 서버에서 실행되는 빌트인, 데이터 중심의 보안 기능을 갖고 있다. 대부분의 웹 애플리케이션 개발 시나리오에서, 개발자들은 애플리케이션 로직에 보안을 구현한다. 하지만, 이것은 대형 웹 애플리케이션에는 위험한 접근 방식이다. 애플리케이션 로직이 커지면서, 공격 요소도 높아지기 때문이다. 애플리케이션 로직이 복잡해 질수록, 공격자가 허점을 찾을 수 있는 기회도 더 많아진다. 데이터 중심 보안을 사용함으로써, 보안을 애플리케이션 로직과 분리한다. 이를 통해 보안 관리는 더욱 용이해 진다. Persevere 서버가 처음 설치되면, 비보안 모드에서 시작된다. 보안을 실행하려면, 영속 객체 브라우저(http://localhost:8080/browser.html)를 열고 Sign in을 클릭하여 새로운 사용자를 생성한다. 새로운 사용자가 생성되면, 보안이 실행되고, 새로운 사용자는 수퍼 유저로 임명된다. 보안이 실행된 상태에서, 기본 보안 레벨은 영속 객체들이 일반인에게는 읽을 수 있는 것으로, 수퍼 유저(새롭게 생성된 사용자)에게는 쓸 수 있는 것으로 된다. 자세한 내용은 Persevere 서버 문서를 참조하라. (참고자료) 아
마도 가장 일반적인 영속 객체 매핑의 형태는 객체 관계형 매핑일 것이다. 이 글에서는 클라이언트에서 생성된 데이터 구조에서의
영속 객체 매핑에 대해 배웠지만, Persevere 서버는 전통적인 관계형 데이터베이스를 지원하고, Persevere에서 영속
객체 매핑을 위해 JSON REST 서비스를 통해 SQL 데이터베이스 테이블 데이터를 노출한다. SQL 데이터베이스 테이블
예제를 보려면, 영속 객체 브라우저를 열고, Listing 6. 관계형 데이터베이스와의 JavaScript 인터랙션
이 문은 테이블에서 데이터를 로딩하고, 첫 번째 행의 이름 컬럼의 값을 새로운 값으로 바꾼다. 또한, 블로그 예제에 사용된 객체 데이터베이스 스토리지를 관계형 데이터베이스 스토리지로 대체할 수 있다. 객체 추상화 대문에, 관계형 데이터베이스 스토리지가 정확히 설정되면, 블로그 프로퍼티를 수정하여 관계형 데이터베이스 스토리지를 참조할 수 있고, 블로그 애플리케이션은 단 한 줄의 코드도 바꾸지 않고 똑같이 작동한다. Persevere에는 JSON Schemas를 정의하는 것을 지원한다. JSON Schemas는 프로퍼티 값으로 허용할 수 있는 유형을 정의한다. 예를 들어,
Persevere는 수정 사항들을 트랜잭션으로 그룹핑 한다. 한 개의 이벤트 핸들링에서 발생한 모든 수정 사항(예, 하지만, 트랜잭션에 더 심도 깊은 컨트롤이 필요할 때가 있다: Persistent JavaScript API는 트랜잭션을 제어하는 두 개의 메소드, Listing 7. 트랜잭션 제어
Persevere JavaScript 클라이언트는 Persevere 서버에 의존하지 않는다. 서버와의 모든 통신이 표준 HTTP 메소드와 JSON 포맷에 의존하기 때문에, Persevere를 사용하여 PHP, Ruby, 기타 기술과 영속 객체 매핑을 수행하는 것은 어렵지 않다. 이 글에서는 HTTP와 JSPON 스팩을 다루지 않지만, 서버는 JSON을 제공해야 하고, 표준 HTTP(PUT, POST, DELETE) 수정 요청을 JSPON 스팩에 따라 핸들 해야 한다. Persevere 는 함수 또는 메소드를 동적 영속 객체에 존속시킨다. 이 블로그 애플리케이션에서, 여러분이 작성했던 모든 함수들을 블로그 영속 객체의 메소드로서 생성할 수 있다. 이러한 방식을 사용하여, 전체 애플리케이션 로직은 데이터와 같은 영속 스토리지에 저장될 수 있다. Persevere 서버는 내부 JavaScript 환경을 사용하여 영속 객체를 매핑하기 때문에(그림 1), 영속 함수들은 클라이언트에서처럼 서버에서 실행될 수 있다. Persevere 서버는 Persistent JavaScript를 구현하기 때문에(참고자료), 이 함수는 클라이언트에서와 같은 방식으로 영속 데이터에 액세스 할 수 있고, JSON-RPC를 사용함으로써, 일반적인 JavaScript 호출 신택스로 원격 환경에서 함수를 보다 투명하게 호출할 수 있다. 이러한 기능은 애플리케이션에 더욱 일관된 환경을 제공한다. 하나의 스토리지 장치가 로직과 데이터에 사용되기 때문이다. 또한, 프로그래밍에 실시간을 제공한다. 함수들은 영속 객체 브라우저에서 작성, 테스트, 저장될 수 있다.
orthogonal persistence 객체 매핑을 사용함으로써, 간단하고 친숙한 JavaScript 코드를 사용하여 강력한 Ajax 애플리케이션을 신속하게 개발할 수 있다. Ajax 요청, 직렬화, 데이터베이스 인터랙션을 작성할 때의 복잡함은, 신속한 애플리케이션 개발을 위해 영속 데이터로 객체 지향 방식의 액세스를 제공하는 Persevere에서 쉽게 처리될 수 있다.
Note
교육
제품 및 기술 얻기
토론
|