Top

Ionic 프로그래밍 입문 2/e [Ionic으로 만드는 하이브리드 앱]

  • 원서명Learning Ionic - Second Edition: Create real-time hybrid applications with the leader of HTML5 frameworks: Ionic Framework (ISBN 9781786466051)
  • 지은이아르빈드 라불라바루(Arvind Ravulavaru)
  • 옮긴이장세윤
  • ISBN : 9791161751023
  • 30,000원
  • 2018년 01월 12일 펴냄
  • 페이퍼백 | 444쪽 | 188*235mm
  • 시리즈 : acorn+PACKT

책 소개

책에 나오는 코드를 실행할 수 있도록 정리해서 다운로드 파일을 업데이트 했습니다. (2018.04.19)
Ionic 업데이트 시 오류가 발생하는 경우가 있으니, 업로드한 프로젝트에서 코드 내용을 참고해주시면 감사하겠습니다.

요약

Ionic을 활용해 하이브리드 앱 개발을 하는데 필요한 전반적인 내용을 예제를 통해 쉽게 설명했다. Ionic의 기반이 되는 Angular의 기본적인 내용과 Ionic 개발에 필요한 환경 설정부터 컴포넌트, 내비게이션, 데코레이터, 서비스, Ionic Native, 앱 테스트 방법, 앱 출시 방법 등 앱 개발 및 출시 과정에서 필요한 거의 모든 내용을 배울 수 있다. 또한 Ionic을 활용한 앱 개발에 필요한 기본적인 내용을 배운 뒤, UberAPI와 GoogleMap API를 활용한 앱 개발 예제로 배운 내용을 적용할 수 있다. 또한 지속적으로 업데이트되는 Ionic의 최신 버전에 대응하는 방법과 덧붙여 보면 좋은 내용도 간략히 소개돼 있어 Ionic을 활용해 하이브리드 앱 개발하려는 입문자에게도 좋은 지침서가 될 것이다.

이 책에서 다루는 내용

█ 모바일 하이브리드 아키텍처에 대한 이해
█ Ionic 템플릿을 활용한 프로젝트 설치와 작업 방법
█ Ionic 컴포넌트, 데코레이터, 서비스를 연동해 복잡한 애플리케이션을 빠르게 개발하는 방법
█ SCSS를 활용한 Ionic 앱과 컴포넌트에 테마를 설정하는 방법
█ 카메라, 알림, 배터리 등과 같은 장치 기능을 사용하기 위한 Ionic Native 활용 방법
█ Ionic 및 Uber API를 활용한 프로덕션 레벨의 Uber 탑승 예약 앱 제작
█ Ionic 1 앱을 Ionic 2 또는 Ionic 3로 마이그레이션하는 방법
█ 제작한 앱에 유닛 테스트, 엔드 투 엔드 테스트, 장치 테스트하는 방법
█ 후속 버전을 저장, 관리할 수 있는 Ionic 앱 배포 방법

이 책의 대상 독자

Ionic을 이용해 모바일 하이브리드 애플리케이션 제작 방법을 배우려는 사람을 대상으로 한다. 또한 Ionic 앱을 제작하거나 REST API와 통합하고, Ionic Native를 사용해 카메라, 블루투스와 같은 장치 기능을 좀 더 자세히 배우려는 독자에게 이상적이다.

이 책의 구성

