MAC OSX에서의 PhoneGap 개발환경 구성에 대해 알아 보겠습니다. 요즘 특정 Hybrid Framework에서는 Windows 환경에서도 iOS Application을 Build하는 방법을 제공하지만, Open Source인 PhoneGap에서는 아직 제공하지 않으므로 MAC OSX 환경에서 개발환경을 구성하는 방법에 대해 알아 보겠습니다.
아래부터는 편의를 위해 경어는 생략하도록 하겠으니 양해 바랍니다.
1. XCode 설치
XCode는 Apple AppStore나 홈페이지에서 다운로드 할 수 있다. Apple AppStore에서 다운로드 할 경우 최신 버전만 다운로드 가능하므로 이전 버전의 XCode를 다운로드하고 싶을 경우 홈페이지에 접속하여 다운로드 받도록 한다. 홈페이지 아래의 경로로 접근하면 다운로드 가능하다.

https://developer.apple.com/downloads

XCode는 현재 OS 버전에 따라 설치할 수 있는 버전이 제한되며, 최신 버전의 iOS 지원을 위해서는 개발에 사용하는 MAC Book, iMac의 OS 버전도 최신으로 업데이트해야 한다.
2. Command Line Tools 설치
혹시나 Command Line Tools가 아직 설치되어 있지 않다면, 1번 과정과 동일한 방법으로 Command Line Tools를 설치한다.
3. Node.js 설치
PhoneGap 3.5 버전부터는 다운로드는 허용하지 않으며, CLI를 통한 설치만 허용한다. 해당 작업이 Node.js 기반으로 구성되었으므로 먼저 아래 URL로 접근하여 Node.js를 설치한다. -. http://nodejs.org

4. PhoneGap 설치
PhoneGap 3.5 부터는 CLI를 통한 다운로드만 허용하고 있으므로 npm install 명령으로 설치한다. Command Window를 실행한 후 아래 화면과 같이 명령어를 입력한다.

명령어를 입력하면 NodeJS 모듈이 PhoneGap을 다운로드하여 자동으로 설치한다. 설치가 종료되면 Command Window에서 cordova –v 라고 입력하여 설치한 PhoneGap version을 확인할 수 있다.
5. PhoneGap 프로젝트 생성
위 과정으로 PhoneGap 프로젝트 생성을 위한 준비가 끝났다. 실제 프로젝트를 생성하여 개발 툴인 XCode로 반입하는 방법은 아래와 같다.

1. 임시 workspace 생성

PhoneGap CLI로 생성한 프로젝트를 보관할 폴더를 하나 만든다. 각자 관리하기 편한 경로에 생성하면 된다. 일단 Sample로는 /Users/계정/Documents/phonegap/workspace/ 로 생성하였다.

2. PhoneGap 프로젝트 생성

 PhoneGap 프로젝트는 CLI로 생성할 수 있으므로 Command Window를 열고 /Users/계정/Documents/phonegap/workspace/로 이동한다. 이동한 후 cordova create 명령으로 PhoneGap 프로젝트를 생성할 수 있다. 생성하는 과정은 아래 그림을 참고한다.

실행한 결과를 보면 com.edu.bbs 라는 아이디를 가진 MobileBBS라는 프로젝트를 생성하였는데, 그 경로가 /Users/계정/Documents/phonegap/workspace/mobileBBS 에 생성되었다는 결과가 표시되었다.

3. Platform 추가

프로젝트를 생성했으면 프로젝트에서 사용할 Platform을 추가해야 한다. 당연히 이번에는 iOS를 추가해보자. 먼저 방금 생성한 프로젝트 폴더로 이동하여 cordova platform add 명령을 실행한다. 과정은 아래 그림을 참고한다.

4. XCode 반입

 이제 생성한 Project를 XCode로 반입해야 한다. MAC OSX에서 반입은 프로젝트 파일만 실행시키면 쉽게 XCode 프로젝트로 등록 가능하다. 방금 전 단계에서 iOS platform을 추가하였으므로 ./platform/ios/ 경로에 접근해보면 MobileBBS.xcodeproj 파일을 볼 수 있다. 해당 파일을 더블클릭하면 자동으로 XCode Project로 등록된다.




300x250
저작자표시 비영리 변경금지

'모바일 > 개발환경구성' 카테고리의 다른 글

PhoneGap 개발환경구성 (Windows)  (3) 2015.01.05

+ Recent posts

티스토리툴바