IONIC
ionic은 오픈소스 하이브리드 모바일 앱 프레임워크(Framework)중의 하나입니다.
ionic은 Cordova를 기반으로 만들어져 있기 때문에 모바일 웹앱을 물론 네이티브 앱도 손쉽게 만들 수 있습니다. Javascript 및 Angular를 지원하기 때문에 기존에 웹 프로그래밍을 해본 사람이라면 기존에 하던 방식대로 모바일 앱을 개발할 수 있다는 장점이 있습니다.
Cordova를 통해 각 Platform에 맞게 자동으로 빌드가 되기 때문에 한번의 개발로 Android, ios, Window 에서 동작하는 앱을 개발할 수 있다는 점도 큰 장점입니다.
ionic 공식 홈페이지인 http://ionicframework.com/ 에서 최신 빌드 정보와 Framework에서 사용되는 Component들과 API들의 정보들이 제공됩니다.
현재 ionic은 v1과 v2이 제공되고 있습니다. v2버전부터 Angular2 및 Typescript를 지원하여 Performance를 향상시켰습니다.
ionic으로 앱을 개발하기 위해서는 Javascript와 Angular에 대한 사전 지식이 필요합니다. 특히 v2의 경우에는 Angular2 및 Typescript에 대한 지식이 필요한데, Typescript 자체가 Javascript의 생산성을 높이기 위해 만들어진 스크립트 언어다 보니 Javascript에 대한 이해가 선행적으로 필요하기 때문에(실제로 Typescript로 개발된 코드는 컴파일하면 Javascript 코드가 됩니다.) Javascript나 Angular에 아직 입문하기 전이라면 런닝커브가 꽤 있는 편입니다.
Javascript와 Angular에 대한 강좌는 나중에 포스팅 하도록 하겠습니다.
그럼 이제부터 Ionic을 이용해서 앱을 만드는 방법을 살펴보겠습니다.
ionic 설치
ionic을 설치하기 위해서는 우선 NodeJS와 NPM이 설치되어 있어야 합니다.
NodeJS와 NPM이 설치된 상태에서 명령 프롬프트에서 아래와 같이 명령어를 입력하면 ionic framework가 설치됩니다.
npm install -g cordova ionic
설치가 끝나고 나면 아래와 같이 명령어를 입력하면 기본 템플릿으로 ionic 프로젝트를 생성할 수 있습니다.
ionic start myApp tabs
빈 화면으로 시작하려면 뒤에 tabs 대신 blank를 입력하면 됩니다.
ionic start myApp blank
또한 사이드메뉴를 기본 템플릿으로 시작하려면 sidemenu 라고 입력하면 됩니다.
ionic start myApp sidemenu
ionic v2로 생성하려면 다음과 같이 --v2 를 추가하시면 됩니다.
ionic start myApp tabs --v2
기본 템플릿 생성이 끝나면 다음과 같이 브라우저 상에서 실행해볼 수 있습니다.
cd myapp
ionic serve