간편결제, 신용카드 청구할인
네이버페이 1%
(네이버페이 결제 시 적립)
NH(올원페이)카드 12% (17,430원)
(3만원 이상 결제/최대 1만원 할인)
북피니언 롯데카드 30% (13,860원)
(최대할인 3만원 / 3만원 이상 결제)
하나SK 북&카드 30% (13,860원)
(최대할인 3만원 / 3만원 이상 결제)
EBS 롯데카드 20% (15,840원)
(최대할인 3만원 / 3만원 이상 결제)
인터파크 NEW 우리V카드 10% (17,820원)
(최대할인 3만원 / 3만원 이상 결제)
인터파크 현대카드 7% (18,420원)
(최대할인 3만원 / 3만원 이상 결제)
Close

MVC 구조의 확실한 해답 AngularJS 디렉티브 : 쉽고 간편한 유지보수 및 테스트를 위한 구글의 강력한 프레임워크

원제 : Mastering AngularJS Directives

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

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

22,000원

  • 19,800 (10%할인)

    1,100P (5%적립)

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

  • 연관도서(320)

  • 사은품(2)

책소개

쉽고 간편한 유지보수 및 테스트를 위한 구글의 강력한 프레임워크

AngularJS는 웹 애플리케이션의 MVC 구조를 확실히 나누고, 쉽고 간편하게 유지보수 및 테스트를 하기 위한 구글의 강력한 프레임워크다. 이 책은 AngularJS의 핵심인 디렉티브의 개념부터 어떻게 모델과 뷰를 분리하고, 데이터를 바인딩해 HTML과 자바스크립트를 분리하는지 여러 가지 사례를 통해 디렉티브의 모든 것을 알려준다. 또한 서드파티 라이브러리와의 연동, 단위 테스트에서 통합 테스트에 이르기까지 필요한 모든 정보를 제공한다.

출판사 서평

★ 이 책에서 다루는 내용 ★

■ AngularJS 컨텍스트에서 DOM을 변경하고 변환하는 기술
■ 코어 애니메이션 서비스를 사용하는 디렉티브 활용 및 커스터마이징
■ 고급 DOM 조작을 위해 서드파티 라이브러리를 AngularJS와 통합
■ 다이내믹 템플릿을 컴파일하기 위한 디렉티브의 장점 발견
■ 디렉티브 API의 모든 옵션과 사용법 이해
■ 어떻게 그리고 왜 여러 종류의 테스트를 디렉티브에 사용하는가
■ 커스텀 디렉티브로 애플리케이션 최적화 및 강화
■ 앞으로 AngularJS 디렉티브에 어떤 것이 추가되고 현재 디렉티브 작성에 어떻게 영향을 미칠지 탐구

★ 이 책의 대상 독자 ★

자바스크립트와 AngularJS를 사용한 경험이 있는 개발자라면 이 책은 바로 여러분을 위한 것이다. 이제 막 AngularJS에 입문한 사용자라도 이 책에서 소개하는 개념들을 이해할 수 있지만 이 책에서 다루지 못한 내용은 AngularJS 관련 내용을 참조해야 할 것이다.

★ 이 책의 구성 ★

1장, '기초 다지기'에서는 디렉티브가 무엇이고 어떻게 생성하는지, 그리고 디렉티브를 작성할 때 필요한 옵션들에는 어떤 것들이 있는지 소개한다. 이 장의 주 목적은 디렉티브를 높은 수준의 관점에서 소개해 누구라도 그 의미를 쉽게 이해하도록 만드는 것이다. 이를 위해 디렉티브의 각 옵션들을 기본적인 예제를 통해 설명한다.

2장, 'stopwatch 디렉티브 생성'에서는 첫 번째로 만들 디렉티브를 소개한다. stopwatch에서는 여러 가지 설계 변경을 반복 적용해 가면서 디렉티브를 완성한다. 설계 과정 전반에 걸쳐, 디렉티브의 로직이 정확하게 동작하는지 확인하고 어떤 변화로 인해 버그가 생기지 않는지 증명하기 위한 테스트를 진행한다.
디렉티브 구현 아키텍처에 도입된 각 결정 사항에 대해 어떤 차이들이 있는지 보여주고, 내용을 자세히 들여다 보면서 토론하고 설명한다. 이 장의 전체적인 목적은 여러 애플리케이션에서 사용 가능한 유용한 디렉티브를 만들고 여러분만의 사용자 정의 디렉티브를 만들기 위해 필요한 아이디어를 얻게 하는 것이다.

