개발자 도구

이 문서에서는 가젯의 프로그래밍, 디버깅 및 호스팅을 위한 일반적인 가이드라인을 제공합니다.

목차

  1. 프로그래밍 및 디버깅 도움말
    1. 단계별로 진행
    2. 기존 가젯 연구
    3. Firefox 자바스크립트 콘솔 사용
    4. 가정 확인
    5. 추가 도구
  2. Google 가젯 편집기를 통한 호스팅
    1. File Menu Commands
    2. Publishing Your Gadget from GGE
  3. Hosting on Google Code
    1. Creating a New Project
    2. Checking Out a Project
    3. Uploading Files

프로그래밍 및 디버깅 도움말

가젯(또는 코드)을 개발하는 중에는 자신이 기대하는 방식으로 상황이 진행되지 않는 이유를 알아야 합니다. 이 섹션에서는 문제를 방지하고 문제가 일어났을 때 해결하기 위한 기본적인 기술에 대해 설명합니다.

단계별로 진행

프로그래밍의 기본 규칙은 단계별로 진행하는 것입니다. 기본적이고 골격에 충실한 가젯을 작동하게 한 다음 그 가젯을 점점 키워나가야 합니다. 그리고 다음 단계로 넘어가기 전에 매 단계에서 테스트합니다. 이러한 접근 방식을 사용하면 변경으로 인해 문제가 발생한 시점을 알기가 쉽습니다.

기존 가젯 연구

가젯 개발자가 사용할 수 있는 가장 좋은 리소스 중 하나는 기존 가젯입니다. 콘텐츠 디렉토리에서 자신이 구현하고자 하는 것과 매우 유사해 보이는 가젯의 소스 코드를 살펴 보세요.

Firefox 자바스크립트 콘솔 사용

개발하는 동안 iGoogle에서 가젯을 테스트하기 위해 Firefox 웹 브라우저를 사용할 수 있습니다. 가젯이 제대로 작동하지 않을 경우 자바스크립트 콘솔(도구 > 자바스크립트 콘솔)을 열고 오류를 선택한 다음 아래로 스크롤하여 가젯에 자바스크립트 구문 오류가 있는지 확인합니다. 각 테스트를 수행하기 전에 이전 오류 메시지가 삭제되도록 콘솔을 지워야 합니다.

다른 종류의 브라우저를 사용하는 경우에는 해당 브라우저가 지원하는 자바스크립트 콘솔 또는 디버거를 찾습니다.

가정 확인

개발하는 동안 자신의 가정을 확인하면 많은 시간과 노력을 절약할 수 있습니다. 변수에 자신이 생각하는 값이 있다고 확신합니까? 배열에 요소가 포함되어 있다고 확신합니까? "올바로 작동하지 않는 것 같은" 함수가 호출될 가능성은 없습니까? 프로그램에서 다양한 시점에 상태 메시지를 인쇄하여 자신의 가정을 테스트할 수 있습니다. 예를 들어 다음 가젯에는 debug 플래그에 0이 아닌 값이 있을 경우 debug_div에 디버깅 메시지를 쓰는 print() 함수가 있습니다.

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
<ModulePrefs title="Debug Example" height="200"/>
<UserPref name="myname" display_name="Name" required="true" />
<UserPref name="mycolor" display_name="Color" default_value="Pink" datatype="enum" >
<EnumValue value="Blue" />
<EnumValue value="Yellow" />
<EnumValue value="Pink" />
<EnumValue value="Gray" />
</UserPref>
<Content type="html">
<![CDATA[
<div id="content_div" style="font-size:20pt; padding:5px; text-align: center;"></div>
<div id="debug_div" style="font-size:9pt; padding:5px; color: red;"></div>
<script type="text/javascript">
// Get userprefs
var prefs = new gadgets.Prefs(); // debug flag. When its value is non-zero, debugging messages are displayed var debug = 1; // The string containing debugging messages
var debug_html = ""; // Display date
function displayDate (){ // DEBUG: is the function getting called?
print("In displayDate function<br>");
// Create Date object
var today = new Date();
// Get current time
var time = today.getTime();
var content_html = "";
var element = document.getElementById('content_div');
element.style.backgroundColor=prefs.getString("mycolor");
element.style.height=100;
// DEBUG: print out prefs values
print("The background color is " + prefs.getString("mycolor") + "<br>");
print("The name is " + prefs.getString("myname") + "<br>");
content_html += today.toDateString();
// Write content HTML to div
document.getElementById("content_div").innerHTML = content_html;
}
// Outputs debug messages if debug flag has a non-zero value
function print(msg) {
if (debug) {
debug_html += msg;
// Write debug HTML to div
document.getElementById("debug_div").innerHTML = debug_html;
}
}

gadgets.util.registerOnLoadHandler(displayDate);
</script>
]]>
</Content>
</Module>

