[ Ionic ] 웹개발자가 만드는 Ionic 어플 - 1탄 (설치, 오픈 소스 활용)

2020/01/31 - [Mobile] - [ Ionic ] 웹개발자가 만드는 Ionic 어플 - 2탄 (기초 구성 및 구현)

2020/04/04 - [Mobile] - [ Ionic ] 웹개발자가 만드는 Ionic 어플 - 3탄 (배포)

2020/04/14 - [Mobile] - [ Ionic ] 웹개발자가 만드는 Ionic 어플 - 4탄 (배포 후 문제점)

 

 Ionic은 angular 혹은 react 기반의 소스를 통해서 안드로이드, IOS 2가지 플랫폼에 동시에 배포 가능한 어플을 만들어 주는 framework이다 아무래도 웹기반의 프레임워크이다 보니 웹개발자에게 좀 더 친숙하게 모바일 어플 개발을 해줄 수 있는 좋은 툴이다. 그러나 안드로이드, 코틀린, 오브젝트C 등의 언어와는 달리 디바이스 자원의 효율성이 떨어진다는 평도 있어서 목표로 하는 프로젝트에 맞춰서 잘 맞춰 써야할 듯 하다.

 이번 게시글에서는 설치와 오픈 소스 활용하는 방법을 작성할 것이다. 오픈 소스를 잘만 활용하면 개발단계를 축소시키고 요즘엔 잘 만들어진 오픈 소스 프로젝트들이 많아서 활용하는 방법을 적어보았다.

 

개발환경 

Ubuntu 18.04 

 

 

 

 

 

1. Install Ionic

 - ionic을 구동하기 위해선 기본적으로 nodejs, npm 이 설치되어 있어야한다. 따로 설치 방법은 적지 않고 설치 url 경로를 적어두겠다. 개발 환경에 맞춰서 설치해주자 ( https://nodejs.org/ko/download/ )   

 - ionic을 설치해주자 (https://ionicframework.com/docs/installation/cli)

 - npm 은 기본적으로 사용자에 따라 모듈 의존성 관리를 따로 하게 된다. 아래 코드의 -g 옵션은 최상위 root 에 설치하여 전역적으로 모든 사용자가 사용할 수 있게하는 옵션이다.

npm install -g ionic

 

- 아래와 같은 error가 발생했다. 이는 내가 root가 아닌 사용자 모드 상태에서 -g 옵션을 사용하니 root 디렉토리의 접근 권한 부족으로 생긴 문제이다. 이를 해결하기 위해선 sudo를 붙여서 권한을 직접 주거나 -g 옵션을 제거해서 사용자 환경에 설치를 해야한다.

- npm을 사용해봤을때는 사용자별로 모듈을 관리해야하는 특별한 제약사항이 존재하지 않으면 -g 옵션과 root 권한으로 전역적으로 설치하는 것이 정신 건강상에 좋을 것이다.

npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/ionic'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules/ionic']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules/ionic\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules/ionic' }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

 

 - 설치가 완료되었다면 기본 프로젝트를 생성하여 확인해보자

 - 실행하게 되면 framework 선택창에서 angular와 react를 고르는 선택지와 기본 예제를 선택하는 선택지가 나오는데 아무거나 고르고 실행해보자

ionic start myApp

 

- angular 와 blank 프로젝트를 선택하여 설치하였다.

 

-  설치가 정상적으로 이루어졌으면 확인을 해야되는데 해당 단계에서는 디바이스가 필요없이 local 브라우저에서 확인할 수 있도록 ionic 에서 제공하는 serve 명렬어를 통해 간단히 확인할 수 있다.

ionic serve

 

-  명령어를 실행하게 되면 명령어 바로 아래줄에 host 와 port 정보를 확인할 수 있고 브라우저를 열어 확인가능하다.

 

 

 

 

 

 

2. Open source 활용하기 

 - 구글에서 ionic 오픈 소스를 검색해서 나온 오픈 소스 중에서 회의 시간을 스켸줄링해주는 오픈 소스 프로젝트를 참고해서 활용하는 방법을 적어보겠다. https://github.com/ionic-team/ionic-conference-app

 - 적절한 폴더 경로를 설정한 뒤에 위 사이트의 소스를 다운받도록 하자

 - https://github.com/candelibas/awesome-ionic 해당 사이트에서 Open Source Projects 메뉴를 보면 다른 프로젝트도 확인할 수 있으나 위의 프로젝트가 다른 불필요한 라이브러리 설치가 필요없는 기본적인 프로젝트라서 참고하였다. 

 - 보통 오픈 소스 프로젝트는 install 과정이 포함되어있으니 다른 프로젝트를 선택하여 설치해보는 것도 좋은 방법일 듯 하다. 

https://github.com/ionic-team/ionic-conference-app.git

 

 - 기본적으로 nodejs 는 대부분의 의존성 관리를 package.json을 통해서 관리한다. 

 - 다운로드 받은 프로젝트 경로로 들어가여 모듈을 설치해보자

npm install

 

 - 설치가 완료되었다면 위와 같은 방식으로 ionic serve 명령어로 설치한 오픈 소스를 확인할 수 있다.

 - 위와 동일하게 프로젝트 경로 루트에서 실행한다.

ionic serve

 

 

https://play.google.com/store/apps/details?id=devjoo.ionic.widmarkapp

지금어때 - 실시간 음주 계산기, 술게임, 혈중 알콜 농도 계산, 음주 측정 - Google Play 앱