[Ionic] 공식 문서 파헤치기 (개발 단계)

시작하기

환경 설정

- Visual Studio Code IDE 설치

- Git 설치

- Node.js & Npm 설치

- Ionic CLI 설치

npm install -g @ionic/cli

 

Ionic CLI

- 신규 프로젝트 생성을 통한 프로젝트 실행

- Git 프로젝트로부터, 프로젝트 실행

 

패키지 및 CDN

- Ionic은 SPA 3종을 모두 지원하고, 웹 독립적인 CDN 패키지도 제공한다. Ionicons cdn 패키지도 있다.

- SPA 프레임워크에 맞게 패키지 설치 가능

npm install @ionic/angular@latest --save

 

Ionic VS Code Extension

- Ionic 검색 후, 마켓에서 다운로드하면, Capacitor 기반의 ionic 프로젝트 관리에 도움을 준다.

- 앱 실행(웹, 안드로이드 IOS), 새 프로젝트 생성, 디버깅, 마이그레이션 등을 제공한다.

 

개발 중

시작

- ionic start 로 프로젝트 신규 생성

 

미리보기

- ionic serve 명령어를 통해, 브라우저에서 테스트/디버깅

 

발판

- 대부분 app 폴더에서 개발이 진행됨

- ionic generate [page/component/...] "이름" 명령어로 특정 유형의 요소를 생성할 수 있음

 

IOS 개발

- https://capacitorjs.com/docs/ios

- cordova의 대체제인 capacitor를 통해 ios 앱을 개발하고 테스트 가능함

 

Android 개발

- https://capacitorjs.com/docs/android

 

하드웨어 뒤로 버튼

- @capacitor/app 패키지가 설치된 경우에만, 하드웨어 뒤로가기 키를 클릭했을 때 정상적으로 뒤로가기 효과가 동작한다.

- 샘플 코드(https://ionicframework.com/docs/developing/hardware-back-button#exiting-the-app)

 

키보드

- ion-input 컴포넌트에서 제공하는 enterkeyhint속성은 사용하면 개발자는 "Enter" 키에 표시되어야 하는 작업 레이블이나 아이콘 유형을 지정할 수 있음

 

구성(전역 설정)

- IonicModue.forRoot(옵션) 을 통해, 전역적으로 mode를 지원하거나 설정을 진행시킬 수 있음

 

Focus 관리

- ionViewDidEnter() 수명 주기 내에서, Input, Searchbar, Textarea에서 제공하는 setFocus() 명령어로 focus를 시킬 수 있음

- autofocus 속성은 페이지가 로드될 때 개발자가 요소에 포커스를 설정할 수 있도록 하는 표준 HTML 속성이기 때문에, 앱에서는 동작하기 어렵다.

 

레이아웃

구조

- 기본 Header, Footer, Contents 컴포넌트 제공

- 탭 레이아웃 제공

- 메뉴 레이아웃 제공

- Split 뷰 제공

Ion Grid

- Flexbox 시스템 기반의 Grid 컴포넌트 지원

- css 없이 html 상에서 구조를 파악 가능하다.

 

CSS 유틸리티

- 미리 자주 사용되는 css 와 매핑된 class 를 제공하는 utiltity css 파일을 제공함

(Ionic이 단순함을 목표로 하기에, 자주 사용되는 class를 미리 정의하고 제공함)

 

동적 글꼴 크기 조정

- px가 아니라, rem으로 변경하여 기기별 동적으로 글꼴을 조정해주는 기능을 적용할 수 있음

 

테마

... 후아 내용이 많아서 포기...

 

Angular 프로젝트

모바일 프로젝트 추가하기

// 현재 버전의 Web을 build합니다.
$ ionic build
// ios 프로젝트를 생성합니다.
$ ionic cap add ios
// android 프로젝트를 생성합니다.
$ ionic cap add android

프로젝트 루트에 android, ios 폴더가 모두 생성됩니다. 이는 Ionic 앱의 일부로 간주되어야 하는 완전히 독립형 기본 프로젝트입니다(즉, 소스 제어에 체크인하고 기본 도구를 사용하여 편집하는 등).

"create-react-app"과 동일하여, 한번 생성 후 삭제하지 않는다. 추후에는 cap copy & sync만 사용

 

// 웹 디렉토리를 업데이트하는 빌드(ionic build)를 수행할 때마자 www 해당 변경 사항을 기본 프로젝트에 복사해야함
$ ionic build
// 코드의 기본 부분을 업데이트함
$ ionic cap copy
// 새 플러그인 추가 시, 아래 명령어를 통해 활용
$ ionic cap sync

IOS 모바일 앱 빌드하기

// Xcode에서 기본 IOS 프로젝트를 여는 명령어 수행
$ ionic cap open ios
// Info.plist와 같은 파일 수정

권한 추가 필요에 따라, Info.plist를 수정하기(https://capacitorjs.com/docs/ios/configuration)

 

개발팀 설정하기

App 선택 후, Signing & Capabilities 탭에서, 개발팀을 선택해주어야 함

재생 버튼을 클릭해서, 빌드 수행

IOS 앱 이름 바꾸기

(https://capacitorjs.com/docs/ios/configuration)

 

Android 모바일 앱 실행하기

// Xcode에서 기본 Android 프로젝트를 여는 명령어 수행
$ ionic cap open android
// AndroidManifest.xml 에서 권한 추가
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

 

Live Reload 개발

// 같은 네트워크 상, USB 연결 상태에서
$ ionic cap run ios -l --external

$ ionic cap run android -l --external

 

개발 팁

- ionic-cli를 설치하려고 하면, 권한 오류가 발생하므로 sudo로 설치하기 쉬운데, 이렇게 하게되면 npm할 때마다 이슈가 발생할 가능성이 크므로, nvm을 통한 npm 권한 문제 해결을 권장하고 있다.

https://ionicframework.com/docs/developing/tips#resolving-permission-errors

- debugger; 예약어를 통해, 디버깅 및 코드를 단계별로 실행하고 변수를 검사할 수 있다.

- Ionic CLI는 추후 Appflow(Code Push 기능) 서비스에 연결하는 도구이기도 하다.

- Appflow란? Code Push 기능(라이브 코드 업데이트)을 제공하는 프로덕션 앱용 상용 서비스

Ionic 계정(Ionic 계정)이 필요하며, 무료 취미 플랜이 함께 제공됨