Top

AngularJS 웹 애플리케이션 개발 블루프린트 [최소한의 코드로 완벽하게 동작하는 애플리케이션 만들기]

  • 원서명AngularJS Web Application Development Blueprints (ISBN 9781783285617)
  • 지은이빈치 루퍼스(Vinci Rufus)
  • 옮긴이조승진
  • ISBN : 9788960778771
  • 25,000원
  • 2016년 06월 29일 펴냄
  • 페이퍼백 | 328쪽 | 188*235mm
  • 시리즈 : acorn+PACKT, 웹 프로페셔널

책 소개

요약

지금부터는 웹 페이지가 아니라 웹 애플리케이션이다. 현재 자바스크립트 춘추전국 시대 같은 상황에서 AngularJS는 선택에 대한 별다른 고민 없이 개발자들에게 지금까지의 웹 개발에서 많이 누려보지 못한 장점들을 제공한다. DOM과의 데이터 바인딩, 의존성 주입을 제공하고 테스트하기 쉬운 코드를 작성할 수 있게 하며 다양한 지시자를 통한 선언적 프로그래밍도 지원한다. 이 책은 다양한 예제를 통해서 AngularJS처럼 생각하는 방법을 길러준다.

이 책에서 다루는 내용

■ AngularJS와 싱글 페이지 애플리케이션의 핵심 요소에 대한 이해도 향상

■ 전자상거래, 콘텐츠 관리 시스템(CMS), SNS 앱, 모바일 웹앱 등과 같은 다양한 영역을 아우르는 완전하고 전문적인 애플리케이션 개발

■ REST 웹 서비스, 페이스북 API와의 연동

■ 지시자 사용법과 자신만의 지시자 작성법

■ AngularJS 앱을 통한 이미지 업로드 및 데이터베이스 접근 방법

■ 확장 가능한 AWS 아키텍처에 앱 배포

■ 빠르게 상호작용하는 프로토타입을 생성 후 애플리케이션의 룩앤필 이해

■ 페이지 로딩 시간 단축 및 상용 서비스 배포

이 책의 대상 독자

이 책은 주로 디자이너나 개발자 등의 전문가를 대상으로 한다. 다행히도 AngularJS는 디자이너와 개발자들이 서로를 프론트엔드나 백엔드 개발자로 나누지 않고 협업할 수 있는 프레임워크로 변화하고 있다.
이 책은 독자가 기본적인 CSS나 HTML, 자바스크립트에 대해서는 이해하고 있다고 가정한다. 이식 가능하며 확장할 수 있고, 테스트가 쉽고 아름다운 코드를 짜야 하는 필요성도 이해하고 있어야 한다. 책에서 다루는 주제들을 이해하기 위해 AngularJS나 다른 자바스크립트 프레임워크를 이해할 필요는 없다. 우리는 독자가 소개팅에서 AngularJS를 처음 만났다고 가정한다.
이 책은 AngularJS를 다루다 보면 자주 접하게 되는 기본 개념에 익숙하게 만드는 것부터 시작할 것이다. AngularJS가 어떻게 동작하는지 보여주고 더 잘 이해하기 위해 간단한 예제 코드를 만든 후 깔끔하고 이식 가능한 코드를 작성하는 것까지 나아갈 것이다.
또한 한 장을 할애해서 앱 개발 생산성을 높여주는 도구들과 플러그인의 설정 과정을 살펴볼 것이다.

이 책의 구성

1장, ‘AngularJS와 싱글 페이지 애플리케이션 소개’에서는 싱글 페이지 애플리케이션(SPA)의 개념에 대해 이야기하고 일반 웹앱과의 차이점을 알아본다. 간단한 주소록 애플리케이션을 작성하는 데 필요한 AngularJS의 기초 지식도 다룰 것이다.

2장, ‘개발 환경 점검’에서는 알맞은 개발 도구들을 가지는 것이 어떻게 큰 생산성을 내도록 돕는지 알아본다. 이런 도구들을 가지고 있다면 개발할 때 마치 자신이 프로가 된 기분을 느낄 수 있다. 이 장에서는 Node.js, Express.JS, 그런트(Grunt), 요맨(Yeoman), 카르마(Karma) 같은 툴에 대해 알아본다.

