추가 적립 안내

닷넷 개발자들은 마이크로소프트 비주얼 스튜디오라는 막강한 개발 툴을 사용한다. AngularJS를 이런 비주얼 스튜디오에서 개발할 수 있다면 훨씬 수월한 작업을 할 수 있다. 이 책은 닷넷 개발자가 자신의 작업에 AngularJS를 도입할 수 있는 방법을 알려준다. AngularJS가 지원하는 프론트엔드 컴포넌트로 시작해서 ServiceStack 강화 웹 서비스는 물론이고, ASP.NET MVC 애플리케이션 등 전반을 다룬다. 부담스럽지 않은 책의 내용과 분량으로 빠른 시간 내에 AngularJS의 정체와 능력을 파악해 금방 현업에 적용할 수 있을 것이다.

★ 이 책에서 다루는 내용 ★

■ 사용자 인터페이스의 원형 제작을 위한 독자적인 AngularJS 애플리케이션 만들기
■ AngularJS로 복잡한 양식을 검증하고 부트스트랩을 사용해 양식 스타일 갖추기
■ 싱글 페이지 애플리케이션과 궁합이 맞는 RESTful 웹 서비스 만들기
■ 웹 서비스 요청에 대해 자동 검증을 구현하여 판에 박힌 코드 줄이기
■ AngularJS로 웹 서비스를 사용해 애플리케이션 로직의 부담을 줄이고 안전하게 하기
■ AngularJS와 웹 서비스 코드를 테스트하여 소프트웨어 배포의 질을 향상시키기
■ 애플리케이션의 규모를 꾸준히 키울 수 있게 자바스크립트 코드를 체계화하고 파일 조직하기

★ 이 책의 대상 독자 ★

이 책은 이미 웹 애플리케이션이나 웹 서비스를 제작한 적이 있고 HTML, 자바스크립트, CSS에 대한 기본 지식을 갖춘 닷넷 개발자를 대상으로 한다.

★ 이 책의 구성 ★

1장, ‘AngularJS 소개’에서는 AngularJS를 사용해 HTML을 어떻게 조작하는지를 알아본다. 또한 AngularJS의 핵심 사항에 대해 설명한다. AngularJS 아키텍처의 하이레벨 개요 이후로는 더 복잡한 예제를 다뤄서 어떻게 데이터 바인딩이 동작하고 사용자 이벤트에 어떻게 응답하는지도 알아본다. 1장에서는 AngularJS 애플리케이션에 필수인 자바스크립트 패턴 개요, 그 다음에 AngularJS 바인딩 블록 개요로 마무리한다.

2장, ‘비주얼 스튜디오에서의 AngularJS 클라이언트 측 애플리케이션 생성’에서는 비주얼 스튜디오를 사용해 AngularJS 애플리케이션을 어떻게 만드는지를 알아본다. AngularJS NuGet 패키지를 사용해 개발 환경을 설정하는 검토 단계를 거친 후, 프로젝트 구조를 조직함에 있어서 AngularJS 애플리케이션 제작의 작업흐름과 최선의 관행들을 살펴본다. 마지막으로 복잡한 AngularJS 애플리케이션 제작을 설명한다.

3장, ‘AngularJS용 닷넷 웹 서비스 생성’에서는 RESTful 웹 서비스에 관한 지식, AngularJS에 가장 잘 맞는 닷넷 웹 서비스 프레임워크를 어떻게 사용하는지, 그리고 AngularJS용 웹 서비스 자원을 어떻게 만드는지를 알아본다. REST 원칙을 간단히 살펴보고 왜 RESTful 웹 서비스가 AngularJS와 함께 아주 잘 동작하는지에 대해 논의한다. 닷넷 웹 서비스 프레임워크, 서비스 스택의 개요를 다루어 2장의 AngularJS 예제에 사용할 필수 웹 서비스 자원을 만드는 검토 단계로 넘어갈 것이다.

