[Angular2] Angular Life Cycle Hooks

Javascript/Angular2 2018. 5. 29. 18:46

앵귤러2 에서 언젠가는 꼭 쓰게 되는 라이프사이클 훅에 대한 간단정리





ngOnChanges() : ngOnInt 보다 먼저, 하나 이상의 데이터 바인딩 된 프로퍼티가 변경될 때마다 호출. SimpleChanges 라는 인자와 함께 전달되며 SimpleChanges 안에는 previousValue 와 currentValue 라는 속성과 isFirstChange 라는 메서드가 존재. 최초 호출 시에는 isFirstChange 메서드는 true 를 반환, previousValue 는 UNINITIALIZED, currentValue 는 최초 바인딩된 값임.

* 참고 : https://angular.io/api/core/SimpleChange


ngOnInit() : 컴포넌트를 만든 직후 호출. 프로퍼티에 데이터가 바인딩 된 후 호출. 처음 한번만 호출됨.


ngDoCheck() : 컴포넌트의 상태 변경을 감지할 때마다 호출. 기본적으로 ngOnInit 이후 바로 한 번 호출. 구현된 컴포넌트에 관계없이 애플리케이션에 일어나는 모든 비동기 이벤트마다 실행되기 때문에 무리한 작업은 피하자.


ngAfterContentInit() : 컴포넌트의 뷰가 초기화되는 시점에 호출. Content Projection 으로 전달받은 템플릿의 초기화 완료 시 호출됨.


ngAfterContentChecked() : ngAfterContentInit 호출 이후 바로 호출됨. 뷰의 상태가 변경된 다음 처리할 것이 일을 때 사용됨.


ngAfterViewInit() : 컴포넌트 뷰와 자식 뷰를 초기화 한 후 실행. 즉, 부모로부터 프로퍼티 바인딩하여 받은 속성이 실제로 렌더링 완료되었을 시 호출됨.


ngAfterViewChecked() : ngAfterViewInit 호출 이후 바로 호출됨. 뷰의 상태가 변경된 다음 처리할 것이 일을 때 사용됨.


ngOnDestroy() : 컴포넌트가 소멸하기 직전에 실행. 보통 Observables 를 구독취소하여 메모리 누수 방지용으로 사용.





참고 블로그 : http://closer27.github.io/frontend/2017/07/06/Lifecycle-Hooks/

'Javascript > Angular2' 카테고리의 다른 글

[Angular2] Service를 이용한 컴포넌트 간의 통신  (2) 2018.05.26
[Angular2] How to use reactive form in angular2 앵귤러2 폼  (0) 2018.04.29
[Angular2] nginx 포트포워딩에 의한 앵귤러 서비스 url 경로문제  (0) 2018.04.13
블로그 이미지

망원동똑똑이

프로그래밍 지식을 자유롭게 모아두는 곳입니다.

,

[Angular2] Service를 이용한 컴포넌트 간의 통신

Javascript/Angular2 2018. 5. 26. 13:59

문제상황


앵귤러2 에서 일반적으로 자식 컴포넌트가 부모 컴포넌트에게 데이터를 전달하는 방법은 Output 과 EventEmitter 를 이용한 방법을, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법은 자식컴포넌트 선택자에 단지 속성으로 변수를 넘긴 후 Input 을 사용하여 받는다. 즉 뷰템플릿이 데이터 전송의 매체가 되는 셈.


하지만 문제가 복잡해져 서로 거리가 먼 컴포넌트 간의 통신을 해야하는 경우가 생김.

마치 나와 큰아빠와 큰아버지와 사촌동생 간에 동시에 데이터를 공유해야 하는 상황이라면?





1. 매개자 역할의 서비스 생성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';
 
@Injectable()
export class DataService {
  private subject = new Subject<any>();
 
  constructor() { }
 
  sendData(data){
    this.subject.next(data);
    console.log("sendData() data : " , data);
  }
 
  getData(){
    return this.subject.asObservable();
  }
}
 
cs


rxjs 의 Subject 객체는 Observable 인 동시에 Observer. 한 컴포넌트에서 서비스의 sendData() 를 호출하여 데이터를 Subject 의 next 메서드를 통해서 데이터 스트림에 밀어넣는다.


다른 getData() 메서드는 데이터를 받을 컴포넌트에서 호출하여 데이터스트림에서 Observable 객체를 받은 후, 데이터 전송이 완료되었을 때 구독(subscribe) 할 것이다.




2. 데이터를 보낼 컴포넌트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { Component, OnInit, OnDestroy } from '@angular/core';
import { PostService } from '../../services/post/post.service';
import { DataService } from '../../services/data.service';
 
