목차
- 매쉬업이란?
- 이름에 담긴 의미
- 매쉬업 스타일
- Pet Store 애플리케이션의 매쉬업에 대한 간략한 소개
- 서버측 매쉬업
- 프록시 스타일을 사용해야 하는 이유
- 프록시 스타일 매쉬업 예제
- 서버측 매쉬업의 설계 고려 사항
- 요약
- 자세한 정보
매쉬업이란?

그림 1: 레스토랑 위치가 강조 표시된 사이트
특정 도시에 있는 레스토랑 목록을 표시하는 웹 사이트로 이동한 다음 이 사이트에서 레스토랑 위치가 강조 표시된 맵을 표시하도록 요청하는 것은 요즘 그리 어려운 일이 아닙니다. 그림1은 이 유형의 사이트를 보여 주는 예입니다. 목록과 맵이 해당 사이트 내에 있는 리소스로부터 생성되는 것이라고 생각하겠지만 이 두 유형의 정보는 대개 서로 다른 사이트에서 비롯됩니다. 특히 두 유형의 컨텐츠를 생성하는 서비스는 서로 다른 사이트에 있습니다. 여러 웹 사이트에 있는 서비스와 컨텐츠를 긴밀하고 통합된 방식으로 병합하는 것을 매쉬업이라고 합니다.
대부분의 매쉬업은 단순히 서비스와 컨텐츠를 통합하는 것 이상의 작업을 수행합니다. 매쉬업을 수행하는 사이트는 대개 가치를 추가하여 사용자들이 이용하는 개별 서비스와는 차별화되고 나은 방식으로 사용자에게 혜택을 제공합니다. 예를 들어, Delexa.org는 북마크 공유(social bookmarking) 사이트인 del.icio.us와 웹 사이트 트래픽 추적기 Alexa의 데이터를 모두 가져옵니다. Delexa.org는 del.icio.us에서 추출한 항목 태그를 사용하여 사용자가 최상위 트래픽 사이트를 항목별로 검색할 수 있습니다. 이것은 Alexa 사이트에서 제한된 방식으로만 수행할 수 있는 작업입니다. 예를 들어, 사용자는 가장 자주 방문하는 원예 사이트나 가장 자주 방문하는 가라데 사이트를 표시하도록 요청할 수 있습니다.
매쉬업은 매우 빠른 속도로 웹에 사용되고 있습니다. 일반적으로 매일 세 개의 매쉬업이 웹에 새로 사용됩니다. 최신 매쉬업은 ProgrammableWeb 사이트에서 확인할 수 있습니다. 웹에 사용되는 대부분의 매쉬업은 맵 사용과 관련이 있습니다. 이러한 대부분의 사이트는 Yahoo Maps 및 Google Maps에서 제공하는 것과 같은 매핑 서비스를 사용합니다. 예를 들어, mibazaar.com은 그림 1에 표시된 목록 유형과 맵을 표시하는 매쉬업에 Google Maps 서비스를 사용합니다.
그러나 매쉬업 사이트는 매핑에만 관여하는 것이 아닙니다. Delexa.org 사이트에서와 같이 매쉬업은 북마크된 페이지에 식별된 항목과 웹 트래픽 데이터와 같은 다른 유형의 정보에 관여할 수 있습니다. 또한 점점 더 많은 매쉬업이 Flickr 및 YouTube와 같은 사이트의 멀티미디어 컨텐츠에 관여하거나 Amazon.com과 같은 쇼핑 사이트의 서비스를 포함합니다.
이러한 매쉬업을 살펴 보면 다양한 접근 방식을 파악할 수 있을 것입니다. 이 기사는 매쉬업을 수행하는 데 가장 일반적인 접근 방식, 즉 스타일에 대해 살펴 보는 첫 번째 기사로서, 이러한 스타일을 비교 및 대조하고 각 스타일과 관련된 주요 설계 고려 사항을 살펴 봅니다. 이 첫 번째 기사는 서버측 매쉬업이라고 하는 스타일에 대해 설명합니다.
이름에 담긴 의미
매쉬업 구성 요소에 대한 약간의 모호함과 어느 정도의 주관성이 있을 수 있습니다.
매쉬업 스타일을 살펴 보기 전에, 매쉬업이라는 용어의 정의가
기사에 설명되어 있지만 한 개의 정의만으로는 모든 매쉬업을 설명하기 어렵다는 점을 이해해야 합니다. 이 기사에서는 다소 느슨한 매쉬업 정의를 사용하는데, 웹 사이트에서 다른 웹 사이트의 데이터나 기능을 사용하여 이를 애플리케이션에 결합하는 것을 매쉬업이라고 정의합니다. 애플리케이션은 여러 가지 방법으로 데이터나 기능에 액세스할 수 있으며 다른 사이트에서 제공하는 공식 REST(Representational State Transfer) 기반 API를 사용할 수 있습니다. 또는 다른 사이트에 표시된 프로그램의 출력에서 데이터를 추출하는 비공식적인 화면 스크랩을 수행할 수 있습니다. 또는 RSS 피드에 액세스하거나 다른 사이트에서 제공하는 위짓트를 사용할 수 있습니다. 그러나 애플리케이션이 HTML href와 같은 링크를 통해 단순히 다른 사이트에 링크만 되어 있다면 이는 매쉬업이 아닙니다. 가장 간단한 의미에서 웹 애플리케이션이 다른 웹 사이트를 사용하고 있는 것을 매쉬업이라고 합니다.
이 연재 기사를 읽는 동안 매쉬업 구성요소에 대한 약간의 모호함과 어느 정도의 주관성이 있을 수 있다는 점을 유념하십시오.
매쉬업 스타일
두 개의 주요 매쉬업 스타일은 서버측 매쉬업과 클라이언트측 매쉬업입니다. 예상대로 서버측 매쉬업은 서버에서 서비스와 컨텐츠를 통합합니다. 서버는 클라이언트에 있는 웹 애플리케이션(일반적으로 브라우저)과 매쉬업에 참여하는 다른 웹 사이트 사이에서 프록시 역할을 합니다. 서버측 매쉬업의 경우 클라이언트에서 요청한 모든 사항이 서버로 전달되며, 서버는 다른 웹 사이트를 호출하기 위한 프록시 역할을 합니다. 따라서 서버측 매쉬업에서는 작업이 웹 애플리케이션 클라이언트에서 서버로 전달됩니다.
일반적으로 서버측 매쉬업의 작동 방식은 그림 2와 같습니다.
그림 2: 서버측 매쉬업의 작동 방식
- 사용자가 클라이언트에서 이벤트를 생성합니다. 일반적으로 브라우저에서 웹 페이지를 생성합니다. 이벤트가 클라이언트에서 JavaScript 함수를 트리거합니다.
- 클라이언트가 웹 사이트에서 서버에 대한 요청을 생성합니다. 이 요청은 일반적으로
XmlHttpRequest개체 형태의 Ajax 요청입니다. - 서블릿과 같은 웹 구성요소가 요청을 수신하고 한 개 이상의 Java 클래스에서 메소드를 호출합니다. 해당 클래스가 코드를 캡슐화하여 매쉬업에 포함된 다른 웹 사이트와 연결하고 상호작용합니다. 이 클래스를 여기서는 프록시 클래스라고 하는데, Java EE(Java Platform Enterprise Edition) 구성요소나 사용자가 작성한 일반적인 Java 클래스가 될 수 있습니다.
- 프록시 클래스가 요청을 처리하고 필요에 따라 요청을 늘리며 매쉬업 사이트(필요한 서비스를 제공하는 웹 사이트)에 대한 연결을 엽니다.
- 매쉬업 사이트가 HTTP GET 또는 HTTP POST 형태로 요청을 수신하여 처리하고 데이터를 프록시 클래스로 반환합니다.
- 프록시 클래스가 응답을 수신하여 클라이언트에 맞는 적절한 데이터 형식으로 변환할 수 있습니다. 또한 나중에 요청을 처리할 수 있도록 응답을 캐싱할 수도 있습니다.
- 서블릿이 응답을 클라이언트에 반환합니다.
XmlHttpRequest에 표시된 콜백 함수가 페이지를 표시하는 DOM(Document Object Model)을 조작하여 페이지에 대한 클라이언트 뷰를 업데이트합니다.
클라이언트측 매쉬업은 클라이언트에서 서비스와 컨텐츠를 통합하며 다른 웹 사이트의 데이터나 기능과 직접적으로 매쉬업합니다. 예를 들어, 클라이언트측 매쉬업의 경우 클라이언트가 다른 웹 사이트에 직접 요청할 수 있습니다.
일반적으로 클라이언트측 매쉬업의 작동 방식은 그림 3과 같습니다.
그림 3: 클라이언트측 매쉬업의 작동 방식
- 브라우저가 웹 사이트의 서버에 웹 페이지를 요청합니다.
- 웹 사이트의 서버가 페이지를 클라이언트로 로드합니다. 페이지는 일반적으로 매쉬업 사이트(예: Google Maps)의 서비스를 사용할 수 있도록 매쉬업 사이트의 JavaScript 라이브러리를 포함하고 있습니다. 페이지에 JavaScript 라이브러리가 포함되어 있지 않은 경우 매쉬업을 쉽게 사용할 수 있도록 사용자 정의 JavaScript 함수를 작성할 수 있습니다.
- 브라우저 페이지의 일부 작업이 매쉬업 사이트에서 제공하는 JavaScript 라이브러리의 함수를 호출하거나 사용자가 작성한 사용자 정의 JavaScript 함수를 호출합니다. 이 함수는 매쉬업 사이트를 가리키는
<script>요소를 만듭니다. <script>요소에 따라 매쉬업 사이트에 대해 스크립트 로드 요청이 만들어집니다.- 매쉬업 사이트가 스크립트를 로드합니다. 그러면 일반적으로 매개변수로 전송된 JSON(JavaScript Object Notation) 개체를 사용하여 브라우저 페이지의 로컬 콜백이 실행됩니다.
- 콜백 함수가 페이지를 표시하는 DOM을 조작하여 페이지에 대한 클라이언트 뷰를 업데이트합니다.
그러나 이러한 스타일에 해당하지 않는 매쉬업도 있습니다. 매쉬업 구성요소의 경계가 확장되고 있기 때문에 다른 스타일의 매쉬업도 많이 볼 수 있습니다.
이러한 스타일에 대한 데모는 Java BluePrints 프로그램에 포함되는 참조 웹 애플리케이션인 Java PetStore 2.0 demo에서 확인할 수 있습니다. 간단하게 표현하기 위해 이 기사에서는 애플리케이션을 Pet Store라고 하겠습니다. 이 연재 기사에서는 Pet Store의 매쉬업을 사용하여 매쉬업 기술을 설명합니다. Pet Store는 Java EE 5 플랫폼을 Web 2.0 기술과 함께 사용하는 방법을 보여 줍니다. 또한 JSF(JavaServer Faces) 기술 및 Java Persistence API와 같은 Java EE 5 기술을 매쉬업에 사용하는 방법도 보여 줍니다. Pet Store에 대한 개요는 Introducing the Java Pet Store 2.0 Application을 참조하십시오. Pet Store를 다운로드하여 소스 코드를 검사하고 Java EE 5 호환 애플리케이션 서버에 이를 배치하면 Pet Store에 대해 자세히 알 수 있습니다. Pet Store의 라이브 버전도 실행할 수 있습니다.
Pet Store 애플리케이션의 매쉬업에 대한 간략한 소개
Pet Store는 애완 동물 매매를 위한 웹 애플리케이션입니다. 판매자일 경우 설명, 가격, 사진과 같은 애완 동물에 대한 정보를 애플리케이션의 애완 동물 카탈로그에 추가할 수 있습니다. 또한 주소와 같은 판매자 개인 정보도 추가할 수 있습니다. 구매자일 경우 카탈로그에서 구입 가능한 애완 동물을 한 마리 이상 선택할 수 있으며, 특정 애완 동물이나 애완 동물의 종류를 검색할 수 있습니다. 또한 구입하려는 애완 동물이 있는 위치를 보여 주는 맵을 확인할 수도 있으며, 온라인 결제도 가능합니다. Pet Store는 이러한 작업을 위해 다양한 매쉬업을 수행합니다. 예를 들어, Pet Store는 Google Maps 서비스 및 Yahoo Maps Geocoding 서비스를 매쉬업하여 그림 4와 같이 애완 동물의 위치를 보여 주는 맵을 표시합니다.