4장, ‘AngularJS, ASP.NET MVC, ServiceStack 애플리케이션 생성’에서는 AngularJS 애플리케이션을 ASP.NET MVC와 ServiceStack에 어떻게 통합할지, 그리고 제품화 가능 애플리케이션을 어떻게 만들지를 알아본다. ASP.NET MVC 개요를 알아본 후, ASP.NET MVC와 AngularJS를 결합할 시기에 관해 설명한다. ASP.NET MVC 라우팅을 어떻게 설정할 것인지, AngularJS 애플리케이션을 어떻게 안전하게 할 것인지의 검토 단계는 5장에서 다룰 것이며 그 장에서 AngularJS와 백엔드 통합에 필요한 추가작업에 대한 결론을 내릴 것이다.

5장, ‘AngularJS 애플리케이션 테스팅과 디버깅’에서는 AngularJS 컴포넌트의 테스트와 디버그 방법, 웹 서비스의 테스트 방법, 그리고 단대단(end-to-end) 테스트 방법을 알아본다. 그 다음 주제로는 웹 서비스 엔드포인트가 왜 중요한지, 그 포인트를 어떻게 테스트할지, 그리고 IE 8 지원에 어떤 추가 작업이 필요한지를 설명한다.

6장, ‘고급 AngularJS 주제’에서는 국제화, 애니메이션, JSONP와 CORS 고려, 템플릿 캐싱에 관해 알아본다.

★ 지은이의 말 ★

최근 2, 3년간 웹 개발 상황은 향후 대세가 스마트폰과 태블릿이 될 정도로 극적으로 변모했다. 모바일 웹 교통량이 2013년만해도 상당히 늘어 전체 웹 교통량의 거의 1/3에 달했으며 이 증가세는 당분간 계속될 것이라고 예측된다. 이제 웹사이트는 광범위한 장치와 폼 팩터(form factor)로 운영될 것이므로 다양한 브라우저 클라이언트를 지원해야 한다. 하지만 자바, 어도비 플래시, 실버라이트(Silverlight)와 같은 브라우저 플러그인을 바탕으로 한 웹 애플리케이션은 이들 플러그인이 모든 장치에서 가능하지 않거나 지원하지 않는 문제점을 드러냈다.

이러한 변화에 발 맞추어 모든 주요 브라우저 업체는 HTML5와 CSS3 같은 웹 표준과 ECMAScript 5.1, 그리고 다가올 ECMAScript 6와 같은 자바스크립트 표준을 정의하고 구현하는 작업에 속도를 높였다. 이들 표준 모두가 마무리되거나 완전하진 않지만 모든 업체에서 계속적으로 브라우저를 발표하면서 표준 지원, 그리고 클라이언트 측 콘텐츠와 코드의 성능을 계속 향상시켰다. 더 커진 개발 커뮤니티도 다양한 도구와 라이브러리를 제공해 표준화 노력에 한 몫을 했다. 이들 도구와 라이브러리는 구형 브라우저에까지 웹 표준 지원을 확대했고, 공통 프로그래밍 모델에서 비슷한 기능의 각기 다른 브라우저 구현들을 하나로 통합했다.

개방형 표준, 도구, 라이브러리에 바탕을 둔 새로운 웹 개발 생태계가 출현했다. 그것은 HTML, CSS, 자바스크립트를 구닥다리로 여기는 것이 아니라 오히려 포용하면서 최근 웹 애플리케이션 제작의 확고한 기반으로 사용했다. 이런 상황에서 브라우저 플러그인에 바탕을 둔 애플리케이션은 HTML, CSS, 자바스크립트에 바탕을 둔 새 버전으로 점차 교체됐다. 콘텐츠를 나타내고 조작하기 위해 클라이언트 브라우저 능력을 최대한 활용하는 데 초점을 맞추다 보니 싱글 페이지 애플리케이션(SPA, single-page application)이라는 새 형태의 애플리케이션을 채택하게 됐다. 이것은 구글 메일과 구글 지도 웹 애플리케이션으로 인기를 끌게 됐는데, 이들 애플리케이션은 반응이 뛰어나고 사용하기에 쉬우며 데스크톱 애플리케이션과 유사한 룩앤필(look and feel)을 갖추었다. 싱글 페이지 애플리케이션은 대체로 초기 애플리케이션 요청에 따라 서버 측에서 준비해 준 내용과 초기 자원을 확보해 두고, 그 이후의 모든 요청에 대해서는 클라이언트 측 코드를 사용해 필요한 자원을 로드해 내용을 표시한다. 또한 싱글 페이지 애플리케이션에는 물리적 진입점 역할을 하는 하나 이상의 정적 페이지가 있다. 마이크로소프트와 구글은 원도우 스토어 앱과 크롬 앱 형태의 자사 운영체제용 소프트웨어 개발 킷에서 이런 형식의 애플리케이션에게 일급객체를 만들어 주었다. 크로스 플랫폼 모바일 개발에서도 폰갭/아파치 코르도바와 같은 프레임워크에 있는 HTML, CSS, 자바스크립트를 받아들였다. 오피스용 앱, 그리고 오피스 2013의 셰어 포인트와 단품인 셰어포인트 2013용 앱에서 마이크로소프트가 도입한 것과 같이 싱글 페이지 애플리케이션은 개발 모델에 있어 소비자 중심의 애플리케이션에서 기업 중심의 애플리케이션으로 변화했다.

