★ 이 책에서 다루는 내용 ★ ■ 애플리케이션 개발을 위한 아이오닉 기능 ■ 파이어베이스와 아이오닉을 이용한 채팅 앱 제작 ■ 써드 파티 REST API를 사용한 주식 추적 앱 제작 및 아이오닉 네비게이션과 페이지를 활용한 레이아웃 구성 ■ 아이오닉과 코르도바 플러그인을 사용한 미디어 플레이어 앱 ■ 파이어베이스를 이용한 상용 애플리케이션 제작 ■ 실시간 아이오닉 애플리케이션 제작을 위한 모범 사례 연구 ★ 이 책의 대상 독자 ★ 아이오닉 2를 사용한 경험이 있지만 동적인 기능으로 실시간 앱을 제작하는 아이오닉의 강력함에 대해 아직 완전히 체감하지 못한 중급 수준의 아이오닉 개발자를 위한 책이다. ★ 이 책의 구성 ★ 1장, ‘파이어베이스를 이용한 채팅 애플리케이션’에서는 파이어베이스를 사용해 실시간 채팅 애플리케이션을 개발하는 방법을 소개한다. 또한 아이오닉 2에서 탭 사용법, 파이어베이스 설정법, 채팅 앱을 개발하기 위해 AngularFire2로 파이어베이스를 사용하는 법을 배운다. 2장, ‘Marketcloud를 이용한 쇼핑몰 애플리케이션’에서는 전자상거래를 위한 새로운 BaaS 플랫폼인 Marketcloud를 소개한다. 독자는 Marketcloud SDK와 대시보드를 사용한 쇼핑몰 앱을 제작하고 결제 게이트웨이 통합으로 결제를 처리하며 아이오닉 2 메뉴와 탐색을 사용하고 아이오닉 로딩을 사용한 로더의 사용법을 배운다. 3장, ‘학회 애플리케이션’에서는 학회 앱 제작 방법을 선보인다. Lanyrd 호환 JSON 데이터를 사용하고 아이오닉 네이티브로 네이티브 장치 기능과 LocalStorage를 활용하며 아이오닉 메뉴와 탭을 같이 사용하는 오프라인 학회 앱을 개발한다. 또한 RxJS를 사용해 검색 필터를 개발한다. 4장, ‘StockMarket 애플리케이션’에서는 사용자가 선택한 주식의 정보를 보여주는 증권 시장앱을 개발하는 방법을 소개한다. 앵귤러 2 컴포넌트 API를 사용해 재사용 가능한 UI 컴포넌트를 개발하고 RxJS를 활용해 Yahoo API에서 지속적으로 증권 데이터를 받아오며 커스텀 앵귤러JS 파이프를 제작하고 증권의 과거 데이터를 보여주는 반응형 차트를 생성한다. 5장, ‘워드프레스 클라이언트 애플리케이션’에서는 워드프레스 블로그나 사이트를 위한 모바일 클라이언트를 개발하는 방법을 소개한다. 또한 워드프레스 REST API, 아이오닉 Toast, 아이오닉 2에서의 무한 스크롤, 푸시 알람, 아이오닉 네이티브, 구글 애널리틱스 활용하는 법을 소개한다. 최종 결과물은 블로그 게시물, 댓글, 카테고리, 워드프레스 페이지를 가진 워드프레스 클라이언트 애플리케이션이 될 것이다. 6장, ‘미디어 플레이어 애플리케이션’에서는 미디어 플레이어를 개발하는 방법을 소개하는데 이 책 속에 등장하는 특별한 앱 중 하나다. 재생 위치를 변경할 수 있는 탐색 바, 재생 및 일시 정지 버튼, 재생 목록 옵션과 다음 및 이전 버튼이 있는 완전한 플레이어를 제작한다. 또한 장치에서 미디어를 가져오는 파일 탐색기도 제작한다. 7장, ‘파이어베이스를 이용한 소셜 애플리케이션’에서는 파이어베이스를 사용한 소셜 앱을 개발하는 방법을 소개한다. 파이어베이스 데이터베이스를 사용해 정보를 저장하며 파이어베이스 저장소를 사용해 이미지와 같은 이진 정보를 저장한다. 이 앱은 사용자가 다른 사용자를 팔로잉하고 그들의 게시물을 보는 트위터 같은 앱이며 앱을 위한 데이터베이스 구조도 다룬다. ★ 옮긴이의 말 ★ 2000년대 초반만 하더라도 IT는 데스크톱 운영체제인 마이크로소프트 윈도우와 웹이라는 큰 플랫폼으로 구분됐으며 그 개발자 역시 뚜렷하게 구분돼 각자의 역할을 존중하며 공생해왔다. 역자도 윈도우 앱 개발자 출신으로 당시에는 윈도우의 세상이 영원할 것으로 믿었기 때문에 윈도우 앱 개발 기술만 알면 평생 먹고 살 줄 알았다. 그 흐름에 처음으로 불안함이 감돈 것은 앱이라고 부르기는 뭔가 궁색했던 웹페이지가 HTML5 기술의 등장으로 동적인 UX를 가진 웹앱으로 변화하기 시작한 2000년대 중반부터였다. 그동안 HTTP의 비연결적 특성 때문에 데스크톱 앱에 비해 UX의 역동성이 부족했던 웹이 동적으로 동작하면서 데스크톱 앱의 영역을 침범하기 시작한 것이다. 이 웹앱은 또 하나의 큰 장점이 있었는데, 웹브라우저의 호환성만 보장되면 윈도우 이외의 플랫폼인 리눅스나 맥에서도 똑같이 동작할 수 있다는 점이었다. 하지만 그 때까지도 사실상 독점적인 윈도우의 철옹성에는 흔들림이 없었기 때문에 그 장점은 크게 주목 받지 못했다. 이 철옹성에 큰 위기가 찾아온 건 iOS와 안드로이드를 필두로 한 모바일 플랫폼의 등장이었다. 윈도우의 독점이 지속될 줄만 알았던 상황에서 새로운 컴퓨팅 장치가 몰고 온 플랫폼의 다변화는 비즈니스적으로 새로운 플랫폼을 지원해야 할 수 밖에 없는 고민의 시대로 흘러갔다. 이 때부터 웹앱의 크로스플랫폼 동작 가능성은 집중적으로 주목 받기 시작했다. 즉 웹뷰라는 각 플랫폼이 제공하는 웹브라우저 컴포넌트에서 렌더링되도록 웹 기술을 기반으로 한 JQueryMobile, SenchTouch 등으로 UI를 구현하고 PhoneGap, Appcelerator, Appspresso 등으로 네이티브 기능을 연동하는 하이브리드 앱 개발 방식이 등장한 것이다. 하이브리드 앱은 한번의 코딩만으로 복수의 플랫폼을 지원한다는 점에서 개발 비용과 시간을 월등히 줄일 수 있는 이상적인 개발 방법이었지만 초기에는 느린 성능, 여전히 웹 같은 이질감 있는 UI, 플랫폼마다 신규 네이티브 기능 지원이 늦거나 불안한 부분 때문에 실제로는 간단한 기능을 가진 앱에만 적용되거나, 하이브리드 앱으로 개발했다가도 다시 네이티브 앱으로 회귀하는 등 시장에서 기대만큼 인기를 끌지 못하는 상태가 지속됐다. 하지만 시간이 지나면서 하이브리드 앱은 모바일 장치의 성능이 비약적으로 향상되고 자바스크립트 엔진의 발전과 더불어 네이티브 앱과 같은 UI 구현을 지원하는 UI 프레임워크가 등장하면서 새 시대를 맞았다. 특히 UI 프레임워크 중에서도 가장 개발자 커뮤니티가 활성화돼 있고 사용자 요구를 발 빠르게 수용하는 아이오닉 프레임워크는 단시간에 주목 받았고 인기를 얻게 됐다. 아이오닉은 앵귤러 JS를 기반으로 개발돼 MVC 모델을 적용할 수 있고 다양한 UI 컴포넌트와 기능을 제공함으로써 크로스플랫폼을 지원하면서도 네이티브 앱 같은 UI를 구현할 수 있는 UI 프레임워크다. 게다가 아이오닉은 GitHub에 수많은 별을 얻고 백만 개가 넘는 앱이 아이오닉으로 개발되는 등 큰 인기를 얻었다. 그럼에도 불구하고 아이오닉 개발팀은 혁신을 멈추지 않고 바로 다음 버전인 아이오닉 2를 계획하고 개발을 진행했다. 새로 나온 아이오닉 2는 앵귤러 2, 타입스크립트, SASS 같은 최신 기술을 도입했으며, 이전 버전에 비해 구조와 빌드 도구를 개선했다. 또한 ES6 문법을 지원하며 새로운 테마 시스템, 향상된 모달 및 메뉴, 토스트, 새로운 네비게이션 시스템을 탑재하는 등 UI 컴포넌트가 혁신적으로 개선됐다. 가장 주목할 만한 것은 스크롤링 속도가 60FPS에 달하는 등 성능 또한 비약적으로 향상됐다는 점이다. 이 책은 혁신적으로 개선된 아이오닉 2의 주요 기능을 활용한 7개의 앱을 소개해 독자가 빠르게 아이오닉 2를 배울 수 있게 한다. 또한 구글의 클라우드 기반 실시간 데이터베이스인 파이어베이스를 적극 활용해 서버단 개발 없이 데이터베이스와 앱이 직접 연동되는 빠른 앱 개발 방법을 소개한다. 아이오닉 2와 파이어베이스를 활용하면 iOS 개발자, 안드로이드 개발자, 서버 개발자 3명이 필요했던 기존 네이티브 개발 방식을 벗어나 혼자 모든 것을 해낼 수 있다. 놀랍지 않은가? 역자는 최근 스타트업에서 기획한 서비스를 개발하기 위해 네이티브 앱 개발 방식, 자마린, 유니티등의 크로스플랫폼 개발 기술과 아이오닉과 같은 하이브리드 앱 개발 기술을 두루 고려했지만 결국 프론트엔드로 아이오닉을, 백엔드로 파이어베이스를 선택했다. 네이티브 앱 개발 방법보다 노력이 1/3 수준으로 적게 들 뿐만 아니라 개발자 수급 차원에서도 아이오닉 자체가 웹 기술이므로 웹 개발자를 구하면 됐기때문에 자마린, 유니티보다 훨씬 유리하다는 것이 그 이유였다. 실제로 개발하면서 생각했던 것보다 더 만족스럽고 훌륭했기 때문에 아이오닉을 독자들에게 자신 있게 추천할 수 있으며 장점을 널리 알리고자 이 책도 번역하게 됐다. 이 책을 통해 앞으로 여러분의 모바일 앱을 개발할 때 아이오닉의 사용을 꼭 고려하길 기대한다.

