아이오닉 인 액션 [웹 기반 기술로 신속하게 하이브리드 앱 만들기]
- 원서명Ionic In Action (ISBN 9781633430082)
- 지은이제레미 윌켄(Jeremy Wilken)
- 옮긴이최재훈
- ISBN : 9788960778900
- 30,000원
- 2016년 07월 28일 펴냄 (절판)
- 페이퍼백 | 360쪽 | 188*235mm
판매처
- 현재 이 도서는 구매할 수 없습니다.
책 소개
예제 코드 다운로드
요약
아이오닉은 AngularJS와 코르도바를 기반으로 만들어진 하이브리드 앱 개발 프레임워크이자 푸시 알림, 사용 분석, 빌드와 배포, 테스트까지 지원하는 플랫폼이다. 아이오닉의 가장 큰 매력은 웹 개발자가 하이브리드 모바일 앱을 개발하려고 할 때 빛을 발한다. 모바일 앱을 개발하기 위한 플랫폼별 네이티브 언어와 지식을 별도로 배우지 않고, 가지고 있는 노하우를 십분 활용해서 멋진 앱을 만들 수 있기 때문이다. 하이브리드 앱이 태생적으로 가지는 오버헤드와 네이티브 앱과는 사뭇 다른 룩앤필은 적극적인 도입을 망설이게 하는 요인이 되기도 하지만, 날로 향상되고 있는 디바이스의 성능, 웹 개발자가 접근하기에 낮은 진입장벽과 생산성은 충분히 가치가 있다. 이 책은 따라하면서 익힐 수 있는 훌륭한 예제와 쉬운 설명으로 모바일 앱 개발까지 영역을 확장하고 싶은 웹 개발자들에게 좋은 길잡이가 될 것이다.
추천의 글
이 책은 우리가 아이오닉(Ionic)을 만들고 2013년에 오픈소스로 발표한 이래로 즐겁게 협업해온 아이오닉의 탑 개발자 제레미 윌켄이 9개월 동안 헌신해 내놓은 결과물이다. 이 책은 아이오닉 오픈소스 SDK를 훌륭하게 소개하고 있으며, 아이오닉 숙련 개발자에게도 풍부한 정보를 제공한다.
제레미는 이 책을 위해 아이오닉 컴포넌트를 모두 사용하는 세 개의 아이오닉을 만들었다. 따라서 이 책은 아이오닉 컴포넌트들을 전체적으로 사용하기 위한 확실한 레퍼런스가 될 것이다. 가상의 리조트가 숙박객에게 유용한 기능을 제공하는 첫 번째 앱은 우리의 슬라이드 박스, 리스트, 카드, 콘텐츠 컨테이너, 기본적인 내비게이션 등을 사용한다. 두 번째인 비트코인 마켓 앱은 비트코인의 실시간 환율을 제공하면서 당겨서 새로고침하기, 팝오버, 탭, 차트, 향상된 리스트, 중첩된 뷰를 소개한다. 세 번째인 날씨 앱은 모달, 스크롤 영역 커스터마이징(페이지 스크롤), 외부의 데이터 불러오기, 사이드 메뉴, 검색 뷰 등을 사용한다.
각각의 앱은 독보적이면서 견고하다. 앱스토어 출시를 기준으로 봐도 80% 정도 개발된 수준이며, 완성품으로 가기 위해 부족한 점은 각 장의 말미에 도전 과제로 독자들에게 남겨놓고 있다.
숙련된 개발자를 위해 이 책은 플랫폼별 차이점도 설명한다. 예를 들어, iOS에서는 액션시트(action sheet)를 사용하고 안드로이드에서는 팝오버를 사용하는 점 등이다. 한편, 아이오닉 에코시스템, 코르도바(Cordova) 플러그인으로 향상시키기, 아이오닉 뷰와 같은 아이오닉 플랫폼 서비스, 고급 기법과 테스팅으로 개발 향상시키기와 같은 배경지식에 대해서도 설명하고 있다. 제레미는 여러분이 앱을 개발하고 테스트할 수 있도록 훌륭한 예제와 통찰을 준다.
맥스 린치(Max Lynch), 벤 스페리(Ben Sperry)와 함께 아이오닉을 만들기에 앞서 나는 이미 성공적인 제품을 출시했던(jQuery 모바일 드래그앤드롭 인터페이스 빌더인 Codiqa와 같은) 그들의 개발을 돕기 위해 회사에 합류했었다. Codiqa 작업을 하면서, 우리는 기기와 브라우저가 그 잠재력을 완전히 활용하고 있지 못한다는 사실을 깨달았고, 사용자들은 지속적으로 우리의 도구에 대해 더 많은 요구를 해왔다. 그러던 어느 날, 우리는 모바일 장치의 한계까지 밀어붙이기 위해 하이브리드 애플리케이션을 위한 툴킷을 만들기로 마음먹었다. AngularJS의 힘을 빌어, 우리는 하이브리드 모바일 앱 개발을 네이티브 애플리케이션 개발에 필적할 수 있는 수준으로 끌어올렸다. 2013년 아이오닉의 알파 버전을 출시한 이래로, 개발자 커뮤니티가 빠르게 아이오닉을 받아들이고 더 큰 성장을 이룰 수 있게 도와준 사실은 무척 자랑스럽다. 가장 흥분되는 점은 아이오닉은 아직 시작일 뿐이라는 점이다. 우리는 지속적으로 성장하고 지원하면서, 개발자들이 높은 성능의 앱을 빠르고 쉽게 개발할 수 있게 할 것이다.
독자들은 이 책이 아이오닉을 소개하는 정보뿐 아니라 더 나은 앱을 만들기 위한 깊이 있는 설명도 모두 담고 있다는 것을 알게 될 것이다. 아이오닉 커뮤니티의 일원이 돼 주어 감사하다.
부디, 즐기시기를!
- 애덤 브래들리((Adam Bradley)/아이오닉 프레임워크 공동 개발자
이 책에서 다루는 내용
■ HTML, 자바스크립트, CSS로 모바일 앱 제작
■ 아이오닉 UI 컨트롤을 이용한 복잡한 인터페이스 디자인
■ 한 번 빌드로 iOS와 안드로이드에 동시 배포
■ 네이티브 기기와 장치에 특화된 기능 활용
■ 모바일 개발 프로세스 전반에 대한 이해
이 책의 대상 독자
이 책은 웹 애플리케이션을 개발하기 위한 기본 지식을 가지고 있는 웹 개발자를 대상으로 한다.
CSS, HTML, 자바스크립트에 대한 지식이 필요하고, 콘텐츠를 구성하기 위해 HTML을 작성할 줄 알아야 하며, 스타일을 변경하기 위해 CSS를 사용하는 법을 알아야 한다. 자바스크립트에 대해서는 비동기 처리, 객체, 기본형에 대한 개념 정도는 이해하고 있어야 한다.
코르도바나 AngularJS에 대한 지식은 필요하지 않다. 자바스크립트로 브라우저 내 웹 애플리케이션을 만드는 배경지식 정도를 알고 있으면 도움이 되겠지만, 이 책의 예제를 주의 깊게 공부하면서 배울 수 있다.
모바일 기기는 앱 개발과 테스트를 위해 필수로 가지고 있어야 한다. 아이오닉 개발을 하려면 iOS나 안드로이드 기기가 필요하다. 각각 하나씩 가지고 있으면 금상첨화다
이 책의 구성
1장에서는 아이오닉과 하이브리드 앱을 개발하기 위한 다른 기술들을 둘러보면서, 아이오닉의 장점을 설명한다.
2장에서는 이 책에서 사용할 개발 도구들의 설정 과정을 보여주고, 기본 시작 프로젝트로 간단한 모바일 앱을 만들어본다.
3장은 AngularJS에 익숙하지 않거나 이미 알고 있는 지식의 정리가 필요한 개발자를 위한 내용이다. 아이오닉은 AngularJS로 개발되었기 때문이다.
4장에서는 가상의 리조트 앱을 만들면서 기본적인 내비게이션과 카드, 무한 스크롤링, 우아하게 데이터를 로딩하기 위한 로딩 인디케이터, 슬라이드 박스 등의 여러 가지 비주얼 컴포넌트들을 살펴본다. 첫 번째 앱을 만드는 동안 아이오닉 앱을 만들기 위한 기본기를 배울 수 있다.
5장에서는 비트코인 환율 현황을 파악하기 위한 또 하나의 앱을 만들어본다. 비트코인 앱은 탭, 당겨서 새로고침하기, 몇몇 폼 컴포넌트, 스와이프 옵션을 가지는 고급 리스트, 시간에 따른 현황 차트를 사용한다. 이 장은 탭을 사용하는 앱의 구조와 더 많은 아이오닉 컴포넌트로 앱을 향상시키는 방법에 초점을 둔다.
6장에서는 날씨 앱을 만들어본다. 이를 통해 내비게이션을 위한 사이드 메뉴 사용, 정보를 나타내기 위한 모달, 옵션 버튼을 보여주는 액션시트, 커스텀 스크롤 만들기 등을 익힌다. 아이오닉 컴포넌트의 이해에 깊이를 더하고, 아이오닉 앱에 사용된 주요 디자인 앨리먼트를 알아본다.
7장에서는 하이브리드 앱 개발에 유용한 고급 기술들을 몇 가지 소개한다. 사용자 데이터를 유지하는 법, 아이오닉 컴포넌트 커스터마이징하기, 온라인-오프라인 모드에서의 거동, 아이오닉 기본 세팅 설정, 플랫폼에 특화된 기능 사용하기, 제스처 이벤트 다루기 등을 배운다.
8장에서는 코르도바로 아이오닉 앱이 센서 데이터 등의 플랫폼 기능을 다룰 수 있게 하는 방법을 알아본다. 이전 장에서 만들었던 두 예제 중에서 날씨 앱에는 지오로케이션을 다루는 기능을 추가하고 리조트 앱에는 카메라 지원 기능을 더한다. ngCordova를 익히면서 코르도바 플러그인을 쉽게 통합하는 방법도 알아본다.
9장에서는 아이오닉 앱 테스트 환경 구축을 도와준다. 이 장에서는 두 가지 주요 테스트 방식을 소개한다. 한 가지는 비즈니스 로직을 테스트하기 위한 단위 테스트고, 다른 한 가지는 앱 전반의 기능을 테스트하는 통합 테스트다. 또한 아이오닉 뷰와 아이오닉 랩을 알아볼 것이다.
10장은 앱을 스토어에 제출하는 프로세스를 소개하면서 제품 출시 준비를 위한 팁과 기술을 다룬다. 필요한 그래픽과 애셋을 추가하고 iOS와 안드로이드에 맞게 앱을 빌드하는 법 등을 알아본다.
목차
목차
- 1장 아이오닉과 하이브리드 앱 개발
- 1.1 아이오닉이란?
- 1.2 모바일 경험의 종류
- 1.2.1 네이티브 모바일 앱
- 1.2.2 모바일 웹사이트 (웹앱)
- 1.2.3 하이브리드 앱
- 1.3 아이오닉 스택의 작동 방식 이해하기
- 1.3.1 아이오닉: 사용자 인터페이스 프레임워크
- 1.3.2 AngularJS: 웹 애플리케이션 프레임워크
- 1.3.3 코르도바: 하이브리드 앱 프레임워크
- 1.4 왜 아이오닉인가?
- 1.4.1 아이오닉이 개발자에게 좋은 이유
- 1.4.2 아이오닉의 문제점
- 1.5 아이오닉 앱 빌드를 위해 필요한 사전 지식
- 1.5.1 HTML, CSS, 자바스크립트에 대한 경험
- 1.5.2 웹 애플리케이션과 AngularJS에 대한 경험
- 1.5.3 모바일 장치에 대한 경험
- 1.6 모바일 장치와 플랫폼에 대한 지원
- 1.6.1 애플의 iOS
- 1.6.2 구글의 안드로이드
- 1.7 요약
- 2장 앱 개발을 위한 작업 환경 구성하기
- 2.1 빠른 시작을 위한 안내
- 2.1.1 개발 환경 설정
- 2.1.2 새 프로젝트 시작
- 2.1.3 프로젝트 폴더 구조
- 2.1.4 브라우저에서 미리보기
- 2.2 미리보기 환경 구축
- 2.2.1 플랫폼 도구 설치
- 2.2.2 에뮬레이터 설정하기
- 2.2.3 연결된 장치 설정
- 2.2.4 프로젝트에 플랫폼 추가하기
- 2.2.5 에뮬레이터에서 미리보기
- 2.2.6 모바일 기기에서 미리보기
- 2.3 요약
- 2.1 빠른 시작을 위한 안내
- 3장 AngularJS에 대해 알아야 할 것들
- 3.1 한눈에 보는 AngularJS
- 3.1.1 뷰와 템플릿: 콘텐츠를 표현하기
- 3.1.2 컨트롤러, 모델, 스코프: 데이터와 로직 관리하기
- 3.1.3 서비스: 재사용 가능한 오브젝트와 메소드
- 3.1.4 양방향 데이터 바인딩: 컨트롤로와 뷰의 데이터 공유
- 3.2 이번 장의 프로젝트를 위한 설정
- 3.2.1 프로젝트 파일 얻기
- 3.2.2 개발 서버 작동시키기
- 3.3 Angular 앱의 기본
- 3.4 컨트롤러: 데이터와 비즈니스 로직 제어하기
- 3.5 데이터 불러오기: 컨트롤러에서 로딩하고 뷰로 표시
- 3.5.1 필터: 데이터 표시를 위해 변환하기
- 3.6 노트 선택을 위해 클릭 이벤트 핸들링하기
- 3.7 Markdown 형식의 노트를 파싱하기 위한 디렉티브 만들기
- 3.8 콘텐츠 편집과 관리를 위해 모델 사용하기
- 3.9 노트의 저장과 삭제
- 3.9.1 save() 메소드 추가하기
- 3.9.2 유효성 확인을 위한 Angular 폼 사용
- 3.9.3 삭제 메소드 추가
- 3.10 AngularJS와 함께 계속 나아가기
- 3.11 도전 과제들
- 3.12 요약
- 3.1 한눈에 보는 AngularJS
- 4장 아이오닉 내비게이션과 기본 컴포넌트들
- 4.1 이번 장의 프로젝트를 위한 설정
- 4.1.1 새 앱을 생성하고 직접 코드 추가하기
- 4.1.2 완료했던 앱을 복제한 후 진행
- 4.2 앱 내비게이션 구현을 위한 설정 작업
- 4.2.1 잘 설계한 앱 내비게이션이란?
- 4.2.2 상태 제공자로 앱뷰 선언하기
- 4.3 홈 뷰 만들기
- 4.3.1 콘텐트 컨테이너 생성
- 4.3.2 CSS 컴포넌트 사용, 간단한 링크 목록 추가
- 4.3.3 목록 내 아이템에 아이콘 추가하기
- 4.4 예약 뷰 구현을 위해 컨트롤러와 모델 사용하기
- 4.5 날씨 뷰에 데이터 불러오기
- 4.5.1 날씨 뷰에 사용할 템플릿 추가
- 4.5.2 외부 데이터를 불러오기 위한 컨트롤러 만들기
- 4.5.3 날씨 뷰에 로딩 인디케이터 추가
- 4.6 레스토랑 뷰를 위한 카드 UI 무한 스크롤링
- 4.7 둘러보기 기능을 위해 슬라이드 박스 컴포넌트 사용하기
- 4.8 도전 과제들
- 4.9 요약
- 4.1 이번 장의 프로젝트를 위한 설정
- 5장 탭, 향상된 리스트, 폼 컴포넌트들
- 5.1 이번 장의 프로젝트를 위한 설정
- 5.1.1 새 앱을 생성하고 직접 코드를 추가하기
- 5.1.2 완성된 앱을 복제한 후 진행하기
- 5.2 ionTabs: 탭과 내비게이션 추가
- 5.2.1 탭 컨테이너와 세 개의 탭 추가
- 5.3 각 탭에 ionNavView 추가하기
- 5.4 비트코인의 현재 환율을 표시하기
- 5.5 같은 탭 뷰에서 상세 환율 보여주기
- 5.6 비트코인 채광율을 갱신하고 도움말 보여주기
- 5.6.1 ionRefresher: 아래로 당겨 환율을 갱신하기
- 5.6.2 $ionicPopover: 팝오버 창으로 도움말 표시하기
- 5.7 이력 데이터 차트
- 5.7.1 서드파티 라이브러리 설치
- 5.7.2 Highcharts를 이용한 이력 탭 템플릿, 셀렉트 박스로 환율 토글하기
- 5.7.3 이력 탭 컨트롤로 데이터 불러오기, 차트 설정하기
- 5.8 환율 탭에서 목록을 재정렬하고 토글하기
- 5.8.1 ionReorderButton: 목록 재정렬 기능 추가
- 5.8.2 ionToggle: 아이템 토글 기능 추가
- 5.9 도전 과제들
- 5.10 요약
- 5.1 이번 장의 프로젝트를 위한 설정
- 6장 날씨 앱: 사이드 메뉴, 모달, 액션시트와 ionScroll 사용하기
- 6.1 이번 장의 프로젝트를 위한 설정
- 6.2 사이드 메뉴와 뷰 셋업
- 6.3 위치 검색
- 6.4 설정 뷰와 데이터 서비스 추가
- 6.4.1 위치와 설정을 위한 서비스 만들기
- 6.4.2 사이드 메뉴에 선호하는 목록을 보여주기
- 6.4.3 설정 뷰 템플릿 추가
- 6.4.4 설정 뷰의 컨트롤러
- 6.5 날씨 뷰 만들기
- 6.5.1 Forecast.io API의 키 얻기
- 6.5.2 아이오닉 CLI 프록시 사용하기
- 6.5.3 날씨 뷰 컨트롤러와 템플릿 추가
- 6.6 ionScroll: 커스텀 스크롤 콘텐츠 만들기
- 6.6.1 ionScroll로 페이징하기
- 6.6.2 일기예보 데이터에 적용할 필터 만들기
- 6.7 액션시트: 옵션 목록 보여주기
- 6.8 ionModal: 일출과 일몰 시간의 차트를 보여주기
- 6.8.1 모달 설정하기
- 6.8.2 컬렉션 반복: 일출과 일몰 목록을 빠르게 구성하기
- 6.9 팝업: 선호 지역 변경을 통지하고 확정
- 6.10 도전 과제들
- 6.11 요약
- 7장 프로페셔널한 앱을 위한 고급 기술들
- 7.1 이번 장의 프로젝트를 위한 설정
- 7.1.1 코드 얻기
- 7.2 Sass로 아이오닉 스타일을 커스터마이징하기
- 7.2.1 Sass 설정하기
- 7.2.2 Sass 변수로 아이오닉 커스터마이징하기
- 7.2.3 나만의 스타일을 위한 Sass 사용하기
- 7.3 온라인, 오프라인 모드를 지원하기
- 7.4 아이오닉에서 제스처 이벤트 다루기
- 7.4.1 아이오닉 이벤트 디렉티브로 이벤트 리스닝하기
- 7.4.2 $ionicGesture 서비스를 가지고 이벤트 리스닝하기
- 7.4.3 사용할 수 있는 제스처 이벤트들
- 7.5 데이터를 영속적으로 저장하기
- 7.5.1 localStorage 사용하기
- 7.5.2 Web SQL, IndexedDB, SQLite 사용하기
- 7.5.3 코르도바 플러그인을 이용한 다른 옵션
- 7.6 다중 플랫폼을 지원하는 하나의 앱 만들기
- 7.6.1 하나의 크기로 모두를 맞출 수 없다
- 7.6.2 플랫폼이나 디바이스 타입에 맞게 스타일 조정하기
- 7.6.3 플랫폼이나 디바이스에 따른 적응형 동작
- 7.7 $ionicConfigProvider로 기본 동작을 수정하기
- 7.8 요약
- 7.1 이번 장의 프로젝트를 위한 설정
- 8장 코르도바 플러그인 사용하기
- 8.1 코르도바 플러그인
- 8.1.1 플러그인 사용 시 고려할 점
- 8.1.2 플러그인 설치
- 8.1.3 플러그인 사용하기
- 8.1.4 에뮬레이터에서 플러그인 사용하기
- 8.1.5 플랫폼에 따른 제약
- 8.1.6 AngularJS와 코르도바 감 잡기
- 8.1.7 장치나 에뮬레이터를 사용할 때 벌어지는 문제를 해결하기
- 8.2 ngCordova
- 8.2.1 ngCordova 설치
- 8.3 리조트 앱에서 카메라와 사진 사용하기
- 8.3.1 카메라 프로젝트 설정
- 8.3.2 카메라 플러그인 추가
- 8.3.3 사진첩 뷰 만들기
- 8.4 날씨 앱에서 지오로케이션 사용하기
- 8.4.1 지오로케이션 예제 설정
- 8.4.2 지오로케이션 플러그인과 ngCordova 추가
- 8.4.3 사용자의 위치를 요청하기
- 8.4.4 날씨 앱 개선
- 8.5 도전 과제들
- 8.1 코르도바 플러그인
- 8.6 요약
- 9장 미리보기, 디버깅, 테스트 자동화
- 9.1 미리보기, 디버깅, 테스트
- 9.1.1 왜 테스트가 중요한가
- 9.2 이번 장 예제 설정하기
- 9.3 앱 미리보기를 위한 다른 방법들
- 9.3.1 아이오닉 랩
- 9.3.2 아이오닉 뷰
- 9.4 장치 디버깅
- 9.4.1 안드로이드 장치 디버깅
- 9.4.2 iOS 장치, 에뮬레이터 디버깅
- 9.5 테스트 자동화
- 9.5.1 재스민과 카르마로 단위 테스트 수행
- 9.5.2 Protractor와 WebDriver로 통합 테스트하기
- 9.6 더 많은 테스트 예제
- 9.7 요약
- 9.1 미리보기, 디버깅, 테스트
- 10장 앱 빌드와 배포
- 10.1 제품화하기: 요약
- 10.2 아이콘과 스플래시 화면 애셋 만들기
- 10.2.1 주 아이콘 만들기
- 10.2.2 스플래시 화면 이미지 생성
- 10.3 앱 제품 출시 준비
- 10.4 안드로이드 앱을 빌드하고 구글 플레이로 배포하기
- 10.4.1 앱 서명을 위해 설정하기
- 10.4.2 출시용 앱 파일 빌드하기
- 10.4.3 APK 파일 서명하기
- 10.4.4 APK 최적화
- 10.4.5 앱의 업데이트 버전 빌드하기
- 10.4.6 앱 리스트 생성, 플레이 스토어에 업로드
- 10.4.7 앱 리스트 업데이트, 새 버전 업로드
- 10.4.8 다른 안드로이드 스토어 이용하기
- 10.5 iOS 앱을 빌드하고 앱스토어에 배포하기
- 10.5.1 인증서와 ID 설정
- 10.5.2 앱 ID 식별자 설정
- 10.5.3 아이튠즈 커넥트에서 리스트 생성
- 10.5.4 Xcode로 앱을 빌드하고 업로드
- 10.5.5 아이튠즈 커넥트 리스팅 작업 완료
- 10.5.6 앱 업데이트
- 10.6 요약
- 부록 A 추가 리소스들
- A.1 아이오닉
- A.2 AngularJS
- A.3 코르도바
- A.4 블로그