Hybrid Web을 개발하기 위해 ionic을 선택했다면 몇가지 환경을 세팅해야 합니다.
Hybrid Web 개발을 위한 ionic 개발환경세팅
Hybrid Web을 개발하기 위해 ionic을 선택했다면 몇가지 환경을 세팅해야 합니다.
먼저 안드로이드로 랩핑하기 위해 JAVA SDK와 Android SDK를 먼저 설치해야 하고 핵심이 되는 Ionic을 개발하기위해 Node.js, bower.io, git을 설치해야 합니다.
Node.js, bower.io, git의 설치방법은 그다지 어렵지 않으므로 이번에는 생략을 하고 JAVA SDK와 Android SDK 그리고 간단한 개발용 DB인 json-server 그리고 Ionic과 Cordova를 설치하는 것으로 마치려고 합니다.
JAVA SDK 설치완 환경설정
java프로그램을 개발하기 위해서는 꼭 java sdk가 설치되어 있어야 합니다. Android도 JAVA로 개발되어 있기 때문에 JAVA SDK를 설치해야 합니다.
설치
- JAVA JDK 다운로드사이트에서 최신버전의 Java Platform JDK를 다운로드 합니다.
- 다운로드된 파일을 더블클릭하여 설치를 합니다.
- 설치경로는 특별한 이유가 없으면 기본위치로 설치하면 됩니다.
환경변수 설정
쉬우면서도 까다로은 부분이 환경변수를 설정하는 부분입니다. 원리를 이해하시면 어렵지 않게 설정할 수 있습니다.
환경변수를 설정하는 이유는 어느 위치(디렉토리)에서나 해당 명령어를 실행시키면 실행될 수 있게 하기 위해서 설정을 하는것 입니다. 예를 들어 JAVA SDK의 명령어를 어느 위치에서나 호출 하여도 실행 될 수 있게 됩니다.
그럼 환경변수 설정을 WIN7을 기준으로 설명을 하겠습니다.
- 제어판\모든 제어판 항목\시스템 > 고급 시스템 설정 클릭
- 시스템속성 팝업창 > 환경변수 클릭
시스템 변수 > 새로 만들기 클릭 후 아래 정보 생성
중요한점은 마지막 부분에 ; 은 빼야 합니다.변수 이름 : JAVA_HOME 변수 값 : jdk설치 경로 ( 예: C:\Program Files\Java\jdk1.8.0_91 )시스템 변수 증 Path 변수에 대해 편집 클릭
- 변수값의 가장 뒷부분에 아래의 내용 추가
;%JAVA_HOME%\bin; - 설정완료
- 정상설치 확인
CMD창을 새로 열어서 java와 javac에 대한 버전을 확인
열려있던 CMD창에서는 확인이 되지 않으니 반드시 새로 CMD창을 열어야 합니다.
C:> java -version
C:> javac -version
에러없이 정상적으로 버전이 표시되면 설치가 성공된 것입니다.
Android SDK 설치와 환경설정
Android 프로그램을 개발하기 위해서는 JAVA SDK와 꼭 Android SDK가 설치되어 있어야 합니다.
Android 스튜디오와 Android SDK CLI용 버전이 있는데 Ionic으로 개발 할 경우는 Android SDK CLI용을 사용해도 됩니다.
설치
- Android SDK 다운로드사이트의 가장 하단 부분에 있는 command line tools JDK를 다운로드 합니다.
- 다운로드된 압축파일을 프로젝트 폴더위치나 기억하기 좋은 위치에 압축헤제 합니다.
- 압축해제만으로 설치가 완료됩니다.
환경변수 설정
JAVA SDK와 흡사하게 설정을 하면 됩니다.
- 제어판\모든 제어판 항목\시스템 > 고급 시스템 설정 클릭
- 시스템속성 팝업창 > 환경변수 클릭
- 시스템 변수 > 새로 만들기 클릭 후 아래 정보 생성
변수 이름 : ANDROID_HOME 변수 값 : Android SDK설치 경로 ( 예: D:\Front-end\android-sdk-windows ) - 시스템 변수 증 Path 변수에 대해 편집 클릭
- 변수값의 가장 뒷부분에 아래의 내용 추가
;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools; - 설정완료
Android SDK Packages 추가
설정이 되었으면 해당 프로젝트에 사용할 패키지들을 설치해야 합니다.
Android SDK를 압축해제한 폴더에 보면 SDK Manager.exe 파일이 있고 해당 파일을 실행시키면 Manager창이 로딩되고 원하는 패키지를 선택하여 설치하면 됩니다.
- SDK Manager.exe 실행
- 기본적으로 아래의 패키지 선택하여 설치 (각각 용량이 크므로 필요한 패키지만 설치하는것을 추천합니다.)
- Android SDK Build Tools
- Android SDK Platform-tools
- Android SDK Tools
- Android Support Repository
- Google Repository
- Android SDK Platform (23)
- Intel or ARM System Images 1.
Emulator 구성
SDK 패키지가 설치되었으면 Emulator를 구성해야 합니다.
Android SDK를 압축해제한 폴더에 보면 AVD Manager.exe 파일이 있고 해당 파일을 실행시키면 Manager창이 로딩되고 원하는 Emulator를 선택하여 구성할 수 있습니다.
- AVD Manager.exe 실행
- 탭 중 Devices Definitions 탭을 선택
- 원하는 디바이스를 선택 후 Create AVD…*를 선택합니다. (예:Nexus S 선택 )
- 타켓을 선택합니다. (예: Android 6.0 - API Level 23)
- CPU/ABI를 선택합니다. (예: Intel Atom (x86))
- 나머지는 기본값으로 나두고 OK 를 선택하시면 됩니다.
- Android Virtual Devices 탭을 선택해 보면 지금 추가한 디바이스가 보이면 성공입니다.
이후는 Ionic의 CMD창에서 사용이 가능 합니다.
간단한 json-server 설치
IONIC을 개발하기 위해서 완벽하진 않지만 간단하게 json 데이터를 불러오고 저장할 필요가 있습니다.
처움부터 거창한 DB을 사용하여 개발을 할 수도 있으나 간단하게 json-server를 이용할 수도 있습니다.
설치
설치는 nodejs의 npm을 이용해서 설치하는 것이라 명령어 한줄로 간단히 설치할 수 있습니다.
$ npm install -g json-server
실행
설치가 되었으면 그다음은 서비스할 json파일이 있어야 합니다.
여기서는 db.json 라는 파일로 하나 만들었습니다.
json-server --watch db.json
Ionoc 설치
Ionic을 개발하기 위해서 Ionic과 Cordova를 설치해야 하는데 그것도 nodejs의 npm을 통해 한줄의 명령어로 설치가 가능합니다.
Ionic과 cordova 설치
npm install cordova ionic -g
Ionic 프로젝트 생성
Ionic을 설치했으면 그다음으로 기본 프로젝트의 스케폴딩을 생성할 수 있습니다.
현재 Ionic에서는 blank, tabs, sidemenu 3개의 스케폴딩을 제공하고 있습니다.
그중에 sidemenu 를 활용하는 명령어는 아래와 같습니다.
ionic start conFusion sidemenu
Ionic 프로젝트 개발 시작
개발을 위해 ionic을 웹서버에 태워서 브라우저에서 보면서 개발을 할 수 있게 해 줍니다.
ionic serve --lab
Android Emulator build and Deploy 구성추가
안드로이드로 포팅할 수 있는 플랫폼을 추가할 수 있습니다.
ionic platform add android
Android platform으로 build실행
안드로이드용 apk 파일이 만들어 집니다.
ionic build android
Android emulator로 보기
에뮬레이터를 통해 개발한 결과물을 볼 수 있습니다.
ionic emulate android
Android emulator로 보기
ionic run android
이상으로 Ionic을 개발하기 위한 기초 환경세팅 및 Ionic의 가장 간단한 명령어 몇개를 정리해 봤습니다.