싱글 페이지 애플리케이션을 포함한 최근 웹 애플리케이션 제작에는 반응형 웹 디자인(responsive web design, 애플리케이션이 브라우저 클라이언트 분석과 방향에 잘 적용될 경우)과 단계적 향상(애플리케이션이 브라우저 클라이언트 능력과 이용가능 네트워크 연결에 바탕을 둔 다른 콘텐츠를 제공할 경우)과 같이 개발 방법을 잘 채택해야 한다. 빠른 원형 만들기의 요구, 풍부한 클라이언트 기능, 큰 규모의 자바스크립트 코드 기반을 유지 관리해야만 하는 현실에선 전형적인 데스크톱 애플리케이션 개발과 비교할 때 개발 과정이 도전적이고 비용이 들게 마련이다.

2006년 이후로 제이쿼리 출현과 대량 채택, 그리고 그 플러그인 생태계로 인해 리치 클라이언트(rich client) 특징 문제가 해결됐다. 점점 더 복잡한 자바스크립트 코드기반은 2008년에 QUnit, 2010년엔 재스민(Jasmine)과 같은 테스트 프레임워크 채택, 그리고 2010년에 Backbone.js와 Knockout.js 같은 새 애플리케이션 프레임워크가 다뤄지기 시작했다. 애플리케이션 프레임워크는 ASP.NET 모델 뷰 컨트롤러(MVC, Model-View-Controller) 같은 서버 측 웹 애플리케이션 프레임워크에 공통인 소프트웨어 디자인 패턴의 유도체를 구현 중에 있었다. 이 패턴은 애플리케이션 데이터 같은 컴포넌트, 모델이 나타내는 비즈니스 규칙, 뷰(View)가 나타내는 모양이나 형식의 애플리케이션 데이터 표현 간에 개별로 구분한다. 컨트롤러 컴포넌트는 중앙에 자리잡고 모델과 데이터를 주고받으며 뷰를 업데이트하거나 모델에 전달되는 뷰 변경 사항에 응답한다. 이러한 추상화는 더 좋은 코드 재사용(여러 뷰는 동일한 모델을 사용할 수 있음), 테스트 가능성(컨트롤러는 뷰로부터 격리되어 테스트될 수 있음), 더 효율적인 개발 작업흐름(예를 들면 개발자가 컨트롤러에서 작업하는 동안, 디자이너는 뷰를 수정할 수 있음)과 같은 이점을 준다.

같은 시기에 AngularJS라는 또 다른 자바스크립트 프레임워크가 구글에서 개발됐다. 이 프레임워크는 MVC 패턴을 바탕으로 하고 있는데, 강력한 점은 새 요소와 서술적 행동을 추가해 HTML을 향상시키고 확장할 수 있으며 모듈적이고 설정 가능한 코드 유닛을 사용해 시작부터 테스트될 수 있었다. 2012년에 1.0 버전을 필두로 2013년부터 그 인기가 점점 올라가더니 2013년 후반에 1.2 버전이 나오고 2014년 1월에 ng-conf라는 첫 번째 회의가 개최되면서 호황기를 맞았다.

