| NCS 분류 | 문화,예술,디자인,방송 > 문화콘텐츠 > 문화콘텐츠제작 |
|---|---|
| 능력단위 | 앱 개발계획 |
| 학습모듈명 | 앱 개발계획 |
HYBRIDAPP과 CORDOVA
Hybrid App과 Cordova에 대해서는 다음의 포스팅에서 잘 설명하고 있기 때문에 링크로 대신합니다. 처음 개념을 이해하는데 매우 좋은 글이라고 생각됩니다.
Naver D2 :: Phonegap을 이용한 앱 개발
CORDOVA 프로젝트 생성하기
프로젝트를 생성하기 위해서는 터미널 상에서 프로젝트가 생성되기를 원하는 디렉토리로 이동한 다음 다음과 같이 명령어를 입력합니다.
cordova create 프로젝트이름
만약 최초로 프로젝트를 생성한 것이라면 다음과 같이 묻는 과정이 포함될 수 있습니다. 이러한 과정이 표시되면 “Y”라고 입력하고 엔터를 누릅니다.
프로젝트의 생성이 완료되면 입력한 프로젝트의 이름으로 디렉토리가 생성되고, 그 안에 Cordova 프로젝트 파일들이 생성됩니다.
웹 브라우저 플랫폼 작업
플랫폼 추가하기
기본적인 HTML 페이지를 만들기 위해서는 웹 브라우저를 통한 결과 확인이 가장 편리합니다. 저는 개인적으로 크롬브라우저의 개발자 도구를 통한 개발을 선호합니다.
우선 프로젝트 디렉토리 안으로 이동해야 합니다.
그 다음 웹 브라우저용 플랫폼을 추가하기 위하여 다음의 명령어를 수행합니다.
명령어를 입력하고 나면 플랫폼에 필요한 파일들이 다운로드 됩니다.
플랫폼 실행하기
다음의 명령어를 통해서 cordova를 웹 브라우저를 통해서 실행해 볼 수 있습니다.
브라우저 플랫폼을 실행할 경우 열려 있는 터미널에서 웹 서버가 실행되고 크롬 브라우저가 실행됩니다.
실행을 종료하기 위해서는 터미널에서 Ctrl + C를 입력하면 됩니다.
Android 플랫폼
플랫폼 추가하기
안드로이드용 플랫폼을 추가하기 위하여 다음의 명령어를 수행합니다.
명령어를 입력하고 나면 플랫폼에 필요한 파일들이 다운로드 됩니다.
플랫폼 실행하기
안드로이드 에뮬레이터를 실행해 둔 상태에서 다음의 명령어를 수행하면 Cordova가 HTML 파일들을 Android 앱 형태로 패키징하여 에뮬레이터를 통해 실행합니다.
iOS 플랫폼 (only Mac)
플랫폼 추가하기
안드로이드용 플랫폼을 추가하기 위하여 다음의 명령어를 수행합니다.
명령어를 입력하고 나면 플랫폼에 필요한 파일들이 다운로드 됩니다.
플랫폼 실행하기
우선 다음의 명령어를 사용하여 사용 가능한 디바이스 타입들을 확인해야 합니다.
명령어를 실행하면 다음과 같이 결과가 표시됩니다. (장치 상황에 따라 다를 수 있습니다.)
위의 결과에서 사용하고자 하는 디바이스를 선택하여 콤마(,)전까지의 이름을 명령어에 –target 옵션으로 사용합니다. 예를 들어 “iPhone-7, 10.3″를 통해서 결과를 확인하고자 한다면 –target=”iPhone-7″까지만 입력하면 됩니다.
다음의 명령어를 수행하면 Cordova가 HTML 파일들을 iOS 앱 형태로 패키징하여 에뮬레이터를 통해 실행합니다. 만약 이 과정에서 iOS 에뮬레이터가 실행중이지 않다면 자동으로 실행됩니다.
그 밖의 플랫폼 관련 명령어
설치된 플랫폼 목록 보기
플랫폼 삭제하기
플랫폼 업데이트
플러그인을 설치한 후 간혹 빌드시에 반영이 잘 되지 않는 경우가 있습니다. 그럴 때는 다음의 명령어를 수행하면 플랫폼 삭제 > 재생성이 이루어 집니다.
CORDOVA 프로젝트 구조
프로젝트가 생성된 폴더를 확인하면 다음과 같이 구성되어 있습니다.
HOOKS 디렉토리
프롬프트에서 명령어가 실행 될 때 임시 코드들이 생성되었다가 삭제됩니다. 실제 개발을 진행하는 동안 신경쓸 필요가 없는 디렉토리 입니다.
PLATFORMS 디렉토리
각 플랫폼 Native Code가 위치하게 된다. 초기 프로젝트 생성시에는 비어 있으며 NativeApp으로 변환한 결과물이 저장됩니다.
PLUGINS 디렉토리
플러그인들이 포함되는 디렉토리 입니다.
WWW 디렉토리
웹 페이지 제작 폴더. 이 곳에서 제작하는 웹 페이지가 App으로 변환됩니다.
CONFIG.XML 파일
각 플랫폼별 설정 내용을 관리하는 파일입니다.
이후의 작업은 www 폴더 안에 html 파일들을 배치하면 됩니다. 이 HTML 파일들 중에서 index.html 파일이 App의 첫 페이지로 설정됩니다.
[출처] http://www.itpaper.co.kr/cordova-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%A7%84%ED%96%89%ED%95%98%EA%B8%B0-hello-world/
