간편결제, 신용카드 청구할인
네이버페이 1%
(네이버페이 결제 시 적립)
NH(올원페이)카드 12% (22,180원)
(3만원 이상 결제/최대 1만원 할인)
북피니언 롯데카드 30% (17,640원)
(최대할인 3만원 / 3만원 이상 결제)
하나SK 북&카드 30% (17,640원)
(최대할인 3만원 / 3만원 이상 결제)
EBS 롯데카드 20% (20,160원)
(최대할인 3만원 / 3만원 이상 결제)
인터파크 NEW 우리V카드 10% (22,680원)
(최대할인 3만원 / 3만원 이상 결제)
인터파크 현대카드 7% (23,440원)
(최대할인 3만원 / 3만원 이상 결제)
Close

AngularJS 반응형 웹앱 개발과 성능 최적화 : MVC 패턴과 트위터 부트스트랩을 이용한

원제 : AngularJS UI Development

2013년 9월 9일 이후 누적수치입니다.

판매지수 35
?
판매지수란?
사이트의 판매량에 기반하여 판매량 추이를 반영한 인터파크 도서에서의 독립적인 판매 지수입니다. 현재 가장 잘 팔리는 상품에 가중치를 두었기 때문에 실제 누적 판매량과는 다소 차이가 있을 수 있습니다. 판매량 외에도 다양한 가중치로 구성되어 최근의 이슈도서 확인시 유용할 수 있습니다. 해당 지수는 매일 갱신됩니다.
Close
공유하기
정가

28,000원

  • 25,200 (10%할인)

    1,400P (5%적립)

할인혜택
적립혜택자동적립
배송정보
주문수량
감소 증가
  • 이벤트/기획전

  • 연관도서(321)

  • 사은품(2)

책소개

구글은 다양한 분야에서 개발자들에게 유익한 플랫폼과 라이브러리를 제공한다. 별도의 팀을 구성해서 Angular UI, AngularJS Material Design 등 다양한 프로젝트를 지속적으로 생성 발전시키고 있다. AngularJS는 웹 애플리케이션을 개발할 때 다양한 외부 라이브러리를 연동하는 편의성을 제공하면서 프로토타입을 짧은 시간 내에 개발할 수 있는 환경을 제공한다. 또한 웹 개발, 테스트와 검증, 유지 보수, 그리고 최적화까지 고려한 프레임워크이기 때문에 많은 웹 개발 회사와 자바스크립트 개발자가 사용하고 있다. 이 책을 통해 개발자는 AngularJS의 기본 지식뿐 아니라 터치 환경이나 반응형 웹과 같은 모바일 환경을 고려하고 페이지 로딩 속도까지 최적화할 수 있는 고급 기술을 습득할 수 있을 것이다.

출판사 서평

[이 책에서 다루는 내용]
- 모바일 버전에 적합한 애플리케이션을 설계할 수 있는 트위터 부트스트랩(Bootstrap)과 파운데이션과 같은 반응형 레이아웃과 강력한 CSS3 프레임워크 사용
- AngularUI 컴패니온 스위트를 사용할 때 생기는 일반적인 UI 문제 해결
- AngularJS를 이용해서 RESTful API를 정합한 동적 애플리케이션 개발
- CSS 반응형 프레임워크, 다양한 UI 위젯, 그리고 AngularJS 내부의 개요 학습
- 엘리먼트의 페이드인과 페이드 아웃부터 좀 더 복잡한 동작까지 표현할 수 있는 애니메이션 개발

[이 책의 대상 독자]

AngularJS로 UI 문제를 해결하는 데 관심이 있는 사람이라면 누구나 읽을 수 있다. 자바스크립트, HTML, CSS에 대한 기본 지식은 필요하다.

[이 책의 구성]


1장. '환경설정'에서는 이 책의 모든 부분에서 시작 템플릿으로 사용할 수 있는 매우 기본적이지만 전체적으로 테스트가 완료된 샘플 앱 설치 방법을 설명한다. 1장은 테스트와 빌드 프로세스의 자동화도 다룬다.

