RxJS 플래시카드

카테고리 후원자

RxJS(Reactive Extensions for JavaScript)는 원래 Microsoft에서 만들고 현재는 오픈 소스 커뮤니티에서 개발 중인 강력한 반응형 프로그래밍 라이브러리입니다. 비동기 작업과 데이터 스트림을 처리하도록 설계된 JavaScript 생태계의 핵심 도구입니다. RxJS는 풍부한 연산자 세트와 유연성을 특징으로 하여, 애플리케이션에서 간단하고 복잡한 데이터 흐름을 효율적으로 관리할 수 있습니다. 이 라이브러리는 Observable, Operators, Schedulers와 같은 고급 개념을 제공하여 개발자가 반응형이고 효율적이며 유지보수 가능한 애플리케이션을 만들 수 있도록 합니다. RxJS는 다양한 JavaScript 프레임워크와의 통합을 지원하며, 새로운 기능과 개선 사항이 정기적으로 업데이트되어, 반응형 개념과의 일관성을 유지하고 브라우저 및 Node.js 환경에서 확장 가능하고 이벤트 중심의 애플리케이션을 개발할 수 있게 합니다.

우리의 플래시카드 앱에는 신중하게 선정된 RxJS 면접 질문과 포괄적인 답변이 포함되어 있어, RxJS 지식이 필요한 어떤 면접에도 효과적으로 대비할 수 있습니다. IT 플래시카드는 구직자만을 위한 도구가 아닙니다 - 현재의 경력 계획에 관계없이 지식을 강화하고 테스트할 수 있는 훌륭한 방법입니다. 앱을 정기적으로 사용하면 최신 RxJS 트렌드를 지속적으로 파악하고 높은 수준의 기술을 유지할 수 있습니다.

우리 앱의 샘플 RxJS 플래시카드

App Store 또는 Google Play에서 저희 앱을 다운로드하여 더 많은 무료 플래시카드를 받거나, 모든 플래시카드에 액세스하려면 구독하세요.

RxJS는 무엇인가요?

JavaScript 용 Reactive Extensions, 즉 RxJS는 JavaScript에서 반응형 프로그래밍을 위해 사용되는 프로그래밍 라이브러리입니다. RxJS는 Observer 디자인 패턴을 구현하고 이벤트 스트림을 제공함으로써 복잡한 비동기 작업 및 콜백 처리를 가능하게 합니다.

RxJS는 '관찰' 될 수 있는 정보의 스트림인 Observable이라는 데이터 구조를 제공합니다. Observer는 이러한 스트림에 가입하고 그들로부터 흐르는 정보에 반응할 수 있습니다.

RxJS 라이브러리의 핵심 목표는 애플리케이션에서 비동기 작업과 이벤트를 관리하는 데 도움을 주는 것입니다. 이를 통해 데이터 스트림의 투명한 관리를 가능하게 함으로써 일반적인 콜백이나 프로미스를 사용할 때 종종 혼란스러운 코드를 단순하게 할 수 있습니다.

RxJS는 종종 Angular 또는 React와 같은 다른 라이브러리 또는 프론트엔드 프레임워크와 함께 사용됩니다. 또한, 필터링, 그룹화, 수정, 데이터 스트림에 대한 다른 많은 작업을 가능하게하는 많은 연산자를 지원하므로 인기가 있습니다.

Observable과 Promise의 차이점은 무엇인가요?

Observable과 Promise는 JavaScript에서 비동기 작업을 나타내는 두 가지 다른 방법입니다.

Promise는 미래에 단일 값을 반환하는 객체입니다. Promise 객체 생성 시에는 이미 작동 중이며 중단할 수 없습니다. Promise는 대기 중, 이행 됨, 거부 됨 세 가지 상태 중 하나에 있을 수 있습니다.

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise completed');
  }, 2000);
});

promise.then(result => console.log(result)); 
// 콘솔에는 2초 후 메세지가 표시됨 'Promise completed'

그러나 RxJS의 Observable은 언제든지 여러 값을 반환하거나 무한히 많은 양을 반환할 수 있습니다. Observable에 가입하면 작업이 시작되며 unsubscribe() 메소드를 사용하여 중지할 수 있습니다.

let observable = new Observable(observer => {
  setTimeout(() => {
    observer.next('First callback');
    setTimeout(() => {
      observer.next('Second callback');
      observer.complete();
    }, 2000);
  }, 2000);
});

