Ionic 3 시작하기 및 기초 명령어

안녕하세요.

전 편에 이어 오늘은 Ionic 시작하기에 대해 포스팅하도록 하겠습니다.

Ionic 설치 부분은 

MAC OS X에 Ionic 환경 구축 및 세팅하기 를 참조해주세요.

그리고 저는 앞으로 Ionic 포스팅에 대해서는 쭉 Visual Studio Code를 사용할 예정입니다.

MAC OS X에 Visual Studio Code 설치하기 및 터미널, 쉘 명령 설정 을 참조해주세요.

Ionic 시작하기의 첫 설명은 프로젝트 생성입니다.

우선 프로젝트를 관리할 적당한 폴더를 하나 생성해주세요. (저는 Ionic_workspace 로 생성하였습니다.)

그 다음 terminal.app 을 실행 후 생성하신 폴더의 경로로 접근합니다.

Ionic 프로젝트 생성 명령어는

ionic start 프로젝트명 템플릿

이렇게 이루어집니다.

어떤 얘기인지 잘 모르시는 분들을 위해 상세설명 드리겠습니다.

프로젝트명은 말그대로 생성하실 프로젝트명이라서 마음대로 입력하시면 됩니다.

템플릿 Ionic에서 기본으로 제공해주는 View와 비슷하다고 보시면 되는데요.

템플릿 명을 입력하지 않고 아래와 같이 입력하셔도 무관합니다.

ionic start 프로젝트명

위와 같이 템플릿을 쓰지 않고 프로젝트 생성 명령어를 입력하게 되면 아래 화면과 같이 템플릿을 고를 수 있는 화면이 나옵니다.

저는 포스팅 예제를 위해 test 라는 프로젝트를 생성해보겠습니다.

템플릿을 입력하지 않고 생성하게 되면 위와 같이 선택 가능한 창이 나오며 여러 종류 중 빈 페이지는 blank를 선택해주시면 됩니다.

blank와 tabs, sidemenu 의 프로젝트 초기 생성 시 화면은 아래와 같습니다.

이제 템플릿이 어떤 것인지 이해되셨는지요.

그래서 예를 들어 test라는 이름의 프로젝트를 빈프로젝트로 생성하고 싶다면

ionic start test blank

라고 입력하면 되는 것입니다.

입력을 하게 되면 test라는 폴더를 생성해주고 그 안에 프로젝트 파일들을 모두 생성하는 작업이 완료됩니다.

완료된 후 cd test를 통해  test라는 폴더로 들어가보겠습니다.

Ionic으로 모바일 Application을 제작하시는 분들은 대부분 Android와 IOS 두 가지 플랫폼의 동시 호환에 목적을 두고 계실거라 생각합니다.

그럼 생성한 프로젝트 폴더내부로 경로를 옮긴 후 Platform 추가하는 방법을 알아보겠습니다.

프로젝트에서 Platform 추가하는 방법입니다.

ionic cordova platform add android

ionic cordova platform add ios

위와 같이 각각 하나씩 platform을 추가해주시면 되겠습니다.

플랫폼을 추가하신 후 저 같은 경우는 Visual Studio Code를 사용하기에 터미널에서 그대로 code . 를 입력하면 코딩을 진행할 수 있습니다.

IDE는 각자의 취향에 따라 사용하시면 될 것 같습니다.

그 다음은 빌드하는 방법입니다.

ionic cordova build android

ionic cordova build ios

위와 같이 각각 하나씩 빌드를 해주시면 됩니다.

그 다음 웹페이지에서 화면을 확인하고 싶다면

ionic serve

위와 같은 명령어를 입력하시면 현재 기본으로 설정되어 있는 브라우저를 통해 제작한 Ionic App의 페이지가 나오게 됩니다.

ionic serve --lab

위와 같이 입력을 하시면 ionic의 livereload 기능이 들어가서 소스를 편집하고 저장 시에 웹페이지도 자동으로 새로고침되며 최신 빌드로 아래와 같이 브라우저에서

보여집니다.

다음 포스팅에서는 새로운 페이지를 생성하는 방법과 Plugin을 추가하는 방법 등등에 대해 다루어보도록 하겠습니다.

감사합니다.