2장. 'AngularUI의 개요와 유틸'에서는 AngularUI 컴패니온 스위트를 소개하고 키프레스, 이벤트 바인더, jQuery Passthrough, Validate와 Mask, Highlight, 그리고 Fragment utilities의 사용 방법을 설명한다.

3장. 'AugularUI의 확장'에서는 날짜, 캘린더, 구글 맵스와 UI 라우터 모듈의 사용 방법을 설명한다.

4장. '개인화와 ng-grid 활용'에서는 기본적인 예제서부터 그룹핑, 개인화된 셀과 열 템플릿, 페이징, 7개 세부 뷰 사용, 그리고 셀 선택과 편집처럼 복잡한 주제에 이르기까지 시선을 사로잡는 그리드 구성 방법을 설명한다.

5장. '애니메이션 학습'에서는 AngularJS를 이용해서 사물에 애니메이션 효과를 적용하는 방법을 설명한다. 애니메이션은 페이지 엘리먼트의 페이드인과 페이드아웃 그리고 엘리먼트 이동을 포함하며 모든 애니메이션은 AngularJS 데이터 모델을 바탕으로 적용된다.

6장. '차트와 데이터 기반 그래픽'에서는 AngularJS 데이터 모델에 변경 사항을 반영하는 웹 페이지에 동적 차트를 삽입하는 방법을 보여주므로 5장보다 내용이 좀 더 확장되었다. 이런 점 때문에 사용자 정의 지시어를 정의한다.

7장. 'CSS와 CSS 프레임워크를 이용한 AngularJS의 사용자 정의'에서는 CSS에 대한 기본 사항을 견고히 다지게 할 수 있고 CSS 프레임워크가 UI 개발 프로세스를 얼마나 단순화시킬 수 있는지 보여준다. 7장은 8장과 특히 9장을 이해하기 위해 알아야 할 사전 지식을 설명한다.

8장. 'AngularUI 부트스트랩 개발'에서는 AngularUI 부트스트랩 프로젝트를 활용해서 AngularJS와 트위터 부트스트랩을 매끄럽게 통합할 수 있는 방법을 설명한다. 트위터의 부트스트랩 CSS 프레임워크를 사용하면 아무것도 없는 코드 상태에서 처음 시작해서 개발을 시작하는 것보다 상당히 적은 시간으로 매력적이면서 유연한 사용자 인터페이스를 구성할 수 있다.

9장. 'AngularUI 부트스트랩의 사용자 정의'에서는 특정 요구사항에 적합한 UI 부트스트랩을 선택하는 방법을 설명한다. 기본 템플릿이 매력적일 수 있으나 항상 모든 요구에 적합하지는 않다. 9장은 사용자 정의 템플릿을 이용해서 모든 지시어를 응용할 수 있는 방법을 찾아본다.

10장. 'AngularUI와 부트스트랩을 활용한 모바일 개발'에서는 터치 제스처를 포함한 모바일 싱글 페이지 앱의 개발 방법을 살펴본다. 모바일 사용자 경험에 대한 특정 요구사항을 만족시키기 위해 앱의 최적화 방안도 다룬다.

목차

1 환경설정
Hello World 앱
프리미티브 대신 오브젝트 사용
첫 지시어 구현
Node.js와 NPM 설치
OS X
윈도우
리눅스(우분투)
Bower를 이용한 클라이언트측 종속성 관리
Hello World 앱 테스트
단위 테스트
카르마와 재스민 설치
통합/Protractor를 이용한 단대단 테스트
애플리케이션 개발
그런트에서 Protractor 실행
깃을 이용한 소스 코드 관리
정리

2 AngularUI 도입과 유틸리티

AngularUI 다운로드
AngularUI-Utils 빌드
프로젝트에 AngularUI-Utils 통합
uiMask 지시어
이벤트 바인더
키프레스
제이쿼리 전달
정리