1장, ‘Angular–입문’에서는 완전히 새로워진 Angluar의 힘을 소개한다. Angular를 이해하기 위해 TypeScript의 기초와 개념을 다룬다. Angular 모듈, 컴포넌트, 서비스에 대해 살펴보고 Angluar를 이용한 앱 제작으로 마무리한다.
2장, ‘Ionic에 오신 것을 환영합니다’에서는 Cordova라는 모바일 하이브리드 프레임워크에 대해 설명한다. 이를 바탕으로 전체적으로 Ionic이 어떻게 모바일 하이브리드 애플리케이션 개발에 적합한지 보여준다. Ionic을 사용해 애플리케이션을 개발하는 데 필요한 소프트웨어도 살펴본다.
3장, ‘Ionic 컴포넌트와 내비게이션’에서는 Header에서부터 Navbar까지 Ionic의 다양한 컴포넌트를 안내한다. 또한 Ionic 프레임워크를 활용해 여러 페이지를 탐색하는 방법을 알아본다.
4장, ‘Ionic 데코레이터와 서비스’에서는 다양한 ES6 클래스를 초기화하는 데 사용하는 데코레이터(decorator)에 대해 알아본다. 플랫폼 서비스와 Config 서비스, Ionic을 좀 더 깊이 이해하기 위해 여러 가지 컴포넌트도 살펴본다.
5장, ‘Ionic과 SCSS’에서는 내장된 SCSS 기능을 활용해 Ionic 앱의 테마를 설정하는 방법을 다룬다.
6장, ‘Ionic Native’에서는 Ionic Native를 활용해 카메라, 배터리 등과 같은 장치 기능과 Ionic 앱을 연결하는 방법을 보여준다.
7장, ‘Riderr 앱 제작하기’에서는 지금까지 얻은 지식을 활용해 Device API 및 REST API와 통신하는 엔드 투 엔드 애플리케이션 구성 방법을 다룬다. 책에서 만들 앱은 Uber API의 프론트엔드 앱이 될 것이며 사용자는 이 앱을 사용해 Uber ride를 예약할 수 있다.
8장, ‘Ionic 2 마이그레이션 가이드’ 에서는 Ionic 프레임워크 v1에서 제작한 Ionic 앱을 Ionic 2로 마이그레이션하는 방법을 알아보고 동일한 방식을 적용해 Ionic 3로 마이그레이션하는 데 중점을 둔다.
9장, ‘Ionic 2 앱 테스트하기’ 에서는 Ionic 앱을 테스트하는 다양한 방법을 살펴본다. 유닛 테스팅, 엔드투엔드 테스트, 몽키 테스트, AWS Device Farm을 활용한 장치 테스트를 제공한다.
10장, ‘Ionic 앱 배포하기’에서는 Ionic CLI와 PhoneGap Build를 사용해 Cordova 및 Ionic으로 제작한 애플리케이션의 설치 프로그램 생성에 중점을 둔다.
11 장, ‘Ionic 3’에서는 Angular 4와 Ionic 3 업그레이드에 대한 내용을 다룬다. Ionic 3의 몇 가지 새로운 기능을 안내한다.

저자/역자 소개

지은이의 말

이 책은 Ionic을 사용해 모바일 하이브리드 애플리케이션을 쉽게 제작하는 법을 설명한다. REST API가 포함된 단순한 애플리케이션이나 네이티브 기능이 포함된 복잡한 애플리케이션의 경우에도 Ionic이 제공하는 간단한 API를 통해 제작할 수 있다.
웹 개발과 TypeScript, Angluar에 대한 올바른 지식이 있으면 이를 이용해 단 몇 줄의 코드로 수백만 달러 가치의 아이디어를 쉽게 앱으로 만들 수 있다. 이 책을 통해 아이디어를 앱으로 제작하는 과정을 살펴본다.

지은이 소개

아르빈드 라불라바루(Arvind Ravulavaru)

소프트웨어 개발 분야에서 8년 이상 경력을 쌓은 풀 스택(full stack) 컨설턴트다. 지난 4년 동안 서버와 클라이언트에서 자바스크립트를 이용해 광범위하게 작업했다. 빅데이터 분석, 클라우드 프로비저닝 및 통합 작업을 수행했다. 다양한 데이터베이스에 대한 이해도가 높고, Node.js를 사용해 빌드된 응용 프로그램을 개발, 설계했다.
2년 전부터 The IoT Suitcase라는 스타트업에서 일하고 있다. 소프트웨어 개발 경험과 제품 제작에 대한 열정으로 IoT 제품 및 솔루션을 신속하게 구축할 수 있는 엔드 투 엔드(end-to-end) 플랫폼을 설계, 개발했다. IoT Suitcase는 하드웨어부터 분석 및 IFTTT가 포함된 모바일 응용프로그램까지 IoT 솔루션을 구축하는 데 필요한 모든 요소를 애드온으로 제공한다.
이외에도 회사가 최신 기술과 시장에서 가장 뛰어난 기술에 대응할 수 있도록 교육을 진행한다. 또한 스타트업 워크숍을 진행, 최신 도구를 이용해 짧은 시간에 아이디어를 시장에 내놓는 방법을 가르친다.
개발자에게 더 좋은 세상을 만들기 위해 오픈소스 커뮤니티에 기여할 수 있는 방법을 모색한다. 프로그램 설계사/컨설턴트로서 특정 언어에 제한되지 않는 기술 솔루션을 활용한 놀라운 비즈니스 아이디어를 제공하기 위해 항상 노력한다.
Ionic 프레임워크 v1을 활용해 모바일 하이브리드 애플리케이션을 만드는 방법을 담은 『Learning Ionic』(packt, 2015)을 썼다. 자바스크립트를 사용해 IoT 솔루션을 구현하는 법을 보여주는 『Advanced IoT with JavaScript(가제)』라는 도서도 준비 중이다.

옮긴이의 말

