• 컴퓨터/IT > 프로그래밍 > 웹프로그래밍

출판사 리뷰

출판사 서평 ★ 이 책에서 다루는 내용 ★ ■ AngularJS와 싱글 페이지 애플리케이션의 핵심 요소에 대한 이해도 향상 ■ 전자상거래, 콘텐츠 관리 시스템(CMS), SNS 앱, 모바일 웹앱 등과 같은 다양한 영역을 아우르는 완전하고 전문적인 애플리케이션 개발 ■ REST 웹 서비스, 페이스북 API와의 연동 ■ 지시자 사용법과 자신만의 지시자 작성법 ■ AngularJS 앱을 통한 이미지 업로드 및 데이터베이스 접근 방법 ■ 확장 가능한 AWS 아키텍처에 앱 배포 ■ 빠르게 상호작용하는 프로토타입을 생성 후 애플리케이션의 ... ★ 이 책에서 다루는 내용 ★ ■ 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)을 구현하는 방법과 클라우드 환경에서 전자상거래 애플리케이션을 만드는 방법을 알아본다. 또한 여러분의 애플리케이션을 상용 서버에 배포하기 위한 팁들도 제공한다.


★ 옮긴이의 말 ★

최근 들어 정말 많은 자바스크립트 프레임워크가 쏟아져 나오고 있습니다. 클라우드 덕분에 가능해진 프로그래밍 인프라 스트럭처는 자바스크립트에 더 큰 책임을 요구하고 있습니다.
그 원인인지 결과인지 판단하기는 힘들지만, 자바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, 뷰, 컨트롤러에 맵핑
__애플리케이션 프로