3장, '외부 자바스크립트 라이브러리와 디렉티브'에서는 많은 애플리케이션들이 DOM을 고급스럽게 처리하기 위해 서드파티 라이브러리들을 어떻게 이용하는지 살펴본다. 이 라이브러리들은 AngularJS 애플리케이션과 자연스럽게 통합될 수 있고, 여전히 대다수 커뮤니티에서 만든 개념을 준수한다. 이 장의 목적은 서드파티 라이브러리를 AngularJS 애플리케이션에 통합할 때 최선의 방법이 무엇인지 보여주는 것이다.

4장, '고급 컴파일링'에서는 AngularJS의 컴파일 사이클을 자유롭게 이용하는 것이 얼마나 유용한지 알아본다. $compile 서비스를 필요로 하는 몇 가지 사례들을 보여주고 이들에 대해 자세히 논의한다. 이 장 역시 서드파티 라이브러리들, 동적 템플릿(dynamic template)과 함께 AngularJS의 스코프(scope)에 DOM을 생성하는 것이 얼마나 유용한지 살펴본다.

5장, '디렉티브 간 통신'에서는 디렉티브들이 정상적인 환경에서 매우 유용함을 보여준다. 또한 유사한 작업을 위해 여러 디렉티브를 결합해 동작시키면 더 쓸모가 있다. 디렉티브들을 연동하는 방법에는 여러 가지가 있다. 기본 스코프의 상속을 사용하는 방법도 있고 실행 컨텍스트를 공유하는 방법도 있다.
이 장은 디렉티브들이 다른 디렉티브들과 함께 동작하는 여러 가지 방법에 대해 깊이 있게 살펴본다. 서로 간의 관계가 어떻든지 두 개의 디렉티브가 협업할 수 있는 방법은 항상 있다. 이 장의 예제들이 제대로 동작하는지 보기 위해 통합 테스트하는 방법도 알아본다.

6장, '라이브 데이터를 이용한 작업'에서는 애플리케이션에서 데이터가 얼마나 중요한지 알아본다. 데이터를 위한 것이 아니라면 웹을 전면에 내세울 이유도 없을 것이다. 이 장에서는 디렉티브를 개발하는 이면에 감춰진 철학과 라이브 데이터를 디렉티브에서 어떻게 이용하는지 살펴본다.
라이브 소스로부터 데이터가 나오므로, 이 장의 모든 예제들을 설계할 때 데이터의 크기를 고려했다. 이런 생각은 많은 데이터를 다루는 디렉티브를 작성할 때 여러 가지를 고민하게 만든다.

7장, '최적화와 코드 품질'에서는 애플리케이션 속도의 중요성과 애플리케이션 코드가 민첩성을 유지할 때 수명에 얼마나 해로운지 알아본다. AngularJS는 놀랍도록 깔끔하고 빠른 코드를 작성하는 많은 기능을 제공한다. 그러나 이런 좋은 것들을 사용하기 위해서는 그만큼의 책임이 뒤따른다.
AngularJS는 웹 페이지를 아주 느리게 만드는 비효율적인 방법으로 사용될 수 있다. 이 장에서는 디렉티브를 작성할 때 조심해야 할 것들에 대해 알아본다. 디렉티브가 많은 양의 바인딩(binding)을 생성하는 주범이므로 어떻게 바인딩 수를 최소한으로 유지하는지 살펴본다.

8장, '디렉티브와 애니메이션'에서는 애니메이션을 통합할 때 왜 디렉티브가 중요한지를 살펴본다. 이것은 AngularJS 애니메이션이 디렉티브를 따라 바로 동작하는 또 다른 캡슐화 계층을 생성하는 방식으로 내장되었기 때문이다. 이 장에서는 코어에 있는 디렉티브에서 애니메이션 서비스를 사용하는 방법과 애니메이션을 사용하는 사용자 정의 디렉티브를 작성하는 방법을 알아본다.