1장. 파이어베이스를 이용한 채팅 애플리케이션 __파이어베이스 ____AngularFire2 ____리스트와 오브젝트 ____템플릿 ____파이어베이스 시작 ____파이어베이스 애플리케이션 만들기 ____비밀번호 인증 활성화 ____파이어베이스 설정 정보 가져오기 __소프트웨어 설치 ____Node와 npm 설치 ____깃 설치 ____플랫폼 SDK 설치 ____아이오닉 CLI와 코르도바 설치 __애플리케이션 정의 ____기능 ____애플리케이션 흐름 ____유저 인터페이스 모형 ____파이어베이스의 데이터 구조 __애플리케이션 스캐폴딩과 설정 ____코르도바 플러그인 설치 ____파이어베이스와 AngularFire2 설치 ____Typings 설치 ____파이어베이스용 타입스크립트 데피니션 설치 __애플리케이션 코딩 ____app.ts 파일 정의하기 ____애플리케이션 프로바이더 ________AuthProvider 정의 ________UserProvider 정의 ________ChatsProvider 정의 ________UtilProvider 정의 ____애플리케이션 페이지 ________LoginPage 정의 ________템플릿 ________커스텀 이메일 검사기 정의 ________TabsPage 정의 ________템플릿 ________UsersPage 정의 ________템플릿 ________ChatsPage 정의 ________템플릿 ________ChatViewPage 정의 ________템플릿 ________스타일시트 ________AccountPage 정의 ________템플릿 __스타일 추가 __애플리케이션 실행 ____애플리케이션 화면 __정리 2장. Marketcloud를 이용한 쇼핑몰 애플리케이션 __소개 __Marketcloud ____Marketcloud 애플리케이션 생성 ____Marketcloud 대시보드 사용 ________카테고리 만들기 ________상품 만들기 ________애플리케이션을 위한 통화 설정 ____Marketcloud JS SDK ________API 레퍼런스 __결제 통합 __애플리케이션 정의 ____기능 ____애플리케이션의 흐름 __애플리케이션 스캐폴딩과 설정 ____모듈 설치 ________Marketcloud JS SDK 설치 ________Braintree 코르도바 플러그인 설치 __애플리케이션 코딩 ____index.html 파일 ____app.ts 정의 ________템플릿 ____애플리케이션의 프로바이더 ________StorageProvider 작성 ________UtilProvider 작성 ________MarketProvider 작성 ________CartProvider 작성 ________UserProvider 작성 ____애플리케이션 페이지 ________StorePage 작성 ________템플릿 ________CategoryPage 작성 ________템플릿 ________ProductPage 작성 ________템플릿 ________ImageModal 작성 ________템플릿 ________스타일시트 ________CartPage 작성 ________템플릿 ________AuthPage 작성 ________템플릿 ________OrderPage 작성 ________템플릿 __스타일 추가 __애플리케이션 실행 ____플랫폼을 추가하고 실제 기기에서 애플리케이션 구동 ____애플리케이션 화면 __정리 3장. 학회 애플리케이션 __소개 __JSON 데이터 ____JSON 이해 __애플리케이션 정의 ____기능 ____애플리케이션 흐름 __애플리케이션 스캐폴딩과 설정 ____모듈 설치 __애플리케이션 코딩 ____탭 스타터의 구조 ____app.ts 작성 ________ConfProvder 작성 ____애플리케이션 페이지 ________TabsPage 페이지 작성 ________SpeakersPage 페이지 작성 ________SchedulePage 페이지 작성 ________SessionDetail 페이지 작성 ________SpeakerDetail 페이지 작성 ________AboutPage 페이지 작성 ________FavoritePage 페이지 정의 __애플리케이션 실행 ____애플리케이션 화면 __정리 4장. StockMarket 애플리케이션 __소개 __Yahoo Finance API ____주식 정보 엔드포인트 ____심볼명 엔드포인트 ____과거 정보 엔드포인트 ____자세한 주식 정보 __앱 기능 정의 ____애플리케이션 흐름 __애플리케이션 스캐폴딩과 설정 ____모듈 설치 ________Chartist 라이브러리 설치 __코딩 부분 ____index.html 파일 ____app.ts 정의 ____애플리케이션 프로바이더 ________StorageProvider 정의 ________StockInfo 프로바이더 정의 ____애플리케이션 컴포넌트 ________StockCmp 컴포넌트 ________StockChart ________StockDetailCmp ____애플리케이션 페이지 ________StockList 페이지 정의하기 ________QuoteSearch 모달 정의 ________Detail 페이지 정의하기 __core 스타일 추가 __애플리케이션 실행 ____애플리케이션 화면 __정리 5장. 워드프레스 클라이언트 애플리케이션 __백엔드 ____푸시 알람 ____구글 애널리틱스 ____워드프레스 JSON API __워드프레스 설정 ____플러그인 설치 ________푸시 알람 설정 __애플리케이션 흐름 __애플리케이션 스캐폴딩과 설정 ____코르도바 플러그인 설치 ____CORS 문제 __애플리애케이션 코딩 ____애플리케이션 설정 ____app.ts 정의 ____애플리케이션 프로바이더 ________UtilProvider 정의 ________WpProvider 정의 ________PushProvider 정의 ____HtmlPipe ____Post 컴포넌트 ________입력 ________출력 ____애플리케이션 페이지 ________TabsPage 정의 ________PostsPage 정의 ________템플릿 ________PostPage 정의 ________CategoryListPage 정의 ________WpPageList ________WpPage 정의 ________FavoritePage 정의 ________SettingsPage 정의 __애플리케이션 스타일링 __애플리케이션 실행 ____애플리케이션 화면 __정리 6장. 미디어 플레이어 앱 __주요 핵심 ____재생 ____파일 시스템 ____로컬 저장소 __애플리케이션 흐름 __애플리케이션 스캐폴딩과 설정 ____모듈 설치 ____애플리케이션 실행 및 디버깅 __애플리케이션 코딩 ____최상위 앱 컴포넌트 ____애플리케이션 프로바이더 ________UtilProvider 정의 ________FileProvider 정의 ________PlayerProvider 정의 ____Imclock 파이프 ____ImControls 컴포넌트 ________입력 ________출력 ____애플리케이션 페이지 ________BrowsePage 정의 ________템플릿 ________PlaylistPage 정의 ________PlayerPage 정의 __애플리케이션 실행 ____애플리케이션 화면 __정리 7장. 파이어베이스를 이용한 소셜 애플리케이션 __애플리케이션 정의 ____게시물 동작 원리 ____기능 ____애플리케이션 흐름 ____파이어베이스 데이터 구조 __애플리케이션 스캐폴딩과 설정 ____코르도바 플러그인 설치 ____Typings 설치 ____파이어베이스와 AngularFire2 설치 ____ng2-moment 설치 ____파이어베이스를 위한 타입스크립트 데피니션 설치 __애플리케이션 코딩 ____app.ts 정의 ____애플리케이션 프로바이더 ________UtilProvider 정의 ________AuthProvider 정의 ________UserProvider 정의 ________SocialProvider 정의 ____post 컴포넌트 ________입력 ____애플리케이션 페이지 ________LoginPage 정의 ________CreateAccount 페이지 정의 ________TabsPage 정의 ________TimelinePage 정의 ________PostPage 정의 ________PeoplePage 정의 ________UserProfilePage 정의 ________AccountPage 정의 __스타일 추가 __애플리케이션 실행 ____추가로 앱 개선 ____애플리케이션 화면 __정리