이번 문서에서는 PhoneGap를 셋팅하고 (iOS) PhoneGap 프로젝트에서 javascript 초기화에 대해 다룬다.
Getting Start PhoneGap
PhoneGap을 시작하는 사람들을 모두 들어가 봤을만한 공식 사이트다. 아주 친절하게도 http://phonegap.com/start 이 주소로 들어 가면 플랫폼 별로 초기 셋팅을 어떻게 하는지에 대해 순서대로 나와 있다.
주의 해야할 사항은 xcode 를 이용하여 iOS 플랫폼에 셋팅을 하는 경우라면 초기에 PhoneGap을 설치하고 Cordova Project로 생성을 한 뒤에 위와 같은 폴더 구조가 나오는데 바로 컴파일을 하면 제대로된 화면이 안나오고 아래와 같은 메세지를 볼수 있다.
PhoneGap에서 사용되는 javascript 와 html, css파일들은 프로젝트 하위의 www 폴더에 생성되는데 xcode에서 이를 인식하지 못하여 발생하는 문제이다. xcode에 플러그인 형식으로 설치 하는 거라 플러그인에서 생성 시킨 폴더(www)를 자동으로 프로젝트에 추가 해주지 못해서 그런것 같다. 위의 문제는 프로젝트를 한번 컴파일 한뒤에 프로젝트를 저장한 폴더에 이동해 보면 www폴더가 생성되어 있는걸 볼수 있는데 아래와 같이 프로젝트에 추가해 주면 제대로 동작 하게 된다.
www폴더를 드래그 해서 위의 phonegap_sample 프로젝트에 드랍해 주면 프로젝트에서 www를 인식 하게 된다.
www/index.html
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script> |
<script type="text/javascript"> |
document.addEventListener("deviceready", onDeviceReady, false); |
<body onload="onBodyLoad()">
|
www폴더를 보면 PhoneGap을 동작하는데 필요한 cordova.js와 index.html 이 있다. cordova.js를 PhoneGap을 초기화 하고 디바이스와 통신하는데 필요한 준비 및 API로 구성되어 있다. 한번 훑어 보는것도 좋을듯 하다.
위의 코드는 index.html에서 기본적인 source만 뽑아낸 것이다. 어플리케이션이 실행 되면 처음으로 시작되는 곳이 index.html 이다. 모든 초기화는 여기서 이루어 진다. 일반 웹 페이지와 다른 것은 "deviceready" 이벤트를 통해 PhoneGap이 동작하는 기기(플랫폼)가 준비가 되었는지 확인하는 과정이 필요하다. 위의 코드에서 알수 있듯이 onDeviceReady가 호출 된 후에에 PhoneGap API 등을 사용할 수 있다. 그 전에 호출을 해봤자 실행 되지 않는다.
2개의 문서로 마무리를 지으려고 했는데, 문서를 작성하면서 생각이 덧붙여 지면서 분량이 더 많아 졌다. 다음 문서에서는 iOS와 Android 플랫폼에서 동작하는 Plugin 개발하는 방법을 다루겠다.
