서론

국내 최초 자바스크립트 컨퍼런스(http://jscon.ebrainus.com)에 다녀와서 흥미로운 주제를 많이 접할 수 있었는데 그중에 하나가 바로 Casper.js였다. 이번 자바스크립트 컨퍼런스에 대한 내용은 따로 포스팅하기로 하고 일단 연구원답게 잊어버리기 전에 기술부터 연구해보기 했다. 일전에 블로그에 웹 스크래핑하는 방법을 포스팅한 적이 있다. 그 때는 Node.js를 이용해서 웹 데이터를 가져오는 주제로 포스팅을 했는데 PhantomJS를 사용하는 내용을 포함하고 있다. CasperJS는 이 PhantomJS를 포함하고 있다. 예전부터 웹의 네비게이션을 자동화하여 필요한 데이터를 추출하고 싶었는데 좀더 인공지능적으로 사람처럼 행동하는 프로그래밍을 하기 위해서 복잡한 코드를 사용해야만 했다. 즉, 로그인을 한 뒤 어떤 정보를 가져오는 것 처럼 사람의 행동을 뭔가 컴퓨터가 자동적으로 해줘서 필요한 데이터를 수집해주기 위해서는 생각보다 복잡한 코드가 많이 필요하다. CasperJS는 사람이 브라우저를 열어서 뭔가 행동을 하는 것을 동일하게 해낼 수 있다. 실제 CasperJS는 Web Browser engine을 가지고 있다. 이 말은 사람이 브라우저를 열어서 웹 Documents를 해석해서 이벤트를 주는 것과 동일하게 할 수 있다는 것을 의미한다. 이제부터 사람이 브라우저로 하는 행동을 CasperJS로 처리하기 위해서 어떻게 해야하는지 살펴보자.

서론

PhoneGap을 시작하면서 복잡하게 생각드는 것은 Cordova이다. PhoneGap이면 PhoneGap 이거나 Cordova면 Cordova라면 되는데 공식 사이트 조차 이 두가지를 혼합해서 사용하고 있고 command도 sdk도 같이 업데이트 되고 있기 때문이다. PhoneGap이 Apache Foundation Software에 오픈소스로 등록해서 사용하고 있다는 것은 알겠지만 왜 두가지를 혼합해서 사용하고 있는 것일까? 이것은 꽤 혼란스런 사유가 되기도 한다. 단순하게 그냥 phonegap이나 cordova 메뉴얼을 보고 실행한다면 문제는 되지 않겠지만 분명 뭔가 다른 의도로 두가지를 나누어서 업데이트되고 있는 것은 아닐까? 라는 생각이 들기도 한다. 커뮤니티에서도 PhoneGap command는 Cordova command를 encapsulate 했고 PhoneGap Service를 추가했다는 이야기만 있을뿐 구체적인 이야기도 부족한 상태이다. 한번 시간을 내어서 이 두가지의 다른점을 자세히 조사해보고 싶은 마음이 든다. 이에 대한 설명은 이후에 하기로 기약하고 이 포스팅에서는 PhoneGap command의 기능 중에서 remote build에 대한 설명을 하려고 한다.

서론

JavaScript 기반 프로그램을 작성할 때 Object를 확장해서 사용할 일이 발생한다. JavaScript 프로그램에서 파라미터로 options를 많이 사용한다. 설정 값을 저장하고 있는 options는 기본 값이 있고 값을 입력하지 않으면 기본 값이 적용되게 할 때 사용한다. 이때 오브젝트를 어떻게 확장해서 사용할 수 있는지 소개한다.

서론

Mac에는 유용한 기능이 기본적으로 많이 포함되어 있다. 특히 서비스라는 기능이 맥에서는 아주 유용하게 사용할 수 있다. 서비스는 어플리케이션에 종속적이거나 또는 모든 어플리케이션에서 사용할 수 있는 서비스이다. 즉, 어플리케이션에서 특별한 기능을 바로 연결해서 사용할 수 있는 것이다. 이 서비스는 Automator라는 것으로 제작할 수 있는 이것은 Mac에서 특정 작업을 자동화할 수 있는 기능이다. 이것은 apple script로 제작된다. 이번 포스트에서는 웹 검색을 하거나 어플리케이션 안에 모르는 영어단어가 나오면 바로 단어를 사전에 찾을 수 있는 서비스를 Automator로 만들어서 추가하는 방법을 소개한다.

서론

모바일 앱 개발자라면 누구든지 이런 생각을 할 것이다. 하나의 코드로 다른 종류의 모바일 앱을 개발 할 수 없을까? 우리 연구소에서 이 질문에 대한 숙제를 지속적으로 생각하고 있고 또 필요로 하고 있다. 특히나 앱이 만들어지고 난 다음 유지보수를 할 때 개발한 앱들이 많아지게 되면 적은 인력으로 모든 앱을 네이티브하게 다른 언어의 플랫폼을 가지고 있는 앱들을 관리하고 업데이트하기가 쉽지 않다. 작년 하이브리드 앱 이라는 핫 이슈가 있었다. KTH에서는 Appsresso(앱스프레소)라는 eclipse 기반의 크로스 하이브리드 앱 개발 플랫폼을 정식으로 릴리즈하였고 앱스프레소를 이용하여 하이브리드 앱을 마켓에 올리기도 하였다. 하지만 Asspresso 프로젝트는 현재 개발이 멈추어진 상태이다. 개인적으로 가장 아쉬운 프로젝트이다. 국내에서 크로스 플랫폼을 지원하는 하이브리드 앱 개발 프레임워크로 비전이 있는 프로젝트였는데 말이다.. Appsresso는 항상 PhoneGap과 비교되어 왔다. PhoneGap은 Adobe에서 웹 개발 기술로 네이티브 앱을 개발할 수 있는 오픈소스 프레임워크이다. PhoneGap 공식 사이트에서 PhoneGap을 다음과 같이 설명하고 있다.

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web API for the platforms you care about

간단히 말하면 PhoneGap은 웹 API로 모바일 앱을 개발 할 수 있는 프레임워크이다. 즉 웹 개발 기술로 프로그램을 작성해서 네이티브 앱을 만든다는 개념인데 다음 그림으로 가장 쉽게 이해할 수 있다. HTML5 (Javascript, CSS) 로 만든 웹 앱을 PhoneGap으로 랩핑해서 모바일 플랫폼에 디플로이 시킨다. 이러게 모바일 웹에 돌아가 만든 모바일 앱(하이브리드 앱)은 마켓에 정식으로 등록도 가능하다.

처음 하이브리드 앱 개발을 연구할 때 PhoneGap과 Appsresso 둘 중에 Appspresso를 선택한 이유는 바로 On the Fly 기능 때문이였다. On the Fly 기능은 일종의 새로고침이다. 즉, 하이브리드 앱 개발을 할 때 컴파일이 필요한 네이티브코드를 제외한 나머지 리소스는 On the Fly 기능을 가지고 컴파일 타임없이 앱에 새로 고친 자원을 적용할 수 있는 것이다. 하이브리드 앱은 많은 량의 코드가 JavaScript로 만들어지기 때문에 이 기능을 가진 Appspresso는 PhoneGap 보다 빠른 개발 속도를 낼 수 있었다. PhoneGap은 리소스가 변경되면 항상 rebuild를 해야하기 때문에 단순하게 한줄을 고쳐도 늘 컴파일을 다시 해야하는 컴파일타임이 필요했기 때문이다. 하지만 Appsresso는 더이상 정식으로 릴리즈 되지 않는다. 그래서 하이브리드 앱에 관한 연구도 차츰 시들해지고 있었는데 역시나 네이티브 앱을 안드로이드와 아이폰 개발을 하면서 다시 하이브리드 앱의 필요성을 느끼게 되었다. Adobe는 Flash 공격 타격을 받으면서 점점 JavaScript 기술에 대응하기 위해서 JavaScript 사용하는 방법에 대해서도 연구를 많이 하기 시작했다. PhoneGap도 Node.js를 이용해서 phonegap command를 만들었다. 다시 PhoneGap에 대한 연구를 할 필요성을 느껴서 사용하면서 알게되는 정보를 공유하고자 한다. 연재가 끝내기 전에 PhoneGap에서도 On the Fly 기능을 아니명 이와 유사한 기능이라도 보기를 간절히 바라면서 말이다. 우선 PhoneGap으로 하이브리드 앱을 개발하기 위해서 앱 개발 환경 설정하는 부분이 필요하다. 이번 포스팅에서는 PhoneGap을 이용해서 하이브리드 앱 개발 환경을 설정하는 방법을 소개하고자 한다.