<div id="readability-page-1" class="page"><article id="post-web-rxjs-oromise-observable" class="page" role="article"><header> <time datetime="2024-07-28T00:00:00+00:00">28 Jul 2024</time> in <a href="/web/">Web</a> .</header><hr><h2 id="background">Background</h2>&nbsp; 이전에 다른 사람이 작성한 NestJS 코드를 보다가 <code>firstValueFrom</code>과 <code>lastValueFrom</code> 함수가 있다는 것을 알게 되었다. 이를 찾아보던 중 필자가 비동기 프로그래밍에 대해 보다 깊이 있는 이해가 필요하다는 것을 깨닫게 되었고, 이를 정리하고자 한다.<hr><h2 id="contents">Contents</h2><h3 id="rxjs">RxJS</h3>&nbsp; <code>RXJS(Reactive Extensions for JavaScript</code>는 비동기 프로그래밍을 위한 강력한 라이브러리이다. observable sequences와 연산자를 사용하여 데이터 스트림을 쉽게 처리할 수있게 해준다. 이를 통해 이벤트 기반 프로그래밍, 비동기 호출, 데이터 스트림 등을 단순하고 효율적으로 처리할 수 있다.<h3 id="promise">Promise</h3>&nbsp; <code>Promise</code>는 비동기 작업의 완료 또는 실패를 나타내는 객체이다. 비동기 작업이 완료되면 결과 값을 반환하거나, 오류가 발생하면 그 이유를 알려준다. Promise는 다음 세 가지 상태를 가질 수 있다.<ul><li><code>Pending</code>: 대기중인 상태</li><li><code>Fulfilled</code>: 작업이 성공적으로 완료된 상태</li><li><code>Rejected</code>: 작업이 실패한 상태</li></ul><h4 id="promise-사용-예시">Promise 사용 예시</h4><div><pre><code>const myPromise = new Promise((resolve, reject) =&gt; {
 setTimeout(() =&gt; resolve("Promise resolved!"), 1000);
});
myPromise.then((value) =&gt; console.log(value));
</code></pre></div>&nbsp; 1초 후에 <code>Promise resolved!</code>라는 문자열이 콘솔에 출력된다.<h3 id="observable">Observable</h3>&nbsp; <code>Observable</code>은 RxJS의 핵심 개념으로, 데이터 스트림을 나타낸다. 시간이 지남에 다라 여러 값을 방출할 수 있으며, 구독(subscribe)하여 각 값을 처리할 수 있다. Observable은 다음 네 가지 중요 기능을 제공한다.<ul><li><code>Next</code>: 새로운 값을 방출</li><li><code>Error</code>: 오류 발생 시 통지</li><li><code>Complete</code>: 모든 값 방출 시 통지</li><li><code>Subscribe</code>: Observable의 방출된 값을 구독하고 처리</li></ul><h4 id="observable-사용-예시">Observable 사용 예시</h4><div><pre><code>import { Observable } from "rxjs";

const myObservable = new Observable((observer) =&gt; {
 setTimeout(() =&gt; observer.next("Observable value 1"), 1000);
 setTimeout(() =&gt; observer.next("Observable value 2"), 2000);
 setTimeout(() =&gt; observer.complete(), 3000);
});

myObservable.subscribe({
 next(value) {
 console.log(value);
 },
 complete() {
 console.log("Observable complete!");
 },
});
</code></pre></div>&nbsp; 1초 후에 <code>Observable value 1</code>, 2초 후에 <code>Observable value 2</code>를 출력하며, 3초 후에 <code>Observable complete!</code>이 출력된다.<h3 id="promise-vs-observable">Promise vs. Observable</h3><ul><li><code>Promise</code>: 단일 비동기 작업을 처리하며, 한 번만 값을 반환한다.</li><li><code>Observable</code>: 여러 값을 스트림으로 처리할 수 있으며, 구독자가 이를 실시간으로 처리할 수 있다. 이는 이벤트 기반 시스템, 실시간 데이터 업데이트, 스트리밍 데이터 등에 유용하다.</li></ul><h3 id="topromise-firstvaluefrom-lastvaluefrom">toPromise, firstValueFrom, lastValueFrom</h3><ul><li><code>toPromise</code>: observable을 promise로 변환한다. 첫 번째 값을 resolve하여 완료도니다. (RxJS 7부터 deprecated 됨)</li><li><code>firstValueFrom</code>: observable의 첫 번째 값을 반환하는 promise를 만든다. <code>toPromise</code>의 직접적인 대체제이다.</li><li><code>lastValueFrom</code>: observable이 완료될 때 마지막 값을 반환하는 promise를 만든다.</li></ul><h4 id="사용-예시">사용 예시</h4><div><pre><code>import { firstValueFrom, lastValueFrom } from "rxjs";

// Observable 생성
const myObservable = new Observable((observer) =&gt; {
 setTimeout(() =&gt; observer.next("First value"), 1000);
 setTimeout(() =&gt; observer.next("Second value"), 2000);
 setTimeout(() =&gt; observer.complete(), 3000);
});

// firstValueFrom 예시
const firstValue = await firstValueFrom(myObservable);
console.log(firstValue); // 1초 후 'First value' 출력

// lastValueFrom 예시
const lastValue = await lastValueFrom(myObservable);
console.log(lastValue); // 3초 후 'Second value' 출력
</code></pre></div><ul><li><code>firstValueFrom</code>: 첫 번째 값을 반환하여 1초 후에 First value를 출력한다.</li><li><code>lastValueFrom</code> 마지막 값을 반환하여 3초 후에 Second value를 출력한다.</li></ul><hr><h2 id="summary">Summary</h2>&nbsp; RxJS와 Promise, Observable을 사용하면 비동기 프로그래밍을 간단하게 구현할 수 있다. 각각의 특성과 장점을 이해하고 상황에 맞게 사용한다면, 더 효율적이고 관리하기 쉬운 비동기 코드를 작성할 수 있다. 특히 RxJS를 사용한다면 복잡한 비동기 작업을 매우 간단하게 처리할 수 있어 유용하다.</article><div role="contentinfo"><hr>© 2021. All rights reserved. <nav> <a href="/LICENSE/">LICENSE</a> | <a href="/NOTICE/">NOTICE</a> | <a href="/CHANGELOG/">CHANGELOG</a> </nav>Powered by <a href="https://hydejack.com/">Hydejack</a> v9.2.1<hr></div></div>

개발자 이진우

Jinwoo Lee

Background
  이전에 다른 사람이 작성한 NestJS 코드를 보다가 firstValueFrom과 lastValueFrom 함수가 있다는 것을 알게 되었다. 이를 찾아보던 중 필자가 비동기 프로그래밍에 대해 보다 깊이 있는 이해가 필요하다는 것을 깨닫게 되었고, 이를 정리하고자 한다.
Contents
RxJS
  RXJS(Reactive Extensions for JavaScript는 비동기 프로그래밍을 위한 강력한 라이브러리이다. observable sequences와 연산자를 사용하여 데이터 스트림을 쉽게 처리할 수있게 해준다. 이를 통해 이벤트 기반 프로그래밍, 비동기 호출, 데이터 스트림 등을 단순하고 효율적으로 처리할 수 있다.
Promise
  Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체이다. 비동기 작업이 완료되면 결과 값을 반환하거나, 오류가 발생하면 그 이유를 알려준다. Promise는 다음 세 가지 상태를 가질 수 있다.
Pending: 대기중인 상태
Fulfilled: 작업이 성공적으로 완료된 상태
Rejected: 작업이 실패한 상태
Promise 사용 예시
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Promise resolved!"), 1000);
});
myPromise.then((value) => console.log(value));
  1초 후에 Promise resolved!라는 문자열이 콘솔에 출력된다.