3 AngularUI 확장

구글 맵 적용
지도 위의 마커
이벤트 바인딩
Bower를 이용한 애플리케이션 종속성 관리
.gitignore 파일 변경
캘린더 컴포넌트
데이터 포맷화를 위한 필터 사용
캘린더 스타일 적용
컨트롤러 변경
테스트 추가
컨트롤러 테스트
필터 테스트
애플리케이션 빌드
정리

4 ng-grid의 커스터마이징과 분석

프로젝트 설정
AngularJS를 이용한 서비스 생성
그리드 뷰
그리드 그룹핑
마스터와 디테일 뷰 사용
정리

5 애니메이션 학습

프로젝트 설정
애니메이션 기능이 포함된 할 일 리스트 프로젝트 개발
페이지에서 요소 이동
Easing 함수
전체 애니메이션을 확대할 수 있는 LESS 사용
animate.css 파일 사용
스태커링 애니메이션
스태거 애니메이션 동작 이해
자바스크립트로 정의하는 애니메이션
정리

6 차트와 데이터 기반의 그래픽 사용

차트의 중요성
막대 차트 작성
데이터 기반의 막대 차트 생성
막대 차트를 위젯으로 변환
막대 차트 지시어 작성
Angular Google 차트 도구 사용
GitHub REST API를 이용한 대시보드 작성
대시보드 애플리케이션 확장
정리

7 CSS와 CSS 프레임워크를 이용한 AngularJS 커스터마이징

반응형 디자인의 혁명
미디어 쿼리 소개
@media
@media 익스프레션
트위터 부트스트랩을 이용한 진보된 디자인
애플리케이션에 Foundation 프레임워크 사용
정리

8 AngularUI 부트스트랩 개발

왜 AngularUI 부트스트랩을 사용해야 하는가?
프로젝트 관리 애플리케이션 개발
accordion 생성
탭 생성
숨김 기능을 이용한 개연성이 적은 콘텐츠 숨김
데이트피커를 이용한 타임라인 설정
버튼 사용
비율 폼에 대한 우선 순위 변경
사용자에게 알림 메시지 표시
캐로설 사용
이슈의 상태를 표시하는 프로그래스 바
typeahead를 이용한 효과적인 추천
드롭다운으로 된 애플리케이션 전용 메뉴를 위한 범용 하우징
정리

9 AngularUI 부트스트랩 커스터마이징

외부 템플릿 개요
스크립트 태그를 이용한 템플릿 로딩
$templateCache를 통한 템플릿 로딩
외부 템플릿 사용
AngularUI 부트스트랩 페이지 위젯 커스터마이징
AngularUI 부트스트랩 탭 위젯 확장
정리

10 AngularJS와 부트스트랩을 이용한 모바일 앱 개발

왜 모바일 때문에 고민하는가?
모바일을 우선 고려한 북마크 앱 개발
동적 애플리케이션 개발
북마크를 통한 검색 기능
모바일 단말용 애플리케이션의 기초 설계
더 나은 사용자 경험을 위한 애니메이션
더 나은 사용자 경험을 제공하기 위한 모바일 최적화
탭 이벤트를 위한 주기적인 지연
트랜지션과 애니메이션 가속
시작 페이지 로딩 성능 개선
정리

본문중에서