그림 4: 애완 동물 목록 및 맵
큰 이미지를 보려면 여기를 클릭하십시오.
Pet Store는 자체 데이터와 기능을 Yahoo Geocoder 서비스를 통해 반환된 판매자 주소의 위도 및 경도를 Google Maps 서비스를 통해 반환된 맵과 결합합니다. 이러한 세 애플리케이션을 매쉬업한 결과 사용자가 맵을 통해 애완 동물을 찾을 수 있는 페이지가 만들어집니다.
Pet Store의 뉴스 바는 또 다른 매쉬업입니다. Pet Store의 각 페이지에는 Java Blueprints 프로젝트의 RSS 뉴스 피드에서 헤드라인을 표시하는 뉴스 바가 있습니다. Pet Store에는 또한 Java Blueprints 프로젝트의 모든 뉴스 스토리를 표시하는 새로운 세부 정보 페이지도 있습니다. 이러한 뉴스 기능을 위해 Pet Store는 다른 웹 사이트의 RSS 피드에서 가져온 데이터를 사용하고 가져온 데이터를 처리 및 조작한 다음 웹 페이지에 데이터를 표시합니다. 그림 5는 Pet Store 페이지의 애완 동물 사진 위에 있는 뉴스 바를 보여 줍니다.
그림 5: RSS 뉴스 바 항목
이 기사에서는 서버측 매쉬업에 대해 자세히 설명합니다. 특히 Yahoo Maps Geocoding 서비스는 서버측 매쉬업을 설계하고 만드는 방법에 대한 좋은 예이므로 해당 서비스를 사용하는 Pet Store의 매쉬업을 중점적으로 다룹니다. RSS 피드를 사용하는 Pet Store의 매쉬업도 서버측 매쉬업이지만 이 매쉬업에는 몇 가지 고유한 측면이 있습니다. 이에 대해서는 후속 기사에서 다룰 것입니다. Google Maps 서비스를 사용하는 Pet Store의 매쉬업은 클라이언트측 매쉬업입니다. 클라이언트측 매쉬업과 기타 매쉬업 스타일도 후속 기사에서 다룰 것입니다.
서버측 매쉬업
서버측 매쉬업의 경우 서비스 또는 컨텐츠 통합이 서버에서 이루어집니다. 이는 서비스 또는 컨텐츠 통합이 클라이언트(일반적으로 웹 브라우저)에서 이루어지는 클라이언트측 매쉬업과 대조됩니다. 서버의 구성요소가 서비스에 대한 프록시 역할을 하게 되므로 서버측 매쉬업은 프록시 스타일 매쉬업이라고도 합니다. 일반적으로 프록시는 두 대상 사이에서 중개자 역할을 하는 구성요소입니다. 서버측 매쉬업에서 웹 사이트에 있는 서버의 구성요소는 브라우저의 페이지와 다른 웹 사이트 간의 프록시 역할을 합니다. 그림 2에서와 같이 브라우저 클라이언트는 웹 사이트에 대해 HttpRequest를 만듭니다. 그러면 웹 사이트에서 다른 웹 사이트와의 매쉬업 작업을 수행합니다.
프록시 스타일을 사용해야 하는 이유
서버측(프록시 스타일이라고도 함) 매쉬업의 경우 서비스 또는 컨텐츠 통합이 서버에서 이루어집니다. 프록시 스타일을 사용해야 하는 중요한 이유는 브라우저 보안 샌드박스의 제약을 극복하고 전체 도메인에서 XMLHttpRequest를 만들기 위한 것입니다.
매쉬업을 수행하는 데 있어 가장 큰 걸림돌은 브라우저 보안 샌드박스가 제공하는 기본 보안 보호와 싸우는 것입니다. 브라우저 보안 샌드박스는 개인 정보의 보안 유지를 담당합니다. 대부분의 매쉬업은 Ajax 기능을 사용합니다. XMLHttpRequest는 Ajax 트랜잭션에서 데이터를 클라이언트와 서버 간에 비동기적으로 교환하는 데 사용되는 JavaScript 개체입니다. 발생할 수 있는 악의적인 침해를 막기 위해 대부분의 브라우저는 XMLHttpRequest를 포함하는 JavaScript 코드를 사용하여 사이트 도메인(페이지가 로드된 웹 사이트를 호스팅하는 컴퓨터 시스템)과만 통신합니다. 페이지가 로드된 사이트를 일반적으로 원본 서버라고 합니다. 예를 들어, XMLHttpRequest를 포함하는 페이지가 mySite.com에서 로드된 경우 XMLHttpRequest는 mySite.com에만 연결할 수 있고 다른 사이트에는 연결할 수 없습니다. 매쉬업이 원본 서버가 아닌 사이트(예: yourSite.com)의 서비스를 필요로 할 경우 XMLHttpRequest를 통해 해당 사이트에 액세스할 수 있는 방법이 없습니다. 원본 서버 정책으로 인해 보안이 강화되었는데 이러한 보안이 매쉬업 생성을 더욱 어렵게 만듭니다.
프록시 스타일 매쉬업에서는 서버측 프록시(클라이언트의 JavaScript 코드 아님)가 서비스에 액세스합니다. 따라서 서버측 매쉬업은 브라우저 보안 샌드박스에 종속되지 않으므로 서비스에 액세스하기 위해 다른 사이트(이 경우 yourSite.com)에 연결할 수 있습니다. 서버에서 실행되는 Java EE 애플리케이션은 다른 모든 웹 사이트에 액세스할 수 있습니다.
다음은 매쉬업을 수행할 때 프록시 스타일을 사용해야 하는 다른 좋은 이유입니다.
- Java EE 및 Java SE 플랫폼은 서버의 다른 웹 사이트에 쉽게 액세스할 수 있도록 하는 많은 라이브러리를 제공합니다. 이러한 라이브러리는 또한 매쉬업과 관련된 요청을 처리할 때 필요한 여러 가지 작업을 간소화합니다.
- 서버측 매쉬업에 사용되는 프록시는 클라이언트와 다른 웹 사이트 간의 버퍼 역할을 할 수 있습니다. 프록시는 다른 웹 사이트에서 클라이언트 문제가 발생하는 것을 방지할 수 있습니다. 예를 들어, 다른 사이트의 속도가 느리거나 오류 상태로 응답하는 경우 애플리케이션이 일부 기본 데이터나 캐싱된 데이터를 클라이언트에 제공할 수 있습니다. 또한 점진적 성능 저하 응답의 일부로 적절한 오류 메시지를 표시할 수도 있습니다.
- 매쉬업의 다른 사이트가 대용량의 데이터를 반환할 수 있습니다. 이 경우 서버는 데이터를 보다 작은 조각으로 클라이언트에 전송하거나 클라이언트에 필요한 데이터 부분만 전송할 수 있습니다. 예를 들어, RSS 피드를 사용하는 Pet Store 매쉬업의 경우 서버는 피드의 작은 데이터 부분만 클라이언트에 전송합니다.
- 서비스에서 반환하는 데이터를 서버에서 캐싱할 수 있습니다. 그러면 서버는 캐시에서 데이터를 반환하여 서비스에 대한 이후 요청을 충족시킬 수 있습니다. 이 경우 다른 웹 사이트에 대해 불필요한 요청이 생기지 않도록 클라이언트를 보호하므로 응답 속도를 높일 수 있습니다.
- 서비스에서 반환하는 데이터를 다른 형식으로 변환해야 할 수 있습니다. 예를 들어, 매쉬업의 서비스에는 SOAP 또는 XML을 기반으로 하는 API가 있을 수 있습니다. 데이터를 클라이언트로 전송하기 전에 서버가 데이터를 JSON과 같은 형식으로 변환하게 하여 브라우저에서 매쉬업에 반환된 데이터를 쉽게 처리하도록 할 수 있습니다.
- 서비스가 애플리케이션에 필요한 사항을 정확하게 제공하지 않을 수 있습니다. 서비스에서 반환하는 데이터를 조작하거나 클라이언트로 반환하기 전에 다른 컨텐츠와 결합해야 할 수 있습니다.
- 서버에서 보안 요구사항을 보다 쉽게 처리할 수 있습니다. 예를 들어, 서버를 사용하여 키나 토큰을 제공할 수 있습니다. 또는 서버를 사용하여 HTTPS와 같은 보안 프로토콜을 통해 다른 웹 사이트에 연결하거나 다른 웹 사이트를 인증할 수도 있습니다.
- 서버에서 동시에 여러 데이터 소스에 대한 동시 호출과 비동기 호출을 만들 수 있습니다. 서버는 여러 사이트에 연결하여 필요한 사항을 얻을 수 있습니다. 대부분의 브라우저는 한 번에 미해결 상태일 수 있는 동시
XMLHttpRequest의 수를 2-3개로 제한합니다. 따라서 클라이언트에서 수행하려는 경우 상당히 복잡해질 수 있습니다.
프록시 스타일 매쉬업 예제
프록시 스타일을 사용하는 매쉬업의 예는 Yahoo Maps Geocoding 서비스를 사용하는 Pet Store 매쉬업입니다. Pet Store는 Yahoo Maps Geocoding 서비스와 Google Maps 서비스를 함께 사용하여 애완 동물 위치에 대한 맵을 표시합니다. Google Maps 서비스는 실제로 맵을 생성합니다. 그러나 위치를 매핑하기 위해서는 Google Maps 서비스가 위치를 위도와 경도로 지정해야 합니다. 그림 4와 같은 맵을 표시하려면 각 애완 동물의 주소를 변환하는 방법이 Pet Store에 필요한데 Yahoo Maps Geocoding 서비스가 이 작업을 정확하게 수행합니다. 즉, 각 주소를 위도와 경도로 변환합니다.
Pet Store는 맵이 요청될 때마다 Yahoo Maps Geocoding 서비스를 요청하는 대신, 판매자가 애완 동물을 애플리케이션의 애완 동물 카탈로그에 추가할 경우에만 한 번 서비스를 호출합니다. 새 애완 동물에 대해 필요한 정보의 일부로 Pet Store는 판매자 주소를 요구합니다. 판매자가 애완 동물에 대한 컨텐츠를 제출하면 Yahoo Maps Geocoding 서비스를 호출하여 주소에 해당하는 위도와 경도를 가져옵니다. 그런 다음 판매자가 제출하는 다른 정보와 함께 데이터베이스에 위도와 경도를 저장합니다. 따라서 맵이 필요할 때마다 애플리케이션이 Geocoding 서비스를 요청할 필요가 없어집니다. Pet Store는 단순히 데이터베이스에 액세스하여 Google Maps 서비스에 위도와 경도를 제공합니다.
Yahoo Maps Geocoding 서비스 사용Yahoo Maps Geocoding 서비스는 공용 API를 통해 다른 웹 사이트에서 사용할 수 있는 REST 기반의 웹 서비스입니다. API를 통해 서비스에 액세스하려면 필수 매개변수를 포함하는 URL을 생성하고 해당 URL로 이동하십시오. 코드 샘플 1은 예제입니다. 여기에서는 화면상의 이유로 URL이 여러 행에 표시되었습니다. 실제 코드에서는 URL을 한 행에 지정해야 합니다.
http://api.local.yahoo.com/MapsService/V1/geocode ?appid=com.sun.blueprints.ui.geocoder &location=4140%20Network%20Circle,%20Santa%20Clara,%20CA,%2095054코드 샘플 1: Yahoo Geocoder 공용 API에 대한 URL 생성
URL http://api.local.yahoo.com/MapsService/V1/geocode는 Yahoo Maps Geocoding 서비스에 대한 요청 URL 경로로서, 한 개 이상의 요청 매개변수와 값 쌍으로 추가됩니다. apiid 값은 애플리케이션을 식별하며 location 값은 주소입니다. 주소 내의 공백은 인코딩됩니다.
서비스는 응답으로 주소의 위도와 경도를 포함하는 XML 문서를 반환합니다. 예를 들어, 이전 예의 서비스 요청은 코드 샘플 2에 표시된 XML 문서를 반환합니다.
<ResultSet xsi:schemaLocation=
"urn:yahoo:maps http://api.local.yahoo.com/MapsService/V1/GeocodeResponse.xsd">
<Result precision="address">
<Latitude>37.395908</Latitude>
<Longitude>-121.952735</Longitude>
<Address>4140 NETWORK CIR</Address>
<City>SANTA CLARA</City>
<State>CA</State>
<Zip>95054-1778</Zip>
<Country>US</Country>
</Result>
</ResultSet>
코드 샘플 2: Yahoo Maps Geocoding 서비스에서 반환되는 XML 문서오류가 있을 경우 서비스는 HTTP 오류 코드 및 XML 오류 응답 메시지로 응답합니다.
URL 어셈블 및 프록시에서 서비스 호출Pet Store가 Yahoo Maps Geocoding 서비스와 함께 매쉬업에 사용하는 프록시 클래스의 코드를 살펴 보겠습니다. 프록시 클래스는 GeoCoder입니다. 이와 같은 클래스는 일반적으로 그림 2에 표시된 것과 같이 브라우저 클라이언트의 Ajax 호출을 처리하는 JavaServer Faces 구성요소 또는 서블릿에서 호출됩니다.
코드 샘플 3은 GeoCoder 클래스의 코드 단편을 보여 줍니다. 클래스에 대한 전체 코드를 확인하려면 여기를 클릭하십시오.
GeoCoder 클래스의 코드 단편//The URL of the geocoding service we will be using
private static final String SERVICE_URL =
"http://api.local.yahoo.com/MapsService/V1/geocode";
//The default application identifier required by the geocoding service.
//This may be overridden by setting the applicationId property
static final String APPLICATION_ID =
"com.sun.javaee.blueprints.components.ui.geocoder";
//Now the method that does the work
public GeoPoint[] geoCode(String location) {
...
// Perform the actual service call and parse the response XML document,
// then format and return the results
Document document = null;
StringBuilder sb = new StringBuilder(SERVICE_URL);
sb.append("?appid=");
sb.append(applicationId);
sb.append("&location=");
sb.append(location);
try {
document = parseResponse(sb.toString());
return convertResults(document);
} catch (IllegalArgumentException e) {
...
GeoCoder의 geoCode 메소드는 지오코딩 서비스를 호출하며 주소를 나타내는 String location 매개변수를 사용합니다. location은 "city, state" 또는 "city, state, zip"과 같은 다양한 주소 형식으로 지정할 수 있습니다. 코드 샘플 6에서와 같이 애플리케이션 식별자(애플리케이션 ID)와 애플리케이션 매개변수도 인코딩됩니다. geoCode 메소드는 다음 작업도 수행합니다.
- Yahoo Maps Geocoding 서비스의 URL 식별
private static final String SERVICE_URL = "http://api.local.yahoo.com/MapsService/V1/geocode";
- 애플리케이션 식별. 이 메소드는 지오코딩 서비스에 대한 요청에 애플리케이션 ID를 지정해야 합니다.
static final String APPLICATION_ID = "com.sun.javaee.blueprints.components.ui.geocoder";
- 한 개 이상의 요청 매개변수와 값 쌍으로 URL 어셈블
StringBuilder sb = new StringBuilder(SERVICE_URL); sb.append("?appid="); sb.append(applicationId); sb.append("&location="); sb.append(location);
java.net.URL클래스로 스트림을 열어 요청 제출DocumentBuilder db = DocumentBuilderFactory.newInstance().newDocumentBuilder(); InputStream stream = null; try { // make call to the mashup web site and receive // XML document result stream = new URL(url).openStream(); return db.parse(stream); }
geoCode 메소드는 두 개의 전용 메소드를 도우미로 사용합니다. 한 개의 도우미 메소드는 지오코딩 서비스의 응답을 구문 분석하고, 다른 한 개의 도우미 메소드는 구문 분석된 결과를 변환합니다. 결과 구문 분석 및 변환은 서비스에 액세스할 때 수행하는 일반적인 작업입니다. 이제 도우미 메소드의 코드에 대해 살펴 보겠습니다.
코드 샘플 4는 응답 parseResponse를 구문 분석하는 메소드에 대한 코드 단편을 보여 줍니다. 해당 메소드에 대한 전체 코드는 GeoCoder 클래스에 대한 코드에서 확인할 수 있습니다.
private Document parseResponse(String url)
throws IOException, MalformedURLException,
ParserConfigurationException, SAXException {
DocumentBuilder db =
DocumentBuilderFactory.newInstance().newDocumentBuilder();
InputStream stream = null;
try {
// make call to the mashup website and receive XML document result
stream = new URL(url).openStream();
return db.parse(stream);
} finally {
... clean up and close stream
}
}
코드 샘플 4: Yahoo Geocoding 서비스의 결과 구문 분석
parseResponse 메소드는 구문 분석할 리소스의 URL을 나타내는 String url 매개변수를 사용합니다. 그런 다음 지정된 URL의 XML 컨텐츠를 XML Document 개체로 구문 분석합니다.
코드 샘플 5에 표시된 것과 같이 필요한 컨텐츠를 추출하도록 Document 개체를 추가로 처리할 수 있습니다. 아래 코드 샘플은 응답 convertResults를 구문 분석하는 메소드에 대한 코드 단편을 보여 줍니다. 해당 메소드에 대한 전체 코드는 GeoCoder 클래스에 대한 코드에서 확인할 수 있습니다.
private GeoPoint[] convertResults(Document document) {
List<GeoPoint> results = new ArrayList<GeoPoint>();
GeoPoint point = null;
// Acquire and validate the top level "ResultSet" element
Element root = document.getDocumentElement();
if (!"ResultSet".equals(root.getTagName())) {
throw new IllegalArgumentException(root.getTagName());
}
// Iterate over the child "Result" components, creating a new
// GeoPoint instance for each of them
NodeList outerList = root.getChildNodes();
for (int i = 0; i < outerList.getLength(); i++) {
// Validate the outer "Result" element
Node outer = outerList.item(i);
if (!"Result".equals(outer.getNodeName())) {
throw new IllegalArgumentException(outer.getNodeName());
}
// Create a new GeoPoint for this element
point = new GeoPoint();
// Iterate over the inner elements to set properties
...
}
// Return the accumulated point information
return (GeoPoint[]) results.toArray(new GeoPoint[results.size()]);
}
코드 샘플 5: Yahoo Geocoding 서비스의 결과를 Java 개체로 변환
convertResults 메소드는 document 매개변수를 사용하는데, 이 매개변수는 Yahoo Geocoding 서비스의 결과를 나타내는 구문 분석된 Document 개체로서 구문 분석된 XML 결과를 GeoPoint 개체의 어레이로 변환합니다. GeoPoint 클래스는 아직 Pet Store에서 다른 도우미 클래스입니다. GeoPoint 클래스에 대한 코드를 확인하려면 여기를 클릭하십시오. 이 클래스는 위치 주소와 주소의 위도 및 경도 좌표를 나타냅니다. Yahoo Geocoding 서비스에서 반환된 결과가 없고 예외가 발생하지 않을 경우 convertResults 메소드는 길이가 0인 어레이를 반환합니다.
서버측 매쉬업의 설계 고려 사항
서버측 매쉬업을 수행할 경우 다음과 같은 여러 사항을 고려해야 합니다.
서버측 매쉬업을 수행할 경우 고려해야 할 사항에는 여러 가지가 있습니다. 그 범위도 보안 문제에서 서비스가 반환하는 데이터의 형식 및 대상과 관련된 문제에 이르기까지 다양합니다.보안
서버측 매쉬업을 수행할 경우에 해결해야 할 몇 가지 보안 관련 문제는 다음과 같습니다.
- 표시된 서비스가 사용자 로그인을 필요로 하는가, 서비스 인증서를 기반으로 하는가 또는 인증 메커니즘이 있는가?
- 서비스를 노출할 때 악의적인 개발자가 악용할 수 있는 터널링 메커니즘을 열고 있는가? 예를 들어, 다른 개발자가 서비스를 사용하여 액세스하려는 서비스에서 DoS(Denial-of-Service) 공격을 시작할 수 있는가?
- 서비스를 불법적으로 사용하고 있는 악의적인 클라이언트의 ID를 숨기는 데 서비스를 사용할 수 있는가?
- 악의적인 사용자가 서비스를 사용하여 요금을 내지 않을 수 있는가?
Yahoo Maps Geocoding 서비스에는 여러 가지 특정 보안 요구사항이 있습니다. 따라서 서비스에 액세스하려면 먼저 Yahoo를 사용하여 계정을 설정해야 합니다. Yahoo에서 애플리케이션 ID(애플리케이션을 고유하게 식별하는 문자열)도 받아야 합니다. Yahoo에서는 계정이 지오코딩 서비스를 사용할 수 있는 횟수를 제한하는데, 이를 위해 각 계정 ID에 대한 사용량을 추적합니다. 이것이 바로 서비스 호출에 appid 매개변수를 지정해야 하는 이유입니다. 이러한 ID 요구사항은 매우 일반적입니다. 대부분의 공용 REST 기반 웹 서비스는 호출 애플리케이션을 식별하기 위해 키, 토큰 또는 유사한 항목을 필요로 합니다. 예를 들어, Google Map API에는 값이 배포된 인스턴스로 한정되는 애플리케이션 키가 필요합니다. 서버를 서비스에 대한 프록시로 사용할 경우 얻게 되는 한 가지 이점은 매쉬업 서비스의 애플리케이션 ID나 토큰을 클라이언트 코드에 노출시킬 필요가 없다는 점입니다. 대신 애플리케이션 ID나 토큰은 서버에서만 사용되고 각 클라이언트의 브라우저에 전달되지 않습니다.
Yahoo Maps Geocoding 서비스는 REST 기반 서비스입니다. 이 서비스를 호출하려면 매개변수-값 쌍과 함께 해당 URL을 지정하십시오. GeoCoder 클래스를 확인하면 이 클래스가 서비스 호출의 URL을 인코딩한다는 것도 알 수 있습니다. 일반적으로 허용되는 형식으로 URL을 인코딩하면 가능한 전송 가능하게 요청을 수행할 수 있습니다. 이에 대한 내용은 코드 샘플 6에 표시되어 있습니다. 호출자는 URL을 호출하기 전에 매개변수의 이스케이프 문자를 인코딩하며, URL에서 반환된 필드의 이스케이프 문자를 디코딩합니다.
// URL encode the specified location
String applicationId = getApplicationId();
try {
applicationId = URLEncoder.encode(applicationId, "ISO-8859-1");
} catch (UnsupportedEncodingException e) {
if (logger.isLoggable(Level.WARNING)) {
logger.log(Level.WARNING, "geoCoder.encodeApplicationId", e);
}
throw new IllegalArgumentException(e.getMessage());
}
// URL encode the specified location
try {
location = URLEncoder.encode(location, "ISO-8859-1");
} catch (UnsupportedEncodingException e) {
if (logger.isLoggable(Level.WARNING)) {
logger.log(Level.WARNING, "geoCoder.encodeLocation", e);
}
throw new IllegalArgumentException(e.getMessage());
}
코드 샘플 6: URL 매개변수 인코딩
서버 코드는 매개변수를 인코딩하고 URL을 어셈블하는 것 이외에도 해당 URL에서 서비스를 요청해야 합니다. 코드 샘플 4에 표시된 것과 같이, Pet Store는 java.net.URL 클래스를 사용하여 이 URL에 대한 연결을 열고 해당 연결에서 읽기 위해 InputStream을 가져옵니다. 그러나 다른 서비스 호출 방법도 있습니다. Java EE 및 Java SE 기술은 다양한 방법으로 서비스를 호출합니다. 예를 들면, JAX-WS(Java API for XML-Based Services), Java 소켓 또는 Java EE 5 개발자가 사용할 수 있는 기타 많은 기술을 사용할 수 있습니다. Yahoo Maps Geocoding 서비스를 사용하는 매쉬업은 URL을 사용하며 상대적으로 간단한 상호작용을 나타냅니다. 그러나 서비스에 보다 복잡한 상호작용이 필요한 경우(예: 디지털 인증서가 필요한 경우) 이러한 유형의 요청을 처리하는 데 보다 적합한 메소드를 사용할 수 있습니다.
서버측 매쉬업을 수행할 경우 서비스가 반환하는 응답의 형식을 결정해야 합니다. 서비스는 XML, JSON, HTML, 일반 텍스트, RSS/ATOM, GData를 비롯한 여러 다른 형식으로 응답을 반환할 수 있습니다. Yahoo Maps Geocoding 서비스를 사용하는 Pet Store 매쉬업에서 클라이언트는 서비스가 반환하는 데이터를 표시하지 않고 단순히 데이터를 Google Maps 서비스에 대한 입력으로 사용합니다. Yahoo 서비스는 코드 샘플 2에서와 같이 XML 문서를 반환합니다. 따라서 Pet Store는 XML 문서를 Java 개체로 변환해야 합니다. 코드 샘플 5에서와 같이 결과가 Java 개체의 어레이로 구문 분석됩니다. 사용자가 특정 지역에서 판매하는 애완 동물의 맵을 보려는 경우 이후 사용을 위해 어레이가 데이터베이스에 저장됩니다. 대부분의 공용 API는 응답을 XML로 제공하기 때문에 서버측 코드는 종종 응답을 다른 데이터 형식으로 변환해야 합니다.
다른 애플리케이션은 서비스에서 반환하는 데이터를 JSON과 같은 다른 형식으로 변환해야 할 수 있습니다. JSON과 같은 형식의 데이터는 브라우저에서 보다 쉽게 처리할 수 있습니다. 서버를 서비스에 대한 프록시로 사용할 경우 서버는 XML 문서를 구문 분석하여 이를 JSON과 같은 형식으로 변환하는 작업을 수행합니다. 이 경우 클라이언트 JavaScript 코드는 XML을 구문 분석하고 변환할 필요가 없기 때문에 더 간단할 수 있습니다.
서비스의 응답이 클라이언트에 사용됩니까 아니면 데이터가 서버에 저장됩니까? Yahoo Maps Geocoding 서비스를 사용하는 Pet Store 매쉬업에서 서비스가 반환하는 데이터는 다시 클라이언트로 전송되지 않습니다. 대신 나중에 Google Maps 구성요소가 판매할 애완 동물을 지도에 정확히 표시하는 데 사용할 수 있도록 서버의 데이터베이스에 저장됩니다. Pet Store가 결과를 저장하지 않은 경우 맵에 대한 각 클라이언트 요청과 맵에 표시된 각 지점에 대해 지오코딩 서비스를 요청해야 합니다. 이것이 지오코딩 서비스를 사용하는 매쉬업을 클라이언트측 매쉬업이 아닌 서버측 매쉬업으로 수행하는 정당한 이유입니다.
맵 데이터는 변경될 수 있습니다. 예를 들면, 거리 주소와 거리 이름은 변경됩니다. 따라서 최신 상태가 아닌 데이터를 업데이트하는 메커니즘이 필요할 수 있습니다. 서비스에서 캐싱된 데이터를 업데이트해야 할 경우 서버에서 코드를 작성하여 매쉬업 서비스에 다시 액세스하는 것이 상대적으로 쉽습니다.
Pet Store의 RSS 피드는 재사용을 위해 서비스에서 캐싱된 데이터의 또 다른 예입니다. Java Blueprints 프로젝트 사이트의 라이브 RSS 피드에서 데이터를 검색한 후 Pet Store 애플리케이션의 서버측에서 RSS XML 문서를 구문 분석하고 이를 JSON으로 변환합니다. 그런 다음 데이터를 캐싱합니다. JSON 형식의 캐싱 데이터는 모든 Pet Store 클라이언트의 Ajax 요청을 충족시켜 뉴스 바에 표시하는 데 사용될 수 있습니다.
클라이언트가 응답을 사용하기 전에 애플리케이션의 서버측에서 서비스의 응답을 수정해야 하는지 여부 또는 애플리케이션이 직접 응답을 클라이언트에 전달할 수 있는지 여부를 결정해야 합니다. 결과 캐싱에 설명된 것과 같이 Pet Store에서 사용하는 RSS 뉴스 피드 데이터는 클라이언트로 전송되기 전에 추가로 처리됩니다.
GeoCoder 프록시 클래스는 Yahoo Maps Geocoding 서비스에 액세스할 때 발생할 수 있는 예외를 처리합니다. 일반적으로 서비스에 액세스할 때 발생할 수 있는 예외는 처리하는 것이 좋습니다. 또한 서비스에 대한 입력 데이터를 검증하는 것도 좋습니다. 예를 들어, GeoCoder는 주소 입력 문자열을 지오코딩 서비스로 전송하기 전에 이를 검증합니다. 검증을 수행하면 다른 웹 사이트를 호출하기 전에 오류 상황을 파악하는 데 도움이 되며 사용자에게 보다 빨리 응답할 수 있습니다. 예를 들어, 사용자에게 정확한 항목을 입력하도록 요구할 수 있습니다.
또한 매쉬업에 사용된 웹 사이트와 공용 API는 예외 상황을 대처하는 데 있어 매우 다른 메커니즘을 사용합니다. 따라서 오류 처리 코드가 복잡해질 수 있습니다. 서버를 서비스에 대한 프록시로 사용하여 클라이언트 JavaScript 코드를 이러한 여러 세부사항으로부터 보호하고 이 코드가 보다 느슨하게 연결되도록 할 수 있습니다. 따라서 매쉬업 서비스로 인해 API가 변경된 경우 클라이언트 코드에 미치는 영향을 줄일 수 있습니다.
매쉬업은 여러 가지 방법으로 설계할 수 있습니다. 서버측 매쉬업(프록시 스타일 매쉬업이라고도 함) 접근 방식의 경우 서비스와 컨텐츠를 서버에 통합합니다. 서버측 매쉬업 접근 방식의 사용을 통해 얻을 수 있는 장점은 많습니다. 무엇보다도 이 접근 방식은 XMLHttpRequest와 도메인에서 웹 사이트에 액세스하는 기능을 제약하는 브라우저 보안 제약을 극복합니다.
다음 연재 기사에서는 클라이언트에서 서비스와 컨텐츠를 통합하는 클라이언트측 매쉬업을 중점적으로 다룹니다. 클라이언트측 매쉬업과 서버측 매쉬업 스타일을 비교 및 대조하고 둘 중 어떤 접근 방식이 적합한지 식별할 수 있습니다.
- Introducing the Java Pet Store 2.0 Application
- Java EE 5 SDK
- Java BluePrints Solutions Catalog
- Java BluePrints 프로젝트
- JavaServer Faces 기술
- ProgrammableWeb
- Google Maps API
- Yahoo Maps Geocoding API
Ed Ort는 java.sun.com의 직원으로, 관계형 데이터베이스 기술, 프로그래밍 언어 및 웹 서비스에 대해 광범위하게 저술해왔습니다.
Sean Brydon은 Sun Microsystems에서 Java BluePrints 프로그램에 대한 기술 팀장을 맡고 있는 엔지니어로서, Java BluePrints 프로그램의 시초부터 관련 업무를 맡아 왔습니다. 그는 Addison-Wesley Java 시리즈 도서인 Designing Enterprise Applications With the Java 2 Platform, Enterprise Edition 및 Designing Web Services With the J2EE 1.4 Platform의 저자이며, Java BluePrints Solution Catalog 및 Java Pet Store Demo 2.0 참조 애플리케이션 작성을 지원했습니다.
Mark Basler는 주임 소프트웨어 엔지니어이자 Java BluePrints 프로그램 팀의 일원입니다. Ajax 지원 Web 2.0 애플리케이션을 설계 및 개발하는 방법을 시연하는 Java BluePrints Solution Catalog 및 Java Pet Store Demo 2.0 참조 애플리케이션 작성을 지원했으며 Sun 다운로드 센터, eCommerce 제품군 및 Sun Java System Application Server에 대한 주요 구성요소의 설계 및 개발에 참여했습니다.
"Java EE" 카테고리의 다른 글
- Attach API (댓글 18개 / 트랙백 1개) 2007/09/03
- JSP 2.0 EXPRESSION LANGUAGE (댓글 1개 / 트랙백 0개) 2004/02/05
- 환경 엔트리를 이용해서 배포의 사용자 정의하기 (댓글 2개 / 트랙백 0개) 2003/12/24
- JAX-WS를 이용한 웹 서비스 개발 (댓글 1개 / 트랙백 0개) 2006/01/18
- EJB 2.1로 메시지 구동 빈 이용하기 (댓글 1개 / 트랙백 0개) 2005/05/18
- EclipseLink를 사용하여 JPA에서 반복 불가능한 읽기 방지 (댓글 0개 / 트랙백 1개) 2008/07/09
- 컴포넌트 시스템과 클래스 로더 경계 (댓글 1개 / 트랙백 0개) 2004/10/05
- JAX-WS Dispatch 및 Provider API를 이용한 문서 처리 (댓글 4개 / 트랙백 0개) 2006/09/15
- POJO를 Persistent Entity로 변환하기 (댓글 1개 / 트랙백 0개) 2005/12/27
- SAAJ 소개 (댓글 1개 / 트랙백 0개) 2005/06/08
TRACKBACK :: http://blog.sdnkorea.com/blog/trackback/415
-
매쉬업(Mashup) 스타일, 서버 사이드 매쉬업
Tracked from ★ dingpong의 조그만 휴식 공간 ★ 삭제매쉬업(Mashup) 스타일, 서버 사이드 매쉬업에 대한 강좌 입니다. 매쉬업이라고 해서 어디서 들어본 것 같더니.. 예전에 다음과 네이버에서 Open API 인가? 로 서비스 뭐 만들어서 내는 대회가 매쉬업 어쩌구 대회였던 것 같네요.(아닌가?) 어째든 개발자라면 들어보신 분들도 꽤 있을 것이라고 생각합니다. 이 주제에선 매쉬업이 무엇인
2007/09/20 00:09
댓글을 달아 주세요
좋은정보에 감사드립니다..무궁한 발전을 기원해요
2007/09/06 09:39좋은정보 감사해요...항상 고마워
2007/09/06 09:48자바의 세상으로 우리 함께 여행해요
2007/09/06 10:02좋은정보 감사드려요!!!
좋은정보 감사합니다.
2007/09/07 16:01잘 보고 갑니다 ^^
2007/09/10 14:01이거 굉장히 구미가 당기는데요? 공부해보고 싶은 주제입니다.
2007/09/13 10:39자바는 알면 알수록 재미가 있어지네요. 무궁무진한 자바의 세계로 빠져들어 갑니다. 좋은 자료 잘 활용하겠습니다.
2007/09/17 23:45좋은 정보 감사해요~
2007/09/19 03:23좋은자료 많이 많이 올려주세요..감사
2007/09/19 06:44유용한 정보 감사합니다.
2007/09/19 13:11유용한 정보 감사합니다.
2007/09/19 19:25직접적인 개발자가 아니라서 정확한 세부사항까지 이해하기는 어려웠지만 나름 좋은 지식공유가 된것 같아서 기쁘네요... 앞으로도 좋은 지식발견이 되었으면 좋겠습니다. 감사합니다...!
2007/09/19 21:09좋은 정보 알고 갑니다.
2007/09/19 22:39매쉬업 매쉬업.. 어디서 들어 본것 같은데 여기서 확실히 알고 갑니다. 영어 사전 까지 뒤져본-ㅁ-;; 하핫; 좋은 정보가 된 것 같네요. 자세한건 트랙백에 썼습니다^-^
2007/09/20 00:09