Ionic 프레임워크의 폴더 구조는 건드릴 수 없다. 오류에 관한 해결책을 찾는 것도 힘들뿐더러, 커뮤니티도 큰 편도 아니라 Ionic을 활용해 앱 개발을 하는데 상당히 애를 먹고 있다.

오늘은 Ionic 프로젝트 생성 시 생성되는 폴더의 역할과 AngularJS MVC 기반으로 구축된 HTML5 프레임워크라고 공식문서에서 소개하고 있으니 기반을 좀 알아볼 생각이다.

프로젝트 폴더 구조

Hooks - Hooks는 빌드 프로세스 중에 트리거 될 수 있는 스크립트입니다. 일반적으로 Cordova 명령 사용자 정의 및 자동화된 프로세스 구축에 사용됩니다.
Platforms - Android 및 IOS 프로젝트가 생성되는 폴더입니다. 개발 중에 이러한 파일이 필요한 플랫폼별 문제가 발생할 수 있지만 대부분의 경우 그대로 두어야 합니다. 이 Platform 밑에 생성되는 Android 및 IOS 폴더에 설정 및 수정을 진행해봤자. ionic cordova platform remove andorid 하는 순간 날아가버리기 때문이다...
Plugins - 이 폴더에는 Cordova 플러그인이 포함되어 있습니다. Ionic 앱을 처음 만들 때 일부 플러그인이 설치됩니다.
Resources - 이 폴더는 아이콘 및 스플래시 화면(앱이 구동될 때 사용자에게 보이는 첫 화면)과 같은 리소스를 프로젝트에 추가하는 데 사용됩니다.
Scss - Ionic 코어는 Sass로 구축 되었으므로 Sass 파일이 있는 폴더입니다. 프로세스를 단순화하기 위해서 보통 CSS만을 통해서 진행할 수도 있습니다.
www - 이 폴더는 Ionic 개발자를 위한 주요 작업 폴더입니다. 대부분 각 화면 및 컴포넌트 등을 개발하는 곳입니다. 내부에 기본 폴더구조를 제공하지만 이 폴더 구조는 개발자의 필요에 따라 언제든지 변경할 수 있습니다.
이 폴더를 열면 그 내부구조는 다음과 같습니다.
- CSS : CSS 저장 폴더이다. 만약 Scss를 사용하는 경우 style.css파일은 index.html에서 제거되기 때문에 계속 사용하기 위해선 수동으로 연결해야 합니다.
- IMG : 이미지 저장 폴더
- JS : 앱 기본 구성 파일인 app.js 및 AngularJS 구성 요소 (컨트롤러, 서비스, 지시문)가 포함된 폴더입니다.
- libs : 라이브러리가 배치되는 위치입니다.
- templates : HTML 파일에 대한 폴더입니다.
- Index.html : 앱의 시작점으로 사용되는 html 파일입니다.
각 설정 파일
- . bowerrc는 bower 구성 파일입니다. bower란 npm과 비슷한 도구지만 트위터에서 만든 프런트엔드의 패키지를 관리해주는 도구입니다.
- . editorconfig는 편집기 구성 파일입니다.
- . gitignore는 앱을 Git 레파지토리에 저장하는 경우 무시하는 파일을 나열하는 파일입니다.
- bower를 npm대신 패키지 관리자로 사용하기로 한경우 bower.json에 설정을 진행해야 합니다.
- gulpfile.js는 gulp(걸프는 빌드 시스템이다. ) 작업 관리자를 사용하여 자동화된 작업을 만드는 데 사용됩니다.
- config.xml은 Cordova 구성 파일입니다. 정말 많이 활용됩니다.
- package.json 에는 NPM 패키지 관리자를 사용하여 설치된 앱, 해당 종속성 및 플러그인에 대한 정보가 포함되어 있습니다.

AngularJS MVC

AngularJS는 HTML을 확장해서 사용하는 자바스크립트 MVC 프레임워크이다. MIT 라이선스를 따르기 때문에 무료 배포되는 오픈소스이며, 웹 애플리케이션 프레임워크이다. SPA형태의 웹 애플리케이션을 빠르게 개발할 수 있도록 지원해준다.

MVC 모델 구조는 가장 널리 알려진 웹 개발에서 사용되는 구조이지 않을까 싶다.

Apache Cordova

개요

PhoneGap 은 HTML5, JavaScript, CSS를 사용하여 디바이스 하이브리드 애플리케이션을 구축하기 위한 오픈소스 프레임워크이다. Phonegap은 Apache재단에서 관리하게 되면서 Cordova로 이름이 변경되었다.

설명

PhoneGap의 전체 구성은 아래와 같이 구성되어 있으며 해당 구성에 사용자가 정의한 플러그인 추가 기능을 통한 확장이 가능하다

PhoneGap은 기본적으로 두 가지의 컴포넌트를 포함한다

브라우저 (웹뷰 등)에서 실행될 JavaScript내에서 디바이스의 고유 기능을 제어할 PhoneGap JavaScript API
PhoneGap 자바스크립트와 연계될 플랫폼 별 Native Code

PhoneGap은 Device API 제어를 위해 미리 구현 한 JavaScript 및 SDK 연계를 위한 Native Code 외에 추가 기능을 위해 구현된 Plug-In을 구성하고 있는 PhoneGap Custom Plug-In과 PhoneGap Custom Native Plug-In이 추가된다.