let subscription = observable.subscribe(result => console.log(result)); 
// 콘솔에는 2초 후 'First callback' 메세지가 표시됨
// 추가로 2초 후, 콘솔에는 'Second callback' 메세지가 표시됨 
// 'subscription.unsubscribe();'를 사용하여 언제든지 관찰을 중단할 수 있습니다.

결론적으로, Observable과 Promise의 주요 차이점 중 하나는 Observable이 '게으름'이라는 것입니다. 즉, Observable 객체는 구독될 때까지 작업을 수행하지 않는 반면, Promise는 생성 직후에 바로 작업을 시작합니다. 또 다른 중요한 차이점은 Observable 관찰을 취소할 수 있는 기능이 있는 반면, Promise에는 그런 기능이 없다는 것입니다.

RxJS의 기본 연산자를 몇 가지 나열하십시오.

RxJS는 데이터 스트림 수정, 변경 사항에 대한 반응 등을 허용하는 많은 유용한 연산자를 제공합니다. 다음은 그 중 일부입니다:

1. map() - 관찰된 스트림에서 받은 데이터를 변환합니다.

2. filter() - 특정 기준에 따라 관찰 가능한 데이터 필터링을 허용합니다.

3. tap() - 부수 효과를 호출하는 데 사용됩니다.

4. take() 및 first() - 관찰된 스트림에서 특정 수의 값을 가져옵니다.

5. debounceTime() 및 throttleTime() - 특정 시간 프레임에 방출되는 값의 수를 제한하는 것을 허용하며, 마우스 이동이나 텍스트 필드에 입력하는 것에 대한 반응에서 유용합니다.

6. catchError() - 관찰된 원본에서 발생하는 예외를 처리할 수 있게 합니다.

7. switchMap() 및 mergeMap() - 각 방출 값에 관찰 가능한 것을 매핑할 수 있도록 하며, 이는 스트림과 병합할 수 있습니다.

8. combineLatest() - 다른 원본에서 스트림을 결합할 수 있게 합니다.

9. of() 및 from() - 이 연산자들은 배열, Promise, 이터러블 등 다양한 유형의 데이터에서 관찰가능한 것을 만드는데 허용합니다.

이것은 단지 기본적인 연산자일 뿐이지만, RxJS는 훨씬 더 많은 가능성을 제공합니다. 각 연산자는 특정하고, 다른 시나리오에서 유용합니다.

RxJS에는 어떤 종류의 Subject가 있습니까?

RxJs 라이브러리에서는 다음과 같은 4가지 유형의 Subject를 사용할 수 있습니다:

1. 단순 Subject - 기본적인 유형의 Subject입니다. 이는 방출 시점과 그 이후에 관찰자에게 값만을 방출합니다. 이전에 방출된 값은 새로운 구독자에게는 제공되지 않습니다.

let subject = new Subject();
subject.next(1); // 어떠한 관찰자에게도 수신되지 않음
subject.subscribe((value) => console.log(value)); // 미래의 방출에 구독
subject.next(2); // '2'를 출력

2. Behavior Subject - 마지막으로 방출된 값을 저장하고, 새로운 구독자가 구독하자마자 제공합니다. 초기 값으로 초기화해야 합니다.

let subject = new BehaviorSubject(1); // '1'이라는 값으로 초기화
subject.subscribe((value) => console.log(value)); // 구독 즉시 '1'을 출력
subject.next(2); // '2'를 출력

3. Replay Subject - 마지막 값 중 몇 개를 저장하고 관찰자에게 전달할지를 지정할 수 있습니다. 시간 정보를 저장하므로, 예를 들어 1분 전의 특정 데이터에 액세스할 수 있습니다.

let subject = new ReplaySubject(2); // 마지막 2개의 값을 저장
subject.next(1);
subject.next(2);
subject.next(3);
subject.subscribe((value) => console.log(value)); // '2', '3'을 출력

4. Async Subject - Subject가 작동을 완료했을 때만 마지막 값을 방출합니다.

let subject = new AsyncSubject(); // 마지막 값만을 방출하고, 완료시에만 방출
subject.next(1);
subject.next(2);
subject.subscribe((value) => console.log(value)); // 아직 아무것도 출력하지 않음
subject.next(3);
subject.complete(); // 작업이 완료되었으므로 마지막 값을 방출. '3'을 출력