참고: 가젯에 표시하는 메시지의 동작과 모양을 수정할 수 있는 미니메시지 API에 대한 설명을 보려면 미니메시지를 참조하시기 바랍니다.

추가 도구

다음 Firefox 추가 기능을 사용하면 개발하는 동안 좀더 가젯을 상세히 살펴볼 수 있습니다.

  • Firebug에서는 디버깅 도구와 DOM 검사를 제공합니다.
  • Web Developer를 사용하면 웹 개발자 도구가 들어 있는 메뉴와 도구 모음을 브라우저에 추가할 수 있습니다.

Google 가젯 편집기를 통한 호스팅

가젯 XML 파일을 저장할 서버에 대한 액세스 권한이 없을 경우 GGE(Google 가젯 편집기)가 가젯 수정 및 호스팅을 위한 좋은 도구입니다. GGE를 사용하려면 Google 계정으로 로그인(로그인하지 않으면 가젯을 저장할 수 없음)되어 있는지 확인합니다. 예를 들어 "Hello, world!"라는 메시지를 "Hello, gadget developers!!"로 바꾸고 File > Save As를 사용하여 가젯 명세를 새 이름으로 저장하는 경우, GGE는 지정된 이름으로 새 가젯 명세를 호스팅합니다.

참고: GGE는 아직 gadgets.* API를 완벽하게 지원하지는 않으므로 일부 기능은 사용할 수 없습니다. GGE를 사용하여 파일을 수정하고 호스팅할 수 있지만 가젯을 미리 볼 수는 없습니다.

File Menu Commands

수정 탭에는 다음 명령이 포함된 File 메뉴가 있습니다. GGE에서는 Google 계정을 사용하여 사용자의 파일을 식별하므로 이러한 명령의 대부분을 사용하려면 로그인해야 합니다.

명령 설명
Open GGE를 통해 이전에 작성하여 저장했던 가젯을 엽니다.
Save 수정 중인 가젯 명세를 저장합니다. 가젯을 전에 저장한 적이 없을 경우 가젯의 이름을 입력하라는 메시지가 표시됩니다. GGE에 가젯을 저장하면 GGE에서 자동으로 가젯을 호스팅합니다. 가젯을 게시하려면 먼저 공개 서버에 호스팅해야 하며 GGE는 가젯을 호스팅하고 여러 가지 게시 방법을 제공합니다.
Save As 수정 중인 가젯을 다른 이름으로 저장합니다.
Rename 수정 중인 가젯의 이름을 변경합니다. 가젯을 저장한 후에만 사용할 수 있습니다.
Upload 파일 시스템에서 가젯 리소스를 찾아 GGE 환경에 저장하도록 합니다. 가젯 명세 또는 이미지 파일과 같은 기타 가젯 리소스를 저장할 수 있습니다. 리소스를 GGE에 업로드하면 GGE에서 리소스를 호스팅합니다. 이를 통해 리소스의 GGE URL을 참조하여 리소스를 가젯 명세에 가져올 수 있습니다.
Publish Publish 메뉴는 가젯을 게시하기 위해 다음 옵션을 제공합니다.
  • iGoogle 페이지에 추가
  • iGoogle 디렉토리에 게시
  • 웹페이지에 추가