9장, '마무리'에서는 이 책의 전체 내용을 요약한다. 이 책에서 참조하는 관련 내용을 언급하고 각각에 대해 대략적으로 살펴본다. 전반적인 목적은 이 책에서 설명한 아이디어와 개념들을 완성하는 것이다.

목차

1 기초 다지기
__디렉티브 소개
____디렉티브 정의 객체 API
________priority
________terminal
________scope
________controller
________require
________controllerAs
________restrict
________template
________templateUrl
________replace
________transclude
________compile
________link
________디렉티브 정의 객체를 마치며
__요약

2 stopwatch 디렉티브 생성
__stopwatch 파헤치기
____stopwatch 요구사항
____테스트 기초
____테스트 생성
__stopwatch 작성
____stopwatch의 비즈니스 로직
________비즈니스 로직 테스트
____stopwatch 최적화
________stopwatch 필터
__요약

3 외부 자바스크립트 라이브러리와 디렉티브
__서드파티 라이브러리 통합
__서드파티 라이브러리를 사용한 디렉티브 테스트
__gauge.js 파일 랩핑
____gauge 디렉티브 테스트
____gauge 디렉티브 작성
________스코프 상호작용 테스트 작성
__fullCalendar.js 랩핑
____calendar 디렉티브 소개
____fullCalendar 디렉티브 테스트
________calendar 초기화와 MVC 기능 테스트
____fullCalendar 디렉티브 작성
__요약

4 고급 컴파일링
__DOM 컴파일의 일반적인 사례
__디렉티브에서 트랜스클루전 사용
____트랜스클루전 베일 벗기기
__재귀적인 디렉티브 생성
____사용자 정의 재귀 tree 디렉티브
____transclusion과 templateUrl을 사용한 treeNode 디렉티브
________treeNode 디렉티브 테스트
________treeNodeTemplate 디렉티브
____트랜스클루전만 사용하는 treeNode 디렉티브
________treeNode 디렉티브 테스트
________treeNodeNoTemplate 디렉티브
__템플릿과 여러 가지 값 컴파일
__미디어 플레이어 디렉티브 소개
____미디어 플레이어 디렉티브 요구사항
____미디어 플레이어 디렉티브 테스트
____미디어 플레이어 디렉티브 작성
________미디어 플레이어 디렉티브 파헤치기
____고급 템플릿 활용
________mediaelement 템플릿
________flowplayer 템플릿
__요약

5 디렉티브 간 통신
__디렉티브 통합 테스트
____통합 테스트
__스코프 객체를 사용한 통신
____자식 스코프를 이용한 통신
____wasFast 디렉티브 생성
________단위 테스트
________통합 테스트
________wasFast 디렉티브 구현
____fastRunner 디렉티브 작성
________통합 테스트
________fastRunner 디렉티브 구현
__독립 스코프를 이용한 통신
____$rootScope를 이용한 통신
____다른 디렉티브에 방송
____미디어 플레이어 간 통신
________bbBroadcastingPlayer 디렉티브 통합 테스트
________bbBroadcastPlayer 디렉티브 구현
__컨트롤러와 협업
____require 기본
____bbPlayer 디렉티브의 컨트롤러 사용
________통합 테스트
________bbPlayer, bbPlayerContainer 디렉티브 구현
____fastClicker 디렉티브 생성
________통합 테스트
________fastClicker 디렉티브 작성
________스톱워치 연결
__요약

6 라이브 데이터를 이용한 작업
__디렉티브를 조정하는 기술
____$q 라이브러리
____데이터 변경을 어떻게 감시해야 할까?
________$rootScope.data에 대한 깊은 감시
________$rootScope.data에 대한 얕은 감시
__디렉티브가 책임을 질 수 있다
____데이터를 제어하는 디렉티브 테스트
________bbPhoneDetails 테스트
____bbPhoneDetails 디렉티브 작성
__D3로 작업
________유튜브 조회수 막대 차트
________stockTicker 디렉티브
__요약