마이크로소프트 사는 싱글 페이지 애플리케이션의 대중성에 발 맞춰 비주얼 스튜디오 2012에 이러한 새 애플리케이션 패러다임에 대해 지원하기 시작했다. 비주얼 스튜디오 2013에서는 지원이 강화되어 최근 두 개의 비주얼 스튜디오 확장으로 AngularJS를 훌륭하게 지원한다. 이제 닷넷 개발자라면 AngularJS를 배워야 할 때가 무르익었다.

이 책의 주 초점은 닷넷 개발 도구와 프레임워크라는 상황에서 AngularJS로 최신 웹 애플리케이션을 빠르게 원형으로 만들어 제작하는 것이다. 이 책은 독자가 ASP.NET, ASP.NET MVC, Silverlight, WCF와 같은 마이크로소프트 기술을 사용해 이미 웹사이트, 웹 애플리케이션, 또는 웹 서비스를 구축했고 HTML5, CSS3, JavaScript, 제이쿼리, ASP.NET MVC를 안다는 가정 하에서 쓰여졌다.

★ 옮긴이의 말 ★

내가 생각하는 좋은 기술 입문서란 짧은 시간에 그 기술에 대한 핵심을 파악할 수 있게 하는 책이다. 힘들게 기술을 익혀 놓았는데 자신의 현업에 다른 기술이 더 알맞다는 점을 알게 됐을 때는 정말 낭패다. 이런저런 기술을 적용하다 아까운 시간을 허비하기도 한다.

이 책은 AngularJS를 처음 접하는 닷넷 개발자들에게 단기간에 AngularJS 애플리케이션 제작 방식을 맛볼 수 있게 한 책이다. 저자도 밝혔듯이 이 책을 뚝딱 마치고 나면 어느새 상용 애플리케이션을 만드는 데 적용할 수 있는 자전거 대여 AngularJS 애플리케이션 하나가 완성된다. 이 애플리케이션을 단계별로 만들어가며 필요한 기술을 하나하나 익히게 하는 방식은 부담스럽지도 않고 독자가 즐겁게 책장을 넘길 수 있다.

저자의 빠른 내용 전개는 다소 생략하고 넘어가는 것처럼 보이지만 오히려 내용을 간결하게 해 군더더기 없게 만든다. 독자들은 금방 이 책을 덮고 더 고급 기술로 이행할 수 있을 것이다. 이 책을 통해 비주얼 스튜디오라는 막강한 도구로 수월하게 AngularJS 애플리케이션을 제작할 수 있다는 점에 국내 독자들이 만족할 거라 믿는다.

1장 AngularJS 소개
__예제에서 AngularJS 나타내기
__제이쿼리 예제
____AngularJS 예제
____AngularJS 컨트롤러 소개
____AngularJS 아키텍처 개요
____모델-뷰-컨트롤러 패턴
____AngularJS 애플리케이션 구조
______AngularJS 애플리케이션 부트스트랩
______모듈 의존성 정의
__AngularJS 애플리케이션에서 사용되는 자바스크립트 패턴과 관행
____즉시 실행 함수 표현식
____모듈 노출 패턴
____자바스크립트의 strict 모드
__의존성 주입
__AngularJS 서비스 도입
__디렉티브
____ngRepeat 디렉티브
____ngInclude 디렉티브
____사용자 정의 디렉티브 생성
__필터
__요약

2장 비주얼 스튜디오에서 AngularJS 클라이언트 측 애플리케이션 생성
__비주얼 스튜디오를 NuGet과 함께 사용해 AngularJS와 관련된 라이브러리 관리
____NuGet 도입
____AngularJS용 비주얼 스튜디오 확장 사용
__클라이언트 측 컴포넌트 원형 생성
__클라이언트 측 코드 조직
__AngularJS를 자바스크립트 라이브러리와 통합
____네이티브 자바 라이브러리와 AngularJS
____관련 업체 사용자 인터페이스 라이브러리와 AngularJS
__라우팅
__자전거 대여 관리 애플리케이션 생성
____애플리케이션 레이아웃 생성
____자전거 뷰 구현
______자전거 인덱스 뷰
______자전거 새 뷰
______자전거 편집 뷰
____고객 뷰 구현
____대여 뷰 구현
__요약

