Ionic (아이오닉) 설치

이번에 아이오닉을 이용하여 하이브리드 앱을 제작해야하는 프로젝트가 있어서 아이오닉을 사용하게 되었습니다.

전반적인 개발스타일은 UI는 웹에 가깝고 동작은 pop, modal, viewdidload 등 전부는 아니지만 겉으로는 IOS 스타일에 가까운 느낌이었습니다..

아이오닉 설치는 윈도우와 / mac os 에서 다 진행하였고 설명에 포함되는 이미지는 윈도우를 기준으로 진행하였습니다.

1. Node.js 설치

https://nodejs.org/ko/download/ 에서 os에 맞게 다운받아 설치를 진행합니다. 설치는 매운 단순하게 진행되어 별도의 설명은 생략.. (항상 LTS를 권장합니다.)

2. 터미널 실행

이제부터 전반적인 진행은 터미널에서 진행합니다.

mac os 에서는 바로 termianl 로 진입하고,

윈도우에서는 화면에서 shift + 마우스 오른쪽 -> powershell 로 진입합니다.

3.코르도바, 폰갭 설치

우선 아이오닉을 설치하기 위해서는 cordova라는 모바일개발을 위한 프레임워크가 필요합니다. cordova는 안드로이드와 IOS의 네이티브 앱 개발을 위한 각각의 언어와 상관없이 하나의 개발로 두가지 플랫폼에서 빌드를 할 수 있습니다. 

그리고 아이오닉은 cordova를 기반으로 html, css, javascript 등을 이용하 앱을 제작할 수 있게 해주는 프레임 워크입니다.

아래 명령어로 코르도바와 폰갭을 설치해줍니다.

 npm install -g cordova phonegap

  으로 우선 명령어를 간단히 설명하면

'npm' 은 노드 패키지 매니저로 노드 패키지에서 설치를 진행하기 위한 기본 명령어이고

'install'은 설치를

'-g' 는 global로써 디렉토리에 상관없이 전역 설치를 의미합니다.

'cordova'와 'phonegap'을 설치합니다.

4.  코르도바(cordova), 폰갭(phonegap) 설치 확인

설치를 했으면 아래 명령어로 설치되었는지 확인할 수 있습니다.

 cordova -v

 phonegap -v

5. 아이오닉 설치

아이오닉 역시 위와 같이 설치를 진행합니다.

 npm install -g ionic

6. 아이오닉 설치 확인

그리고 아이오닉도 설치가 끝났으면 확인을 해봅니다.

 ionic -v

그리고 이렇게 매우 간단하게 아이오닉 설치를 끝낼 수 있게 됩니다.

아이오닉을 이용한 앱 제작은 다음 포스팅에서 이어서 진행하겠습니다.