Top

닷넷 개발자를 위한 AngularJS [프레임워크를 사용한 단일 페이지 웹 애플리케이션 개발]

  • 원서명Learning AngularJS for .NET Developers (ISBN 9781783986606)
  • 지은이알렉스 팝(Alex Pop)
  • 옮긴이이승준
  • ISBN : 9788960778634
  • 20,000원
  • 2016년 05월 27일 펴냄
  • 페이퍼백 | 228쪽 | 188*235mm
  • 시리즈 : acorn+PACKT, 웹 프로페셔널

책 소개

요약

닷넷 개발자들은 마이크로소프트 비주얼 스튜디오라는 막강한 개발 툴을 사용한다. 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를 안다는 가정 하에서 쓰여졌다.

지은이 소개

알렉스 팝(Alex Pop)

컴퓨터공학 학사 학위를 가진 전문 소프트웨어 개발자이며 12년의 상용 닷넷 애플리케이션 제작 경력을 갖고 있다. ISV에서 근무하며 기업 자원 기획 애플리케이션, 콘텐츠 관리 시스템, 보험금융 소프트웨어 제품을 만들었으며 현재 웹 애플리케이션 개발자로서 고등교육 분야에서 일하고 있다. 개발자 블로그인 http://alexvpop.blogspot.co.uk에는 닷넷, 자바스크립트, 그리고 다양한 소프트웨어 엔지니어링 주제에 관한 기술 자료들이 있다.

옮긴이의 말

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

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

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

옮긴이 소개

이승준

과거에 한아시스템에서 소프트웨어 엔지니어로 근무했으며, 현재 프리랜서로 일하고 있다. 틈틈이 중고등학생 수학을 지도하고 있어 컴퓨팅 환경과 학습의 접목에 관심이 많다. 『Boogazine JFC PROGRAMMING』, 『Boogazine Visual J++ 6.0』, 『Java Workshop 2.0 21일 완성』을 집필했고, 『JAVA 서블릿 & JSP 프로그래밍 한꺼번에 끝내기』, 『XML 기본+활용 마스터하기』를 편저했다. 『INSIDE SECRETS VB6 개발자핸드북』, 『VISUAL C++ 6 21일 완성』 등을 번역했으며, 에이콘출판사에서 출간된 『(개정판) C & C++ 시큐어 코딩』(2015)을 번역했다.

목차

목차
  • 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 사용
    • 템플릿 캐싱
    • 요약

도서 오류 신고

도서 오류 신고

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

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

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