[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 설정에 관해 소개하겠습니다.