아이오닉의 구성과 기본 이론

아이오닉의 구성과 기본 이론

아이오닉 개발을 위한 준비

해당 IDE(vscode, IntelliJ 등)를 켜서 터미널에 입력

cordova와 ionic 설치해줍니다

npm install -g cordova ionic

myApp이라는 ionic 프로젝트를 생성합니다.

ionic start myApp

Framework : Angular

Starter template : tabs

를 선택하고 진행합니다.

아이오닉서버를 실행

ionic serve -c -l

-c : 개발하면서 생성되는 콘솔로그를 실시간으로 확인할수 있게 하는 옵션

-l : (Lab)세가지 플랫폼을 동시에 보여주며, 앱 크기와 맞게 보여주기 때문에 개발에 용이한 옵션

아이오닉 프로젝트의 구성

폴더 구성

platforms : 앱으로 만들어진 결과물이 들어가는 폴더

node_modules : 자바스크립트를 위해서 사용될 라이브러리가 저장되는 곳

plugins : cordova를 위해서 사용될 플러그인이 저장되는 곳

resources : icon, splash와 같은 디자인 작업을 한 자원들을 저장해 놓는곳

src

• index.html : body태그의 app-root를 통해서 실제 앱 내용물이 출력된다. → 앱의 시작점
• assets : 정적파일(icon 등)을 저장하는곳.
• theme : 디자인구성 파일(css, scss, sass)을 저장하는 곳
• app
  • app.component html, css, ts : 각각이 페이지의 디자인, 기능을 담당하는 파일 → 페이지마다 html, css, ts 세가지의 파일이 필요함
  • app.module.ts : 전체적인 모듈을 정의하는 부분

Cordova란?

Html, CSS, JS 와 같은 웹 기술을 이용해서 모바일 앱을 만들어주는 플러그인입니다.

ionic은 AngularJS와 Cordova, Gulp를 활용하면서, 개발자들이 쉽게 개발할 수 있도록 자주사용되는 컴포넌트들이나 API를 제공해주는 플랫폼입니다.

Angular JS2란?

자바스크립트 프레임워크 중 하나로, 현재 구글이 관리를 하고 있습니다.

클라이언트쪽 어플리케이션을 개발하는데 있어서, 필요한 프레임워크입니다.

Angular JS의 특징

하나의 어플리케이션이 컴포넌트와 템플릿 여러개의 조합으로 존재하게 됩니다.

각각의 컴포넌트에서는 필요한 서비스들을 DI(Dependency Injection, 의존성 주입)을 통해서 주입받게 됩니다.

컴포넌트를 만들어서 Directive(지시자) 형태로 사용이 가능한데, 이를 템플릿에서 재사용이 가능합니다.

템플릿을 디자인적인 측면, 컴포넌트를 기능적인 측면에서 봤을 때, 이런 기능들을 최대한 모듈화하여 재사용성을 높이는 것이 Angular가 지향하는 바 라고 할 수 있겟습니다.

Angular에서의 컴포넌트 생성

app/app.component.ts

index.html

타입스크립트란?

자바스크립트의 단점을 보완해 만든 언어이며, 동적인 자바스크립트 언어에 타입을 미리 부여함으로써 컴파일 시 에러를 잡을 수가 있다.

장점

1. 에러 예방
2. 타입스크립트는 타입을 미리 부여하기 때문에 코드 작성시에 알맞지 않은 타입을 넣거나, 타입을 넣지 않았을 경우 IDE에서 요류라고 경고를 준다.
3. 실행 속도하지만 타입스크립트는 코드 작성시에 오류를 체크하고, 타입을 미리 결정하기 때문에 실행속도가 빠르다는 장점이 있다.
4. 자바스크립트는 실행시 타입을 결정해서 적용하기 때문에 컴퓨터가 일일이 타입을 부여하면서 오류가 있는지 체크하라고 한 것이기때문에 실행속도가 오래 걸린다.
5. 안정성 & 협업용이성
6. 자바스크립트는 협업할때, 다른사람이 코드를 보았을때 이름에 타입을 정확히 명시해주지 않으면 타입이 어떤 것인지 유추하기가 어렵다.
7. 슈퍼셋자바스크립트의 단점은 줄여주고 더 좋은 기능을 감싼 형태이다.
8. 타입스크립트는 자바스크립트+알파 이기때문에 자바스크립트와 100% 호환이 되며 클래스, 인터페이스 등 객체지향 프로그래밍 패턴을 제공해준다.

단점

1. 초기세팅
2. 자바스크립트에 비해 초기 세팅이 까다롭고, 꽤 귀찮다.
3. 새로운 언어
4. 자바스크립트 개발자인 경우 새로운 언어를 따로 배워 적용해야 한다는 단점이 있따.
5. 더 많은 코드
6. 자바스크립트보다 더 많은 코드를 작성해야 하므로, 개발기간이 늘어나며 가독성이 떨어진다는 단점도 있다.

참고

https://fomaios.tistory.com/entry/TS-타입스크립트TypeScript란