[Hybird App] 하이브리드 앱 개발환경 세팅

예전부터 하이브리드 앱을 배워보고 싶어 공부하려 했는데

기본 자료가 너무 없어서 책을 이용해 접하게 되었습니다.

 

책도 HTML + CSS 웹을 다루는 기술이 많고 앱관련 기술 비중이 낮은 편입니다.

저자도 잘 모르는 부분이며 공부하며 기술하려 합니다.

 

입문 하시려는 분들에게 저의 글이 도움이 되길 바라면서

포스팅 시작합니다.

 

 

-------------------------------------------------------------------------------

 

하이브리드 앱은 HTML CSS 자바스크립트 기술을 이용하며

모바일웹 + 모바일 프레임워크를 사용하여 = 네이티브앱으로 변환한 앱입니다.

 

모바일 프레임워크는 네이티브 앱을 개발하도록 도와주는 역할을 수행합니다.

 

폰갭, 트리거아이오, 티타니움 등 대표적인 모바일 프레임워크입니다.

 

저는 가장 대중적인 폰갭을 이용할 것이며 안드로이드 기반에서 개발연습을 진행하도록 하겠습니다.

 

 

1. NodeJS 설치

 

https://nodejs.org/ko/

 

위 페이지에서 NodeJS를 다운받습니다.

저는 현재버전 8.7.0 을 받았습니다.

 

기본설정으로 다 Next해서 설치합니다.

 

설치가 완료되면 Node.js command prompt 를 실행합니다.

 

 

 

 

 

 

CMD 창과 비슷합니다. 하위버전 상위버전과의 호환성을 위해 CTL 방식을 사용하는데

 

CTL이란 Command Line Interface입니다. 명령어 입력으로 자동으로 폰갭 설치 및 최신버전으로 업데이트 해주며 OS 플랫폼과 독립된 작업수행이 가능합니다.

 

 

다음과 같이 명령어를 입력합니다.

 

npm -version

 

 

 

Node Package Manager 의 약자이며 소프트웨어를 업데이트 할때 이용됩니다.

 

 

2. 폰갭과 코르도바를 설치

 

npm install -g phonegap

 

npm install -g cordova

 

 

두가지를 다운받습니다.

 

 

3. 폰갭 디벨로퍼 앱 설치

 

휴대폰 플레이 스토어에서 PhoneGap Developer 설치합니다.

 

 

4. 프로젝트 생성

 

md projects

프로젝트 디렉토리 생성

 

cd projects

프로젝트 디렉토리 이동

 

phonegap create hello_world

hello_world 이름의 폰갭 프로젝트 생성

 

 

 

실제 위치 가서 확인하기.

 

 

5. 프로젝트 빌드

 

cd hello_world

hello_world 디렉토리로 이동

 

phonegap serve

폰갭 서비스 실행

 

 

이상한 영어들 나옵니다. 서비스 실행된 상태입니다.

흰색부분은 IP주소입니다. 저 부분을 휴대폰 폰갭 실행시켜 입력해주어야 합니다.

 

6. 휴대폰 폰갭 실행 후

 

 

흰색부분에 IP주소를 넣어주면 우측 화면과 같이

메인 페이지로 이동하게 됩니다.

 

 

7. 프로젝트 수정하기

 

C:\Users\YooJongHyeok\projects\hello_world\www\index.html

 

YooJongHyeok 은 사용자 이름입니다. 다 다릅니다.

 

이곳의 <h1> 태그 이름을 변경해 저장해줍니다.

 

화면이 바뀌었음을 확인 가능합니다.

 

여기까지 개발환경 세팅입니다.

감사합니다.