ionic 5 기반 하이브리드 앱 프로젝트 생성

 

1.ionic 설치 

 - pc에 node를 설치합니다. (다운로드 URL :  https://nodejs.org/ko/download/)

다운로드 | Node.js

- node 설치 후 터미널을 열고 npm install -g ionic cordova 를 입력합니다.

ionic과 cordova가 다운로드 완료되면 아래와 같이 설치가 잘 되었는지 확인합니다. (버전 정보 확인 : ionic -v, cordova -v) 

 

 

 

 

2. Project 설치 

- ionic 설치가 완료되면 프로젝트를 생성합니다. 프로젝트 유형은 blank, tabs, sidemenu 등 세가지로 구분해서 만들 수 있습니다. 

- 탭 메뉴 기반의 프로젝트를 생성하기 위해 프로젝트를 만들고자 하는 폴더 경로로 이동하여 아래와 같이 입력합니다. 

 >> ionic start [프로젝트명] tabs

 

 

- Framework 를 선택하라는 화면이 나오게되는데 저는 Angular 기반으로 개발 할 예정이기 때문에 Angular를 선택하고 엔터를 눌러 프로젝트 생성을 계속해 줍니다. 

 

 

- 프로젝트 생성이 완료되어서 InteliJ에서 해당 프로젝트를 열어 보았습니다. ionic framework에서 개발에 필요한 파일들을 자동으로 생성하여 Angular 기반 프로젝트 구조를 만들어 준 것을 알 수 있습니다. 

- 이제 초기 프로젝트가 잘 만들어 졌는지 확인합니다 . 해당 프로젝트 경로에서 터미널을 열어 아래 명령어를 입력하고 실행합니다. 

>> ionic serve 

- Chrome 을 키고 http://localhost:8100 으로 접속하면 ionic 프로젝트의 실행 화면을 볼 수 있습니다. 

- 개발자 모드를 키고 나서 모바일 화면으로 보면 프로젝트가 잘 실행 되는것을 알 수 있습니다. 

 

 

 

- 빌드 및 스마트폰에서 직접 실행해보는 과정은 다음에 올리도록 하겠습니다 😂

- ionic 공식 문서는 아래를 참고해 주세요. 

https://ionicframework.com/

Ionic - Cross-Platform Mobile App Development