[Ionic2] 아이오닉2(ionic2) 디렉토리 구성 - Project Structure

아이오닉2(ionic2) 디렉토리 구성 - Project Structure

1. ./src/index.html

- 앱의 시작 역할을 하며 script, css, bootstrap 셋팅 을 하고 앱을 시작한다

- 개발시에 수정되는 일이 거이 없다

1) 소스 하단

<script src="cordova.js"></script> <script src="build/main.js"></script>

- <script src="cordova.js"></script> : 브라우저 404 경우 코르도바를 인젝션 한다

- <script src="build/main.js"></script> : 아이오닉, 앵큘러와 앱의 스크립드들을 연결 한다

2. ./src/

- 이 폴더 아래에서 주요 개발 환경이 이루어 진다

- ionic serve 라는 명령어를 입력하면 src/하위 파일들이 타입스크립트에서 브라우저에서 이해할 수 있는 자바스크립트로 변환(transpiled)된다

1) src/app/app.module.ts 

- 만드는 앱의 입구 역할을 한다

@NgModule({ declarations: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] }) export class AppModule {}

- 모든 앱은 루트 모듈이 존재하고 이곳에서 루트 모듈을 설정한다. 또한 루트 콤포넌트를 설정한다(src/app/app.component.ts)

- pages 폴더에 페이지를 추가할 때마다 모듈에도 같이 추가해야 한다

2) src/app/app.component.ts

- 앱이 로드 될때 실행되는 첫번 째 컴포넌트 이다

- 루트 컴포넌트(app.components.ts + app.html + app.scss)

- 새로운 페이지를 만든다면 해당 루트 컴포넌트를 각각 만들어야 한다

3) theme 

- 디자인 작업

4) main.ts

- 루트 컴포넌트를 가져와서 실제적으로 앱에 붙인다

3. ./src/app/app.html

- 앱의 주요 템플릿이다

4. node_modules

- 아이오닉 개발에 필요한 모듈이나 플러그인 설치

- package.json을 이용해서 npm 설치를 한다

5. platform

- 앱의 결과물이 담긴다

6. plugins

- 코도바를 위한 플러그인

7. resources

- icon.png, splash.png가 들어 있으면 처음 앱의 실행(스플레쉬) 화면 설정에 관여

8. config.xml

- 코도바 설정, 앱 전체를 위한 파일

- widget id를 이용하여 앱을 구분한다

- 스플레쉬 화면을 설정한다(preference)

9. pages

- 페이지를 실제적으로 만들 때 사용된다

- html, scss, ts 로 기본적인 구성을 가진다