[#ionic] 프로젝트 설치, 생성 및 실행 방법

 

 

 

1. ionic 소개

ionic을 사용하면 Angular + Typescript로 웹, Android, iOS 하이브리드 앱을 모두 만들 수 있다.

(참고로 내부적으로는 Apache Cordova 를 사용하고 있다.)

 

하나의 코드로 여러 플랫폼의 앱을 동시에 출시할 수 있어 비용 절감을 엄청나게 할 수 있으니 네이티브 기능이 필요하지 않은 대부분의 마이크로 서비스에서는 이를 적극적으로 활용하는 것이 유리하다.

 

자세한 소개는 https://ionicframework.com/docs/intro 에서 확인할 수 있다.

What is Ionic Framework? - Ionic Documentation

 

2. 환경 세팅

프로젝트 생성 전, 우선 환경 세팅이 필요하다.

 

2-1) npm 명령어를 사용해야하므로 아래 링크에서 node를 설치해주자.

https://nodejs.org/en/

Node.js

혹은 mac 이면 brew -y install node

centos 이면 yum install -y node

와 같이 패키지 매니저를 사용해 편하게 설치해도 무방하다.

 

2-2) ionic 설치

npm install -g @ionic/cli

 

3. 프로젝트 생성

ionic 명령어를 통해 손쉽게 스켈레톤 코드를 생성할 수 있다.

아래는 빈화면을 만들려고 blank 사용했는데, 이외에 tabs, sidemenu 템플릿도 사용 가능하다.

(app 대신에 원하는 이름을 넣어서 생성해도 무방하다.)

ionic start app blank

 

4. 프로젝트 실행

3. 프로젝트 생성이 완료되면 app 폴더가 생성된다. app 디렉토리로 들어가 ionic serve를 입력하면 localhost:4200 으로 로컬 서버가 실행된다. 만약 포트를 바꾸고 싶다면 ionic serve -p <원하는 포트> 를 입력해주면 된다.

cd app

ionic serve