폰갭으로 쉽게 어플 만들자. 동작원리

앱과 서버 간의 동작원리

폰갭이든 네이티브든 동작원리는 같습니다.

사실 개발해 보면 기본은 html과 javascript css는 무조건 제대로 해야 합니다. 웹의 기본입니다. 게임을 만들지 않는 이상은 거의 html과 jquery, json, xml 이렇게 사용합니다.

html은 쉽다 javascript는 쉽다 css는 별거 아니라고 생각하시는 분들 중에 제대로 구현하실 수 있는 분 아니면 책을 한번 보시길 바랍니다.

javascript로 프로그램을 구현한다고 봐야 되는데 javascript로 alert 정도로 생각하시는 분리 하면 책을 한번 꼭 보시길 바랍니다.

기본 언어가 쉽지만 그 쉬운 언어 조차 제대로 구현하는 홈페이지 제작자가 적은 것도 사실입니다.

css는 @media를 이해하시는 분들은 이해가 되실 정도이고 float를 모르시는 분들은 css 책을 하루만 정독하시면 됩니다.

정말 기본이고 쉬운 언어인데 그래서 그런지 제대로 아시는 분들 많이 않다는 점도 아쉽습니다.

구현원리

폰갭은 앱에서 보이는 홈페이지라고 생각하시면 됩니다. 그냥 apache에서 구현하는 웹페이지를 보여 준다고 보시면 됩니다. 그런데 이게 어떻게 각종 서비스를 하도록 하는가에 대한 부분은 ajax로 서버와 통신을 하고 그 데이터를 jquery로 앱 화면에 구현하기에 가능합니다. 

홈페이지로 이야기를 하겠습니다. 서버와 데이터 베이스 서버 그리고 파일서버가 따로 있다고 보신 후에 database 접속을 하지 못하는 상황에서 웹사이트를 제작한다고 생각하시면 됩니다.

앱에서 데이터 베이스를 집적 연결하지 못합니다. db_connect를 ajax로 하고 필요한 데이터를 json으로 받으면 됩니다. 그것 조차 어려우 면 필요한 화면을 서버에서 html로 받은 후 jquery로 div사이에 넣어 주면 됩니다.

그게 연속적으로 이루어지는 게 앱입니다. 물론 게임이나 그렇지 않은 어플들도 있습니다. 우리가 하고자 하는 것은 서버와 연동하는 어플들을 이야기하는 겁니다. 조금 더 깊이 들어가면 게임도 가능합니다. 그건 후자에 이야기를 하도록 하겠습니다.

 

앱을 웹 브라우즈라 생각하면 쉽습니다. 단 db연결은 ajax로 처리해야 됩니다. 그리고 서버와 통신으로 돌아갑니다.

위 그림은 그런 의미를 설명하기 위한 그림입니다.

이렇게 동작하게 되므로 phonegap api도 자바스크립트를 할 줄 알아야 사용이 가능하고 화면에 각종 효과나 표현은 css를 어느 정도 이해해야 맞추는 게 가능합니다.

html은 당연히 기본적으로 할 줄 알아야 되겠죠. 이 기본 없이 웹사이트를 만들거나 앱을 만들지는 못합니다.

네이티브 앱도 마찬가지입니다. 이건 모든 앱의 기본입니다.

화면 전환

메인 페이지에서 다음 메뉴로 클릭하면 일반적으로 html전환을 하게 됩니다. index.html에서 하이퍼 링크로 menu1.html  이렇게 가겠죠. 앱에서는 이렇게 진행하지는 않습니다. 물론 이렇게 해도 되지만 전체적으로는 최소한 변화된 데이터만 화면에서 바꾸도록 처리합니다.

폰갭의 기본 처리 방법의 이해를 설명했습니다.

생각보다 쉽습니다. 간단한 것부터 하나하나 처리하면서 같이 공부하면 될 겁니다.

db와 연결을 직접 못하기 때문에 항상 서버와 ajax로 데이터를 통신하고 화면은 jquery로 하시면 된다는 개념입니다.