import { Post } from '../../models/post';
import { ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
 
@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit, OnDestroy {
  private subscription: Subscription;
  post: Post;
  postNo: number;
 
  constructor(private activatedRouter: ActivatedRoute, private postService: PostService, private dataService: DataService) {
    this.subscription = activatedRouter.params.subscribe((params: Params) => {
      this.postNo = params['postNo'];
      this.postService.getPost(this.postNo)
      .subscribe(
        (post) => {
          this.post = post;
          dataService.sendData(this.post);
        },
        (error) => {
          console.log(error);
        }
      );
    });
  }
 
  ngOnInit() {
    
  }
 
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}
 
cs


좀 복잡해 보이지만 핵심은 단지 위에서 생성한 service 의 sendData() 를 호출하는 것. 참고로 subscription 객체는 구독했던 객체를 파괴하기 위해 사용. ngOnDestroy() 라이프사이클에서 저장했던 subscription 을 unsubscribe 해주면 된다.


DataService 를 주입받고, 보내고자 하는 데이터를 dataService.sendData() 로 호출하여 넘겨준다.




3. 데이터를 받을 컴포넌트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataService } from '../../services/data.service';
 
import { Subscription } from 'rxjs/Subscription';
 
@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit, OnDestroy {
  title = 'Blog';
  regDate = '';
  categoryName = '';
 
  subscription: Subscription;
 
  constructor(private dataService: DataService) {
    console.log("banner 컴포넌트 생성!");
    
    this.subscription = dataService.getData().subscribe(data => {
      console.log("banner subscription : " , data);
      this.title = data.title;
      this.regDate = data.regTime;
      this.categoryName = data.categoryId;
    })
 
  }
 
  ngOnInit() {
  }
 
  ngOnDestroy(){
    this.subscription.unsubscribe();
  }
 
}
 
cs


데이터를 수신할 컴포넌트에서도 마찬가지로 Subscription 객체를 이용해 구독한 객체를 파괴시켜주어야 하며, DataService 를 주입받고, 이 DataService 의 getData() 메서드를 호출하여 Observable 객체를 받는다. 이를 subscribe 메서드를 사용하여 데이터가 전달되면 수행할 작업을 진행하면 된다.




'Javascript > Angular2' 카테고리의 다른 글

[Angular2] Angular Life Cycle Hooks  (0) 2018.05.29
[Angular2] How to use reactive form in angular2 앵귤러2 폼  (0) 2018.04.29
[Angular2] nginx 포트포워딩에 의한 앵귤러 서비스 url 경로문제  (0) 2018.04.13
블로그 이미지

망원동똑똑이

프로그래밍 지식을 자유롭게 모아두는 곳입니다.

,

[Node.js] process 객체의 주요 속성과 메서드

Javascript/Node.js 2018. 5. 17. 18:39

Node.js 의 실행된 프로세스에 관한 정보 얻기


node.js 의 process 객체에 있는 속성과 메서드에 대해서 알아본다.

물론 process 객체도 global 전역객체에 속해있다.




process 객체의 속성

속성 

설명 

 예시

 argv 

명령줄에서 실행할 때 입력한 매개변수를 나타내는 배열 

 [ 'C:\\Program Files\\nodejs\\node.exe',

  'D:\\csj\\js\\cluster\\cluster.js' ]

 env

 실행된 컴퓨터 시스템의 환경에 대한 정보 

 생략

 version

노드의 버전 

 v8.11.1

 versions 

이 노드 프로세스에서 사용하는 모듈들의 버전 

 { http_parser: '2.8.0',

  node: '8.11.1',

  v8: '6.2.414.50',

  uv: '1.19.1',

  zlib: '1.2.11',

  ares: '1.10.1-DEV',

  modules: '57',

  nghttp2: '1.25.0',

  openssl: '1.0.2o',

  icu: '60.1',

  unicode: '10.0',

  cldr: '32.0',

  tz: '2017c' }

 arch 

프로세서의 아키텍처 정보 

 x64

 platform 

플랫폼 정보 

 win32




process 객체의 메서드

 메서드

설명 

예시 

 exit([exitCode=0])

 프로그램 종료. 쉘 반환값이 0이면 정상종료, 1이면 비정상종료. 인자로 0 또는 1을 넘겨서 표시 가능

 생략

 memoryUsage()

 메모리 사용 정보 반환

 { rss: 22212608,

  heapTotal: 7684096,

  heapUsed: 5136152,

  external: 8608 }

 uptime()

 프로세스의 실행 시점부터 이 메서드를 호출한 시점까지의 시간 반환

 0.105


위 속성과 메서드들로 애플리케이션 동작 환경을 확인하여 상황에 맞게 코드를 구성할 수 있다.

memoryUsage() 와 uptime() 메서드는 웹애플리케이션의 로드밸런싱이나 재부팅에 사용될 수 있다고 함.




- 출처 : https://m.blog.naver.com/musasin84/60189885531

블로그 이미지

망원동똑똑이

프로그래밍 지식을 자유롭게 모아두는 곳입니다.

,

공지사항

글 보관함

달력

«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

티스토리툴바