싱글 페이지 웹 애플리케이션용 웹 개발 프레임워크들이 나오기 시작한 건 꽤 오래 전 일이다. 하지만 AngularJS는 여러 중요한 면을 고려해 볼 때, 기존 부류와는 차원이 다른 프레임워크다. 무엇보다도, 클라이언트 측 개발에 재미를 안겨준다.
AngularJS는 어떤 점이 특화되어 있을까? 개발자들이 브라우저로 로딩한 문서 객체 모델)DOM)을 수작업으로 변경할 필요가 없다는 점에서 AngularJS는 선언적(declarative-여러 정보를 저장하고 기억할 수 있는 상태)이라 할 수 있다. 반면 데이터 모델을 페이지에 렌더링하는 방법에 관해서라면 AngularJS는 데이터 모델이 변경될 때 페이지의 렌더링을 처리한다.
양방향 데이터 바인딩을 하면, 예를 들어 페이지에 텍스트를 입력하거나 버튼을 클릭할 때 데이터 모델은 자동으로 업데이트된다. 데이터 모델과 바인딩된 다른 UI 엘리먼트도 업데이트될 것이다. 동작하는 것을 직접 보기 전에는 대단하지 않을 것 같지만, 현재 앱 상태가 페이지에 어떻게 보일지에 대해서, 제이쿼리를 이용한 큰 용량의 DOM 변경 코드와 간결한 코드 사이에는 큰 차이가 있다. 실제로, 코드를 상당히 가독성이 높고 간결하게 만들어 준다.
자바스크립트는 매우 강력한 언어다. 그러나 별난 특징이 있어서 이 언어를 논리적으로 사용하지 않으면 이해하기 어렵거나 에러가 매우 많은 지저분한 코드를 작성하게 될 수 있다. 하지만 AngularJS는 이 점을 걱정하지 않아도 된다. AngularJS를 사용하면 간결한 모듈 사용과 적절한 소프트웨어 테스팅 전략에 집중하므로, 자바스크립트의 장점을 잘 활용할 수 있다. 테스트 주도 개발(TDD, Test-driven development)은 상당히 막강한 개념으로서, 예를 들어 개발 완료 후 페이지 화면에서 간과했던 문제를 발견할지라도 당황하지 않고 문제를 즉시 간파해 코드를 수정할 수 있다.
TDD 개념 이해에 좀 더 큰 도움을 주는 책들 중에 가장 주목할 만한 것은 팩트출판사에서 출간한 『AngularJS로 하는 웹 애플리케이션 개발』(에이콘출판, 2014)이 있다. 하지만 이 개념은 개발 프로세스 전반에 걸쳐 여러 이득을 주므로 이 책에서도 살펴볼 예정이다.
제이쿼리는 커뮤니티가 수년간에 걸쳐 코드 작성에 기여해 발전시켜온 위젯을 이용해 많은 UI 문제를 해결할 수 있다는 점에서 상당히 유용하다. 하지만 이와 같은 위젯들은 AngularJS가 강력하게 금지하고 있는 직접적인 DOM 변경을 포함하고 있기 때문에 AngularJS로 직접 사용할 수는 없다.
직접적인 DOM 변경은 바로 이 책을 집필하게 된 이유이며, 이 책에서는 AngularJS 개발 과정에서 UI와 관련된 다양한 문제를 어떻게 해결하는지 보여주는 데 목적을 둔다. 이 책에서는 다음과 같은 내용을 다룬다
- 일반적인 UI 문제를 해결하기 위해 AngularUI 컴패니온 스위트(companion suite) 사용 방법
- 특정 문제를 해결하기 위해 AngularUI 라이브러리를 수정하거나 확장하는 방법
- 트위터 부트스트랩을 이용해서 시선을 집중시킬 수 있는 사용자 인터페이스를 빠르게 생각해낼 수 있는 UI 부트스트랩 사용 방법
- 특정 요구사항에 부합할 수 있는 UI 부트스트랩을 변경하는 방법
- CSS 동작 방법
- 이 책에서 다루는 AngularUI 컴패니온 스위트(companion suite)이 개발자의 문제를 해결하지 못할 때 사용자 정의 지시어(directive)를 구성하는 방법
(/ '지은이의 말' 중에서)

