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

  • 윤영식 지음

  • 오픈소스 & 웹 시리즈_071
  • ISBN: 9788998139995
  • 27,000원 | 2015년 06월 17일 발행 | 416쪽



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

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

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

 

추천사

“이 책은 AngularJS의 기본적인 내용과 실제 단일 페이지 웹 애플리케이션의 기획부터 개발까지의 실무적인 내용을 담고 있다.”

-- KT 융합기술원 연구원, 고재도

“만약 AngularJS를 프로젝트에 도입하려고 한다면, 당신도 당장 이 책 한 권을 갖춰 두는 게 좋을 것이다. “

-- LG CNS America, Digital Marketing Director, 이상윤

“실제 업무에서 MEAN 스택을 적용하며 부딪치게 되는 수많은 고민에 대하여 이 책이 유용한 실마리를 제공해 줄 것이라고 생각한다.”

-- TossLab JANDI CTO, 최영근

“AngularJS의 학습과 사용에 대한 노하우 뿐만 아니라 웹 응용 프로그램, 서버와의 상호 운용성에 대한 고민을 현장의 코드를 통해 엿볼 수 있다.”

-- TID Global Corp. Envicase CTO, 이규원

“실제 현업에서 AngularJS를 사용할 것인지 도입 선택부터 도입 후 진행 중 맞닥뜨리는 문제에 대한 해결까지 제시해 줄 수 있는 국내 유일한 책이라 생각한다.”

-- KTDS 경영서비스본부 PL, 이홍석

윤영식

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

  • ▣ 01장: 단일 페이지 애플리케이션 개발 준비
    • 1-1. 개발 도구 설치
      • 깃 설치
      • 노드 설치
      • 요맨 설치
      • 서브라임 텍스트 편집기 설치
    • 1-2. 단일 페이지 애플리케이션 생성
      • yo generator 선택과 설치
      • Yo를 이용한 ToDo 애플리케이션 생성
    • 1-3. 애플리케이션 컴포넌트 생성
      • 앵귤러를 위한 index.html 설정 이해하기
      • yo를 이용한 앵귤러 컨트롤러 추가
      • bower를 이용한 앵귤러 지시자 추가
    • 1-4. 애플리케이션 테스트 및 빌드
      • grunt를 이용한 테스트
      • grunt를 이용한 배포
    • 정리
    •  
  • ▣ 02장: AngularJS 프레임워크 이해
    • 2-1. MV* 프레임워크
    • 2-2. 양방향 데이터 바인딩
      • 스코프 내부와 상속 관계
      • MyToDo 애플리케이션에서 양방향 데이터 바인딩
      • 스코프 생명 주기(Life Cycle)
      • 그 외 $scope 객체 메서드
    • 2-3. 의존성 주입(DI, Dependency Injection)
    • 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와 $q Async 호출에 대한 이해
    • 정리
    •  
  • ▣ 04장: 애플리케이션을 위한 공통 프레임워크 개발
    • 4-1. 공통 프레임워크 모듈 개발
      • 다국어 처리
      • 메시지 처리
      • 팝업 메시지창 지시자
      • HTTP 에러 처리
      • 사용자 정의 Bower 컴포넌트 등록
      • 로컬 저장소 서비스
      • 유틸리티 지시자
    • 4-2. 로그인 화면 개발
      • 트위터 부트스트랩 기반의 화면 디자인 및 폰트 사용
      • 폼 유효성(Form Validation) 검사
      • 인증을 위한 토큰과 쿠키
    • 4-3. OAuth를 이용한 인증 처리
      • 백엔드에서 Passport 모듈을 이용한 인증 처리
      • 페이스북 인증 처리
      • 크롬 브라우저 개발자 도구를 이용한 클라이언트 디버깅
      • 노드 인스팩터를 이용한 서버 디버깅
    • 정리 235
    •  
  • ▣ 05장: 메인 페이지 개발
    • 5-1. 백엔드 API 개발
      • REST API 별 서버 모듈 조합
      • 노드 모듈의 exports 이해
      • 몽고디비와 몽구스 이해
      • 서버 모델 개발
      • 그룹 REST API 개발
      • 포스트맨을 이용한 REST API 검증
      • 백엔드 단위 테스트 수행
    • 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 적용
    • 정리
  • 33페이지의 4번째 줄에

jQuery를 바로 사용해 HTML에 자바스크립트를 함께 사용하는 것을 지향하고 있다.

--> jQuery를 바로 사용해 HTML에 자바스크립트를 함께 사용하는 것을 지양하고 있다.

관련 글