• 시작하세요! AngularJS 프로그래밍
  • 구글이 만든 차세대 자바스크립트 MVC 프레임워크

  • 고재도 지음

  • 위키북스 오픈소스 & 웹 시리즈_059
  • ISBN: 9788998139544
  • 25,000원 | 2014년 04월 30일 발행 | 308쪽



전 세계는 지금 구글이 만든 AngluarJS에 주목한다!

2013년 구글 I/O에서 소개된 AngularJS는 현재 전 세계적으로 가장 인기 있는 자바스크립트 프레임워크로서, 지금도 수많은 AngularJS 확장 라이브러리가 쏟아져 나오고 있다. 수많은 개발자들이 AngularJS를 실제 프로젝트에 도입하기 위해 안간힘을 쓰고 있으며, AngularJS를 통해 힘든 프론트엔드 개발에 즐거움이 되살아나고 있다.

AngularJS는 구글이 만든 자바스크립트 프레임워크다. HTML의 부족한 부분을 채워주고 스파게티처럼 꼬인 소스코드를 MVC 패턴으로 풀어준다. 나아가 단일 페이지 웹 애플리케이션을 개발할 수 있게 도와주고 제이쿼리와의 뛰어난 호환성을 제공한다.

여러분도 전 세계가 주목하는 AngularJS를 맛보고 이 책을 통해 왜 전 세계가 AngularJS에 감동하는지 느끼고 이해하길 바란다.

-- 책 속으로

 

2014년에 접어들면서 HTML5와 모바일 그리고 웹 표준 준수 등 다양한 요인으로 액티브엑스와 플래시보다는 순수 자바스크립트 기반 웹 클라이언트 기술의 중요성이 크게 부각됐다. 하지만 국내의 많은 개발자들이 제이쿼리를 이용한 Ajax 기술만 있으면 액티브엑스 기술 없이 화려한 웹 애플리케이션 클라이언트를 개발할 수 있다고 생각하고 있다. 그럼 해외는 어떨까? 해외에서는 단일 페이지 웹 애플리케이션으로 점차 웹 애플리케이션 개발 트렌드가 바뀌고 있고 다양한 자바스크립트 프레임워크가 하루가 다르게 나오고 있다. 이젠 서버 프로그래밍도 Node.js를 이용해 자바스크립트로 하는 시대인 것이다. 더는 자바스크립트가 웹 페이지에서 DOM을 조작하는 데만 사용되지 않는 시대인 것이다.

작년 구글 I/O에서는 구글이 만든 자바스크립트 프레임워크인 AngularJS를 소개하는 세션이 있었다. 구 글 I/O 이전에도 인지도는 엄청났지만 구글 I/O에서의 인기 또한 대단했다. AngularJS는 지금까지 자바 스크립트 기반의 웹 기술이 발전하면서 쌓인 기술들을 프레임워크의 곳곳에 녹여냈다. 제이쿼리의 크로 스 브라우징을 지원하는 DOM 처리, Ajax 처리, 단일 페이지 웹 애플리케이션 지원, 테스트 지원, 의존관 계 주입 그리고 커스텀 요소가 여기에 해당한다. 전 세계의 프론트엔드 개발자가 AngularJS에 관심을 보이고 또 자신만의 AngularJS 기반 라이브러리를 개발해서 공유하고 있다. 국내에서도 관심이 점점 높아 지고 있다.

이 책에서는 AngularJS의 기초부터 심화까지 폭넓은 내용을 다룬다. 비록 테스트에 관해서는 다루지 않지만 그 밖의 AngularJS에 관한 내용은 최대한 모두 다루려고 노력했다. 이 책을 통해 AngularJS를 더 쉽게 이해하고 프로젝트에 잘 적용해 웹 애플리케이션 개발이 더 쉽고 재미있어지길 바란다.

-- 저자 서문 중에서

고재도