이 책은 Ionic을 활용해 웹 기반 기술을 활용한 하이브리드 앱 개발을 시작하려는 개발자에게 도움이 되는 내용을 담고 있다. Ionic의 기반이 되는 Angular에 대한 기본 내용과 개발 환경을 설정하는 과정부터 시작하기 때문에 Ionic을 처음 접하는 개발자도 활용할 수 있다.
1장에서는 Ionic의 기반 기술인 Angular의 기본을 학습하면서 이어지는 내용에 대비할 수 있도록 한다. 2장에서는 Ionic 앱 개발에 필요한 개발 환경 설정을 진행하면서 하이브리드 앱 개발에 필요한 사항을 준비한다. 처음 두 장은 기본적인 내용을 다루지만 매우 중요한 단계다. 3장부터 6장까지는 Ionic을 활용해 하이브리드 앱 개발을 하는 데 사용되는 컴포넌트, 내비게이션, 데코레이터와 서비스, SCSS, Ionic Native 등에 대해 학습한다. 이어지는 7장에서는 3장에서 6장까지 배운 내용과 UberAPI, Google MapAPI를 활용한 라이더 앱(우버 예약 앱)을 제작하는 과정을 진행한다. 이를 바탕으로 책에서 학습한 내용을 앱 개발에 적용하는 방법을 익힐 수 있다. 8장에서는 Ionic 1을 활용해 개발된 앱을 Ionic 2로 마이그레이션하는 방법을 학습한다. Ionic 1과 Ionic 2의 차이점과 각 시스템이 어떻게 대응되는지 살펴볼 수 있다. 9장에서는 Ionic을 활용해 개발한 앱을 테스트하는 과정을 소개한다. 유닛 테스트, 엔드 투 엔드 테스트, 몽키 테스트, 디바이스 팜 등 앱 개발 시 활용할 수 있는 다양한 테스트 방법을 소개하고 예제를 바탕으로 테스트 생성과 적용 방법을 배운다. 10장에서는 앱 출시 방법을 학습한다. 안드로이드와 iOS 마켓에 앱을 출시하기 위한 준비와 각 플랫폼의 설치 파일(apk, ipa) 생성법 그리고 이를 사이닝 키(signing key)와 패키징하는 방법을 알아본다. 13장에서는 Ionic의 최신 버전인 Ionic 3에 대한 소개, Ionic 2와 Ionic 3의 차이점 그리고 Ionic 3에서 업데이트된 내용을 살펴본다. 이를 바탕으로 책에서 다루지 못한 최신 버전에 대응하는 방법까지 살펴볼 수 있다.
Ionic을 활용한 하이브리드 앱 개발을 시작할 때 필요한 내용을 전반적으로 다루기 때문에 배울 부분이 많다. 특히 외부 플러그인 및 API를 활용해 앱을 개발하는 7장에서 어려움을 겪을 수 있다. 저자가 참고한 웹 페이지와 코드를 하나씩 살펴보면 앱을 끝까지 완성할 수 있을 것이다. 번역을 진행하며 문장마다 저자의 의도를 알려고 많은 노력을 기울였지만, 제대로 파악하지 못한 내용이 있을 수 있다. 잘못된 내용이나 책에 관련된 의견은 소중히 여겨 정확한 내용을 전하는 데 좋은 자료로 참고하겠다.

옮긴이 소개

장세윤

대학 시절 유니티 엔진과 하드웨어를 연동한 교육용 콘텐츠를 제작하면서 개발에 흥미를 갖기 시작했다. 대학 졸업 후, 유니티 한국 지사에서 필드 엔지니어로 근무하며 기술지원, 유니티 엔진 기술홍보, 문서 번역 업무를 진행했다. 현재 유니티 엔진, 언리얼 엔진을 활용한 게임 개발 교육을 진행하는 프리랜서 강사로 활동하고 있다. 안드로이드/iOS 앱 개발 등 개인 프로젝트도 진행하고 있다.

목차

