실전 프로젝트로 배우는 AngularJS (SPA 아키텍처 기반 구축하기)

윤영식

저자윤영식은SI,SE경험을거친후연구원으로있으면서WAS실시간모니터링(APM)솔루션과대시보드자동화저작도구솔루션을개발했다.최신프런트엔드기술스택을블로그(http://mobicon.tistory.com)에공유하고있으며,현재스타트업을창업해AngularJS와D3.js기반의데이터시각화서비스를개발하고있다.

▣01장:단일페이지애플리케이션개발준비
1-1.개발도구설치
-깃설치
-노드설치
-요맨설치
-서브라임텍스트편집기설치
1-2.단일페이지애플리케이션생성
-yogenerator선택과설치
-Yo를이용한ToDo애플리케이션생성
1-3.애플리케이션컴포넌트생성
-앵귤러를위한index.html설정이해하기
-yo를이용한앵귤러컨트롤러추가
-bower를이용한앵귤러지시자추가
1-4.애플리케이션테스트및빌드
-grunt를이용한테스트
-grunt를이용한배포
정리

▣02장:AngularJS프레임워크이해
2-1.MV*프레임워크
2-2.양방향데이터바인딩
-스코프내부와상속관계
-MyToDo애플리케이션에서양방향데이터바인딩
-스코프생명주기(LifeCycle)
-그외$scope객체메서드
2-3.의존성주입(DI,DependencyInjection)
2-4.클라이언트템플릿
2-5.지시자(Directive)
-지시자가DOM에적용되는순서
-지시자정의
-지시자의스코프객체의범위종류
-Template,TemplateUrl,TemplateCache,replace와ng-template사용
-compile,link의$watch등록을이용한양방향데이터바인딩
-controller,require와link네번째파라미터와의관계
-transclude,ng-transclude사용
2-6.테스트프레임워크(단위,E2E)
-카르마기반단위테스트
-프로트랙터기반E2E테스트
정리

▣03장:싱글페이지애플리케이션기획및생성
3-1.애플리케이션기획
-메인페이지
-그룹정보페이지
-그룹활동페이지
-설문생성페이지
3-2.애플리케이션제너레이터설계
-애플리케이션의폴더구조전략
-애플리케이션제너레이터선정
-앵귤러코드스타일전략
-스타일가이드에따른제너레이터템플릿수정방법
-IE8지원을위한index.html설정
3-3.SPA생성
-애플리케이션의모듈구성
-라우팅설정방식
3-4.단위업무를위한앵귤러컴포넌트조합
-$resource를통한REST모델사용
-promise와$qAsync호출에대한이해
정리


▣04장:애플리케이션을위한공통프레임워크개발
4-1.공통프레임워크모듈개발
-다국어처리
-메시지처리
-팝업메시지창지시자
-HTTP에러처리
-사용자정의Bower컴포넌트등록
-로컬저장소서비스
-유틸리티지시자
4-2.로그인화면개발
-트위터부트스트랩기반의화면디자인및폰트사용
-폼유효성(FormValidation)검사
-인증을위한토큰과쿠키
4-3.OAuth를이용한인증처리
-백엔드에서Passport모듈을이용한인증처리
-페이스북인증처리
-크롬브라우저개발자도구를이용한클라이언트디버깅
-노드인스팩터를이용한서버디버깅
정리235

▣05장:메인페이지개발
5-1.백엔드API개발
-RESTAPI별서버모듈조합
-노드모듈의exports이해
-몽고디비와몽구스이해
-서버모델개발
-그룹RESTAPI개발
-포스트맨을이용한RESTAPI검증
-백엔드단위테스트수행
5-2.메인화면개발
-공통컴포넌트재구성
-메인화면레이아웃개발
-그룹생성
5-3.그룹목록및정보표현
정리

▣06장:그룹페이지개발
6-1.그룹정보페이지
-그룹상세정보조회
-그룹프로필이미지변경
-그룹가입,탈퇴
6-2.그룹활동페이지
-그룹활동화면레이아웃개발
-그룹멤버목록표현
6-3.설문카드생성
-설문카드생성
-카드지시자개발
6-4.설문종류별카드표현
6-5.설문응답및결과표현
정리

▣07장:실시간반응개발
7-1.Socket.IO기반실시간연동
-노드기반백엔드Socket.IO
-AngularJS기반프런트엔드Socket.IO
-상단알림메뉴추가
7-2.카드목록UX개선
-카드에동영상추가
-무한스크롤적용
-애니메이션효과적용
7-3.AngularJS성능옵션
-일회바인딩
-ngModelOptions지시자
-디버깅정보비활성화
-$applyAsync적용
정리

만들면서배우는AngularJS와단일페이지애플리케이션

AngularJS는MV*프레임워크로서복잡한업무UI를구조적으로만들수있다.하지만먼저구조적으로설계하고개발에들어가야AngularJS에서제공하는기능을충분히사용할수있다.이책에서는AngularJS에대한기초적인개념은이미알고있는독자에게프로젝트를어떻게시작하고어떻게만들어야할지안내한다.

프런트엔드개발도구에대한소개및설치와함께단일페이지애플리케이션을이해하고,AngularJS에맞는코드컨벤션과개발전에준비해야할모듈을살펴본다.실제운영됐던NodeJS서버코드를기반으로AngularJS를이용해구조적으로개발하는방법과HTML태그를UI컴포넌트로변환하면서블록을맞추듯업무를개발하는과정을살펴볼수있다.