3장, ‘AngularJS로 빠르게 프로토타입 만들기’에서는 백엔드 작업을 시작하기 전에 애플리케이션이 어떤 룩앤필을 가지게 될지, 상호작용하는 프로토타입 애플리케이션을 만들게 해주는 AngularJS의 편리함에 대해 이야기한다.

4장, ‘AngularJS 앱에 REST 적용하기’에서는 팩토리와 $http 서비스를 이용해 어떻게 API 제공자의 REST 웹 서비스를 사용하는지 설명한다.

5장, ‘페이스북 친구 생일 알림이 앱 만들기’에서는 지시자(directive)들에 대해 설명하고 어떻게 페이스북 로그인 지시자를 만드는지 설명한다. 또한 자동화된 테스트를 만들어 모든 것이 잘 동작하는지도 확인할 것이다.

6장, ‘비용 관리 모바일 앱 만들기’에서는 반응형이면서 터치에 적절히 반응하는 앱을 개발하는 과정을 보여준다. 이 앱은 ngAnimate와 HTML5의 로컬스토리지(localStorage) 같은 기능을 사용한다.

7장, ‘MEAN 스택을 이용한 CMS 개발’에서는 어떻게 백엔드와 프론트엔드 전체 시스템을 설정해야 하는지, AngularJS가 어떻게 노드 서버 및 몽고DB와 상호작용하는지 등을 알아본다. 세션 관리 기능과 인터셉터에 대해서도 살펴볼 것이다.

8장, ‘아마존 AWS에 배포하기 위한 확장 가능한 아키텍처’에서는 AWS의 다양한 서비스에 대해 설명하고 태생적으로 확장 가능한 서버 없는(Server-less) 아키텍처에 어떻게 우리가 만든 앱을 배포하는지 알아본다.

9장, ‘전자상거래 사이트 구축’에서는 AWS의 다이나모DB에 직접적으로 데이터를 읽고 쓰는 방법을 보여주고, 우리의 자바스크립트 앱으로 어떻게 아마존 S3에 바로 이미지를 업로드하는지도 설명한다.

저자/역자 소개

지은이의 말

이 책은 AngularJS를 활용하는 방법과 최소한의 코드로 완벽하게 동작하는 애플리케이션을 즉석에서 작성하는 즐거움을 알려주기 위한 실용적인 입문서다.
이 책은 AngularJS의 기본에 대해 먼저 설명하고 AngularJS를 둘러싼 용어와 개념들에 편안해지도록 돕는다. 그다음 당신을 더욱 생산적으로 만들어줄 다양한 도구들과 프레임워크 워크플로우들을 소개한다. 공개적으로 사용할 수 있는 API를 이용해 SNS 앱을 개발하고, 반응형이며 모바일과 태블릿 환경에서 동작하는 개인 금융 애플리케이션도 개발한다.
이어서 풀 스택의 콘텐츠 관리 시스템(CMS)을 구현하는 방법과 클라우드 환경에서 전자상거래 애플리케이션을 만드는 방법을 알아본다. 또한 여러분의 애플리케이션을 상용 서버에 배포하기 위한 팁들도 제공한다.

지은이 소개

빈치 루퍼스(Vinci Rufus)

14년 가까이 프론트엔드 기술자로 일해왔다. 플래시 액션스크립트(ActionScript)를 사용해 게임을 제작하는 것으로 개발 업계에 첫발을 내디딘 후 HTML5와 자바스크립트기술로 옮겨갔다. 근무 시간 외에는 워크숍을 열고 사람들을 훈련시키는 것을 즐긴다.
주로 상거래, 사용성, 신기술에 집중하는 레이저피시 니브(Razorfish Neev)에서 기술 팀들을 멘토링하고 가이드하는 일을 주 업무로 하고 있다.

옮긴이의 말