아래 그림을 참고하면 PhoneGap는 웹 표준 기술로 처리할 수 없는 기술 처리를 위한 Device API를 사용한다. Device API 제어를 위해 JavaScript로 구현되어 제공되는 PhoneGap.js 와 플랫폼 별 WebView를 상속받아 Mobile Web Application과 연계를 Native Code의 집합인 PhoneGap.jar와 PhoneGap.framework로 구성한다. 또한, PhoneGap Plug-in 영역은 자바스크립트 구현 부분과 Native 구현 부분으로 구성한다. 자바스크립트 커스텀 플러그인의 작성은 Cordova.exec Function을 호출하여 구현하며, Native 구현은 커스텀 플러그인 작성을 위해 CDVPlugin 클래스를 상속받는다.

구분 설명

Mobile Web Application	HTML, CSS, 사용자 정의 JavaScript
PhoneGap JavaScript Engine	Device API 제어를 위해JavaScript로 구현되어 제공
	cordova(PhoneGap).js
PhoneGap Native Engine	플랫폼 별 WebView를 상속받아 Mobile Web Application과 연계를 위한 Native Code
	cordova(PhoneGap).jar, cordova(PhoneGap).framework
PhoneGap Custom Plug-In	기능 확장을 위해 추가 된 Plug-In을 위한 JavaScript 코드
	사용자 정의 JavaScript Plug-In 을 포함
	플랫폼 별로 플러그인을 위한 Native 코드 구성이 상이함에 따라 JavaScript 구성또한 다를 수 있음
PhoneGap Custom Native Plug-In	기능 확장을 위해 추가 된 Plug-In을 위한 플랫폼 Native 코드

라이브러리 구성

PhoneGap 프로젝트는 일반적인 디바이스 애플리케이션SDK 프로젝트 내에 하이브리드 앱 구현을 위한 PhoneGap 프레임워크 및 추가 웹 리소스가 추가된 구조이다.

PhoneGap 라이브러리는 웹 리소스와 디바이스 고유 기능 연계를 위한 디바이스 별 Native Code와 JavaScript 코드로 구성되어있다.

Android

cordovalib.jar : Android 고유 기능 호출을 위한 Native Code
cordova.js : 실제 디바이스 API가 포함되어 있으며 cordovalib.jar 내의 Naitve Code 함수를 플러그인 형태로 호출한다.

iOS

CordovaLib.xcodeproj : iOS 고유 기능 호출을 위한 Native Code가 존재하는 Sub 프로젝트
cordova.js : 실제 디바이스 API가 포함되어 있으며 cordova.framework 내의 Naitve Code 함수를 플러그인 형태로 호출한다.

PhoneGap 지원 Device API

PhoneGap에서는 기본적으로 다음과 같은 디바이스 API를 제공하여 디바이스 하이브리드 애플리케이션을 통한 디바이스의 고유기능의 호출을 지원한다.

PhoneGap Device API개요

Accelerometer	디바이스 모션 센서 접근(현재 가속도 정보등등)
Camera	디바이스의 기본 카메라 어플리케이션에 접근
Capture	장치의 오디오, 이미지 및 비디오 캡처 기능에 대한 액세스를 제공
Compass	디바이스 포인팅 방향 정보 처리
Connection	디바이스의 cellular, wifi 정보 접근 (호스트 네임등등)
Contacts	디바이스의 연락처 데이터 베이스에 접근(연락처 만들기, 검색등등)
Device	디바이스 H/W S/W 정보에 접근 (디바이스명, 플랫폼버전등등)
Events	폰갭이 모두 로드 되었을때, 딱 한번 deviceready 메소드를 수행한다. (엔트리 포인트 . .)
File	파일 시스템 계층의 읽기, 쓰기, 탐색등의 기능 제공
Geolocation	디바이스 GPS센서에 접근 (현재 위치등등)
Media	디바이스의 오디오 파일을 저장하고 기록할 수 있는 기능을 제공
Notification	영상 음성, 진동등을 통한 알림 제공. (alert, confirm, beep, vibrate등등을 발생 시키는 . .)
Storage	디바이스 스토리지에 대한 접근을 제공

PhoneGap License

PhoneGap은 아파치 코르도바라는 이름으로 아파치 소프트웨어 재단에 기부되었다. 아파치 재단에 의해 PhoneGap은 아파치 라이선스 2.0 버전을 가지고 있는 오픈 소스이다.
PhoneGap 라이선스는 다음 URL을 참고한다.

http://www.phonegap.com/about/license

PhoneGap 지원 플랫폼 (호환성)

PhoneGap을 활용한 디바이스 별 지원 플랫폼은 다음 URL을 참고한다. 각 디바이스 API 별 상세 내용은 Device API Doc 내용을 참고할 수 있다.

http://www.phonegap.com/about/feature

PhoneGap 참고사항

크로스 도메인 활용 (Domain Whitelist Guide)

폰갭에서는 모든 네트워크 접속을 차단하는 보안 정책을 기본으로 사용하고 있다. 개발자는 특정 도메인이나 하위 도메인으로 접속하여 외부자원을 사용해야 할 경우 아래의 내용을 참조하여 설정 가능하다.

Android

Res/xml/config.xml에서 외부 도메인을 선언하여 외부 자원의 사용을 위한 도메인을 추가 설정할 수 있다.

iOS

Supporting Files/config.xml에서 외부 도메인을 선언하여 외부 자원의 사용을 위한 도메인을 추가 설정할 수 있다.

'App' 카테고리의 다른 글

Ionic Framework (0)	2021.09.17
안드로이드 (0)	2021.09.16
Hybrid App (0)	2021.09.15

Once Run 현실과 이상을 채우는 블로그

Ionic, AngularJS MVC, Apache Cordova

AngularJS MVC

Apache Cordova

개요