이 명령은 가젯이 저장된 후에만 사용할 수 있습니다(저장하면 GGE에서 가젯을 호스팅함). 자세한 내용은 GGE에서 가젯 게시를 참조하시기 바랍니다.
Delete GGE 가젯 목록을 표시하고 선택하여 삭제할 수 있도록 합니다.

GGE에서 가젯 게시

File 메뉴의 Publish 명령은 가젯을 게시하기 위해 다음 옵션을 제공합니다.

  • iGoogle 페이지에 추가 - 가젯을 iGoogle 페이지에 추가합니다. 개발하는 동안 가젯을 테스트할 수 있는 가장 간단한 방법입니다.
  • iGoogle 디렉토리에 게시 - 가젯 URL을 양식에 미리 입력하여 iGoogle 제출 페이지를 표시합니다. 제출 양식을 사용하여 가젯을 iGoogle 콘텐츠 디렉토리에 제출할 수 있습니다. 보내기를 클릭하지 않으면 가젯이 제출되지 않습니다. 가젯 개발에 있어 이는 가젯을 테스트하고 수정을 완료한 다음의 최종 단계입니다. 가젯을 사용하고 친구들과 공유하는 경우 이 단계를 거칠 필요는 없습니다. 이 옵션은 대중에게 자신의 가젯을 제공하려는 가젯 개발자를 위한 것입니다.
  • 웹페이지에 추가 - 신디케이션 작성자 페이지를 표시합니다. 신디케이션은 아직 gadgets.* API나 오픈소셜 API에서 지원되지 않습니다.

가젯의 URL은 GGE의 오른쪽 상단에 표시됩니다. 링크를 클릭하면 전체 URL을 볼 수 있습니다.

가젯을 개발하고 테스트할 때에는 가능한 한 다양한 환경에서 테스트하는 것이 좋습니다. 가젯을 테스트하고 수정하는 작업이 완료되면 iGoogle 콘텐츠 디렉토리에 제출하여 대중에게 배포할 수 있습니다.

Google 코드에서 호스팅