최근 들어 정말 많은 자바스크립트 프레임워크가 쏟아져 나오고 있습니다. 클라우드 덕분에 가능해진 프로그래밍 인프라 스트럭처는 자바스크립트에 더 큰 책임을 요구하고 있습니다.
그 원인인지 결과인지 판단하기는 힘들지만, 자바Java나 C#처럼 엔터프라이즈 시스템을 구축할 때 주로 사용되는 언어나 그 환경들이 가지는 장점들이 유니버설 자바스크립트(Javascript) 또는 프론트엔드 개발에도 많이 적용되어야 합니다.
현재 시장에서 바늘과 실 같은 존재인 자바와 스프링을 배우기 시작할 때 배우게 되는 개념으로는 DI(Dependency Injection), SOC(Seperate of Concerns), TDD 등이 있습니다.
단순한 웹 페이지가 아니라 웹 애플리케이션을 개발하기 위해서는 이런 개념들을 이용해 결합도를 줄이고 응집도를 높여야 합니다. 그럼 자연히 높은 가독성과 유지 보수성을 얻게 됩니다. 바퀴를 발명하지 않는다는 원칙에 따라 자바스크립트를 이용한 큰 규모의 웹 애플리케이션 개발도 그런 개념들을 받아들일 수밖에 없겠죠.
이런 상황에서 자바스크립트는 모르고 jQeury만을 다루는 개발자라면 그 성장에는 한계가 있을 것입니다. 앞에서 말한 것과 같이 자바의 스프링과 같은 파트너가 자바스크립트에는 어떤 것이 있을까요? jQuery는 훌륭하지만 DOM을 직접 컨트롤하는 방식이 대규모 웹 애플리케이션을 작성하는 데 그다지 적합해 보이지 않습니다. 최근에 인기가 많은 리액트(React)는 러닝 커브가 높고 리액트 외에 부가적으로 동반되는 프레임워크들의 선택지가 다양해서 혼란에 빠지는 개발자들도 많습니다.
AngularJS는 앵귤러(Angular) 방식이라는 ‘정도(right way)’를 제공합니다. 개발자 입장에서는 자유도가 침해되는 것처럼 느껴질 수도 있지만, 개발자 수가 많아지거나 유지 보수를 생각할 때는 장점이 될 수도 있습니다. 초급 개발자라도 쉽게 따라 할 수 있고 울타리를 따라 개발하다 보면 자연스럽게 패턴을 몸에 익힐 수 있습니다. 테스트하기 쉬운 코드가 생성되는 것은 덤입니다.

옮긴이 소개

조승진

프로그래밍을 즐겨하고 개발자 문화를 사랑하는 토종 개발자. 다양한 프로그래밍 언어와 프론트엔드 개발, 보안, 빅데이터에 관심이 많다. 개발자가 우대받는 이커머스 회사에서 재직 중이다.

목차

