러닝! Angular 4

실무 예제로 배우는 앵귤러 4 핵심 가이드

《러닝! Angular 4》는 앵귤러를 이용해 모던 웹 애플리케이션을 개발하는 방법을 알려준다. 이 책에서는 타입스크립트의 주요 기능을 비롯해 새로운 ES6 구문과 개념, 개발 도구를 다루고 앵귤러 기초와 실전 앵귤러 애플리케이션을 개발하기 위한 기술과 기법들을 소개한다.

또한 앵귤러 애플리케이션의 주요 구성 요소를 배우면서 동시에 처음부터 앵귤러 애플리케이션을 구축하고 각 구성요소가 상호작용하는 방법을 살펴본다. 후반부에서는 다양한 예제를 통해 앵귤러 컴포넌트, 라우터, 서비스 같은 앵귤러의 핵심 요소들을 소개한다.

앵귤러 웹 개발을 빠르게 시작하세요!

앵귤러는 웹 개발 세계에서 가장 흥미롭고 혁신적인 신기술 중 하나입니다. 웹 애플리케이션의 개발과 테스트를 단순화하도록 설계됐으며 전체 개발 프로세스를 위한 구조도 제공합니다.

웹 사이트는 더 이상 단순한 정적 콘텐츠가 아닙니다. 대신 훨씬 더 동적으로 변하고 단일 페이지가 전체 사이트나 애플리케이션으로 사용되는 경우가 많습니다. 앵귤러는 웹 개발자가 이러한 애플리케이션에 필요한 프로그래밍 로직을 웹 페이지에 직접 작성하고 클라이언트 웹 애플리케이션의 데이터 모델을 백엔드 서비스와 데이터베이스에 바인딩할 수 있게 합니다. 또한 HTML을 확장함으로써 UI 디자인 로직을 HTML 템플릿 파일에서 쉽게 표현할 수 있습니다.

《러닝! Angular 4》에서는 잘 구조화되고 재사용 가능한 코드 기반을 유지하고 유지보수하기 쉬운 강력한 대화식 웹 애플리케이션을 제작하는 방법을 보여줍니다. 또한 앵귤러의 혁신적인 MVC 접근법을 활용해 잘 설계되고 구조화된 웹 페이지 및 웹 애플리케이션을 구현하는 법도 이 책을 통해 배울 수 있습니다.

앵귤러는 기본 구조 및 설계 규칙을 준수하게 함으로써 여러분을 더 나은 웹 개발자로 거듭나게 하는 데 이바지합니다.

★ 이 책에서 다루는 내용 ★

  • 앵귤러를 구성하는 방법을 비롯해 앵귤러 애플리케이션을 설계하는 모범 사례를 익힌다
  • 사용자 경험을 향상시키는 내장 디렉티브가 포함된 앵귤러 템플릿을 빠르게 제작한다
  • UI 요소를 데이터 모델에 바인딩해서 모델과 UI의 변경이 동시에 일어나게 한다
  • HTML을 확장하는 사용자 정의 앵귤러 디렉티브를 정의한다
  • 확대/축소 가능한 이미지, 확장 가능한 목록, 기타 다양한 UI 구성요소를 구현한다
  • 웹 서버와 상호작용하는 클라이언트 측 서비스를 구현한다
  • 더욱 풍부한 사용자 상호작용을 제공하는 동적 브라우저 뷰를 구축한다
  • 쉽게 재사용할 수 있는 사용자 정의 서비스를 만든다
  • 풍부한 UI 컴포넌트를 사용자 정의 앵귤러 디렉티브로 구현한다

브래드 데일리 (Brad Dayley)

브래드 데일리는 20년 이상의 엔터프라이즈 애플리케이션 및 웹 인터페이스 개발 경험이 풍부한 선임 소프트웨어 엔지니어다. 애플리케이션 서버에서 복잡한 웹 애플리케이션에 이르기까지 다양한 애플리케이션과 서비스를 설계하고 구현해왔다.

브렌던 데일리 (Brendan Dayley)

브렌던 데일리는 자바스크립트, 타입스크립트, 앵귤러를 이용해 여러 웹 애플리케이션을 제작한 웹 애플리케이션 개발자다.