AngularJS는 이미 많은 출판사에서 다양한 서적이 출간되었다. 그럼에도 이 책이 출간된 이유는 분명 존재한다. 바로 빠른 앱 개발과 고도화된 성능 최적화 방법을 잘 설명하는 책이기 때문이다.
하나의 웹 앱은 출시되기까지 많은 절차를 거친다. 기획, 디자인, 동작 환경에 따른 기능 적합성과 디자인 검수, 개발, 테스트 등의 절차가 필요하다. 만약 시장의 요구사항을 적용해서 빠른 시간 안에 기본적인 애플리케이션을 개발하려면 시간이 오래 걸릴 수도 있으므로, 자칫 시장의 흐름을 놓칠 수 있다. AngularJS는 개발자와 비즈니스 팀에게 개발 시간을 줄여줄 수 있는 다양한 프로젝트와 템플릿, UI 프레임워크 등을 제공한다. 기존 DOM 요소나 재사용 가능한 DOM 컴포넌트를 매개변수로 사용하는 지시어(directive), 이중 중괄호 안에 작성하는 AngularJS 마크업 코드, 데이터를 표시할 때 사용하는 필터, 사용자 입력의 유효성을 검증하는 폼 컨트롤을 이용해서 개발자가 애플리케이션 템플릿을 작성할 수 있다. 따라서 개발자는 다양한 웹 페이지에 중복해서 개발해야 하는 기능이나 마크업 코드를 위 4가지 항목으로 시간을 단축시킬 수 있다.
데스크톱 환경은 풍부한 CPU와 메모리를 사용하기 때문에 성능을 크게 고민하지 않았지만 모바일 환경은 그렇지 않다. 특히 웹 페이지나 모바일 앱의 시작 페이지는 사용자에게 첫인상과 같으므로 로딩이 빨라야 한다. AngularJS는 웹 애플리케이션을 구성하는 요소인 HTML, CSS, 자바스크립트 파일의 크기를 현저히 줄일 수 있는 기술을 제공한다. 이 기술을 습득하려면, 이 책의 후반부를 살펴보고 꼭 직접 개발해보길 바란다. 놀라운 경험을 하게 될 것이다.
이 책은 빠른 웹 개발과 성능 최적화 방법 외에도 AngularJS의 기본 철학인 MVC 패턴을 이해하기 좋은 학습서다. 따라서 웹 초급 개발자도 이 책을 통해 웹 기술의 기초와 자바스크립트 디자인 패턴을 경험할 수 있을 것이다.
(/ '옮긴이의 말' 중에서)

저자소개

아미트 가랏(Amit Gharat) [저] 신작알림 SMS신청 작가DB보기
생년월일 -
출생지 -
출간도서 0종
판매수 0권

풀스택(full-stack) 엔지니어이자 오픈소스 컨트리뷰터다. 디렉티브(Directive), SPA, AngularJS로 작성한 크롬 확장프로그램과 같은 개인 오픈소스 프로젝트를 개발하고 공개해왔다. 다른 개발자들에게 영감이나 도움을 줄 수 있는 개인 블로그를 운영하며 이해하기 쉬운 표현으로 자신의 프로그래밍 경험을 공유할 정도로 열정이 넘친다. 코딩을 하지 않는 시간에는 보통 독서나 유튜브 동영상 감상, 그리고 가족과 함께 코미디 쇼 시청을 즐긴다. 폴란드에 위치한 [Appliness and Sdjournal Magazine]에 기사를 기고하기도 했다.