7 최적화와 코드 품질
__AngularJS 코드 품질
____템플릿의 중요성
____필수 DOM 조작
__디렉티브 최적화
____성능 모니터링 도구
____digest 싸이클
__더 적게 바인딩해 더 빠른 결과 얻기
____bbOneBinders 디렉티브로 문제 해결
________bbOneBinders 디렉티브
________bbOndeBinders 테스트
__요약

8 디렉티브와 애니메이션
__애니메이션 제공
__CSS 기반 애니메이션
____ngClass와 트랜지션을 함께 사용
____ngClass와 애니메이션을 함께 사용
____ngIf와 트랜지션을 함께 사용
__자바스크립트 기반 애니메이션
____커스텀 effeckt.CSS 애니메이션
__요약

9 마무리
__디렉티브 블록들
__서드파티 라이브러리
__컴파일 주기
__디렉티브 테스트
__디렉티브 간 통신
__품질과 성능
__애니메이션
__요약

본문중에서

AngularJS는 매일 변화하는 웹 개발 분야에 새로운 지평을 열었다. 사람들이 AngularJS의 방향성에 동의하는 이유는 캡슐화와 분리를 독립된 영역으로 보는 직교적 관점 때문일 것이다. 구조적 영역 안으로 로직을 분리한 것은 AngularJS만의 장점이다. 그리고 이것은 개발 시 도메인 로직에 집중하게 해준다.

디렉티브는 AngularJS 애플리케이션 내에서 만들 수 있는 가장 큰 캡슐화 형식이다. 디렉티브가 모델(model)로부터 뷰(view)를 분리하는 데 초점을 맞추고 있으므로 이는 맞는 말이다. 수년 동안 개발자들은 비즈니스 로직을 뷰와 분리하기 위해 다양한 종류의 클라이언트 로직들을 결합해왔다. 뷰와 모델의 분리는 최근 웹 애플리케이션들에 많은 영향을 주었고 AngularJS 디렉티브의 핵심 사상이 바로 모델과 뷰의 분리다.

많은 사람들이 디렉티브가 AngularJS에서 가장 배우기 어렵다고 말한다. 이것은 디렉티브가 기존 자바스크립트 방식과 전혀 다른 새로운 접근을 시도하기 때문이다. HTML과 자바스크립트의 관계를 처리하기 위해 선언적 접근을 시도하는 라이브러리는 많지 않다. 처음에는 이 새로운 개념을 이해하는 것이 쉽지 않으나 한 번 잘 이해하면 이후에는 빠르게 개발할 수 있다.

단순한 디렉티브 혹은 여러 개의 디렉티브를 결합해 다양한 문제들을 해결할 수 있다. 앞으로 우리는 간단한 디렉티브들을 만드는 방법을 살펴보고, 어떤 문제의 해결책으로 디렉티브를 즉각 생각해낼 수 있게 훈련할 것이다. 이 책의 각 단계들은 적절한 데이터 모델을 선택하고, 데이터를 뷰에 효과적으로 보여주고, 데이터에 변경이 발생하면 즉각 반영하는 아이디어를 기반으로 구성했다.

디렉티브를 잘 이해하면 많은 문제들을 디렉티브로 해결할 수 있다. 모든 애플리케이션에서 사용 가능한 중요한 디렉티브들은 AngularJS 코어에 포함되어 있다. 이 책은 다양한 목적의 디렉티브들을 만들기 위해 AngularJS 옵션들을 어떻게 사용하는지 보여줄 것이다.

이 책에서는 다양한 형태의 디렉티브 예제들을 보여준다. 스톱워치(Stop Watch), 스톱 라이트(Stop Light), 미디어 플레이어(Meida Player), 주식 차트(Stock Chart)가 있으며 함께 결합되어 동작할 뿐만 아니라 개별적으로도 동작한다. 모든 디렉티브에 대해 상용 소프트웨어 수준의 구현과 테스트를 진행한다.
(/ '지은이의 말' 중에서)

웹 프론트 프레임워크 중 많은 관심을 받고 있는 프레임워크로는 ExtJS, BackboneJS 등이 있다. 하지만 이들 프레임워크들은 MVC 구조 안에서 로직과 뷰의 영역을 분명하고 확실하게 분리시키지 못했다. 그리고 애플리케이션 테스트와 유지 및 보수도 쉽지 않았다. 이런 문제들을 해결하고자 등장한 구세주가 구글의 AngularJS다.