가젯 명세와 가젯 리소스를 호스팅하는 가장 쉬운 방법은 GGE를 사용하는 것입니다. 더 완벽한 소스 제어 시스템을 필요로 하는 개발자들의 경우 가젯을 Google 코드(http://code.google.com/hosting)에서 호스팅하는 것이 좋습니다. Google 코드는 가젯 개발자에게 많은 혜택을 제공하는 무료 서비스입니다. 주요 혜택 중 하나는 오픈소스 버전 제어 시스템인 Subversion을 통한 버전 제어입니다. Subversion을 이용하면 변경사항을 추적하고 다양한 버전의 가젯을 유지 관리할 수 있습니다. 이전 버전으로 돌아가거나 버전 간의 차이점을 분석할 수 있는 전체 업데이트 내역을 이용할 수 있습니다. Subversion에 대한 자세한 내용은 Subversion 책을 참조하시기 바랍니다.

Google 코드에서 가젯을 호스팅하려면 파일을 code.google.com("Subversion 저장소")에 로드하여 저장하도록 해 주는 데스크톱 프로그램("Subversion 클라이언트")을 먼저 설치해야 합니다. 대부분의 Subversion 클라이언트에는 명령줄 인터페이스보다 Subversion에서 작업하기가 편리한 GUI(그래픽 사용자 인터페이스)가 제공됩니다. 다양한 클라이언트가 제공되어 운영체제에 맞게 선택할 수 있으므로 시스템과 호환되는 클라이언트를 설치하시기 바랍니다. 추천하는 클라이언트는 다음과 같습니다.

  • TortoiseSVN은 Windows 탐색기에 기능을 직접 통합하여 사용이 간편한 Windows용 Subversion 클라이언트입니다.
  • AnkhSVN은 IDE 내에서 Subversion 액세스를 가능하게 해 주는 Visual Studio 플러그인입니다.
  • ZigVersion은 Mac OS X용으로 만들어진 Subversion 클라이언트입니다.
  • RapidSVN은 플랫폼 간에 호환되는 GUI Subversion 클라이언트입니다.  이 클라이언트는 세 가지 주요 운영체제(Windows, Mac OS X 및 Linux)를 모두 지원합니다.

여기에 전체 클라이언트 및 플러그인 목록이 있습니다.

시스템에 Subversion이 설치되면 아래의 단계에 따라 Google 코드를 이용한 프로젝트 호스팅을 시작합니다.

새 프로젝트 만들기

새 프로젝트를 만들려면 다음 단계를 따르세요.

  1. http://code.google.com/hosting에서 Gmail 계정으로 로그인합니다.  Gmail 계정이 없으면 계정을 만드세요.
  2. Create a new project을 클릭합니다.
  3. 새 프로젝트에 대해 입력란을 채웁니다.
    • my-gadgets처럼 프로젝트 이름은 소문자로 작성합니다. 프로젝트 이름은 프로젝트 URL의 일부가 되며 나중에 변경할 수 없습니다.
    • 요약 및 설명을 입력합니다.
    • 오픈소스 라이센스를 선택합니다. 자세한 내용을 보려면 오픈소스 라이센스를 방문하시기 바랍니다.
    • 선택사항: 다른 사용자가 프로젝트를 쉽게 찾을 수 있도록 이름을 지정합니다.
  4. 모든 필수 입력란에 내용을 입력했는지 확인하고 Create Project를 클릭합니다.
  5. 프로젝트 만들기가 완료되어  Project Home 페이지로 리디렉션됩니다. URL이 http://code.google.com/p/<project-name>/처럼 되어 있는지 확인합니다.

이제 code.google.com에 프로젝트가 만들어졌으며 프로젝트 이름을 이용하여 Subversion 저장소가 만들어졌습니다. Source 탭을 클릭하고 Subversion repository 링크를 클릭합니다.

URL은 http://<project-name>.googlecode.com/svn/처럼 되어 있으며 branches, tagstrunk라는 세 가지 디렉토리 링크가 표시됩니다. 프로젝트에 업로드한 파일은 /trunk 폴더에 저장됩니다. 나중에 참조할 수 있도록 URL http://<project-name>.googlecode.com/svn/trunk/를 북마크에 추가할 수도 있습니다.

프로젝트 반출

파일을 업로드하려면 먼저 프로젝트의 Subversion 저장소에서 코드를 반출해야 합니다. 반출을 수행하려면 세 가지 정보 즉, 저장소 URL(http가 아니라 https로 시작하는 버전을 사용해야 함), 사용자 이름, 비밀번호가 필요합니다. 이러한 정보를 보려면 프로젝트의 Source탭(http://code.google.com/p/<project-name>/source)으로 이동합니다. 그러면 다음과 같은 내용이 표시될 것입니다.

svn checkout https://<project-name>.googlecode.com/svn/trunk/ gadgets-test --username <username>

When prompted, enter your generated SVN password.

진행하는 동안 필요할 때 정보를 검색할 수 있도록 브라우저에 이 페이지를 열어 두시기 바랍니다.

실제로 반출하는 경우 세부적인 부분은 사용하는 Subversion 클라이언트에 따라 다를 수 있지만 전반적인 프로세스는 동일합니다. 이 섹션의 지침에서는 사용자가 TortoiseSVN을 사용한다고 가정합니다.

프로젝트를 반출하려면 다음 단계를 따르세요.

  1. Windows 탐색기에서 새 폴더를 만들고 폴더 내부로 이동합니다.
  2. 마우스 오른쪽 버튼을 클릭하고 SVN Checkout...을 선택합니다. 
  3. 저장소 URL을 입력하고 OK를 클릭합니다. 이 단계에서는 https로 시작하는 저장소 URL 버전을 사용해야 합니다. 이는 읽기-쓰기 권한을 위해 필요합니다. http로 시작하는 버전을 사용하면 읽기 권한만 부여되어 파일을 추가하거나 커밋할 수 없습니다.
  4. TortoiseSVN이 서버에 접속하여 사용자 인증을 시도합니다. 사용자 이름과 비밀번호를 입력하라는 메시지가 표시됩니다. 사용자 이름과 비밀번호를 입력하고 Save authentication을 선택한 다음 OK을 클릭합니다. 사용자 이름과 비밀번호를 입력하라는 메시지가 표시되지 않으면 3단계로 돌아가서 저장소 URL이 http가 아닌 https로 시작하는지 확인합니다.

이 시점에서 클라이언트가 연결되어 전체 저장소를 반출합니다. 그러면 작업이 완료됩니다.

반출이 성공적으로 완료되면 새로운 숨김 폴더인 /.svn이 표시됩니다.  이 폴더를 수정하거나 삭제하면 안 됩니다.

파일 업로드

프로젝트 반출이 끝나면 Subversion 명령을 사용하여 새 폴더와 파일을 디렉토리에 추가할 수 있습니다. 이 섹션의 지침에서는 사용자가 TortoiseSVN을 사용한다고 가정합니다.

파일을 업로드하려면 다음 단계를 따르세요.

  1. <project-name>.googlecode.com/svn/trunk/ 디렉토리에 새 파일을 만들어 저장(예: new-gadget.xml)합니다. /trunk 아래에 직접 파일을 넣거나 /trunk의 하위 디렉토리에 파일을 넣을 수 있습니다.
  2. 파일을 마우스 오른쪽 버튼으로 클릭하고 Add...를 선택합니다.  그러면 파일이 추가된 것으로 표시됩니다. 현재 파일은 아직 서버에 업로드되지 않은 상태입니다. 저장소에 아직 추가하지 않은 디렉토리에 파일을 넣는 경우에는 해당 디렉토리도 추가해야 합니다. 디렉토리를 추가하면 디렉토리 안에 있는 파일도 함께 추가됩니다. 동일한 규칙이 변경사항 커밋에도 적용됩니다. 파일이 포함된 디렉토리를 커밋하지 않은 경우 파일을 저장소에 커밋할 수 없습니다.
  3. 커밋(업로드)할 준비가 될 때까지 계속 파일을 수정합니다.
  4. 파일을 커밋할 준비가 되면 파일을 마우스 오른쪽 버튼으로 클릭하고 SVN Commit...을 선택합니다. 

메시지가 표시되면 메시지 로그에 메모(선택사항)를 입력하고 OK를 클릭합니다. 그러면 파일이 서버로 전송되기 시작합니다.

파일이 서버로 전송되면 커밋(업로드)이 완료되고 http://<project-name>.googlecode.com/svn/trunk/new-gadget.xml에서 즉시 온라인으로 파일을 사용할 수 있게 됩니다. 저장소에 있는 파일을 참조(읽기)만 하려면 http로 시작하는 저장소 URL 버전을 사용합니다.

URL에 반영될 저장소 내 디렉토리 구조를 만들 수 있습니다. 예를 들어 새 파일을 /a/b/c/new-gadget.xml에 추가하여 커밋하는 경우 이 파일은 http://<project-name>.googlecode.com/svn/trunk/a/b/c/new-gadget.xml에서 호스팅됩니다.

Google 코드에서의 프로젝트 호스팅에 대한 자세한 내용을 보려면 FAQ를 방문하시기 바랍니다.

맨위로