소프트웨어 엔지니어로서 체코의 솔루션 회사에서 자바스크립트 개발로 시작해 국내 SI 회사의 자바 프레임워크 개발을 거쳐 현재는 국내 통신회사에서 플랫폼 개발을 하고 있다. 다양한 외부 활동을 통해 IT 지식을 공유하고자 노력하고 있다. 현재 구글 개발자 그룹의 한국 웹테크(Korea WebTech)를 운영하고 있으며, 전자정부 표준 프레임워크 커미터로 활동 중이다.

  • 들어가며
    • AngularJS를 선택해야만 하는 이유
    • 책의 구성
  •  
  • [1부] AngularJS 시작하기
    • ▣ 01장: 프로젝트 및 개발환경 구성
      • 개발환경 구성
        • Node.js 설치
        • 예제코드 실행
      • 프로젝트 구성
        • 직접 내려받아 프로젝트 구성
        • Bower를 이용한 프로젝트 구성
        • Angular-seed 클론을 이용한 프로젝트 구성
        • 스케폴딩을 이용한 구성
  •  
    • ▣ 02장: AngularJS 살펴보기
      • AngularJS는 무엇인가?
      • TODO 웹 애플리케이션
        • AngularJS 적용
        • 데이터 바인딩과 MVC 패턴
        • 컨트롤러를 이용한 뷰 조작
        • TODO App 나머지 기능 구현
      • AngularJS의 개발 철학
      • 마무리
  •  
  • [2부] 웹 애플리케이션 개발을 위한 모든 것
    • ▣ 03장: AngularJS 부트스트랩
      • ng-app 지시자를 이용한 부트스트랩
      • 자바스크립트 API를 이용한 부트스트랩
  •  
    • ▣ 04장: 템플릿 시스템과 데이터 바인딩
      • 템플릿의 이해
      • AngularJS의 템플릿
        • 이중 중괄호와 AngularJS 표현식
      • 데이터 바인딩의 이해
      • 반복적인 데이터 표현을 위한 템플릿(반복 지시자)
      • 조건적인 데이터 표현을 위한 템플릿(조건 지시자)
      • 비즈니스 로직 처리를 위한 템플릿(컨트롤러 지시자)
      • 폼과 유효성 검사를 위한 템플릿(폼/입력 지시자)
        • 텍스트 타입 사용법
        • FormController와 NgModelController
        • 체크박스 타입 사용법
        • <select> 요소 사용법
        • CSS 클래스로 유효성 검증 결과 표현하기
        • 이벤트 처리를 위한 템플릿(이벤트 처리 지시자)
      • CSS 클래스/스타일을 동적으로 처리하기 위한 템플릿(클래스 지시자/스타일 지시자)
  •  
    • ▣ 05장: MVC - 모델, 뷰, 컨트롤러
      • 모델
      • 컨트롤러
      • $rootScope과 $scope
        • $scope의 계층구조
        • Scope 타입
        • $scope에서 사용자 정의 이벤트 처리
  •  
    • ▣ 06장: 모듈
      • 모듈을 이용한 컨트롤러 등록
      • 다른 모듈의 사용
      • 모듈과 각 컴포넌트의 물리적 파일 구조
        • 모듈의 레이어별 분류
        • 모듈의 기능별 분류
  •  
    • ▣ 07장: 지시자의 모든 것
      • HTML에서 지시자를 사용하는 방법
        • 웹 표준 준수 대비
        • 오래된 인터넷 익스플로어 지원하기
      • AngularJS가 제공하는 지시자(built-in directive)
      • 사용자 정의 지시자
        • 간단한 지시자 정의
        • 지시자 설정 객체
        • 자체 템플릿을 가지는 지시자
        • scope 설정 완전 정복
        • ngTransclude와 translude 설정
      • 외부 라이브러리를 이용한 지시자 개발
        • 데이터 바인딩 기능을 지원하는 컴포넌트 만들기
  •  
    • ▣ 08장: 의존관계 주입과 서비스
      • AngularJS에서의 서비스란?
      • AngularJS에서의 의존관계 주입
        • Module.factory를 이용한 Hello 서비스 만들기
        • $provide를 이용한 Provider 정의
        • $injector를 이용한 서비스 주입
        • 의존관계 주입(DI)을 받을 수 있는 곳
      • AngularJS가 제공하는 서비스
  •  
    • ▣ 09장: 필터(filter)를 사용하고 만들어 보자
      • AngularJS에서 제공하는 필터
      • 필터를 만들어 보자
      • 마무리
  •  
  • [3부] 단일 페이지 웹 애플리케이션으로의 진화
    • ▣ 10장: 단일 페이지 웹 애플리케이션의 이해
      • 딥 링킹(Deep Linking)
  •  
    • ▣ 11장: $route 서비스를 이용한 라우터 구현
      • ngRoute 모듈
        • $routeProvider
        • $route
        • $routeParam
  •  
    • ▣ 12장: $http 서비스를 이용한 서버 통신
      • $http 서비스
      • 단축 메서드 제공
      • $httpProvider
        • 헤더 정보 변경
        • 데이터 변환 함수 등록
  •  
    • ▣ 13장: RESTful 웹 서비스를 위한 $resource 서비스
      • MongoLab RESTful 웹 서비스
      • ngResource 모듈
      • $resource 서비스
  •  
    • ▣ 14장: $q 서비스를 이용한 비동기 처리
      • 자바스크립트 비동기 프로그래밍
      • $q 서비스
        • Promise 객체
        • Deferred 객체
      • Promise 병렬 제어
      • $http 서비스 인터셉터 등록 시 promise 활용
      • 라우팅 처리 시 promise 제어
  •  
    • ▣ 15장: 실전 북마크 웹 애플리케이션 개발
      • 북마크 웹 애플리케이션 설명
      • 북마크 웹 애플리케이션 개발 절차
      • 북마크 웹 애플리케이션 프로젝트 구성
        • 북마크 웹 애플리케이션 파일구조
      • 북마크 라우트 설정
      • 북마크 목록 조회 기능 구현
      • 북마크 검색 기능 구현
      • 북마크 상세 조회 기능 구현
      • 북마크 수정 및 삭제 기능 구현
      • 북마크 추가 기능 구현
  • p. 46

    $scope.name = "AngularJS TODO APP"; --> $scope.appName = "AngularJS TODO APP"

  • p. 58, 5줄에서

    부스트랩 --> 부트스트랩

  • p. 71, 4번째 단락에서

    3번에서 -> 위에서 마지막 단락에서 cat -> car

  • p. 72

    doc.angularjs.org -> docs.angularjs.org

  • p. 79, 9번째 줄

    화면을 갱신하는자바스크립트 코드가 --> 화면을 갱신하는 자바스크립트 코드가

  • p. 79, 18줄

    더 자세히 애기하겠다. ---> 더 자세히 얘기하겠다.

  • p. 80

    • 6번과 마찬가지로 ... -> 위 $scope.menuList = menuList 마찬가지로 ...
    • 4번에서 구매 버튼을 클릭할 때 ... --> <button ng-click="buy()" ...>에서 구매 버튼을 클릭할 때 ...
    • ...
    • 9번의 콜백 함수 ... --> 위 angular.forEach(...)의 콜백 함수 ...
  • p. 80

    불릿 리스트에서 4번, 9번이라고 설명하는 부분이 있는데 앞의 코드에서 번호 주석 부분이 누락됨(Mustache.js 사례에는 //번호 등이 있는데, angluar.js 사례에서는 //번호로 된 주석이 누락됨)

  • p. 81

    item in item track by $index -> item in items track by $index

  • p.100, select 관련 사례 코드

    ture (x) -> true

  • p. 100

    요소 사용법에서 ng-required=“ture/false" -> ng-required=“true/false"

  • p. 107, 코드 예제

    handleEvt('박스 클릭됬다.')" --> handleEvt('박스 클릭됐다.')"

  • p. 115

    $scope.userId = "jeado”;

  • p. 118, 두 번째 예제

    {{bookmakr.name}} --> {{bookmark.name}}

  • p. 118, 마지막 줄 코드

    $scope.addBookmakr --> $scope.addBookmark

  • p.122, 설명 위에서 세번째 줄

    hildCtrl (x) -> childCtrl(O)

  • p.122, 코드

    <h2>부모이름 : {{parent.name}}</h1> --> <h2>부모이름 : {{parent.name}}</h2>

    <h2>자식이름 : {{child.name}}</h1> --> <h2>자식이름 : {{child.name}}</h2>

  • p. 133, 밑에서 11번째 줄

    이름이 “bookmakrListCtrl”인 --> 이름이 “bookmarkListCtrl”인

  • p. 133

    맨 아래 var menuListTpl 관련 내용 --> (본문과 상관없는 내용이므로 삭제)

  • p.135, 상단 예제코드 중

    <input Type >...<button>...쿠기저장 --> 쿠키저장

  • p. 138, 본문 밑에서 6번째 줄

    함수를 bookmakrListCtrl.js로 만들고 --> 함수를 bookmarkListCtrl.js로 만들고

  • p. 138, 본문 밑에서 5번째 줄

    함수를 bookmakrDetailCtrl.js로 만들어 --> 함수를 bookmarkDetailCtrl.js로 만들어

  • p. 144

    date-를 사용할 지시자 => data-를 사용할 지시자

  • p. 165, 맨 마지막 소제목

    ngTransclude와 translude 설정 --> ngTransclude와 transclude 설정

  • p. 178, 밑에서 7번째 줄

    scope의 charClick이 --> scope의 chartClick

  • p. 184, 예제 2.36

    controller('mainCtrl', function ($scope, hello) {

    -->

    .controller('mainCtrl', function ($scope, hello) {

  • p. 196, 본문 2번째 줄

    메서드는 this. setDefaultLevel로 --> 메서드는 this.setDefaultLevel

  • p. 196, 본문 4번째 줄

    Lgger 서비스 프로바이더는 --> Logger 서비스 프로바이더는

  • p. 197, 위에서 7번째 줄

    프로바이더는 loggerPovider처럼 --> 프로바이더는 loggerProvider처럼

  • p. 210, date 필터 사용

    2014년 30월 18일 --> 2014년 03월 18일

  • p. 210, button 처리 부분

    ng-show="!!isEditing" --> ng-show="!!!isEditing"

  • p. 227, 밑에서 7번째 줄

    연결되는 컨틀롤러 함수에서 --> 연결되는 컨트롤러 함수에서

  • p. 255, 밑에서 3번째 줄

    사용할 수 있도. --> 사용할 수 있다.

예제코드 관련 GitHub 페이지