앵귤러 튜토리얼 (Angular tutorial) -13

* 제가 다시 작성한 최신 튜토리얼 수정본 입니다. 아래 주소를 통해서 진행하시는 것을 권장 드립니다. ^^

lts0606.tistory.com/328

앵귤러 튜토리얼(Angular tutorial) - 1

 

저번시간에는 서비스에 대해서 알아보았다.

이번시간에는 실제 데이터베이스와 앵귤러가 어떻게 연동되는지 알아보고, 이와 관련하여 서비스를 수정하여 보겠다.

관계도

예전에 설명한바와 같이 앵귤러는 완벽히 브라우저에서만 동작하는 플랫폼이다.

 

앵귤러에서 데이터베이스에 직접 접속하는 방법은 없다. 쉽게말해 크롬, 익스플로러, 파이어폭스 등 브라우저에 데이터베이스 주소, 아이디, 비밀번호를 입력해서 로그인을 바로 할 수 없는 것과 동일한 개념이다.

그러므로, 데이터베이스를 사용하기 위해서는 앵귤러는 마치 Ajax처럼 데이터베이스에 접속 가능한 특정 주소를 호출해야되고, 호출받은 서버가 대신 행위를 해 주어야 하는 것 이다.

컴파일 후 모습

데이터베이스와 연결하고 있는 서버가 필요하고, 앵귤러는 그 서버의 주소를 호출하는 방식이 데이터베이스와의 연동 방법이라 할 수 있다.

지금당장 데이터베이스와 연동하는 서버를 만드는 것은 어려우므로 이를 흉내낼 수 있는 간단한 서버를 만들어 보자. 아래 명령어를 입력한다.

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

뭔가 설치 되었다.

해당 라이브러리는 웹 메모리를 마치 데이터베이스 처럼 사용하게 해 주는 서비스 이다.

 

이어서 데이터베이스 역할을 할 서비스를 만들어 주자. WebDb라는 서비스를 만들어 준다.

ng g service WebDb

src - app 폴더까지는 이동해야 함을 잊지 말자.

서비스를 만들었으니 해당 WebDb 서비스를 수정한다.

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

Injectable({
  providedIn: 'root'
})
export class WebDbService implements InMemoryDbService{  //상속, 잊지말자
  private _database : any; //데이터베이스 
  constructor() { 
  }

  createDb(){  //상속받아 구현, 해당 내용에서 데이터베이스를 만든다.
    this._database = {};
    this._database['user'] = [];  //유저 이름의 DB
    this._database['dash'] = [];  //dash 이름의 DB
    return this._database;
  }

}

하단의 createDb라는 메소드는 InMemoryDbService가 가지고 있는 자식 메소드 이다. 해당 메소드를 상속받아서 원하고자 하는 데이터 베이스를 만들어 준다.

만들어준 서비스를 이제 사용하여보자. 어디에서 등록해야하는가?

그렇다, 모듈에 등록해야 한다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeadComponent } from './head/head.component';
import { BodyComponent } from './body/body.component';

import { ShareService } from './share.service';  //해당 서비스 임포트

import { HttpClientModule } from '@angular/common/http';  //http

import {WebDbService} from './web-db.service';  //웹DB
import {InMemoryWebApiModule} from 'angular-in-memory-web-api';  //DB구현 모듈


const ShareData = {name :'name', num : 1234};

@NgModule({
  declarations: [
    AppComponent,
    HeadComponent,  
    BodyComponent
  ],
  imports: [
    BrowserModule,
    InMemoryWebApiModule.forRoot(WebDbService,{delay:500,put204:false}),  //DB구현 모듈 추가
    HttpClientModule  //HTTP 연결
  ],
  providers: [{provide: 'alias',useValue:ShareData}, ShareService], 
  bootstrap: [AppComponent]  
})
export class AppModule { }

http라는 내용의 녀석이 생겼다. 처음보는데...

해당 HtppClient모듈은 자바스크립트로 비교하자면 Ajax같은 녀석이다. 해당 모듈을 사용하면 Ajax처럼 비동기 방식의 통신을 할 수 있다. 만들어준 WebDb서비스를 InMemoryWebApiModule에 등록하여 사용하면 설정은 끝이난다.

그러면 해당 모듈이 정말 동작하는지 메인 컴포넌트를 수정해서 간단하게 등록과 가져오기를 하여 보자.

import { Component, Inject } from '@angular/core';
import {ShareService} from './share.service';
import { myclass } from './myclass';

import { HttpClient, HttpParams } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'dashboard';
  cls : myclass;
  private HTTP : HttpClient;
  constructor(@Inject('alias') alias, private service : ShareService, http : HttpClient){ 
    console.log(alias);  //받았다.
    service.justPrint();

    this.cls = new myclass();  //new를 통해서 생성하여준다.
    this.cls.justPrint();
    this.HTTP = http;
    this.setUserData();
    this.getUserData();
  }

  getUserData(){  //가져오는 함수
    this.HTTP.get('/test/user/',{}).subscribe((res)=>{
      console.log(res);
    });
  }
  setUserData(){  //등록하는 함수
    this.HTTP.put('/test/user/',{id:'admin', name :'관리자'}).subscribe((res)=>{
      console.log(res);
    });
  }


  private showType : any;

  getEventFromHead (event){
    console.log(event);
    this.showType = event;
  }
}

호출하는 주소는 "/기본/만들어둔데이터베이스명칭" 식으로 호출하여야 한다.

"기본"의 의미는 어떠한 내용이 와도 상관 없다. 테스트 목적이므로 여기서는 test라고 하였다. 어떠한 내용을 입력해도 상관 없다.

"만들어둔데이터베이스명칭"은 아까 만든 user와 dash를 의미한다.

 

그리고 subscribe라는 함수가 호출되는 것을 볼 수 있다.

나중에 Rxjs라는 내용을 살펴보면 이해하기 쉬운데..지금은 어려움으로 put과 get함수가 실행되고 난 이후에 해야할 일 정도로만 알아두자.

ng serve 명령어를 통해 실행하여 보자.

결과다.

내용이 잘 나옴을 알 수 있다. 

이렇게 앵귤러에서는 데이터베이스에 직접 접속하는 엄청난(?) 프레임워크가 아니라는 것을 알 수 있다.

앵귤러에서 데이터베이스와의 연동을 하기위해서는 해당 데이터베이스에서 등록, 수정, 삭제를 수행하는 서버가 있어야하며, 앵귤러는 마치 Ajax를 호출하듯이 데이터를 전송하고 받아야 되는 것이다.

 

다음시간에는 해당 서비스를 조금 더 구분지어서 만들어 보도록 하자.

src.zip

0.01MB