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

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

lts0606.tistory.com/328

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

 

저번시간에는 생소하지만 타입스크립트 개발환경을 구성하여 보았다.

앵귤러2.0 이상부터는 타입스크립트 기반으로 구성되어 있기 때문에 간단한 기능위주의 테스트는 앞선시간처럼 환경을 구성하고서 테스트 하기도 한다.

그러면 이제 자주 보게될 subscribe에 대해서 알아보자.

저번에 보았던 코드를 다시살펴보자.

import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject(123);
subject.subscribe(console.log); 

subject.subscribe((res)=>{
    console.log(res);
}); 

 

자세히는 모르겠지만 BehaviorSubject라는 객체에 123이라는 숫자가 아래의 subscribe를 만나서 출력이 되고 있다. 얼핏 보아서는 subscribe는 subject라는 객체의 내용을 출력해주는 것 같다.

해당 subscribe라는 녀석이 하는 행위이다.

 

앵귤러를 하다보면 subscribe로 구성되는 함수를 자주 볼 수 있다.

대부분 subscribe로 시작되는 함수들은 시작한 행위의 다음행동을 정의하는데 통상적으로 사용된다.

subscribe는 말 그대로 구독이라는 의미이다. 이러한 구독은 바라보고있는 객체의 데이터가 변하면 지속적으로 정의된 행동을 하여 준다.

 

위 코드에서도 BehaviorSubject 내부에 123이라는 값이 할당이 되었고, 해당 subject라는 변수를 subscribe라는 함수를 통하여 subject라는 변수의 상태(값)가 변하면 subscribe에 이미 정의된 내용을 실행하도록 되어 있는 것 이다.

 

크...말이 어렵다..

first.ts파일을 수정하여보자.

import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject(123);  //데이터 등록 행위

subject.subscribe((res)=>{  //구독 시작, 첫번째 데이터 등록 행위발생으로 123 바로 출력 
    console.log(res);
}); 

subject.next(456);  //데이터 변동행위 발생, 위 선언한 subscribe에 의해 456출력

subject.next(789);  //데이터 변동행위 발생, 위 선언한 subscribe에 의해 789출력

subject.next(7);    //데이터 변동행위 발생, 위 선언한 subscribe에 의해 7출력

//...

 

컴파일을 한 뒤에 실행하여보자.

 

신기하게도 나는 subject에 대해서 subscribe를 1번만 실행했는데..값이 계속해서 출력이 되었다.

subscribe는 자신이 구독하고있는(바라보고있는) 객체의 데이터가 변하면 변하는데로 계속해서 정의된 행동을 하도록 되어있다.

정리하면,

1. subscribe로 시작되는 대부분의 함수들은 다음(then)의 의미를 지니고 있다.

2. 1번 구독행위를 한 내용은 데이터 또는 상태가 변하게되면 지속적으로 행동을 한다.

 

그러면 여기서 알아두어야 할 사항이 있다.

first.ts를 아래처럼 바꾸어보자.

import { Subject } from 'rxjs';

const subject = new Subject();  //자바스크립트의 ajax 함수라고 하자.

subject.subscribe((res)=>{  //ajax함수를 통해 데이터를 받은 후 이후 행동을 정의하였다고 하자.
    console.log(res);
}); 

subject.next(456); //ajax실행

subject.subscribe((res)=>{  //다른 내용의 데이터를 받기 위해 ajax함수를 한번 더 호출하였다고 하자.
    console.log('other',res);
}); 


subject.next(123);  //ajax실행2

 

컴파일 후 실행하여 보자.

첫번째로 선언한 subsribe의 내용이 2번출력이 되었다.

구독한 행위는 1개의 지속적인 행동을 하는 객체로 변해버리기 때문에 이처럼 subscribe를 여러번 호출하게 되면 해당 subscribe마다 각각 정의된 행동을 따로따로 하는 것 이다.

 

앵귤러를 활용해서 subscribe가 있는 http 모듈이나 firebase모듈을 사용하는 경우 등록 및 수정행위를 하는 경우 간혹 이러한 실수를 하게 된다.

무슨 뜻이냐면,

사용자가 1개의 페이지에서 수정을 하였다고 하자. 그리고 틀린 부분이 있어서 해당페이지에서 다시수정하였다고 하자.

그러한 경우 subscribe가 2번 선언되기 때문에 2번의 수정이 진행되게 된다.

첫번째 수정에 대한 구독행위가 존재하고, 그 다음 수정에 대한 구독행위가 존재하기 때문에 2개의 구독행위가 2번 수정을 하게 되는 것 이다.

나중에 살펴 볼 firebase모듈 같은 경우에는 무한반복(loop) 수정행위를 만날수도 있다.

 

그렇게 때문에 subscribe로 수정이나 등록을 하는 경우에는 해당 행위를 종료시켜주어야 한다.

first.ts파일을 다시수정하여 보자.

import { Subject } from 'rxjs';

const subject = new Subject();  //자바스크립트의 ajax 함수라고 하자.

var description1 = subject.subscribe((res)=>{  //ajax함수를 통해 데이터를 받은 후 이후 행동을 정의하였다고 하자.
    console.log(res);
}); 

subject.next(456); //ajax실행
description1.unsubscribe();  //첫번째 구독행위 종료

var description2 = subject.subscribe((res)=>{  //다른 내용의 데이터를 받기 위해 ajax함수를 한번 더 호출하였다고 하자.
    console.log('other',res);
}); 


subject.next(123);  //ajax실행2
description2.unsubscribe();  //두번째 구독행위 종료

 

컴파일 후 실행하여 보자.

각각 1번씩만 출력됨을 알 수 있다.

subscribe로 시작되는 함수는 데이터를 가져오거나, 등록, 수정, 삭제 등에서 자주 만나게 된다.

정말 편리하게도 1번만 선언하고 데이터가 변하게 되면 지속적으로 내용을 바꾸어 주기 때문에 편리하다.

간혹 등록,수정,삭제에서 아마 자주 골치아파 질 수도 있다.

 

2번에 걸쳐서 subscribe를 간단하게 설명한 이유는 그만큼 앵귤러에서는 많이 사용되는 기능이기 때문이다.

subscribe는 rxjs라는 모듈에서 사용되는 기법이며 반응형 코딩으로 검색하면 좀 더 많은 자료를 찾을 수 있다.

앞으로 subsribe라는 내용을 만나면 어떤 데이터에대해 행동을 정의하는 것으로 이해를 하자.

 

다음시간에는 드디어 제대로된 데이터베이스를 활용해서 실제 게시판을 한번 만들어 보자.

firebase라는 클라우드형태의 서버를 활용해서 데이터베이스를 구축하고, 앵귤러를 통해서 게시판을 구현하여보자.

 

* 다음장부터 파이어베이스와의 연동이 들어갑니다.

* 기존에 개념이 잡히지 않는 부분은 다시 연습해 보아야 이해 할 수 있습니다.

* 특히 모듈에서의 providers에 대한 개념, 생성자를 통해 받는 개념, 서비스의 개념 등에 대해서는 꼭 이해가 되어야 합니다.