Ionic 4 설치 및 환경 구성

Published in

상훈 Devlog

7 min readAug 13, 2019

아이오닉는 HTML, CSS , JS 등 웹 기반 기술로 모바일 앱, 데스크톱 앱 등 다양한 플랫폼 서비스를 개발할 수 있는 오픈소스 프레임워크이다.

올해 1월, 4 버전이 릴리즈 되었다. 페이지 로드의 중요한 성능 지표인 First Meaningful Paint 속도가 빨라지고 CSS의 커스터마이징 제작이 가능해졌다. 도큐먼트 또한 개정되어 최신의 정보를 확인할 수 있다.

또한 Angular에만 국한되었던 것이 Vue, React에도 적용이 되고 있으며 현재 Angular와는 완벽히 통합된 형태로 사용이 가능하고 Vue, React는 배타 버전으로 지원이 되고 있다. 곧 정식 지원이 될 것이라고 한다. Angular의 경우 현재 최신 버전인 8 버전도 지원되고 있다. Angular에 익숙한 프론트엔드 개발자에게는 모바일 앱 개발에 있어 생명주기나 개발 방법론 등이 동일하거나 비슷하여 큰 어려움 없이 앱 개발을 할 수 있다.

지원

앞서 언급한대로 아이오닉은 웹 기반으로 구현되기 때문에 iOS, 안드로이드, 브라우저, Electron, PWA 등 웹이 실행되는 모든 플랫폼을 타겟으로 개발할 수 있다. 각 플랫폼의 지원되는 버전은 다음과 같다.

모바일

안드로이드 4.4 이상
IOS 10 이상
참고로 최신 버전과 사용자 통계는 각각 다음과 같다. (안드로이드, IOS)

브라우저

크롬
사파리
엣지
파이어폭스
인터넷 익스플로러(11 이상)

버전

앞으로 관련 글에서 설치 및 개발되는 서드파티들의 버전은 다음과 같다.

MacOS: 10.14.6
Node: 10.16.2
NPM: 6.9.0
Angular CLI: 8.2.0
Ionic CLI: 5.2.3
RxJS: 6.4.0
Typescript: 3.4.3
Gradle: 5.5.1
JDK: 12.0.2(open-jdk)
Android SDK: 8.0

설치

아이오닉 CLI

아이오닉은 CLI 도구를 제공하고 있다. 아이오닉 CLI는 컴포넌트 생성, 프로젝트를 빌드, 개발 서버 실행과 같이 프론트엔드 개발 전반의 작업을 명령어로 쉽게 작업 할 수 있으며 아이오닉의 CI/CD 서비스인 Appflow와도 연결해주는 도구이다. Angular를 사용해본 개발자라면 Angular CLI와 비슷한 역할이라고 생각하면 될 것이다. 앞으로 아이오닉 개발 시에 이 아이오닉 CLI를 사용하게 될 것이다.

기본적으로 node와 npm은 설치되어 있어야 하며, 아이오닉 CLI 설치 방법은 다음과 같다.

npm install -g ionic

탭 메뉴 3개가 있는 스카폴딩된 프로젝트를 생성해보자.

ionic start myApp tabs

생성된 프로젝트에 들어가서 다음 명령어를 통해 앱을 실행할 수 있다.

cd myAppionic serve

모바일 앱을 개발하려면 IOS와 안드로이드의 몇가지 환경 설정이 필요하다.

IOS 설정

Xcode

IOS 개발은 macOS에서만 가능하다. 먼저 Xcode를 설치한다. Xcode는 네이티브 IOS 앱을 개발하는 IDE이다. 여기에는 IOS SDK와 Xcode CLI 도구가 포함되어 있다. Xcode 다운로드는 여기서 한다.

개발 팀 설정

모든 IOS 앱은 개발용이라도 코드 서명이 되어야 한다. 다행히 Xcode는 애플 아이디만 있다면 코드 서명을 자동으로 쉽게 할 수 있다. Xcode를 열고 Xcode → Preferences → Accounts 메뉴로 들어가서 목록에 없는 경우 애플 아이디를 추가한다.

IOS 시뮬레이터 생성

Mac에서 IOS 시뮬레이터를 생성하여 테스트를 할 것이기 때문에 이것 또한 설정해주어야 한다. 이것에 대한 자세한 설명은 여기에서 확인할 수 있다. Xcode를 열고 Window → Devices and Simulators로 들어간다. iPhone X 시뮬레이터가 없는 경우 생성한다.

ios-sim & ios-deploy

ios-sim와 ios-deploy는 개발 중인 앱을 IOS 시뮬레이터나 디바이스에 배포할 수 있도록 하는 유틸리티 라이브러리이다. 다음과 같이 설치한다.

npm install -g ios-sim
npm install -g ios-deploy

안드로이드 설정

Java & Gradle

네이티브 안드로이드 앱은 자바 언어로 컴파일 된다. JDK을 여기서 다운로드하고 설치한다. 혹은 OpenJDK를 사용한다면 여기서 다운로드한다.

Gradle은 안드로이드 앱에 사용되는 빌드 도구이다. 여기서 설치한다.

안드로이드 스튜디오

SDK 설치

안드로이드 스튜디오는 네이티브 안드로이드 앱을 개발할 수 있는 IDE이다. 안드로이드 SDK를 포함하고 있다. 또한 안드로이드 에뮬레이터를 안드로이드 가상 머신(AVD)을 사용하여 생성할 수 도 있다. 여기서 설치한다.

초기에 안드로이드 스튜디오는 안드로이드 SDK를 설치해야하는 것을 감지하고 SDK 구성 요소 설정화면에서 설치한다. 기본적으로 가장 최신의 안정된 버전이 설치되어 있으며 여기에는 해당 버전의 안드로이드를 타켓으로 하는데 필요한 패키지 컬렉션이 포함되어 있다.

환경 설정

안드로이드 SDK는 CLI를 제공한다. 사용하기 전에 환경 변수를 설정해야 한다. 먼저 ~/.bashrc 혹은 ~/.bash_profile에 ANDROID_SDK_ROOT를 SDK를 설치한 경로로 환경 변수로 설정한다.

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk

그 후 몇가지 안드로이드 관련 실행 경로를 설정한다.

# avdmanager, sdkmanager
export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin# adb, logcat
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools#emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator

apksinger 및 zipalign를 사용하는 경우 다음 경로도 설정해야 한다.

export PATH=$PATH:$ANDROID_SDK_ROOT/build-tools

AVD 생성

안드로이드 가상 장치(Android Virtual Device, AVD)는 안드로이드 에뮬레이터가 안드로이드 OS를 실행하기 위한 장치이다. 여기서 자세한 설정방법을 알아본다.

AVD는 AVD Manager를 통해 관리된다. 안드로이드 스튜디오 시작화면에서 Configure → AVD Manager에 들어간다. AVD Manager는 안드로이드 프로젝트 내에서 Tools → AVD Manager에서도 확인 할 수 있다. Create Virtual Device를 클릭하고 적절한 디바이스를 선택한다.

그리고 적절한 시스템 이미지를 선택한다. 현재 기준으로 API 28을 선택한다. 안드로이드 버전에 대한 내용은 여기서 확인한다. AVD가 생성되었으면 안드로이드 에뮬레이터로 AVD를 실행한다.