성야넷™

1. 개요

지난 블로그에 이어 ionic 프레임워크 소스를 실제 기기에 빌드하는 법에 대해 알아보도록 하겠습니다.

실 기기에 빌드하여 올리는 것이기 때문에 안드로이드의 경우 Android Studio, ios의 경우 Xcode 가 설치 완료되어 있다는 것을 전제로 합니다.

이전 포스트는 아래 링크를 참조 하여 주세요.

2022.01.27 - [프로그래밍/ionic framework] - ionic framework, 설치 및 프로젝트 생성

2. 모바일 프로젝트 생성

모든 명령어는 cmd 에서 프로젝트 폴더로 이동 후 사용하는 것을 기본으로 합니다.
(필자의 경우 d:/ionic/myApp 폴더까지 이동 후 실행합니다.)

ionic cap add android
ionic cap add ios

명령어는 보시는 대로 직관적입니다.

위 명령어는 안드로이드 기반 모바일 소스를 생성하는 명령어 이고, 아래 명령어는 xcode 기반 소스를 생성하는 명령어 입니다.

각 명령어를 실행하시면, 프로젝트 폴더 내부에 해당 os에 맞는 폴더가 생성 됩니다.

물론 소스코드가 생성이 되기만 한 것일 뿐 해당 소스는 그에 맞는 IDE 를 통해 빌드하여야 합니다.
즉, MacOS 기반 PC가 아닌 경우 ios 소스는 생성만 될 뿐 실행 해 볼 수는 없습니다.

폴더 생성이 완료된 경우, 다음 명령어를 실행합니다.

ionic cap sync

위 명령어는 vue.js 로 작성 된 소스코드를 mobile 소스로 build 하여 주는 명령어 입니다.

ionic 으로 작성 된 vue.js 소스는 실제 모바일 기기에 업로드 시 소스코드 단축이 되기 때문에 모바일 IDE 에서 소스코드를 수정 할 수는 없습니다.

따라서 vue.js 소스 변경이 생길 때 마다 항상 위 명령어를 수행 후, 모바일 IDE 에서 build 하여 기기로 업로드 하셔야 합니다.

위 작업이 완료되면 이제 모바일 IDE 를 실행하도록 명령어를 입력 해 줍니다.

ionic cap open android
ionic cap open ios

각 명령어는 Android Studio / Xcode 를 실행해 주는 명령어 입니다.

해당 명령어로 실행 시 IDE 가 실행되며 각 프로젝트 폴더가 자동으로 open 되기 때문에 편리합니다.
(최초 실행 시 프로젝트 링크 및 gradle build 등에 시간이 걸립니다.)

IDE 실행 후 프로젝트 폴더가 자동으로 open 됩니다.

app 폴더를 제외한 나머지 폴더들은 vue.js <--> 모바일 기기 간 cross-platform 을 지원하기 위한 cordova 소스들입니다.

이후부터는 IDE 의 소스코딩 방법 및 빌드 방법에 따르므로 따로 기술하지는 않습니다.

3. 실행

다음 시간에는 모바일 기기의 카메라를 활용하여 QR코드를 스캔하여 인식하는 앱을 만들어 보도록 하겠습니다.

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 를 사용한다고 지정하였습니다.

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

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

4. 프로젝트 실행

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

ionic serve

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

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

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

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

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

5. 스마트폰에서 구동

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

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