3장 AngularJS용 닷넷 웹 서비스 생성
__RESTful 웹 서비스
__RESTful 웹 서비스 프레임워크 선택
__ServiceStack은 왜 AngularJS와 궁합이 좋은가?
__ServiceStack 개요
____ServiceStack 시작 프로젝트 배치
____ServiceStack 웹 서비스 생성
____ServiceStack C# 클라이언트 사용
____ServiceStack 하부구조
______라우팅
______요청과 응답 필터
______의존성 주입
______자동 검증
__샘플 애플리케이션용 웹 서비스 메소드 생성
____ServiceStack 프로젝트 구조
____자전거 관련 웹 서비스 구현
______GET 웹 서비스 메소드
______POST 웹 서비스 메소드
______PUT 웹 서비스 메소드
______PUT와 POST 요청 DTO 병합
__ngResource 모듈을 사용해 AngularJS에서 RESTful 웹 서비스 호출
____$resource 서비스 사용
____자원 클래스 메소드
____자원 인스턴스 메소드
____사용자 정의 자원 메소드
__요약

4장 AngularJS, ASP.NET MVC, ServiceStack 애플리케이션 생성
__ASP.NET MVC를 애플리케이션 백본으로 사용
____ASP.NET MVC를 사용하는 이유
____주 샘플 애플리케이션에 ASP.NET MVC 추가
____ASP.NET MVC를 ServiceStack에 통합
____ASP.NET MVC와 AngularJS에 대한 라우팅 고찰
____AngularJS 파일을 위한 줄이기 특징과 ASP.NET 번들링 사용
__AngularJS 애플리케이션 안전하게 하기
____ServiceStack.Mvc 라이브러리 사용
____ServiceStack 보안 하부구조의 빌딩 블록
____AuthFeature 플러그인 도입
____웹 서비스용 인증 구현
____ASP.NET MVC 컨트롤러용 인증 구현
__서버 측 애플리케이션의 초기 데이터를 AngularJS 애플리케이션으로 보내기
__AngularJS가 벡엔드로 잘 동작하게 하는 방법
____오래 끄는 연산 동안 대기 시간 처리
____예외 처리하기와 일반 애니메이션 구현
______$http 인터셉터 추가
______모든 웹 서비스 호출에 대해 스피너 애니메이션 구현
__데이터베이스 지속성 추가
____AuthFeature 플러그인에 데이터 의존성 추가
____웹 서비스에 대한 데이터베이스 지속성 추가
____Bicycle 클래스 지속시키기
____OrmLite API를 사용하기 위해 BicycleRepository 변경
__요약

5장 AngularJS 애플리케이션 테스팅과 디버깅
__AngularJS 애플리케이션 테스트 개요
____Node.js 도입
____Node.js 환경 준비
__AngularJS 컴포넌트 테스트 유닛
____카르마 설치
____카르마 설정
____재스민으로 AngularJS 유닛 테스트 생성
______재스민 주요점
______첫 번째 테스트에 ngMock 모듈 사용
______$httpBackend로 원격 서버 호출 흉내내기
__AngularJS 애플리케이션 단대단 테스트
____프로트랙터 설치
____프로트랙터 설정
____프로트랙터 테스트 작성
__웹 서비스 엔드포인트 테스트
____자체 호스팅되는 ServiceStack 웹 서비스 설정
____xBehave.net에 BDD 테스트 추가
__유닛 테스팅 닷넷 코드
__AngularJS 애플리케이션 디버그 요령
__인터넷 익스플로러 8과 9 등의 구형 브라우저와 HTML5 검증에 대한 지원
__요약

6장 고급 AngularJS 주제
__국제화와 현지화
____ngLocale 모듈 사용
____angular-dynamic-locale 모듈 사용
____기타 국제화 관련 주제
__AngularJS 애니메이션 사용
__원격 웹 서비스로 작업
____JSONP 사용
____CORS 사용
__템플릿 캐싱
__요약