Page tree
Skip to end of metadata
Go to start of metadata

7장 HTTP 통신과 RxJS

Http

  • http 통신을 위한 서비스를 제공하는 모듈
  • @angular/http 패키지에 포함
  • 기존 jquery 등에서 사용되는 ajax 통신은 API 콜백함수를 사용해주어야 하고 이는 콜백함수지옥 이라는 단점이 있는데,
    이를 RxJS 를 이용하여 회피.
  • typings.d.ttypings.d.thttp 통신에 필요한 로직은 일반적으로 컴포넌트와 분리할 수 있고, 각 필요한 로직들은 중복될 수 있으므로 독립적인 service 로 구현하는 것이 좋다.

  • 위 http 통신은 아래와 같은 순서로 수행.
    1. http 통신 이전에 로직이 우선 수행.
    2. http 통신 시작. <비동기>
    3. http 통신 이후 로직이 있다면, 2가 수행되는 동안 해당 로직 수행.
    4. http 통신 수행 완료 후 콜백 수행.

    • 아래는 위 수행코드의 수행순서를 증명하기 위해 작성된 코드.
    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <body>
    <div ng-app="myApp" ng-controller="myCtrl"> 
    <h1>{{myWelcome}}</h1>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
      $http.get("welcome.htm")
      .then(function(response) {
    	var start = new Date().getTime();
    	var end = start;
    	while(end < start + 3000) {
    		end = new Date().getTime();
        }
    	$scope.myWelcome = response.data;
      });
        $scope.myWelcome = "test!!";
    });
    </script>
    </body>
    </html>

    참고 코드 : https://www.w3schools.com/angular/tryit.asp?filename=try_ng_http_get

RxJS

RxJS 는 비동기적이고 이벤트 기반의 로직을 해결하기 위한 Reactive programming 의 javascript 라이브러리로 이해할 수 있음.

reactive programming 은 아래와 같은 방법으로 비동기 문제를 접근하고 있다.

    • 기본적으로 모든 데이터 발생을 시간순서를 가진 collection 으로 본다. (이를 스트림이라 칭할 수 있다.)
    • 위 collection 을 스트림이라 한다면, 이 스트림은 새로운 스트림으로 만들어질 수 있고(branch)
      또한 여러개의 스트림이 하나로 합쳐질 수도 있다. (merge)
    • 스트림은 map, filter 등의 함수를 통하여 immutable 하게, 즉 스트림 변경없이 스트림을 다룰 수 있다.
    • 그리고 이 스트림을 바라보고 데이터를 얻어내는 것을 subscribe 라 한다.

 

12장 프로젝트 : 파이어베이스 사용 (https://firebase.google.com/)

firebase database 생성.

선수작업

  1. firebase 가입 및 프로젝트 생성. (이는 이미 되어있을 것으로 판단하고 cli 로 넘어갑니다.)
  2. 실행창 (커맨드창) 실행
  3. npm i -g firebase-tools 커맨드 활용하여 firebase 설치.

firebase database 생성하기.

  1. firebase test 용 프로젝트 생성.
    1. 임의로 생성한 프로젝트의 좌측 탭중 database 메뉴 선택
    2. 아래와 같이 임의로 생성된 database 의 우측에 + 버튼을 통해 데이터 를 아래 우측과 같이 생성.
  2. angular cli 를 통해 위와 같은 데이터들을 조회할 프로젝트 구성
    1. 커맨드창을 열어 프로젝트를 구성할 임의의 폴더로 이동하여 ng new 'project name' 입력
    2. 구성된 프로젝트에서 ng serve 를 통해 server 가 구동되는지 확인. (확인은 브라우저 localhost:4200 )
    3. 해당 프로젝트에 angularfire2 설치. (npm install angularfire2 --save)
    4. 프로젝트의 src/environments 폴더 아래에 firebase.config.ts 파일을 생성후

      export const firebaseConfig = {
        apiKey: '<your-key>',
        authDomain: '<your-project-authdomain>',
        databaseURL: '<your-database-URL>',
        storageBucket: '<your-storage-bucket>'
      };

      위와 같이 입력.
      위 정보는 firebase browser console 의 프로젝트 overview 화면 아래에서 발췌

       

    5. 프로젝트 루트의 tsconfig.json 파일을

      {
         "compilerOptions": {
          [...],
          "types": [
            "firebase"
          ]
        }
      }

      위와 같이 types 추가.

    6. 프로젝트 app.modules.ts 에 AngularFireModule import 를 위해

      import { firebaseConfig } from '../environments/firebase.config'; <!-- firebaseConfig 를 참조하기 위한 코드 -->
      import { AngularFireModule } from 'angularfire2';
      import { AngularFireDatabase } from "angularfire2/database-deprecated";
      import { FirebaseListObservable } from "angularfire2/database-deprecated";

      위와 같은 코드를 삽입.

    7. 그리고 app.modules.ts @ngModule 를 아래와 같이 수정

      @NgModule({
        imports: [
          BrowserModule,
          AngularFireDatabase,
          FirebaseListObservable,
          AngularFireModule.initializeApp(firebaseConfig)
        ],
        declarations: [ AppComponent ],
        bootstrap: [ AppComponent ]
      })export class AppModule {}
    8. app.component.ts 를 아래와 같이 수정

      import { Component } from '@angular/core';
      import { AngularFireDatabase, FirebaseListObservable } from "angularfire2/database-deprecated";
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent {
        title = 'app';
        items: FirebaseListObservable<any[]>;
        constructor(af: AngularFireDatabase) {
          this.items = af.list('/items');
        }
      }
    9. app.component.html 을 아래와 같이 수정하여 데이터 출력 확인

      <div style="text-align:center">
        <ul>
          <li class="text" *ngFor="let item of items | async">
            {{item.$value}}
          </li>
        </ul>
      </div>

 

firebase 진행중 tip.

  1. --debug
    firebase 명령문 뒤에 --debug 를 붙여주면 실행과정이 커맨드창에 출력된다.

Firebase DB 연동

실습 시작

firebase db 연동 설정

 

import { AngularFireModule } from 'angularfire2';
 
import { environment } from '../environments/environment';
 
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    AngularFireModule.initializeApp(environment.firebase)
  ],
  providers: [
    TaskService
  ],
  bootstrap: [AppComponent]
})

 

firebase db에 CRUD

  • 책의 392 페이지 참고해 실습 진행한다.
import { AngularFireDatabaseModule } from 'angularfire2/database';
  • TaskService에 AngularFireDatabase를 DI한다.
  • Retrieving data as lists 문서 참고해 CRUD를 구현한다.
  • DB에 데이터를 추가한 후 firebase console 화면의 Database 메뉴에서 확인한다.

firebase auth 활용해 인증

  • 책의 385페이지 참고해 firebase auth 모듈 추가하고 인증 기능 구현

로그인 사용자 별로 Task 관리

  • 로그인 사용자 별로 Task를 관리할 수 있도로 기능 개선

 

  • No labels