이 포스트는 Ionic 1.3 버전에 대한 내용입니다.


지난 번 Ionic 소개 포스트에 이어서 Ionic 개발 환경을 세팅하는 방법에 대해 정리해보겠다.
Ionic의 개발 환경은 node.js를 기반으로 한다. 앱 자체가 node.js 위에 실행 되는 건 아니고, 소스 파일들이 프론트 엔드 개발과 동일한 HTML/CSS/Javascript로 이루어져 있기 때문에 PC에선 이를 실행하기 위한 (경량) 웹서버가 필요하게 된다. 때문에 Ionic은 이런 추가적 요구사항들을 해결하기 위해 제공되는 여러 CLI들이 있고, 해당 CLI들은 node.js 기반에서 돌아가는 구조로 되어 있다.


Ionic 개발 환경을 구성하기 전, 개발하려는 모바일 OS 플랫폼의 개발 환경을 미리 세팅해야한다.
Android 개발 환경 구성하기 <<


Apache Cordova 설치

Apache Cordova는 HTML/CSS/JS를 여러 모바일 플랫폼으로 빌드 할 수 있게끔 도와주는 CLI이다. (앱 빌드/설치, 플랫폼 별 설정, Native API 사용을 위한 플러그인 등 여러가지 기술을 제공한다.) 사실 Cordova만으로도 모바일 앱을 만들 순 있으나, Cordova에는 앱 UI에 구현을 위한 라이브러리는 거의 배제되어 있기 때문에 Ionic이 필요하다.

$ npm install codova -g

Ionic Framework 설치

Cordova가 크로스 플랫폼에 대한 기술적인 부분을 지원한다면, Ionic은 좀 더 편리한 앱 개발 환경 및 UI 구현에 대한 부분을 책임진다고 볼 수 있다. (여러 Provider/Service/Directive 및 CSS 등을 제공한다.)

$ npm install ionic -g

gulp 설치

ionic은 기본적으로 빌드 시스템을 gulp.js를 사용한다. 때문에 기본 빌드 task 이외에 개발자가 직접 커스텀 task를 작성 할 수 있다.

$ npm install gulp -g

ios 개발을 위한 추가 패키지 설치

  • ios-deploy 설치
    ios-deploy는 Xcode 실행 없이 앱을 빌드하여 시뮬레이터 또는 디바이스에 설치 할 수 있게끔 도와주는 패키지이다.
    (그렇다고 해서 Xcode가 필요 없는 것은 아니고, CLI로 프로젝트를 빌드하기 때문에 기본적으로 Xcode 설치를 요구한다.)

    $ npm install ios-deploy -g
    
    // OSX El Capitan(10.11)에서 nvm이나 n과 같은 node version manager를 사용하지 않는 경우
    $ npm install ios-deploy -g --unsafe-perm=true --allow-root
    

샘플 프로젝트

개발 환경이 구성되었으니 이제 샘플 프로젝트를 받아보자. ionic start CLI는 샘플 프로젝트를 받을 수 있는 명령어이다. 아래 명령어를 실행하면 sidemenu 샘플 프로젝트를 다운로드를 받게 된다.

$ ionic start myApp sidemenu

다른 샘플 프로젝트는 링크에서 볼 수 있다.

샘플 프로젝트를 PC에서 실행

샘플 프로젝트를 받았다면 이제 프로젝트 폴더로 이동 한 뒤, serve 기능을 이용하여 앱을 PC에서 실행해보자.

(serve 명령어를 사용하면 Ionic이 node.js로 웹서버를 띄운 뒤, 앱의 www/index.html을 자동으로 로드해준다.)

$ cd myApp
$ ionic serve

샘플 프로젝트를 디바이스 또는 에뮬레이터(시뮬레이터)에서 실행

디바이스 또는 에뮬레이터에 배포하기 전에 우선적으로 해야 할 일이 있는데, 프로젝트에 빌드 할 플랫폼을 추가하는 일이다.
아래 명령어를 통해 개발하고자 하는 플랫폼을 추가 할 수 있다.

$ ionic platform add [ios|android]

플랫폼을 추가했다면 아래 명령어를 입력하여 디바이스(or 에뮬레이터)에서 앱을 확인 할 수 있다.

// 빌드만 할 경우
$ ionic build [ios|android]

// 빌드 된 상태에서 디바이스 또는 에뮬레이터에 배포 할 경우
$ ionic emulate [ios|android]

// 빌드와 실행을 한 번에 할 경우
$ ionic run [ios|android]

ios

Android



다음 포스트에선 Ionic 어플리케이션 개발 방법론에 대해 알아보겠다.

저작자 표시
신고

WRITTEN BY
Profile
음주코딩
:D

받은 트랙백이 없고 , 댓글 하나 달렸습니다.
  1. 비밀댓글입니다
secret