RxJS와 JS 차이

 JavaScript(JS)와 RxJS는 서로 다른 개념이며, 두 기술은 각기 다른 용도로 사용됩니다. **JavaScript**는 프로그래밍 언어이고, **RxJS**는 JavaScript의 확장 라이브러리입니다. 이 둘의 차이점을 정리하면 다음과 같습니다.

### 1. **JavaScript(JS)**

- **정의**: JavaScript는 웹 개발에서 가장 많이 사용되는 프로그래밍 언어입니다. 기본적으로 클라이언트 측에서 동작하며, 현재는 Node.js를 통해 서버 측에서도 사용할 수 있습니다.

- **용도**: 동적인 웹 페이지를 작성하거나 서버와의 비동기 통신을 처리할 때 주로 사용됩니다. DOM 조작, 이벤트 처리, API 호출 등 다양한 용도로 사용됩니다.

- **비동기 처리**: 기본적으로 JavaScript는 콜백, `Promise`, `async/await` 같은 비동기 처리를 위한 여러 기능을 제공합니다.

  

### 2. **RxJS (Reactive Extensions for JavaScript)**

- **정의**: RxJS는 **Reactive Programming(반응형 프로그래밍)**을 구현하기 위해 JavaScript에서 비동기 데이터 스트림을 관리하는 데 사용하는 라이브러리입니다. RxJS는 관찰 가능한 데이터 흐름을 기반으로 작업을 처리합니다.

- **용도**: 비동기 데이터 처리, 이벤트 기반 시스템, 실시간 데이터를 처리할 때 많이 사용됩니다. 복잡한 데이터 흐름을 쉽게 다룰 수 있게 해주며, 특히 연속적인 비동기 작업에서 강력한 성능을 발휘합니다.

- **비동기 처리**: RxJS는 **Observable** 객체를 통해 비동기 데이터 스트림을 관리합니다. 이를 통해 여러 비동기 작업을 결합, 필터링, 변환, 취합할 수 있는 강력한 기능을 제공합니다.

### 주요 차이점

| **구분**           | **JavaScript(JS)**                        | **RxJS**                                      |

|--------------------|--------------------------------------------|-----------------------------------------------|

| **기능**           | 프로그래밍 언어, 모든 웹 개발에 사용        | 비동기 데이터 스트림과 반응형 프로그래밍 지원 |

| **비동기 처리 방법**| `Callback`, `Promise`, `async/await`       | `Observable`, `Observer`, `Subject` 등 사용  |

| **주요 사용 사례**  | 웹페이지 조작, DOM 이벤트, API 호출 등     | 실시간 데이터 처리, 이벤트 스트림, 데이터 흐름 관리 |

| **패러다임**       | 명령형 프로그래밍 (Imperative)             | 함수형 프로그래밍, 반응형 프로그래밍          |

| **제어 방식**      | 직접적인 제어 흐름                         | 데이터 스트림에 반응하여 비동기 작업 처리     |

### 예시 비교

#### **JavaScript 비동기 처리 (Promise 사용)**

```javascript

// Promise를 사용한 비동기 작업 처리

fetch('/api/data')

  .then(response => response.json())

  .then(data => console.log(data))

  .catch(error => console.error('Error:', error));

```

#### **RxJS 비동기 처리 (Observable 사용)**

```javascript

import { fromFetch } from 'rxjs/fetch';

import { switchMap, catchError } from 'rxjs/operators';

import { of } from 'rxjs';

// RxJS Observable을 사용한 비동기 작업 처리

fromFetch('/api/data').pipe(

  switchMap(response => response.json()),

  catchError(error => of({ error: true, message: error.message }))

).subscribe(data => console.log(data));

```

RxJS는 데이터를 **스트림**으로 취급하여, **여러 비동기 작업**을 하나의 흐름으로 결합하거나 처리하는 데 유리합니다. 이로 인해, 복잡한 비동기 로직이나 **실시간 데이터** 처리에 적합합니다.

### 요약

- **JavaScript**는 기본적인 프로그래밍 언어로, 다양한 웹 개발 작업을 수행할 수 있는 범용적인 도구입니다.

- **RxJS**는 JavaScript의 비동기 처리와 데이터를 더욱 유연하게 다루기 위한 라이브러리로, 복잡한 비동기 흐름이나 이벤트 기반 작업에서 매우 유용합니다.

RxJS는 특히 **실시간 데이터 처리**, **비동기 이벤트 관리**, **복잡한 데이터 스트림**을 다룰 때 효율적입니다.