목차
  • 1장. AngularJS와 싱글 페이지 애플리케이션 소개
    • 싱글 페이지 애플리케이션 파헤치기
    • 간단한 AngularJS 앱의 구성
    • 모델과 뷰
    • 주소록 앱 개발하기
      • AngularJS에서 스코프 이해하기
    • 앱에 스타일 넣기
      • 연락처 정렬하기
    • 주소록에 연락처 추가하기
      • ng-show와 ng-hide 지시자
    • 요약

  • 2장. 개발 환경 점검
    • Node.js 설정
      • ExpressJS와 간단한 Node.js 웹 서버 생성
    • 그런트 설정
      • 그런트 명령어 입력기 설치
      • package.json 파일 생성
      • 그런트 태스크 생성
      • 여러 파일들의 병합과 연결
      • 그런트로 셸 명령어 실행
    • 요맨: 워크플로우 도구
      • 요맨 설치
      • 앱 구동
    • 카르마로 단위 테스트
    • 프로트랙터를 사용해 종단 간 테스트하기
      • 셀레니움 서버 설치
      • example_spec.js 파일 분석
      • conf.js 파일 분석
      • 프로트랙터 테스트 케이스 작성
    • 요약

  • 3장. AngularJS로 빠르게 프로토타입 만들기
    • 프로토타입으로 만들 애플리케이션의 이해
    • 그리드 레이아웃과 부트스트랩 소개
    • 그리드 시스템 이해하기
    • Angular UI 소개
      • UI-Utils
      • UI-Modules
      • UI-Bootstrap
      • NG-Grid
      • UI-Router
      • IDE 플러그인
    • ‘건강한 삶’ 사이트의 프로토타입 제작
      • ui.bootstrap 의존성 추가
      • 내비게이션 바 만들기
      • 캐로설 추가
      • 히어로 유닛 수정
      • 내용 블록 세 개 추가
      • 새로운 뷰 생성
      • 경로 이해하기
      • 기사 목록을 위한 뷰 작성
      • Angular 부트스트랩을 사용한 아코디언 뷰
      • 이미지 갤러리 구축
      • 부트스트랩 섬네일을 이용한 갤러리 뷰
      • 별점 평가 추가
      • NG-Grid를 이용한 데이터 그리드 작성
      • NG-Grid 컴포넌트 추가
      • NG-Grid에서 그룹핑
      • NG-Grid에서 엑셀 스타일로 편집
      • 구독자 추가를 위한 모달 창 구현
      • 실시간 입력 양식 검사
    • 요약

  • 4장. AngularJS 앱에 REST 적용하기
    • REST API의 응답 이해하기
      • RESTful 웹 서비스 테스트
    • Angular 시드로 앱 개발 끌어올리기
      • Angular 시드의 파일과 폴더
      • 부트스트랩 라이브러리 추가
      • 노드 웹 서버 구동
    • 레아아웃 꾸미기
    • 경로 생성
    • AngularJS 서비스에 대한 이해
    • 첫 번째 팩토리 서비스 작성
      • 의존성 주입
      • 파셜 작성
      • $http를 사용한 REST 웹 서비스 호출
    • 비동기 호출을 위해 지연된 응답 사용
    • JSON 응답을 표시하기
    • 예제 애플리케이션 단위 테스트
    • 단위 테스트 중 $http 모킹하기
    • 핀터레스트 스타일 레이아웃 생성
    • 버튼에 액션 추가
    • 요약

  • 5장. 페이스북 친구 생일 알림이 앱 만들기
    • 페이스북 SDK의 이해
      • 소셜 그래프
      • 그래프 API
      • 그래프 API 탐색기
      • 페이스북 앱 생성
    • 예제 애플리케이션 설정
      • 예제 애플리케이션 실행
    • AngularJS 지시자 자세히 알기
      • 지시자란?
      • 지시자 작명의 중요성
      • 지시자 분석
      • 첫 번째 지시자 작성하기
    • 페이스북을 통한 로그인 추가
      • fb-root div 태그 추가하기
      • 페이스북 SDK 로딩
      • $watch와 $digest 이해하기
      • 언제 $apply를 적용하는가
    • 사용자의 친구 목록 가져오기
    • 친구들의 프로필 사진과 생일 가져오기
      • FB.login으로 추가 권한 요청하기
      • 격리된 스코프 이해하기
    • 몇몇 CSS 스타일 추가하기
      • 경로 파일 수정
    • 로그아웃 링크 추가
    • 자동화된 테스트 작성
      • 카르마로 단위 테스트 작성
      • 프로트랙터를 사용한 연동 테스트
    • 요약

  • 6장. 비용 관리 모바일 앱 만들기
    • HTML 5 웹 스토리지 이해하기
      • 지역 저장소
      • 세션 저장소
    • 비용 관리 모바일 앱 만들기
    • 비용 추가 양식 생성
      • $rootScope는 무엇인가?
      • .run 블록의 이해
      • 카테고리 리스트 저장을 위한 서비스 생성
      • 비용 추가 양식 검증하기
      • 지역 저장소를 사용해 데이터 저장
    • D3를 이용한 막대 차트 지시자 생성
    • 카테고리별 비용 요약하기
      • 전용 막대 차트 지시자 생성하기
    • 반응형 앱 만들기
      • CSS 미디어 쿼리 추가
      • 윈도우 크기에 따른 D3 차트 크기 변경
    • 터치 이벤트 추가
      • ngTouch를 사용해 밀어 넘기기 활성화
    • ngAnimate를 이용한 페이지 전환
      • ngAnimate 모듈 불러오기
      • CSS3 전환 효과 추가
    • 앱을 네이티브 앱처럼 꾸미기
      • 터치 아이콘 추가
      • 전체 화면에서 앱 실행
    • 부가 기능 추가
    • 요약

  • 7장. MEAN 스택을 이용한 CMS 개발
    • MEAN 스택을 사용하는 이유
    • MEAN 스택 시작하기
      • 몽고DB 설정
      • ExpressJS와 MongooseJS 설정
    • 서버 애플리케이션 개발
      • 몽구스 스키마 생성
      • CRUD를 위한 경로 생성
      • 컬렉션에 새 항목 추가하기
      • 컬렉션 수정
      • 컬렉션 삭제
      • 단일 항목 보여주기
    • 관리자 페이지 보호하기
      • bcrypt를 이용한 패스워드 암호화
      • 신규 관리자 계정 생성
      • 인증을 위한 로그인 경로 생성
      • 로그아웃 경로 생성
      • 세션 검사 미들웨어 개발
    • AngularJS와 ExpressJS 프로젝트 연동
    • HTML5 모드를 사용해 SEO에 최적화된 URL 생성
    • CRUD 연산을 위한 관리자 페이지 생성
      • 관리자 영역을 위한 경로 생성
      • 팩토리 서비스 작성
      • 관리자 영역을 위한 컨트롤러 작성
      • 관리자 페이지 레이아웃 설정
      • 관리자 영역의 리스트 뷰 작성
      • AngularJS에서 인증 설정하기
      • 로그인 페이지 작성
    • 알림을 위한 자체 모듈 작성
      • messeage.flash 모듈 작성 및 초기화
      • message.flash 팩토리 서비스 작성
      • $broadcasts 설정
      • message.flash 모듈을 위한 지시자 작성
      • 알림 메시지 설정
      • 페이지 추가, 변경을 위한 컨트롤러 작성
      • 추가-수정 뷰 작성
      • URL 필드를 자동으로 생성하는 자체 필터 작성
      • 위지윅 편집기 추가
    • 응답을 탐지하기 위한 인터셉터 설정
    • CMS의 프론트엔드 구현
      • 내비게이션 바 지시자 생성
      • admin-login 지시자 생성하기
    • 페이지 내용 출력하기
      • 기본 홈페이지 설정
    • 요약

  • 8장. 아마존 AWS에 배포하기 위한 확장 가능한 아키텍처
    • AWS의 다양한 서비스 이해
    • AWS 배포 아키텍처 깊이 알아보기
      • EC2 서버 기반 아키텍처
      • 서버가 없는 아키텍처
    • AWS의 서버 없는 아키텍처에 앱 배포하기
      • 도메인과 S3 연결하기
      • S3 버킷을 클라우드프론트를 통해 제공하도록 설정하기
    • 상용 서비스 배포를 위해 앱 설정하기
      • 앱의 페이지 로드 시간 단축
      • 헤더에 만료 기간 설정
    • 성능
    • 요약

  • 9장. 전자상거래 사이트 구축
    • 서비스로의 백엔드
    • AWS에 BaaS 플랫폼 구축
      • 공개적으로 접근 가능한 S3 버킷 설정
      • S3 버킷에 CORS 정책 설정
      • 다이나모DB 테이블 생성
      • IAM 역할 생성
    • 자신만의 전자상거래 사이트 구축하기
      • UI-라우터를 사용해 중첩된 뷰 구현
      • 상태들을 URL, 뷰, 컨트롤러에 맵핑
    • 애플리케이션 프로토타입 생성
      • index.html 파일 설정하기
      • 컨트롤러 생성
      • 상품 파셜 생성
      • 뷰 전환에 애니메이션 추가
      • CSS 전환 효과 추가
    • 애플리케이션 레벨의 컨트롤러 생성
      • 페이스북 로그인 추가
    • AWS 자바스크립트 SDK와 연동
      • AWS 서비스 프로바이더 생성
    • 상품 추가 페이지 개발
      • 다이나모DB 테이블에 데이터 저장
      • 상품 추가 양식을 위한 뷰 생성
      • 상품 추가 뷰를 위한 컨트롤러 생성
      • S3에 이미지 업로드
      • 카테고리로 상품 목록 가져오기
      • 리졸브를 사용해 데이터를 미리 로드하기
    • 상품 상세 페이지 생성
      • 장바구니에 상품 담기
      • 결제 페이지 생성
      • 주문 저장
    • 요약

  • AngularJS 관련 자료들

도서 오류 신고

도서 오류 신고

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

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

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