AngularJS는 빠르게 변화하는 웹 환경에 딱 맞는 프레임워크라 해도 과언이 아니다. AngularJS 웹 애플리케이션은 다양한 서드파티 라이브러리와 자유롭게 연동할 수 있고, 그동안 프론트엔드 개발에서는 힘들었던 테스트 코드마저 쉽게 작성할 수 있도록 도와준다. 또한 서드파티를 이용한 단위 테스트부터 통합 테스트까지 모든 부분에서 테스트를 할 수 있는 환경을 제공한다.

특히, 이 책에서 다룰 디렉티브는 AngularJS의 핵심이며 꽃이라 할 수 있다. 이 책은 다양한 사례와 상세한 코드를 제공해 디렉티브의 장점을 빠르고 쉽게 익힐 수 있도록 도와준다. 디렉티브와 서드파티 라이브러리를 활용해 DOM 처리 방법을 자연스럽게 이해하고 어떻게 디렉티브 간에 통신하며 서로 결합해 컨텍스트를 공유하는지 살펴본다. 또한 디렉티브가 많은 양의 데이터를 바인딩할 때 생기는 성능 저하를 최적화하는 방법을 보여 줄 것이다.

이 책을 통해 기존 프레임워크와 AngularJS가 각각 어떻게 모델과 뷰를 분리하는지 이해할 수 있을 것이다. 또한 AnguarJS 디렉티브를 이용해 자신만의 태그와 프로퍼티를 만들어 HTML을 확장하고 모듈화할 수 있게 되길 바란다.

AngularJS 프레임워크로 MVC 구조의 웹 애플리케이션을 구상 중이라면 이 책은 여러분에게 훌륭한 디렉티브(Directive)가 될 것이다.
(/ '옮긴이의 말' 중에서)

저자소개

조쉬 쿠르츠(Josh Kurz) [저] 신작알림 SMS신청 작가DB보기
생년월일 -
출생지 -
출간도서 0종
판매수 0권

프론트엔드 기술 영역에 새로운 이론과 컴퓨터 과학 개념을 지속적으로 도입하려 노력하는 클라이언트 전문가다. 터너(Turner)에서 일할 때 AngularJS를 사용해 매우 빠른 속도로 쓸 만한 데이터 시각화 애플리케이션을 만들 수 있음을 성공적으로 보여줬다. 또한 오픈소스에 열정을 가지고 있으며 오픈소스가 자신이 성공한 이유라고 믿는다. 현재 하는 일 외에도 주짓수 검은 띠를 따기 위해 열심히 연습 중이다.

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

예전부터 웹 UI, UX에 관심이 많았으며 번역 및 개발을 취미로 삼고 있다. 여러 가지 배우고 싶은 욕심은 많지만 시간 부족만 탓하고 있다. 현재는 웨어러블 디바이스의 AOSP 펌웨어와 모바일 애플리케이션 및 서버를 개발 중이다.

역자의 다른책

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

웹 애플리케이션 서버 개발을 시작으로 빅데이터, IoT에 이르기까지 다방면의 일을 접하면서 늘 웹 애플리케이션을 함께 개발해 왔다. 웹 기술은 선택이 아닌 필수로 생각하며, 항상 트렌드에 맞춰 배워 나가려 노력하고 있다. 현재는 안드로이드, iOS 같은 모바일 환경에서의 웹 기술에도 관심이 많다.

이 상품의 시리즈

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

펼쳐보기

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

    리뷰

    0.0 (총 0건)

    기대평

    작성시 유의사항

    평점
    0/200자
    등록하기

    기대평

    4.0

    교환/환불

    교환/환불 방법

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

    교환/환불 가능 기간

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

    교환/환불 비용

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

    교환/환불 불가사유

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

    소비자 피해보상

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

    기타

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

    배송안내

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

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

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

    • 배송비

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

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

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

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

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

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

    업체직접배송상품 구매

    업체별 상이한 배송비 적용