본문 바로가기

Ionic 3

[1] Ionic 3 프로젝트 생성 및 실행



Ionic 3 & Firebase 를 이용하여 기본적인 기능을 구현한 앱을 만드는 과정의 첫번째 과정으로 Ionic 프로젝트 생성과 실행 방법을 포스팅하였습니다. 또한 이어질 Ionic & Firebase포스팅 목록은 2017년 8월 기준의 버전으로 작성된 글입니다. 작년에 다른 계정에 작성해 두었던 글을 옮겨 왔습니다. 이점 참고해 주시면 감사하겠습니다.



Ionic 설치하기

NPM을 이용하여 Ionic CLI와 Cordova를 설치하기 때문에 우선적으로 NodeJs가 설치되어 있어야 합니다. NodeJs 를 설치하면 NPM 또한 자동으로 설치됩니다.

NodeJs 설치: https://nodejs.org/ko/

이후 터미널에서 NPM 으로 Cordova와 Ionic CLI를 설치합니다. ionic은 내부적으로 Cordova를 사용하는데 Cordova는 html, javascript. css로 화면을 개발하고 모바일 디바이스의 자원을 사용할 수 있도록 하는 크로스 개발을 위한 framework입니다.

$ sudo npm install -g cordova ionic

 Ionic CLI는 Ionic이 아닌 Ionic Command Line Interface로 Ionic 을 생성하고 실행, 테스트, 디버깅, 빌드 등 앱을 보다 쉽게 관리 할 수 있도록 도와주는 명령어 입니다. 이 CLI를 통해서 Ionic을 설치할 수 있게 됩니다.


Ionic 프로젝트 생성

다음 명령어를 통해서 Ionic 프로젝트를 생성 할 수 있습니다. 아래의 명령어는 ionic-firebase-base라는 이름을 가진 기본 바탕이 sidemenu형태인 Ionic 프로젝트를 생성합니다.

$ ionic start ionic-firebase-base sidemenu

 기본적으로 blank, tabs, sidemenu의 Template를 지원하며 프로젝트 생성 명령어 형태는 다음과 같습니다.

ionic start [project name] [template option]

 

NPM 통해 Ionic 프로젝트를 진행하기위한 Package들을 다운받고 있는 모습입니다.



Ionic 서버 실행

아래의 명령어를 통해 로컬 서버를 구동 시킬수 있습니다.


$ ionic serve

ionic serve 명령어에 --lab 옵션을 추가하면 여러 플랫폼에서의 실행화면을 동시에 확인할 수 있습니다.


localhost 8100번 포트로 접속하게 되면 아래와 같이 브라우저에서 실행화면을 확인 할 수 있습니다. Toggle Menu 버튼을 누르면 프로젝트 생성시에 옵션으로 추가 해주었던 Side Menu가 열리는 것을 확인 할 수 있습니다.



$ ionic serve  실행



$ ionic serve --lab 실행





Ionic 설치와 프로젝트 생성 및 실행까지 알아 보았습니다. 다음 포스팅에서는 Ionic과 firebase연동과 firebase 설정에 관해 소개하겠습니다.