목차
  • 1장. Angular - 입문
    • Angular에 새로 추가된 내용은 무엇인가?
    • TypeScript 기초
      • 변수 타입 지정
      • 타입 정의
      • 클래스
      • 인터페이스
      • 모듈 및 imports
    • Angular
      • 컴포넌트
      • 템플릿
    • Giphy 앱
      • 아키텍처
      • API
      • Angular CLI
      • 소프트웨어 설치하기
      • 텍스트 편집기
      • Angular 2 앱 뼈대 만들기
      • Giphy 앱 빌드하기
    • 요약

  • 2장. Ionic에 오신 것을 환영합니다
    • 모바일 하이브리드 아키텍처
    • Apache Cordova란?
    • Ionic이란?
    • Ionic 3
    • 소프트웨어 설정
      • Node.js 설치하기
      • Git 설치하기
      • 텍스트 편집기
      • TypeScript 설치하기
      • Cordova 및 Ionic CLI 설치하기
      • 플랫폼 가이드
    • Hello Ionic
    • 브라우저 개발 도구 설정
      • Google Chrome
      • Mozilla Firefox
    • Ionic 프로젝트 구조
      • config.xml 파일
      • src 폴더
    • tabs 템플릿 살펴보기
    • side menu 템플릿 살펴보기
    • 요약

  • 3장. Ionic 컴포넌트와 내비게이션
    • 핵심 컴포넌트
    • Ionic 그리드 시스템
    • Ionic 컴포넌트
      • 버튼
      • 리스트
      • 카드
      • Ionic icorns
      • 모달
      • 세크먼트
    • Ionic 내비게이션
      • 기본 내비게이션
      • Ionic CLI Sub-Generator
    • 요약

  • 4장. Ionic 데코레이터와 서비스
    • 데코레이터
      • Ionic 모듈
      • 컴포넌트 데코레이터
    • 내비게이션
      • 페이지 간에 데이터 전달하기
    • Config 서비스
    • 플랫폼 서비스
    • Storage 서비스
    • 요약

  • 5장. Ionic과 SCSS
    • Sass 란?
    • Ionic과 SCSS
      • 페이지 수준 재정의
      • 플랫폼 수준 재정의
      • 컴포넌트 수준 재정의
    • 샘플 컴포넌트에 테마 적용하기
    • 요약

  • 6장. Ionic Native
    • 플랫폼별 SKD 설정하기
    • 안드로이드 설정
      • iOS 설정
    • 설정 테스트하기
      • 안드로이드 테스트하기
      • iOS 테스트하기
    • Cordova 플러그인 시작하기
      • Ionic 플러그인 API
      • Ionic Native
      • Cordova 화이트리스트 플러그인
    • Ionic Native를 사용해 Cordova 플러그인 작업하기
      • 장치
      • Toast
      • 다이얼로그
      • 로컬 알림
      • Geolocation
    • 요약

  • 7장. Riderr 앱 제작하기
    • 앱 개요
    • Uber AP
      • 인증
      • Uber에 등록하기
      • API
    • Riderr 제작하기
      • doq 설치하기
      • Uber API 서비스
      • 통합
      • 의존성 설치하기
      • 앱 테스트하기
    • 요약

  • 8장. Ionic 2 마이그레이션 가이드
    • 마이그레이션을 왜 해야 할까?
    • Todo 앱 - Ionic v1
      • 앱 제작하기
    • 마이그레이션 계획
    • 요약

  • 9장. Ionic 2 앱 테스트하기
    • 테스트 방법론
    • 유닛 테스트 환경 설정하기
      • 프로젝트 설정하기
      • 유닛 테스트 작성하기
      • 유닛 테스트 실행하기
    • driftyco/ionic-unit-testing-example
    • 엔드-투-엔드 테스트
      • 프로젝트 설정하기
      • 유닛 테스트 작성하기
      • 유닛 테스트 실행하기
    • 코드 적용 범위
    • AWS 디바이스 팜
      • AWS 디바이스 팜 설정하기
      • Todo 앱 설정하기
      • Todo 앱 몽키 테스트하기
        • 다양한 장치에서 Todo앱을 수동으로 테스트하기
    • 자동화 테스트
    • 요약

  • 10장. Ionic 앱 출시하기
    • 배포를 위한 앱 준비
      • config.xml 업데이트하기
      • PhoneGap 빌드 서비스
    • cordova CLI를 이용해 설치 파일 생성하기
      • 안드로이드 인스톨러
      • iOS 인스톨러
    • Ionic 패키지
      • Ionic 클라우드에 프로젝트 업로드하기
      • 필요한 키 생성하기
    • 요약

  • 11장. Ionic 3
    • Angular 4
    • Ionic 3
    • Ionic 3 업데이트
      • TypeScript 업데이트
      • Ionic Page 데코레이터
      • 지연 로딩
    • Ionic 2와 Ionic 3
    • 요약

도서 오류 신고

도서 오류 신고

에이콘출판사에 관심을 가져 주셔서 고맙습니다. 도서의 오탈자 정보를 알려주시면 다음 개정판 인쇄 시 반영하겠습니다.

오탈자 정보는 다음과 같이 입력해 주시면 됩니다.

(예시) p.100 아래에서 3행 : '몇일'동안 -> 며칠동안

정오표

정오표

[p.41 : 6행]
표현의 진실성을 기반으로
->
직관적으로

[p.41 : 6행]
(클릭) =
->
(click) =