ionic framework, 설치 및 프로젝트 생성

1. 개요

아이오닉 프레임워크(ionic framework) 는 android, ios 에서 동작하는 앱을 생성하게 도와주는 하이브리드 앱 개발 프레임워크 입니다.

Angular, React, Vue 프레임워크를 사용하여 앱 View 를 구성하는 것을 기본으로 스마트폰 디바이스의 API 를 사용하기 위해 ionic 에서 자체 개발한 capacitor 라는 cross-platform 지원 도구로 이루어져 있습니다.

아이오닉 프레임워크에 대해 더 자세히 알고 싶으신 분은 프레임워크 홈페이지(https://ionicframework.com/) 를 참고 하시면 됩니다.

본 블로그는 ionic framework 의 현재(2022.01.27) 가장 최신 버전인 ionic 6 에 기반합니다.

 

2. 설치

ionic 을 사용하기 위해서는 우선 npm 이 설치되어 있어야 합니다. (하여 본 블로그는 npm 이 설치되어 있는 것을 전제로 작성되었습니다.)

우선, 아이오닉 프로젝트 생성을 위한 도구를 설치합니다.

npm install -g @ionic/cli@latest native-run cordova-res

설치가 다 끝날 때까지 기다리시면 됩니다.

매우 쉽죠?

 

 

3. 프로젝트 생성

ionic framework 를 사용하기 위한 기반 설치가 완료 되었으니, 이제 프로젝트를 생성해 보도록 합니다.
윈도우의 경우, cmd 창을 열고 본인이 프로젝트를 생성하기 원하는 폴더로 이동 합니다. (저는 d:\ionic 이라는 폴더 안에 프로젝트를 생성해 보겠습니다.)

프로젝트 생성 명령어는 다음과 같습니다.

ionic start [앱 명칭] [프로젝트 탬플릿] [option]

각 항목 간에는 공백(스페이스)으로 구분되며 프로젝트 탬플릿은 2가지(탬플릿 명령어는 3가지가 있으나 하나는 있으나 마나 하므로..)가 있습니다.

 

[프로젝트 탬플릿]

• tabs : 탭 기반 레이아웃
• sidemenu : 사이드 메뉴 기반 레이아웃
• blank : 한 페이지의 빈 프로젝트

옵션은 js탬플릿 선택과 native 선택으로 구성되어 있습니다.

[JS 탬플릿 선택]

• --type 값이 없으면 기본 angular.js 로 시작 됨
• --type vue : vue.js 기반
• --type react : react.js 기반

[Native 선택]

• --cordova : cordova Native API (vue 기반에서는 실행 안됨)
• --capacitor : ionic 에서 만든 Native API

위 명령어 구문을 사용하여 프로젝트를 생성 하도록 합니다.

ionic start myApp tabs --type vue --capacitor

제가 사용한 명령어는 myApp 이라는 프로젝트를 탭 기반 레이아웃(tabs)로 하여, View 를 구성하기 위해 vue.js 탬플릿을 사용하며, cross-platform 으로는 capacitor 를 사용한다고 지정하였습니다.

 

프로젝트 생성에는 제법 오랜 시간이 걸립니다.

명령어 입력 시 npm 을 통해 필수 패키지 들이 프로젝트 폴더에 자동 설치 됩니다.

 

설치 마지막 과정입니다. 엔터 입력하시면 됩니다.

 

설치가 완료 되었습니다.

자, 드디어 프로젝트 생성이 완료되었습니다.

 

4. 프로젝트 실행

프로젝트를 기동하기 위해서는 다음의 명령어를 사용합니다.

ionic serve

해당 명령어를 사용하기 위해서는 cmd 창에서 생성 된 프로젝트 폴더 안으로 들어가야 합니다.
필자의 경우 d:\ionic\myApp 폴더로 이동하여 명령어를 실행하도록 합니다.

기동 명령어 입력 후 위와 같은 화면이 나올 때까지 기다려 주세요.

cmd 창에 나와있는 주소로 접속하였을 때 나오는 화면

제대로 기동이 완료 된 경우 위 이미지와 같은 화면을 볼 수 있습니다.

필자는 tabs 기반 레이아웃을 사용하였기 때문에 하단에 Tab Navigation 이 포함 된 프로젝트가 생성되었습니다.

 

소스코드는 모두 src 폴더 안에 있습니다.

 

화면을 구성하는 소스들은 src/views 안에 있으며, 탭 기반 레이아웃 이기 때문에 하단 탭 네비게이션을 구성하는 TabPage.vue 파일과 각 탭의 페이지를 담당하는 Tab1Page.vue 등으로 구성되어 있습니다.

 

5. 스마트폰에서 구동

지금까지의 과정은 ionic 프로젝트를 생성하기만 한 것일 뿐, 실제 이것만 가지고는 스마트폰에 build 할 수 없습니다.

다음 시간에는 해당 프로젝트를 android / ios 용으로 빌드하여 실제 기기에서 실행하는 법을 알아보도록 하겠습니다.