저서
[AngularJS 반응형 웹앱 개발

펼쳐보기
마티아스 넬센(Matthias Nehlsen) [저] 신작알림 SMS신청 작가DB보기
생년월일 -
출생지 -
출간도서 0종
판매수 0권

15년간 정보 테크놀로지 분야에서 일한 프리랜서 소프트웨어 엔지니어이자 열정적인 오픈소스 컨트리뷰터다. 현재 웹 애플리케이션에 열정을 쏟고 있는데 주로 AngularJS를 활용해서 개발한다. 함부르크 AngularJS 미트업(Meetup)을 창설했다. https://github.com/matthiasn에 들어가면 오픈소스 프로젝트를, http://matthiasnehlsen.com에 가면 블로그를 확인할 수 있다. 트위터에서 @matthiasnehlsen로 검색하면 팔로우할 수 있다.

저서
[AngularJS 반응형 웹앱 개발과 성능 최적화]

생년월일 -
출생지 -
출간도서 0종
판매수 0권

광운대학교 전자공학과를 졸업하고 동대학원 임베디드 소프트웨어 공학과에서 안드로이드와 블루투스를 전공했다. 과거 오비고에서 웹 개발자로 활동하고 있는 노드에 관심이 많은 행복 개발자다. 행복한 HMI WebApp 개발 팀에서 차량용 플랫폼에 올라가는 웹 앱을 개발하면서 많은 경험과 실력을 쌓았다. 현재 브라이니클에 근무하면서 서버와 클라이언트를 개발하며, 빅데이터 분석에 관심이 많고, 실제 데이터 분석 사례를 만들고 있다. 번역 작업을 통해 책을 읽는 모든 사람에게 꼭 도움이 되기를 바라는 마음을 늘 품고 있다. 에이콘출판사에서 출간한 [노드로 하

펼쳐보기

이 상품의 시리즈

acorn+PACKT 시리즈(총 351권 / 현재구매 가능도서 322권)

펼쳐보기

이 책과 내용이 비슷한 책 ? 내용 유사도란? 이 도서가 가진 내용을 분석하여 기준 도서와 얼마나 많이 유사한 콘텐츠를 많이 가지고 있는가에 대한 비율입니다.

    리뷰

    0.0 (총 0건)

    기대평

    작성시 유의사항

    평점
    0/200자
    등록하기

    기대평

    0.0

    교환/환불

    교환/환불 방법

    ‘마이페이지 > 취소/반품/교환/환불’ 에서 신청함, 1:1 문의 게시판 또는 고객센터(1577-2555) 이용 가능

    교환/환불 가능 기간

    고객변심은 출고완료 다음날부터 14일 까지만 교환/환불이 가능함

    교환/환불 비용

    고객변심 또는 구매착오의 경우에만 2,500원 택배비를 고객님이 부담함

    교환/환불 불가사유

    반품접수 없이 반송하거나, 우편으로 보낼 경우 상품 확인이 어려워 환불이 불가할 수 있음
    배송된 상품의 분실, 상품포장이 훼손된 경우, 비닐랩핑된 상품의 비닐 개봉시 교환/반품이 불가능함

    소비자 피해보상

    소비자 피해보상의 분쟁처리 등에 관한 사항은 소비자분쟁해결기준(공정거래위원회 고시)에 따라 비해 보상 받을 수 있음
    교환/반품/보증조건 및 품질보증 기준은 소비자기본법에 따른 소비자 분쟁 해결 기준에 따라 피해를 보상 받을 수 있음

    기타

    도매상 및 제작사 사정에 따라 품절/절판 등의 사유로 주문이 취소될 수 있음(이 경우 인터파크도서에서 고객님께 별도로 연락하여 고지함)

    배송안내

    • 인터파크 도서 상품은 택배로 배송되며, 출고완료 1~2일내 상품을 받아 보실 수 있습니다

    • 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 상품을 기준으로 배송됩니다.

    • 군부대, 교도소 등 특정기관은 우체국 택배만 배송가능하여, 인터파크 외 타업체 배송상품인 경우 발송되지 않을 수 있습니다.

    • 배송비

    도서(중고도서 포함) 구매

    2,000원 (1만원이상 구매 시 무료배송)

    음반/DVD/잡지/만화 구매

    2,000원 (2만원이상 구매 시 무료배송)

    도서와 음반/DVD/잡지/만화/
    중고직배송상품을 함께 구매

    2,000원 (1만원이상 구매 시 무료배송)

    업체직접배송상품 구매

    업체별 상이한 배송비 적용