Observable
  Observable은 RxJS의 핵심 개념으로, 데이터 스트림을 나타낸다. 시간이 지남에 다라 여러 값을 방출할 수 있으며, 구독(subscribe)하여 각 값을 처리할 수 있다. Observable은 다음 네 가지 중요 기능을 제공한다.
Next: 새로운 값을 방출
Error: 오류 발생 시 통지
Complete: 모든 값 방출 시 통지
Subscribe: Observable의 방출된 값을 구독하고 처리
Observable 사용 예시
import { Observable } from "rxjs";
const myObservable = new Observable((observer) => {
  setTimeout(() => observer.next("Observable value 1"), 1000);
  setTimeout(() => observer.next("Observable value 2"), 2000);
  setTimeout(() => observer.complete(), 3000);
});
myObservable.subscribe({
  next(value) {
    console.log(value);
  },
  complete() {
    console.log("Observable complete!");
  },
});
  1초 후에 Observable value 1, 2초 후에 Observable value 2를 출력하며, 3초 후에 Observable complete!이 출력된다.
Promise vs. Observable
Promise: 단일 비동기 작업을 처리하며, 한 번만 값을 반환한다.
Observable: 여러 값을 스트림으로 처리할 수 있으며, 구독자가 이를 실시간으로 처리할 수 있다. 이는 이벤트 기반 시스템, 실시간 데이터 업데이트, 스트리밍 데이터 등에 유용하다.
toPromise, firstValueFrom, lastValueFrom
toPromise: observable을 promise로 변환한다. 첫 번째 값을 resolve하여 완료도니다. (RxJS 7부터 deprecated 됨)
firstValueFrom: observable의 첫 번째 값을 반환하는 promise를 만든다. toPromise의 직접적인 대체제이다.
lastValueFrom: observable이 완료될 때 마지막 값을 반환하는 promise를 만든다.
사용 예시
import { firstValueFrom, lastValueFrom } from "rxjs";
// Observable 생성
const myObservable = new Observable((observer) => {
  setTimeout(() => observer.next("First value"), 1000);
  setTimeout(() => observer.next("Second value"), 2000);
  setTimeout(() => observer.complete(), 3000);
});
// firstValueFrom 예시
const firstValue = await firstValueFrom(myObservable);
console.log(firstValue); // 1초 후 'First value' 출력
// lastValueFrom 예시
const lastValue = await lastValueFrom(myObservable);
console.log(lastValue); // 3초 후 'Second value' 출력
firstValueFrom: 첫 번째 값을 반환하여 1초 후에 First value를 출력한다.
lastValueFrom 마지막 값을 반환하여 3초 후에 Second value를 출력한다.
Summary
  RxJS와 Promise, Observable을 사용하면 비동기 프로그래밍을 간단하게 구현할 수 있다. 각각의 특성과 장점을 이해하고 상황에 맞게 사용한다면, 더 효율적이고 관리하기 쉬운 비동기 코드를 작성할 수 있다. 특히 RxJS를 사용한다면 복잡한 비동기 작업을 매우 간단하게 처리할 수 있어 유용하다.

RxJS와 Promise, Observable - 비동기 프로그래밍의 차이점과 활용

댓글