앵귤러 메모리 db서버

 

 

앵귤러로 개발하다보니 웹서버 연동을 하려면 해당 서버에서의 크로스 도메인 문제에 걸리지 않나라는 생각을 하였다.
이를 위해서, 앵귤러에서는 메모리 서버를 제공하는데, 이는 브라우저 캐쉬형태로 데이터를 저장하여 제공하는 일종의 가상서버를 의미한다.
메모리 서버는 http 요청을 중간에 가로채서 해당 역할을 대신 하여준다.
정식명칭은 memory-web-api로 되어 있다.

이를 구현하기 위해서는 패키지를 설치해야 한다.

npm i --save angular-in-memory-web-api

 

콘솔에서 위 명령어를 통해 패키지를 설치하자.
이후, 데이터베이스 역할을 할 타입스크립트를 작성한다.

import { Injectable } from '@angular/core';
import {InMemoryDbService} from 'angular-in-memory-web-api';

@Injectable({
  providedIn: 'root'
})
export class WebDatabaseService implements InMemoryDbService{
  private _database : any; //데이터베이스 
  constructor() { 
  }

  createDb(){  //상속받아 구현하는 추상 메서드
    this._database = {};
    this._database['users'] = [{ id:1,name:'Lee',age : '30'},{ id:2,name:'Kim',age : '32'}];
    //users는 테이블 명칭이다. 뒤의 Json형식이 컬럼 및 데이터
    return this._database;
  }
}

 

완성된 서비스를 모듈에 등록하면 세팅은 끝난다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpModule} from '@angular/http';
import {WebDatabaseService} from './web-database.service';
import {InMemoryWebApiModule} from 'angular-in-memory-web-api';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(WebDatabaseService,{delay:500,put204:false})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

흥미로운 점은 요청을 할 때 반드시 URL이 2뎁스 이상으로 구현해줘야 한다는 점이다.
요청하는 예제는 아래와 같다.

import { Injectable } from '@angular/core';
import {Http} from '@angular/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HttpClientService {
  private http : any;
  constructor(http : Http) { 
    this.http = http;
  }

  getData(id : any, callback){
    Observable.create((obsever)=>{
      this.http.get('/blabla/users/' + id).subscribe(callback);
      //users는 테이블 이다. blabla는 앞서 말한 듯 2뎁스를 위한 가상의 주소이다. 어떠한 값을 써도 상관 없다.
      obsever.next('complete');
    }).subscribe((res)=>{
      console.log(res);
    });
  }
}