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

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

lts0606.tistory.com/328

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

 

이번시간에는 공통으로 사용할 데이터 또는 객체에 대해서 알아보겠다.

공통으로 사용하는 데이터는 예전시간에도 모듈에 등록해서 사용했었는데..역시..기억이 안나므로 다시한번 살펴보자. (8장에서 했었다)

app.module.ts에 아래처럼 수정하여 보자.

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';

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

@NgModule({
  declarations: [ //사용 할 컴포넌트를 등록
    AppComponent,
    HeadComponent,  
    BodyComponent
  ],
  imports: [
    BrowserModule  //앵귤러에서 제공하는 모듈
  ],
  providers: [{provide: 'alias',useValue:ShareData}],  //데이터를 공유하는 방법, alias는 사용할 변수명, ueseValue에는 보낼 데이터이다.
  bootstrap: [AppComponent]  //기본으로 동작 할 컴포넌트
})
export class AppModule { }

 

NgModule 데코레이터 아랫부분에 providers가 있는데..해당부분에 Json형식으로 데이터를 넣어주면 된다.

그러면 받을 때 어떻게 하였는가? 생성자를 통해 받았었다.

일단 메인컴포넌트에서 받아보도록 하자. app.component.ts를 수정하자.

import { Component, Inject } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'dashboard';

  constructor(@Inject('alias') alias){  //생성자 만들기
    console.log(alias);  //받았다.
  }

  showType : any;

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

기본적으로 앵귤러에서는 constructor가 없어도 문제는 없다. 없으면 생성할 내용이 기본값으로 인식할 뿐이다.

그런데 굳이 왜 이런식으로 무언가 데이터를 공유하려 한단 말인가?

이유는 바로 싱글톤 효과를 보기 위해서 이다.

 

음...어려운 단어이므로..간단하게 풀어보면,

자주 사용되는데 굳이 자꾸 메모리로 불러올 필요가 없는 녀석들을 한번만 불러내놓고 여러명이 사용하는 개념이다.

아래 자바스크립트 코드를 보자

var abcd = function(arg){  //메모리에 abcd함수가 올라왔습니다~
    console.log(arg);
}
abcd(1234);

var abcd = function(arg){  //메모리에 abcd함수가 또 올라왔습니다.
    console.log(arg);
}
abcd(5679);

위 코드처럼 동일한 함수가 계속해서 선언되거나 또는 해당 메소드가 <script> 테그를 통해서 여러 페이지에서 계속 사용된다 하면 해당 함수는 계속 메모리에 불러오게 된다.

또한 어떤 데이터를 고정시켜놓고 같이 공유하는 것도 어렵다.

 

더욱 간단하게 요약하면, 앵귤러에서는 자주 사용되고 공통으로 공유해야될 녀석들은 providers에 넣고 사용하는 것으로 이해하면 될 것 같다.

그러면 이제 공통 기능을 한번 만들어서 사용하여 보자.

ng g service share 라고 cmd에서 명령을 입력하자.

서비스..?

ng g component는 컴포넌트를 만드는 명령였는데 이녀석은 service라고 불리우는거 보니 뭔가 역할도 서비스일 것 같다.

만들어진 share.service.ts 파일을 클릭하여보자.

import { Injectable } from '@angular/core';

@Injectable({  //인젝트에이블? 뭔가 인젝트가 가능하다는 뜻 처럼 보인다.
  providedIn: 'root'
})
export class ShareService {  //이녀석도 클래스이네?

  constructor() { }
}

 

내용을 보면 데코레이터가 Injectable로 선언된 것 빼고는 컴포넌트와 되게 비슷하다.

여기에 간단하게 로그 출력용 메소드와 변수하나만 추가하여 보자.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ShareService {

  public shareValue : number = 1004;  //변수

  constructor() { }

  justPrint(arg? : any) : void{  //메소드
    if(arg){
      console.log(arg);
    } else {
      console.log('arg is undefined');
    }
  }
}

 

해당 서비스를 그러면 어떻게 공유하느냐? 매번 하던데로 모듈에서 공.유 할 수 있게 해 주면된다.

잊지말자, 모듈은 앵귤러에서의 설정에 관한 중심이다.

app.module.ts를 수정하여 보자.

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';  //해당 서비스 임포트

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

@NgModule({
  declarations: [
    AppComponent,
    HeadComponent,  
    BodyComponent
  ],
  imports: [
    BrowserModule  
  ],
  providers: [{provide: 'alias',useValue:ShareData}, ShareService], //서비스를 추가한다.
  bootstrap: [AppComponent]  
})
export class AppModule { }

 

providers로 공급된 내용은 동일하게 생성자를 통해 받을 수 있다.

app.component.ts 파일을 수정하자.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'dashboard';

  constructor(@Inject('alias') alias, private service : ShareService){  //생성자 만들기
    console.log(alias);  //받았다.
    service.justPrint();
  }

  showType : any;

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

 

오..생성자를 통해 해당서비스가 받아짐을 물론 기능까지 동작함을 확인 하였다. 이렇게 된다면 앞으로 자주 사용되는 기능을 서비스에 따로 빼서 관리하면 될 것 같다.

문득 이럴바에는 차라리 특정 클래스파일을 만들어서 사용하면 될 것 같다는 생각이 드는데..

src - app 폴더에 myclass.ts파일을 만들어보자.

export class myclass {
    public shareValue : number = 1004;  //변수
    constructor() { }
  
    justPrint(arg? : any) : void{  //메소드
      if(arg){
        console.log(arg);
      } else {
        console.log('arg is undefined');
      }
    }
 
  }
  

요건 명령어로 안만들어도 된다.

 

아까 만들었던 서비스와 동일한 기능이다. 그러면 해당 클래스를 사용하기 위해서 메인컴포넌트를 수정하여 보자.

app.component.ts파일을 수정하자.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'dashboard';
  cls : myclass;

  constructor(@Inject('alias') alias, private service : ShareService){  //생성자 만들기
    console.log(alias);  //받았다.
    service.justPrint();

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

  showType : any;

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

 

myclass를 사용하기 위해서 new를 통해서 생성하였다. new는 메모리에 적재시키는 개념이다.

즉, 1번만 만들어져도 상관없는 클래스가 사용자가 새로고침을 할 때 마다, 또는 페이지를 이동 할 때 마다 계속해서 new를 통해 메모리에 적재되는 것이다.

그런데, 앞서 모듈을 통해서 providers에 넣어 공유한다면 한번만 만들어진 상태로 공유가 가능하게 되는 것이다.

 

이처럼 앵귤러에서는 서비스라는 형태로 특정 자원을 공유하는 기법을 많이 사용한다.

다음시간에는 서비스를 좀 더 알맞게 수정 해 보도록 하자.

app.zip

0.01MB