칼렙 데일리 (Caleb Dayley)

칼렙 데일리는 컴퓨터 과학을 전공하는 대학생이다. 자바스크립트, 파이썬, C# 개발자이며, 유니티 플랫폼의 열렬한 팬이다.

이대엽

책 만드는 일을 하고 있으며, 이따금 IT 관련 서적을 번역하기도 한다. 옮긴 책으로 『헬로! 파이썬 프로그래밍』 『자바 API 디자인』 『풀스택 자바스크립트 개발』 『테스트 주도 개발로 배우는 객체 지향 설계와 실천』 『자바스크립트 개론』 『모듈라 자바』 『시작하세요! 맥 OS X 라이언』 『도메인 주도 설계』 『하이버네이트 완벽 가이드』 『개념을 잡아주는 프로그래밍 정석』 등이 있다.

  • ▣ 01장: 자바스크립트 기초
    • 자바스크립트 개발 환경 설정
    • 변수 정의
    • 자바스크립트의 데이터 타입
    • 연산자
      • 산술 연산자
      • 할당 연산자
      • 비교 연산자와 조건 연산자의 적용
    • 반복문
      • while 문
      • do/while 문
      • for 문
      • for/in 문
      • 반복문 제어
    • 함수
      • 함수 정의
      • 함수에 변수 전달하기
      • 함수에서 값 반환하기
      • 익명 함수
    • 변수 유효범위
    • 자바스크립트 객체
      • 객체 구문
      • 사용자 정의 객체
      • 객체 프로토타이핑 패턴
    • 문자열
      • 문자열 결합
      • 문자열에서 부문자열 검색
      • 문자열에서 단어 치환
      • 문자열을 배열로 분할
    • 배열
      • 배열 결합
      • 배열 순회
      • 배열을 문자열로 변환
      • 배열에 항목이 포함돼 있는지 검사
      • 배열 항목의 추가와 제거
    • 오류 처리
      • try/catch 블록
      • 사용자 정의 오류
      • finally 활용
    • 정리
    •  
  • ▣ 02장: 타입스크립트 기초
    • 다양한 타입
    • 인터페이스
    • 클래스
      • 클래스 상속
    • 모듈
    • 함수
    • 정리
    •  
  • ▣ 03장: 앵귤러 시작하기
    • 왜 앵귤러인가?
    • 앵귤러 이해하기
      • 모듈
      • 디렉티브
      • 데이터 바인딩
      • 의존성 주입
      • 서비스
    • 책임의 분리
    • 앵귤러 개발 환경 설정
    • 앵귤러 CLI
      • CLI를 활용한 콘텐츠 생성
    • 기본적인 앵귤러 애플리케이션 생성
      • 첫 앵귤러 앱 만들기
      • NgModule의 이해와 활용
      • 앵귤러 부트스트래퍼 만들기
    • 정리
    •  
  • ▣ 04장: 앵귤러 컴포넌트
    • 컴포넌트 설정
      • 선택자 정의
    • 템플릿 만들기
      • 앵귤러 애플리케이션에서 인라인 CSS 및 HTML 사용하기
    • 생성자 활용
    • 외부 템플릿 활용
    • 의존성 주입
      • 의존성 주입을 이용한 중첩 컴포넌트 제작
      • 의존성 주입을 통한 데이터 전달
      • Input을 사용하는 앵귤러 애플리케이션 제작
    • 정리
    •  
  • ▣ 05장: 표현식
    • 표현식 사용
      • 기본 표현식
      • 표현식에서 Component 클래스와 상호작용하기
      • 앵귤러 표현식에서 타입스크립트 사용하기
    • 파이프
      • 내장 파이프
      • 내장 파이프 활용
    • 사용자 정의 파이프
      • 사용자 정의 파이프 만들기
    • 정리
    •  
  • ▣ 06장: 데이터 바인딩
    • 데이터 바인딩의 이해
      • 삽입식
      • 프로퍼티 바인딩
      • 속성 바인딩
      • 클래스 바인딩
      • 스타일 바인딩
      • 이벤트 바인딩
      • 양방향 바인딩
    • 정리
    •  
  • ▣ 07장: 내장 디렉티브
    • 디렉티브란?
    • 내장 디렉티브 사용하기
      • 컴포넌트 디렉티브
      • 구조 디렉티브
      • 속성 디렉티브
    • 정리
    •  
  • ▣ 08장: 사용자 정의 디렉티브
    • 사용자 정의 속성 디렉티브 만들기
    • 컴포넌트를 이용한 사용자 정의 디렉티브 만들기
    • 정리
    •  
  • ▣ 09장: 이벤트와 변경 감지
    • 브라우저 이벤트 사용하기
    • 사용자 정의 이벤트 내보내기
      • 부모 컴포넌트 계층 구조로 사용자 정의 이벤트 내보내기
      • 리스너를 이용한 사용자 정의 이벤트 처리
      • 중첩 컴포넌트에서 사용자 정의 이벤트 구현
      • 자식 컴포넌트에서 부모 컴포넌트의
      • 데이터 삭제하기
    • 옵저버블 활용
      • 옵저버블 객체 생성
      • 옵저버블을 이용한 데이터 변경 관찰
    • 정리
    •  
  • ▣ 10장: 웹 애플리케이션에서 앵귤러 서비스 구현하기
    • 앵귤러 서비스란?
    • 내장 서비스 사용하기
      • http 서비스를 이용한 HTTP GET과 PUT 요청 보내기
      • HTTP 요청 구성
      • HTTP 응답 콜백 함수 구현
    • 간단한 JSON 파일 구현과 http 서비스를 이용한 접근
    • http 서비스를 이용한 간단한 모의 서버 구현
      • 간단한 모의 서버 구현 및 http 서비스를 이용한 서버의 항목 업데이트
    • router 서비스를 이용한 뷰 변경
    • 앵귤러에서 라우트 사용하기
      • 단순 라우터 구현하기
    • 내비게이션 바를 이용한 라우터 구현
    • 매개변수가 포함된 라우터 구현
    • 정리
    •  
  • ▣ 11장: 사용자 정의 앵귤러 서비스 만들기
    • 앵귤러 애플리케이션에 사용자 정의 서비스 통합하기
      • 애플리케이션에 앵귤러 서비스 추가하기
    • 상수 데이터 서비스를 사용하는 간단한 애플리케이션 구현하기
    • 데이터 변환 서비스 구현하기
    • 가변 데이터 서비스 구현하기
    • 프로미스를 반환하는 서비스 구현하기
    • 공유 서비스 구현하기
    • 정리
    •  
  • ▣ 12장: 앵귤러 실전 예제
    • 애니메이션 서비스를 사용하는 앵귤러 애플리케이션 구현하기
    • 이미지를 확대하는 앵귤러 애플리케이션 구현하기
    • 드래그 앤드 드롭이 가능한 앵귤러 애플리케이션 구현하기
    • 별 평점 앵귤러 컴포넌트 구현하기
    • 정리

예제코드 관련 GitHub 페이지

  • 116쪽, 예제 7.1의 10번째 줄

    <template ngFor let-person [ngForOf]="people">
    

    ==>

    <ng-template ngFor let-person [ngForOf]="people">
    
  • 116쪽, 예제 7.1의 12번째 줄

    </template>
    

    ==>

    </ng-template>
    
  • 119쪽, 예제 7.2의 5번째 줄

    templateUrl: './attribute.component.html',
    

    ==>

    templateUrl: './app.component.html',
    
  • 119쪽, 예제 7.2의 6번째 줄

    styleUrls: ['./attribute.component.css']
    

    ==>

    styleUrls: ['./app.component.css']
    
  • 139쪽, 예제 9.9의 4번째 줄

    .Info{
    

    ==>

    .cInfo{
    
  • 197쪽, 예제 11.13의 16번째 줄

    this.alert.crateTimedAlert(this.seconds);
    

    ==>

    this.alert.createTimedAlert(this.seconds);
    
  • 215쪽, 예제 12.11의 2번째 줄

    wdth: 200px;
    

    ==>

    width: 200px;
    
  • 228쪽, 예제 12.26에서 아래의 1번째 줄 삭제

    img {