일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- SetControlDelay
- if(식)
- 식의 설명
- MouseClick
- IfInString
- 식
- ControlGetText
- Menu
- EnvMult
- Var:=식
- IF (식)
- Threads
- SetMouseDelay
- EnvSub
- EnvAdd
- IfWinExist
- DetectHiddenWindows
- API
- Blocks
- 배열
- SetTitleMatchMode
- 함수
- ControlSend
- EnvDiv
- EnvSet
- SetEnv
- autohotkey
- if
- StringGetPos
- SetKeyDelay
- Today
- Total
ㄴrㅎnㅂrㄹrㄱi
Google Ajax Search API 사용하기 본문
비동기식 요청은 서버 측 프로그램과의 통신에 대한 것만은 아닙니다. Google 또는 Amazon 같은 퍼블릭 API와 통신할 수 있고, 여러분이 갖고 있는 스크립트와 서버 측 프로그램이 제공하는 것 이상의 기능을 웹 애플리케이션에 추가할 수 있습니다. 이 글에서, Brett McLaughlin은 Google 같은 퍼블릭 API를 통해 요청을 하고 응답을 받는 방법을 설명합니다.
지금까지 본 시리즈에서는 클라이언트 웹 페이지가 서버 측 스크립트와 프로그램에 요청을 하는 상황을 주로 다루었다. 바로 이것이 80~90%의 Ajax 애플리케이션- XMLHttpRequest
객체를 사용하는 비동기식 웹 애플리케이션-이 작동하는 방식이다. 하지만, 이러한 방식에도 심각한 한계가 있다. 여러분 개개인의 창의력과 프로그래밍 기술, 또는 기업 내 팀 소속 프로그래머들의 창의성과 프로그래밍 기술력 역시도 제한 요소로 작용할 수 있다.
여러분은 무엇을 해야 하는지는 알고 있지만, 그 목표를 달성하는데 필요한 기술적 지식이 부족한 경우가 있다. 아마도, 신택스를 잘 모르거나, 올바른 알고리즘을 이해하지 못할 경우일 것이다. 또 어떤 경우에는, 자신의 필요에 맞는 데이터나 리소스(인력 또는 데이터 리소스)가 없을 수도 있다. "다른 사람의 코드를 사용할 수만 있다면….." 이라고 생각하고 있는 자신을 발견할 때가 종종 있다. 이 글에서 바로 이러한 문제에 대하여 다룰 것이다.
웹 애플리케이션에서 퍼블릭 API를 사용하는 문제를 논하기 전에, 오픈 소스 스크립트와 프로그램에 대해 잠깐 이야기 해보자. 오픈 소스는 무료로 사용 및 재사용될 수 있는 애플리케이션 코드를 칭하는 용어이다. 참고자료 섹션에서 관련 링크들을 제공하고 있다. 누군가가 이미 작성해 놓은 오픈 소스 코드를 가져다가, 비용이나 많은 규제 없이 자신의 환경으로 적용하여 사용할 수 있다.
여러분이 오픈 소스 코드를 사용한다면, 가끔은 애플리케이션에 문서를 추가하거나, 오픈 소스 프로그램이나 스크립트를 수정한 것을 커뮤니티에 기여해야 한다. 커뮤니티 안에서는 어떤 프로그램을 사용하든지 간에, 결과적으로 여러분이 작성하지 않았던 코드 또는 많은 도움과 리소스가 없었다면 작성되지 못했을 코드를 사용할 수 있다. Apache와 같은 프로젝트는 다른 사람들이 했던 작업을 쉽게 활용할 수 있다. 그리고 당신이 그러한 사용권에 대한 걱정할 필요도 없이, 그들은 기꺼이 여러분이 사용하기를 바란다!
IBM developerWorks는 기술자료, 튜토리얼, 백서 등을 온라인으로 제공하고 있다. 양도 방대하고, Ajax와 관련한 기술자료만 해도 1000여건에 달한다. 심지어, 실력이 미천한 필자조차도 본 시리즈를 10회까지 진행했다. 이러한 기술자료에는 여러분이 사용할 수 있는 실행 코드, 예제, 다운로드 등이 포함되어 있다.
서버 측 프로그램이나 스크립트를 사용할 능력이 없거나 오픈 소스 프로그램이나 스크립트를 찾을 수 없다면 Google을 검색하여 자신이 찾고 있는 것에 대한 기본적인 설명 글만 입력하면 된다. developerWorks를 검색해도 같은 결과를 얻는다. 정확히 코드 조각을 찾거나, 전체 스크립트를 발견하기도 할 것이다. 도움이 되는 코멘트와 작동 방법에 대한 설명까지 곁들여지면 더욱 완벽하다.
때로는 기술적이지 않는 문제에도 직면하게 될 것이다. 특정 스크립트나 코드 조각을 작성하는 데에는 도움이 필요하지 않다. 오히려, 여러분이 갖고 있지 않은 데이터나 리소스가 필요하다. 이러한 경우에, 튜토리얼이나 오픈 소스 스크립트가 여러분에게 도움이 되겠지만, 이것으로 여러분의 니즈(needs)가 다 채워지는 것은 아니다. 웹 페이지에 검색 엔진을 설치하는 경우를 생각해 보자. 검색하고 싶은 데이터가 있는데, 그 데이터가 여러분의 기업이나 조직이 갖고 있는 것이 아닐 경우 어떻게 하겠는가?
기술이 아닌 데이터에 의해 제약을 받는 경우, public API가 해당 문제 해결에 도움이 된다. 퍼블릭 API를 사용해서는 다른 서버에 호스팅 된 프로그램을 사용할 수 있고, 다른 사람들의 데이터를 사용할 수 있다. 일반적으로, API 자체는 프로그램과 인터랙팅 하는 방식을 정의한다. 예를 들어, Google 검색 엔진에 대한 퍼블릭 API로 검색을 할 수 있지만, Google의 코드는 Google의 데이터를 검색하고 그 결과를 프로그램에 리턴 할 것이다. 여러분은 이러한 프로그램을 작성할 때 다른 사람의 기술력의 도움을 받을 뿐만 아니라, 여러분 또는 여러분 기업 이외의 데이터 스토어를 활용할 수 있는 혜택도 누리게 된다.
Google은 온라인 시대의 대단한 발명품이라는 점은 두말할 나위 없다. 온라인에 대해 모르는 할머니와 4살 먹은 아이들도 Google에 대해 알고 있다. Google은 매우 대중적이고 유용한 검색 엔진을 구축하고, 여러분 각자의 프로그램에서 사용할 수 있는 퍼블릭 API를 가진 무료 서비스들을 제공하는데 헌신하고 있다. 이 섹션에서는, Google API를 사용할 수 있도록 설정하고, Google로의 비동기식 애플리케이션 통신을 만들 수 있는 방법을 설명하겠다.
이 글은 Google의 Ajax Search API에 특히 초점을 맞출 것이다. Google Ajax Search API 홈 페이지(그림 1)를 방문하여 특정 API에 대한 내용을 찾아보기 바란다. ( 참고자료)
그림 1. Google의 Ajax Search API 페이지
우선 Sign up for a Google AJAX Search API key 링크를 클릭한다. 클릭하면, Google API를 사용을 위한 가입 페이지로 간다. 사용 조건에 동의하고 애플리케이션이 실행 될 웹 사이트의 URL을 제공한다. (그림 2)
그림 2. Google의 Ajax Search API 가입하기
|
동의서를 읽고 체크 박스에 체크를 했다면, URL에 입력하고, Generate API Key를 클릭한 다음 1~2초 정도 기다린다. 이 시점에서 여러분은 Google로 로그인 하거나, 계정을 만들어야 한다. 이것이 기본 프로세스이고 여러분 스스로 쉽게 할 수 있다. 이것이 다 끝나면 응답 스크린이 나타날 것이고, 매우 긴 키가 제공된다. URL을 반복하고, 심지어 샘플 페이지도 제공한다. 키는 다음과 같은 양상을 띤다.
여러분에게 할당된 키를 사용하기 전에, Google의 API 문서를 읽어두는 것이 좋다. (키를 제공했던 페이지 하단에 링크가 있고, 아래 참고자료 섹션에서도 제공한다.) 이 글도 충분히 도움이 되겠지만, Google의 API 문서 역시 좋은 참고 자료이며, Google을 사용하는 방법에 대한 훌륭한 통찰력도 얻을 수 있을 것이다.
ABQIAAAAjtuhyCXrSHOFSz7zK0f8phSA9fWLQO3TbB2M9BRePlYkXeAu8lHeUgfgRs0eIWUaXg
Google이 제공하는 샘플 웹 페이지를 수정해보고, 이것이 어떻게 작동하는지를 보자.
Listing 1은 매우 단순한 웹 페이지이다. 여러분이 좋아하는 에디터에 타이핑하여, 저장하고 Google에 제공했던 도메인이나 URL에 업로딩 한다.
Listing 1. Google 검색 애플리케이션의 HTML
|
볼드체로 되어 있는 부분을 Google에서 받은 여러분의 개발자 키로 대체하는 것을 잊지 말라. 페이지를 로딩하면, 그림 3과 같은 모습이 된다.
특별한 것은 업지만, 이러한 작은 컨트롤 뒤에 Google의 모든 파워가 숨어있다.
검색어를 입력하고 Search를 클릭하여 Google을 실행한다. 여러 개의 결과들이 빠르게 나타나는 것을 볼 수 있다. (그림 4)
확실히, 일단 검색을 수행하면 페이지는 좀더 유려하게 보이며, 비디오, 블로그, 검색 결과들이 이를 장식한다. 여러분이 정의한 검색어인 pre-search를 추가할 수 있다. 이것은 사용자가 페이지를 로딩하면 처음에 나타나는 결과이다. 이를 수행하려면, Listing 2의 굵은 라인을 JavaScript에 추가한다.
|
고유의 초기 검색어를 코드에 삽입하여 페이지가 로딩될 때 나타나는 부분을 커스터마이징 할 수 있다.
더 진행하기 전에, 이러한 기본적인 명령어가 어떤 일을 하는지 보자. 먼저, 새로운 GSearchControl
이 만들어진다. (Listing 3) 이것은 모든 검색을 수행할 수 있도록 해주는 구조이다.
Listing 3. 새로운 GSearchControl 생성하기
|
그런 다음 이 코드는 GlocalSearch
를 사용하여 새로운 로컬 검색을 설정한다. 이것은 특정 위치에 기반한 검색을 수행하는 특별한 Google 구조이다. 로컬 검색은 Listing 4에 설명되어 있다.
|
일단 여러분은 호출할 객체와 메소드를 배우기만 하면 충분히 이해할 수 있다. Listing 4의 코드는 새로운 로컬 검색자를 만든 다음, 검색의 중심 포인트를 설정한다.
Listing 5에서는 검색 컨트롤에게 어떤 유형의 검색을 수행해야 하는지를 지시하고 있다.
|
여러 가지 검색 유형들을 요약하면 다음과 같다.
GwebSearch
: 웹 검색용 객체이고, Google은 이것으로 유명해졌다.GvideoSearch
: 검색어와 관련된 비디오를 찾는다.GblogSearch
: 이 객체는 블로그를 통한 검색에 특별한 초점을 맞추고 있는데, 다른 웹 콘텐트 유형과는 약간 다르게 구성되고, 다른 태그가 붙는다.
여러분은 이미 특정 검색을 사전 로딩(pre-load)하는 방법을 배웠다. 이제 남은 것은 Listing 6에 나와있는 draw()
메소드 호출이다. 이 호출을 HTML에 있는 DOM 엘리먼트에 준다. (DOM에 대해서는 이전 기술자료를 참조하라. 참고자료) 컨트롤이 폼에 나타나고 사용할 준비가 된다.
|
이렇게 간단한 검색 박스에서 비동기 특성이 어디에 나타나있는지 확실치 않다. 확실한 것은, 여러분 고유의 웹 애플리케이션 어딘가에 Google 검색 박스를 두긴 했지만, 이것은 Google 검색에 대한 내용이 아닌 Ajax 애플리케이션 시리즈 글이다. 그렇다면, Ajax는 어디에 있는가?
검색어를 입력하고 Search 버튼을 클릭하면, 매우 Ajax 다운 응답을 보게 된다. 검색 결과는 페이지를 재 로딩하지 않아도 나타난다. 바로 이것이 대부분의 Ajax 애플리케이션의 특징이다. 페이지를 다시 로딩하지 않고 시각적인 콘텐트 변화가 이루어 진다. 일반적인 요청/응답 모델 그 이상이라는 점은 확실하다. 그렇다면, XMLHttpRequest
? Where is the request
객체는 어디에 있는가? 그리고 getElementById()
메소드 외에, DOM과 페이지 조작은 어떻게 되었는가? 이것은 HTML의 단 두 줄이면 해결된다.
첫 번째 줄은 그 동안 많이 다루지 못했던 부분이다. (Listing 7)
Listing 7. 가장 중요한 JavaScript 파일
<script
src="http://www.google.com/uds/api?file=uds.js
&v=1.0&key=
[YOUR GOOGLE KEY]"
type="text/javascript"> </script>
|
신택스는 특별한 것은 없지만, 중요한 것은 Google이 uds.js라는 파일을 호스팅하는데, 이 안에 검색 박스가 작동하는데 필요한 모든 JavaScript가 들어있다는 점이다. 엄밀히 말하면 다른 사람들의 코드를 사용하고 있는 것이다. 여러분은 서드 파티가 여러분의 애플리케이션이 사용하는 코드를 호스팅 하도록 할 수 있다. Google은 보존과 관리까지 다루기 때문에 이것은 매우 중요하고, 기업이 JavaScript 파일을 업그레이드 할 때 자동적으로 혜택이 미친다. Google은 여러분 모르게 API를 변경하지 않기 때문에 여러분의 코드는 JavaScript 파일이 수정되더라도 계속 실행된다.
여기에서 숨겨진 한 가지는 GSearchControl
객체용 코드로서 onLoad()
JavaScript 함수에서 생성된다. 이 객체를 생성하려면 Listing 8의 코드를 호출한다.
Listing 8. GSearchControl 객체 생성하기
// Create the Google search control var searchControl = new GSearchControl(); |
이 HTML 역시 매우 간단하다. JavaScript가 참조할 수 있는 div
태그와 ID가 전부이다. (Listing 9)
Listing 9. 검색 컨트롤을 만드는데 필요한 모든 HTML
<div id="searchcontrol" /> |
|
하지만, 안 보이는 곳에서 Google의 코드는 거의 모든 종류의 일들을 수행하고 있다. 새로운 텍스트 박스, 일부 아이콘 그래픽, JavaScript 함수를 호출하는 버튼을 만든다. 따라서 여러분은 모든 종류의 작동을 거저 얻게 되는 것이다. 하지만 여러분은 이러한 일이 어떻게 발생하는지에 대한 기초는 이해하고 있으면, 코드를 사용하고 애플리케이션을 실행시키는데 편리하다.
Ajax 애플리케이션은 단순히 XmlHttpRequest
를 사용하는 것에 관한 것만은 아니다. 이것은 웹 애플리케이션에 접근하는 방식에 관한 것이고, 비동기성에 기반하고 있다. 여러분이 Ajax 스팩의 코드를 작성하지 않았지만, Google 덕택으로 Ajax 애플리케이션이 만들어졌다. Google이 대부분의 작업을 했고, 여러분은 그 수혜자가 된 것이다.
이러한 단계들을 거쳐 이것을 여러분 고유의 애플리케이션에 적용하는 것은 여러분에 달려있다. 가장 간단하게는 div
를 자신의 웹 페이지에 추가하고 Listing 1의 JavaScript를 웹 페이지에 추가하는 것이다. 이것으로 Google 검색을 사용할 준비가 된 것이다.
하지만 이것이 전부가 아니며, 이러한 옵션이나 컨트롤에만 국한될 필요가 없다. 웹 결과, 블로그 결과, 비디오 결과를 웹 애플리케이션에 통합할 수 있다. 각각 특정 유형의 결과에 초점을 맞춘 검색 컨트롤을 여러 개 제공할 수도 있다. div
에서 측면을 벗어나는 대신, 애플리케이션 콘텐트의 나머지 중간 오른쪽에 span
엘리먼트에 Google 검색 컨트롤을 삽입할 수 있다. 그 어떤 경우이든, Google 검색은 여러분의 필요에 맞춰 구성될 수 있고, Google에 맞추기 위해 애플리케이션을 수정할 필요는 없다.
이 글에서 배운 것을 토대로 구현하고, Google 검색 박스와 기타 Google API를 여러분의 Ajax 애플리케이션에 추가해 보기 바란다. 여러분은 이제 퍼블릭 API를 사용하는 방법을 알았다. 예를 들어, Amazon.com은 퍼블릭 API를 제공하면, Amazon 서점의 책과 다른 상품들에 대해서도 Google과 똑 같은 웹 검색을 수행할 수 있다. 여러분이 선호하는 퍼블릭 API를 선택하여 여러분의 코딩 스킬로 할 수 있는 그 이상을 할 수 있다. 사실, Google, Amazon.com, Flickr 등등의 결과물이 통합된 사이트를 쉽게 만들 수 있다.
Google이 제공하는 검색 알고리즘과 수 많은 데이터 스토어 때문에 Google을 사용하는 방법을 익히는 것은 중요하지만, 더 중요한 것은 퍼블릭 API를 사용하는 방법을 배우는 것이다. 코딩 스킬 이상으로 애플리케이션에 대해 생각해야 한다. 이것은 다양한 데이터 조각에 대한 게이트웨이가 될 수 있다. 그 데이터는 Google, Amazon.com, del.icio.us의 서버에 저장될 수 있다. 이렇게 하는 것 만으로도 여러분 스스로 코딩 할 수 있는 것 이상으로 매우 강력한 솔루션을 얻을 수 있다.
큰 애플리케이션을 만들어 보자. 온갖 장소에 있는 데이터를 사용하고, 여러분이 코딩한 것에만 국한하지 말자. 다음 글에서는 데이터 포맷 같은 보다 기술적인 사안을 가지고 다시 돌아오겠다.
교육
- Ajax 마스터하기: 이 시리즈의 모든 기술자료 보기
- 오픈 소스의 정의
- Google Ajax Search API 개발자 가이드
- XML 기술 자료: 디벨로퍼웍스 XML 섹션은 XML 관련 툴, 샘플, 표준 정보, 교육, 뉴스, 이벤트 , XML 커뮤니티 포럼을 제공한다.
- 한국 developerWorks 웹 개발 존Web 2.0, Ajax, wikis, PHP, mashups, 기타 웹 프로젝트의 참고자료
- 한국 developerWorks 오픈 소스 존: 오픈 소스 개발과 구현의 참고자료
- xml.com
- 동적 자바 애플리케이션 구현 (한글) (Philip McCarthy, 한국 developerWorks, 2005년 9월): Ajax를 이용한 웹 애플리케이션 구현
- Ajax용 자바 객체 직렬화 (한글) (Philip McCarthy, 한국 developerWorks, 2005년 10월): Ajax 애플리케이션에서 데이터를 직렬화 할 수 있는 다섯 가지 방법
- Call SOAP Web services with Ajax (James Snell, developerWorks, 2005년 10월)
- DOM 홈페이지 (World Wide Web Consortium)
- DOM Level 3 Core Specification
- ECMAScript language bindings for DOM
- Ajax: A new approach to Web applications (Jesse James Garrett, Adaptive Path, 2005년 2월)
제품 및 기술 얻기
- Google Ajax Search API 홈페이지
- Head Rush Ajax, Brett McLaughlin (O'Reilly Media, 2006)
- Java and XML, Second Edition, Brett McLaughlin (O'Reilly Media, Inc., 2001)
- JavaScript: The Definitive Guide, David Flanagan (O'Reilly Media, Inc., 2001)
- Head First HTML with CSS & XHTML, Elizabeth와 Eric Freeman, O'Reilly Media, Inc., 2005)
- IBM 시험판 SW: 한국 developerWorks.
토론
Brett McLaughlin은 Logo 시절부터 컴퓨터 업계에서 일했다 (작은 트라이앵글 기억하는가?). Java 및 XML 커뮤니티의 인기 저자 및 프로그래머이다. Nextel Communications에서는 복잡한 엔터프라이즈 시스템을 구현했고, Lutris Technologies에서는 애플리케이션 서버를 개발했다. O'Reilly Media에서는 기고 및 편집 활동을 하고 있다. 베스트 셀러 작가인 Eric과 Beth Freeman과 공동 집필한 Head Rush Ajax는 Ajax에 혁신적인 Head First 방식을 취하고 있다. 그의 신간 Java 1.5 Tiger: A Developer's Notebook은 최신 자바 버전을 다룬 첫 번째 책이며, 그의 고전 Java and XML은 자바 언어에서 XML을 사용하는 방법에 대한 바이블로 통하고 있다. |
'API 관련 > Open API' 카테고리의 다른 글
암호 라이브러리/API (0) | 2007.11.13 |
---|---|
[펌]SOA(Site Open API) 활용법 (0) | 2007.11.13 |
자주 사용하는 API 함수 API (0) | 2007.10.25 |